Angular 8 + IE 11：遗漏了一些 polyfills

Question

我们需要让 Angular 8 和 IE 11 协同工作。

我们使用target=es5，ng serve创建了pollyfills-es5.js，里面包含了需要的array-includes polyfill，但是控制台报错：ERROR TypeError: Object does not support property or method 'includes'。其他代码工作正常，一些组件显示在屏幕上。

配置文件

{
  ...
  "compilerOptions": {
    ...
    "target": "es2015",
    "lib": ["es2018", "dom"],
    "module": "esnext"
  }
}

tsconfig.es5.json

{
  "extends": "./src/tsconfig.app.json",
  "compilerOptions": {
    "target": "es5"
  }
}

angular.json

...
"build":{
    ...
   "configurations":{ 
         "es5": {
              "tsConfig": "./tsconfig.es5.json"
            }
    }
    ...
},
"serve":{
    ...
   "configurations":{ 
         "es5": {
              "browserTarget": "frontend:build:es5"
            }
    }
    ...
}

浏览器列表：最后 1 个 chrome 版本，IE 11

开始我们使用的代码：ng serve --live-reload=false --configuration=es5

在结果 index.html 我们有

{
  ...
  "compilerOptions": {
    ...
    "target": "es2015",
    "lib": ["es2018", "dom"],
    "module": "esnext"
  }
}

但是在控制台中我们有：错误类型错误：对象不支持属性或方法“包含”

Answer 1

angular-cli 只将它需要的 IE11 polyfill 添加到polyfills-es5. 所以在这个文件中你只会找到 polyfills 来做 angular 工作。AngularArray.includes在它的源代码中没有使用，所以如果你想在你的 polyfill 中使用它，你必须将它添加到你自己的 polyfill.ts 文件中。

import 'core-js/modules/es.array.includes'

这将最终出现在polyfills.jsnot the 中polyfills-es5.js。你可以在这里找到更多信息