【Angular】如何将路由策略由默认的history模式改成hash模式

我们使用angular的脚手架安装的项目会提示我们是否需要安装路由，我们通常都会选择同意安装，目前，angular默认的路由策略是不带#的history模式策略。

官网中是这么说的：

路由器通过两种 LocationStrategy 提供者来支持所有这些风格：

1. PathLocationStrategy - 默认的策略，支持“HTML 5 pushState”风格。（也就是所谓的history模式）
2. HashLocationStrategy - 支持“hash URL”风格。

RouterModule.forRoot() 函数把 LocationStrategy 设置成了 PathLocationStrategy，使其成为了默认策略。 你还可以在启动过程中改写（override）它，来切换到 HashLocationStrategy 风格。

但是history模式虽然漂亮，像是原生的url路由方式。但是这种模式也有缺点：

• 可能兼容性不太好，如果要兼容比较老版本的浏览器的话，可能不太行。
• 这个模式需要后台配合进行设置，如果我们直接访问这种路由，可能就直接报404的错误了。这个时候我们需要后台人员的配合才可以。方法是：在服务端增加一个覆盖所有情况的候选资源：如果url匹配不到任何的静态资源，则应该返回同一个index.html页面，这个页面就是你的应用所依赖的页面。详细的配置，我在angular官网中没有找到，倒是在vue官网中有说明，详情请见：HTML5 History 模式。

如果我们的后端小哥哥水平不行或者因为别的乱七八糟的原因，导致无法后端进行适配，就需要我们将默认的history模式改成hash模式才行。

其实改的方式很简单，我们打开/src/app/app.module.ts这个项目的入口，然后修改一下其providers，代码如下：

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

@NgModule({
  declarations: [ //省略 ],
  imports: [ //省略 ],
  //将默认的PathLocationStrategy，改成HashLocationStrategy。
  providers: [{
    provide:LocationStrategy,
    useClass:HashLocationStrategy,
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后我们刷新一下页面，就可以了。