如何让Angular 5应用兼容旧版Firefox并解决路由递归问题？

我之前也碰到过Angular 5在旧版Firefox里的这个路由坑，不改路由结构的前提下，这几个方案亲测有效，你可以挨个试试：

1. 改用绝对路径重定向 #

旧版Firefox对相对路径的路由解析可能存在逻辑bug，把redirectTo的值改成绝对路径，明确指定根路径下的目标路由，能避免匹配歧义导致的递归：

{path: '', redirectTo: '/view', pathMatch: 'full'},

2. 用空组件做过渡导航 #

如果绝对路径还是不行，可以绕开路由模块的自动重定向逻辑，用组件级的手动导航：

• 先创建一个空组件：ng generate component EmptyRedirect
• 修改路由配置，让空路径加载这个组件：

  {path: '', component: EmptyRedirectComponent},
  

• 在空组件的ngOnInit里注入Router，手动跳转到目标路由：

  import { Router } from '@angular/router';
  import { OnInit } from '@angular/core';
  
  export class EmptyRedirectComponent implements OnInit {
    constructor(private router: Router) {}
  
    ngOnInit() {
      this.router.navigate(['/view']);
    }
  }
  

3. 降级Zone.js版本 #

Angular 5默认的Zone.js版本在旧Firefox里可能存在事件循环的兼容性问题，导致路由重定向触发递归。可以尝试把Zone.js降级到0.8.20版本（这个版本对旧Firefox支持更友好）：

• 修改package.json中的依赖版本：

  "zone.js": "~0.8.20"
  

• 执行npm install重新安装依赖后重启应用。

4. 切换为HashLocationStrategy #

旧版Firefox对HTML5 History API的支持不完善，而Angular默认的PathLocationStrategy依赖该API。改用哈希路由能大幅提升旧浏览器的路由稳定性：

• 在AppModule的providers中添加配置：

  import { LocationStrategy, HashLocationStrategy } from '@angular/common';
  
  @NgModule({
    // ...其他模块配置
    providers: [
      { provide: LocationStrategy, useClass: HashLocationStrategy }
    ]
  })
  export class AppModule { }
  

  之后路由会变成/#/view的形式，旧Firefox处理起来更可靠，也能避免重定向递归问题。

我当时是用哈希路由+绝对路径重定向的组合解决的问题，你可以根据项目实际情况选择最适合的方案。

内容的提问来源于stack exchange，提问作者Algeroth