删除 URL Angular 11 中的哈希值 (#)

Question

我想把URL中的#去掉，但是去掉后，部署到服务器上就会出现问题。当页面刷新时，会得到404状态。

例子

https://a/user/（有效）

https://a/user/1（不工作）

应用程序路由.module.ts

    @NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
  ],
  exports: [RouterModule]
})

应用程序模块.ts

......
providers: [ Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]

请告诉我我应该做什么。

Answer 1

PathLocationStrategy 是 Angular Routing 的默认位置策略，它应该可以工作并解决您的 hash(#) 问题。

您的代码没有错误，请仔细检查以下几点

1. RouterModule.forRoot(routes, { useHash: true }) //use Hash should not be there
2. providers: [ // 下面这行是可选的，默认 LocationStrategy 是 PathLocationStrategy {provide: LocationStrategy, useClass: PathLocationStrategy} ]

如果您仅在部署时遇到服务器中的问题，请检查服务器中的入口点配置。它应该是index.html 文件。

注意：使用 PathLocationStrategy 时，您需要配置 Web 服务器来为所有请求的位置提供 index.html（应用程序的入口点）。

还要检查<base href="/">index.html中的内容，在后端服务器上，我们必须根据路径渲染index.html文件。