Angular 5 IE9路由支持问题：URL陷入无限循环求助

我之前在项目里也碰到过一模一样的问题——官方文档说支持IE9，但配置完polyfills后路由还是陷入无限循环。结合当时的调试经验，给你几个具体的排查方向：

1. 强制启用哈希模式路由 #

IE9完全不支持HTML5 History API，而Angular默认使用的PathLocationStrategy依赖这个API，这是最常见的触发循环的原因。你需要切换到HashLocationStrategy：

方法一：在路由模块配置中开启useHash #

修改你的路由模块（比如AppRoutingModule）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })], // 这里添加useHash: true
  exports: [RouterModule]
})
export class AppRoutingModule { }

方法二：通过Provider注入策略 #

如果上面的方法不生效，可以在AppModule的providers数组里直接注入：

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

@NgModule({
  // ...其他配置
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ]
})
export class AppModule { }

2. 再次核对polyfills的完整性 #

你说已经启用了所有IE9需要的polyfills，但还是要仔细检查有没有遗漏或未安装的依赖：

• 确保polyfills.ts里以下垫片都没有被注释：

  // IE9, IE10 and IE11 requires all of the following polyfills.
  import 'core-js/es6/symbol';
  import 'core-js/es6/object';
  import 'core-js/es6/function';
  import 'core-js/es6/parse-int';
  import 'core-js/es6/parse-float';
  import 'core-js/es6/number';
  import 'core-js/es6/math';
  import 'core-js/es6/string';
  import 'core-js/es6/date';
  import 'core-js/es6/array';
  import 'core-js/es6/regexp';
  import 'core-js/es6/map';
  import 'core-js/es6/weak-map';
  import 'core-js/es6/set';
  
  // IE10 and IE11 requires the following for NgClass support on SVG elements
  import 'classlist.js';  // 这个需要单独安装：npm install --save classlist.js
  
  // IE10 and IE11 requires the following for the Reflect API.
  import 'core-js/es6/reflect';
  

• 确认classlist.js已经通过npm安装，这个垫片IE9必须要有。

3. 检查路由配置是否存在重定向循环 #

有时候路由配置的重定向规则会导致无限循环，比如：

// 错误示例：**重定向到空路径，而空路径又重定向到home
const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: '**', redirectTo: '' } // 这里会触发循环
];

把**的重定向直接指向具体路由（比如/home）即可避免：

{ path: '**', redirectTo: '/home', pathMatch: 'full' }

4. 确保IE9运行在标准模式 #

IE9默认可能会切换到兼容视图（比如IE7模式），这会破坏Angular的运行环境。在你的index.html头部添加以下meta标签，并且要放在所有其他meta标签之前：

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 其他meta标签、样式等 -->
</head>

5. 排查自定义路由守卫的问题 #

如果你的路由使用了CanActivate、CanLoad等守卫，检查守卫逻辑是否存在错误的重定向。比如守卫里因为某种条件不断重定向到同一个路由，就会触发循环。可以暂时注释掉守卫代码，测试路由是否正常，再逐步排查守卫逻辑。

6. 查看IE9控制台的错误信息 #

打开IE9的开发者工具（按F12），切换到控制台标签，看看有没有报错信息——比如某个polyfill加载失败、组件初始化错误等，这些都可能间接导致路由循环。

先从哈希模式和polyfills这两点入手，这两个是解决IE9路由问题的核心，大部分情况都能解决。如果还是不行，再逐步排查后面的点。

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