Angular 7路由与导航在IE 11中无法正常工作

结合你提供的代码和问题描述，这个问题主要是IE11对Angular的兼容性支持不足，加上HTML结构的兼容性问题导致的，咱们一步步来修复：

1. 完善IE11所需的Polyfills配置 #

Angular新版本（9+）默认不会自动启用IE11支持，需要手动配置polyfills来填补IE11缺失的ES6+特性：

• 首先安装必要的依赖包：

  npm install --save classlist.js web-animations-js
  

• 打开src/polyfills.ts，取消以下相关注释并补充必要的polyfill导入：

  // 针对IE11的核心ES5/ES6兼容
  import 'core-js/es/es5';
  import 'core-js/es/es6';
  import 'core-js/es/array';
  import 'core-js/es/object';
  
  // 支持NgClass在SVG元素上的使用（IE10/11需要）
  import 'classlist.js';  
  
  // 支持Web Animations（Angular Material动画需要，IE11不原生支持）
  import 'web-animations-js';  
  

2. 确保TypeScript编译目标为ES5 #

IE11仅支持ES5语法，所以要修改tsconfig.json的编译目标：

{
  "compilerOptions": {
    "target": "es5",
    // 其他配置保持不变
  }
}

3. 修复HTML中按钮嵌套链接的兼容性问题 #

IE11对<button>内部嵌套<a>标签的点击事件处理存在bug，点击链接时可能不会触发路由跳转。你可以二选一修改：

方案A：直接在按钮上绑定routerLink #

去掉内部的<a>标签，把路由指令直接应用在按钮上：

<nav>
  <button mat-raised-button class="mat-button" routerLink="/india" routerLinkActive="active">
    India's Dashboard
  </button>
  <button mat-raised-button class="mat-button" routerLink="/state" routerLinkActive="active">
    Indian-State's Dashboard
  </button>
  <button mat-button class="mat-button" routerLink="/world" routerLinkActive="active">
    World's Dashboard
  </button>
</nav>

方案B：将链接样式改为按钮样式 #

如果更倾向于使用<a>标签，直接给链接应用Angular Material的按钮类：

<nav>
  <a mat-raised-button class="mat-button" routerLink="/india" routerLinkActive="active">
    India's Dashboard
  </a>
  <a mat-raised-button class="mat-button" routerLink="/state" routerLinkActive="active">
    Indian-State's Dashboard
  </a>
  <a mat-button class="mat-button" routerLink="/world" routerLinkActive="active">
    World's Dashboard
  </a>
</nav>

4. （可选）改用Hash路由策略 #

如果上述配置后仍有问题，可能是IE11对HTML5 History API的支持不完善，此时可以切换到Hash路由：
修改app.module.ts中的路由配置：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})

这样路由URL会变成/#/india的形式，IE11可以正常识别和跳转。

按照以上步骤配置后，你的Angular路由应该就能在IE11中正常工作了。

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