Angular 10项目适配IE11配置后打包部署出现白屏及路由匹配错误问题

现有配置存在的核心问题 #

• 构建命令参数错误：ng build --base-href --configuration=es5中--base-href缺少必填的部署路径参数，会导致应用基础路径配置异常
• angular.json的es5配置不完整：仅指定了tsConfig为es5，没有继承对应环境的文件替换、构建优化等配置，打包产物不符合生产运行要求
• 路由模式兼容问题：Angular默认的HTML5路由模式在IE11下适配性差，且路径不匹配时极易触发路由找不到的错误
• browserlist配置格式错误：你贴的browserlist中IE9-10、IE11行开头多了多余空格，会导致浏览器兼容识别失效

修复步骤 #

1. 修正构建配置 #

修改angular.json中es5配置块，补全生产环境必要的构建参数（如果需要适配dev/int等其他环境的es5包，对应修改对应环境的配置块新增tsConfig字段即可）：

"es5": {
  "tsConfig": "./tsconfig-es5.app.json",
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true
}

2. 修正browserlist配置 #

删除IE配置行前的多余空格，确保识别正常：

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

3. 修复路由匹配错误 #

优先切换为IE11兼容性更好的哈希路由模式，修改app-routing.module.ts配置：

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

如果必须使用HTML5路由模式，需同时保证两点：

• 构建命令中--base-href参数值与实际部署的路径完全一致，比如部署在根目录则为--base-href /，部署在子目录/login/则为--base-href /login/
• 后端服务器配置URL重写规则，所有访问请求统一重定向到index.html

4. 修正构建命令 #

根据实际部署路径填写base-href参数值，正确的构建命令示例（以根目录部署为例）：
ng build --base-href / --configuration=es5

额外检查项 #

• 确保index.html的head标签最开头添加了IE兼容meta标签：<meta http-equiv="X-UA-Compatible" content="IE=edge">
• 确认所有polyfill依赖已安装：执行npm install --save classlist.js web-animations-js core-js hammerjs

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