在浏览器中将 URL 重新加载到定义的路由器路由时出现 404答案

【问题标题】：404 when reload URL in browser to defined router route在浏览器中将 URL 重新加载到定义的路由器路由时出现 404
【发布时间】：2018-07-05 15:24:48
【问题描述】：

我在 prod 服务器上上传了我的 angular 4 应用程序，该应用程序在本地运行良好。在服务器上，我可以通过链接访问页面，但是，如果我尝试直接在浏览器中写入 url，我的页面会转到 404。我认为我可以通过 .htacces 解析，但它不是 apache 服务器，所以我不能。是否有唯一的前端解决方案来解决问题？

【问题讨论】：

你运行的是什么类型的服务器？
如何渲染应用程序包？
@SamyokNepal 可能答案是 cloudflare，但如果可以的话，我只能做前端
@Mium 对不起，你能举个例子吗？
Cloudflare 将成为您的托管服务——您的应用程序只是一个前端项目吗？还是它也有服务器？您使用的是什么服务器（例如 NodeJS、nginx 等）？

标签： javascript angular typescript routing

【解决方案1】：

Angular 中使用的默认客户端路由策略是PathLocationStrategy。

如果您手动输入URL，您需要将服务器配置为针对从它请求的所有不同URLs 返回相同的页面。这个策略需要服务器端的一些合作。

有解决问题的前端解决方案吗？

使用HashLocationStrategy

HashLocationStrategy 使用 URL 的哈希片段部分来存储客户端的状态，更容易设置并且不需要任何来自服务器端的合作，但缺点是它不会 Angular Universal 发布后即可使用。

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true }) //enable hashbang approach
  ],

Location Strategies in Angular Router

Which strategy is best?

【讨论】：

谢谢，你的解决方案很好，只有一个小问题：现在我必须插入“#”才能访问页面。这个问题有解决办法吗？
Nope Mate 没有 :( 请参考我在答案中分享的链接以了解 # 在 hashbang 方法中的意义，如果它帮助您解决问题，请不要忘记标记答案； )
是的，我研究了你所有的链接，我希望找到一个 javascript 解决方案，也许可以将 # 替换为其他链接。无论如何，谢谢，这是一个很好的答案。