Angular 8应用在IE浏览器显示空白页求助（已配置必要Polyfills并更新browserlist、tsconfig文件）

我之前也踩过Angular 8在IE里显示空白页的坑，明明配置了polyfills还是不行，给你分享几个我当时排查出来的关键点，说不定能帮到你：

• 确认polyfills.ts的完整配置
  虽然你说已经添加了必要的polyfills，但可能有些默认注释的IE相关配置没打开。Angular 8的polyfills.ts里，IE9-11需要的很多polyfill是被注释掉的，要确保这些都启用：

  // 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 classlist.js
  
  // IE10 and IE11 requires the following for the Reflect API.
  import 'core-js/es6/reflect';
  
  // IE10和IE11支持动画需要这个
  import 'web-animations-js';  // 执行 npm install web-animations-js
  

  一定要记得安装对应的依赖包，光导入不安装肯定会报错。

• 检查browserslist配置是否生效
  确保你的browserslist文件里明确包含IE版本，不要有排除IE的配置：

  > 0.5%
  last 2 versions
  Firefox ESR
  not dead
  IE 9-11 # 这里不要加not，要明确指定支持IE9-11
  

  修改完配置后最好重启开发服务器，有时候配置不会自动刷新生效。

• 确认tsconfig的target设置
  Angular 8默认的target可能是es2015，但IE完全不支持ES6语法，要把根目录的tsconfig.json和tsconfig.app.json里的target都改成es5：

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

• 一定要看IE的控制台错误
  空白页90%都是因为有脚本错误，只是你没打开IE的开发者工具。按F12打开控制台，看有没有报错信息——比如某个第三方库输出的是ES6代码没被polyfill，或者有语法IE不兼容。如果是第三方库的问题，可以在angular.json的build配置里把它加入allowedCommonJsDependencies：

  "build": {
    "options": {
      "allowedCommonJsDependencies": [
        "你的第三方库名称"
      ],
      // 其他配置
    }
  }
  

• 检查zone.js的版本兼容性
  Angular 8对zone.js的版本有要求，太新或太旧都可能导致IE兼容问题。建议用Angular 8推荐的~0.9.1版本，修改package.json后重新安装：

  npm install zone.js@~0.9.1 --save
  

• 生产环境打包的额外排查
  如果是生产打包后在IE空白，试试暂时关闭buildOptimizer选项，有时候这个优化会导致IE出错：

  "configurations": {
    "production": {
      "buildOptimizer": false,
      // 其他生产配置
    }
  }
  

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