Angular应用程序在页面刷新时不加载

我一直在开发Angular 10（现在是11，同一版本）应用程序，似乎突然间刷新页面或返回页面的功能不再起作用。我知道事情不会突然破裂，我唯一改变的是添加一个新的“细节”组件，该组件应该从记录列表中打开，这意味着我添加了另一个组件的路由。当我第一次加载应用程序时，一切看起来都很好，单击列表中的记录确实可以导航到details组件。如果我尝试刷新页面（即，用于调试）或单击后退按钮，则仅加载来自服务器的原始JSON数据。完全没有样式或其他HTML标记。控制台中也没有显示错误，服务器返回了200个响应，所以我猜一些JS仍然在工作

我的猜测是，这与路由有关，因为这是我刚刚添加的内容，但这一点也不奇怪

const routes: Routes = [
  { path: '', redirectTo: 'customers', pathMatch: 'full' },
  { path: 'customers', component: CustomersListComponent },
  { path: 'customers/:id', component: CustomerDetailComponent }
];

当然这是个愚蠢的问题，但我不知所措。我确实看到并检查了这一点，只是为了确定，但我的index.html很好（据我所知）：

MyApp

有人想让我看看我错过的简单的东西吗

---

编辑：如果我在地址栏中手动重新键入localhost:4200，也可以，但我无法重新键入localhost:4200/customers。还尝试了删除节点模块、npm更新、npm安装和重新启动，这些似乎修复了其他类似的问题

结果表明，角度路由和服务器路由之间存在某种冲突。我只看到一个引用，但我想服务器上的路径不能与角度路径相同？基本上，/customers有一个角度的路径将我带到customers组件，这反过来调用后端服务器以获取调用/customers的客户列表。由于某些原因，这在最初加载页面时起作用，但刷新会导致组件不加载，但会调用服务器，因此只加载JSON数据而不加载其他内容

我使用Angular/Webpack代理配置尝试从localhost:4200/路由到localhost:8080/，如下所示

{ "/" : "target": "http://localhost:8080" }

---

我改变了我的服务器路由，使用了一个api前缀，Angular服务调用了api/任何东西，在经历了很多挫折之后，这似乎已经修复了它。希望这对某些人有所帮助，但我仍然不完全理解为什么角度路由设置和它的http客户端会发生这样的冲突，看起来它们不应该相互干扰，但我主要是一个后端开发人员，对伏都教前端的东西不太了解：）。

你能为同样的东西创建一个stackblitz并提供链接吗。可以很容易地了解问题的具体表现。请尝试删除“dist”文件夹中的文件，然后再次运行

ng serve

您使用的定位策略是什么？使用散列位置？如果没有，服务器是否设置为正确处理路由？当您第一次点击

http://example.com

，服务器将抛出包含要加载脚本的

index.html

。角度路由从那里接管。但是，如果您在第页

http://example.com/foo

并点击刷新，服务器将尝试查找

foo.html

以返回。如果您使用哈希定位策略，该策略会给出类似

http://example.com/#/foo

，哈希之后的所有内容都被忽略，服务器返回

index.html

再次允许Angular加载。我不相信ng serve会创建dist文件夹，我认为它只是从内存中提供文件。无论如何，我试过了，同样的问题还在发生。这里有一个stackblitz，但当然一切都很好：位置策略是默认的/无哈希策略

{ "/" : "target": "http://localhost:8080" }