Angular应用IE8兼容问题求助：配置polyfill仍显示空白页

先给你泼个冷水：Angular从2.x版本开始就彻底放弃IE8支持了，你用的是Angular 6，官方浏览器支持列表里根本没IE8的位置，这是你遇到空白页的核心原因。不过如果你非要死磕兼容，我可以给你一些排查方向，但提前说清楚——成功概率极低，框架底层已经没留适配空间了。

先补全IE8必备的polyfill #

你的polyfill.ts只加了IE9+需要的补丁，IE8缺了好几个关键项：

1. 安装并导入es5-shim和es5-sham，这俩是IE8跑ES5代码的基础：
   先执行安装命令：

   npm install es5-shim es5-sham --save
   

   然后在polyfill.ts最顶部加上：

   import 'es5-shim';
   import 'es5-sham';
   

2. IE8没有console对象，代码一运行就会报错崩溃，得提前做兼容，同样在polyfill.ts开头加这段：

   (function() {
       var method;
       var noop = function () {};
       var methods = [
           'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
           'exception', 'firebug', 'group', 'groupCollapsed', 'groupEnd', 'info',
           'log', 'memoryProfile', 'memoryProfileEnd', 'profile', 'profileEnd',
           'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'
       ];
       var length = methods.length;
       var console = (window.console = window.console || {});
       while (length--) {
           method = methods[length];
           if (!console[method]) {
               console[method] = noop;
           }
       }
   }());
   

3. 还要补充core-js/es5的基础模块，比如：

   import 'core-js/es5/object';
   import 'core-js/es5/function';
   import 'core-js/es5/array';
   

调整编译和构建配置 #

• tsconfig.json：把编译目标改成es5，并确保lib包含es5和dom，开启downlevelIteration：

  {
    "compilerOptions": {
      "target": "es5",
      "lib": ["es5", "dom"],
      "downlevelIteration": true,
      // 保留你原来的其他配置
    }
  }
  

• angular.json：确认build的target是es5，关掉针对现代浏览器的优化：

  "architect": {
    "build": {
      "options": {
        "target": "es5",
        // 其他已有配置...
      }
    }
  }
  

最后必须说的实话 #

就算你把上面的都做了，Angular 6在IE8里大概率还是跑不起来：

• Angular核心的依赖注入、变更检测逻辑大量用到IE8不支持的ES5特性，官方根本没做适配
• Zone.js在IE8下的补丁漏洞很多，很多事件和宏任务无法被正确捕获
• 你用的第三方依赖（比如rxjs 6.x）也早就放弃了IE8支持

如果业务硬要支持IE8，唯一可行的方案是降级到AngularJS（也就是Angular 1.x），这是唯一一个官方支持IE8的Angular版本，或者换其他支持IE8的前端框架。

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