角度 2 中的 URL 路由答案

【问题标题】：URL Routing in angular 2角度 2 中的 URL 路由
【发布时间】：2017-04-23 07:23:23
【问题描述】：

我正在使用 Angular 2.1.1。我在我的应用程序中使用角度路由。它工作正常。当我单击菜单时，它会正确路由。但问题是，当我在地址栏中键入 URL 而不是单击菜单时，我会收到错误消息。

我认为问题是，当我输入 URL 并按 Enter 键时，浏览器会向服务器发送请求。但是路由配置在客户端。所以服务器响应一个错误信息。

在 Angular 1 中有一个 # 在 URL 中限制浏览器将请求发送到服务器。但是在 Angular 2 中，URL 中没有 #。

我可以配置服务器，使每个 URL 都重定向到根 URL。但这不是解决方案。我无法为任何网址添加书签。

我该如何解决这个问题？？？

【问题讨论】：

我们不能这样理解。你能在这里添加你的路由代码吗？
您可以毫无问题地使用 HTML5 路由（如果 SEO 存在问题，您会想要这样做），但您必须确保用于为应用程序提供服务的任何东西都在处理所有子路由并将它们重定向到应用程序页面。所以真的是服务器端路由问题，你应该问另一个特定的问题。

标签： javascript angularjs angular routing url-routing

【解决方案1】：

您可以更改locationStrategy。

默认设置为PathLocationStrategy，但您也可以使用HashLocationStrategy：

RouterModule.forRoot(yourRoutes, { useHash: true })

官方文档：https://angular.io/docs/ts/latest/guide/router.html#!#-hashlocationstrategy-

【讨论】：

【解决方案2】：

Angular2 也有 # 与 HashLocationStrategy 一起使用，看来您使用的是 PathLocationStrategy。 p>

如果您使用 PathLocationStrategy，请确保将服务器配置为提供请求的 url 响应。

您可以在您的应用中使用 HashLocationStrategy(#)，如下所示，

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })  // ...<<<---here
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

进一步阅读：-https://angular.io/docs/ts/latest/guide/router.html 寻找 HashLocationStrategy

【讨论】：

如果我想使用PathLocationStrategy，有什么办法可以解决这个问题吗？？
然后确保服务器配置为提供您想要的页面。服务器需要配置。例如，如果您使用的是 .net mvc5，请确保 mvc5 路由有足够的能力为页面提供服务。