Angular 5+IE11+Webpack报错：无法获取'call'属性（未定义/空引用）

我之前维护Angular 5项目时也碰到过几乎一模一样的IE11报错，结合你给出的信息——SCRIPT:5007 无法获取未定义或空引用的'call'属性，且报错在Webpack的modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)这行，大概率是模块未被正确转译为ES5语法或者缺少必要的Polyfill导致的，下面是我亲测有效的排查和解决步骤：

1. 补全IE11所需的Polyfill #

Angular 5的src/polyfills.ts文件里默认注释了很多IE相关的Polyfill，你需要取消这些注释来确保IE11能支持所有必要的JS特性：

• 取消以下Core-JS相关的导入注释：

  import 'core-js/es6/reflect';
  import 'core-js/es7/reflect';
  

• 取消IE9/10/11专用的Polyfill注释（如果用到了相关API），比如：

  import 'classlist.js';  // 需要先执行 npm install classlist.js --save
  import 'web-animations-js';  // 如果项目用到动画，执行 npm install web-animations-js --save
  

• 确保zone.js的导入已经存在：

  import 'zone.js/dist/zone';
  

2. 强制项目编译为ES5语法 #

Angular-CLI 1.7.4默认可能会编译为ES6，而IE11不支持ES6的模块语法，需要修改配置强制输出ES5：

• 打开tsconfig.json，将compilerOptions.target的值改为es5：

  "compilerOptions": {
    "target": "es5",
    // 其他配置...
  }
  

• 打开angular-cli.json，在defaults.build下添加target: "es5"：

  "defaults": {
    "build": {
      "target": "es5",
      // 其他配置...
    }
  }
  

• 检查项目根目录的.browserslistrc文件（如果没有就新建），确保包含IE11：

  > 0.5%
  last 2 versions
  Firefox ESR
  not dead
  IE 11
  

3. 转译未处理的第三方依赖 #

很多第三方库是用ES6+编写的，Angular-CLI默认不会转译node_modules里的包，这会导致IE11无法解析这些代码。你需要手动指定要转译的依赖：

1. 安装必要的Babel工具：

   npm install babel-loader babel-core babel-preset-env --save-dev
   

2. 如果你已经ng eject导出了Webpack配置（不推荐，但如果必须的话），在webpack.config.js的module.rules里添加规则：

   module: {
     rules: [
       {
         test: /\.js$/,
         // 这里替换成你需要转译的第三方包名，多个用|分隔，比如 lodash-es|rxjs-es
         exclude: /node_modules\/(?!(your-package-name)\/).*/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['env']
           }
         }
       }
     ]
   }
   

   如果没有eject，你可以使用@angular-builders/custom-webpack来扩展Angular-CLI的配置（适合Angular-CLI 1.x版本），安装该包后在angular-cli.json里指定自定义Webpack配置文件即可。

4. 定位具体出错的模块 #

你可以通过source map来找到报错对应的原始模块：

• 确保项目开启了source map（在angular-cli.json的build.options.sourceMap设为true）
• 在IE11的开发者工具里，打开“调试器”，找到报错的bundle.js行，点击行号旁边的source map链接，就能跳转到原始的模块文件，这样就能精准定位是哪个库或组件导致的问题，针对性处理。

按照上面的步骤逐一排查，基本能解决这个IE11的兼容性问题。

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