如何使Angular 8与IE11兼容？

Question

我使用升级到Angular 8 ng update。它运行了迁移脚本，该脚本除其他外还删除了中的es6 / es7导入polyfills.ts。根据我的阅读，Angular将为较旧的浏览器（包括IE11）创建一个特殊的版本，而我不必担心polyfills了吗？我更新browserlist为，not IE 9-10而不是not IE 9-11（我认为）暗示它应该构建适当的polyfills。

不幸的是，运行后ng build，出现一些与polyfill相关的错误，例如。Reflect.getMetadata is not a function和Object doesn't support property or method 'includes'。我尝试将reflect其array导入并导入到polyfills中，并克服了这些错误，但是我遇到了其他错误。这是怎么回事？我应该包括polyfills吗？

如何使Angular 8与IE11一起使用？

Answer 1

使IE 11与Angular 8配合使用的一种方法是禁用差分加载。

请执行下列操作：

1. 更新tsconfig.json与"target": "es5"
2. 更新polyfills.ts与import 'core-js'; // core-js@^3.1.4

Answer 2

如果您想将您的应用程序提供给 ES5 浏览器（如 IE11）以及现代 ES2015+ 浏览器（如 Chrome 和 Firefox），请将额外的构建配置添加到您的 angular.json 以提供您应用程序的 ES5 包。

1. 在 angular.jsonarchitect部分添加一个新的“es5”配置：

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "es5" : {
              "tsConfig": "tsconfig.app.es5.json"
            }
          }
        },
        "serve": {
          "configurations": {
            "es5": {
              "browserTarget": "my-app:build:es5"
}}}}}}}

2. tsconfig.app.es5.json一起创建angular.json：

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

3. 更新browserslist以启用 IE 11 支持。确保 browserslist 与angular.json文件一起位于应用程序的根目录中。例如：

not IE 9-10 # For IE 9-11 support, remove 'not'.
IE 11

4. 添加一个新的启动脚本以package.json使用您在步骤 1 中创建的 ES5 配置：

"scripts": {
  "build": "ng build",
  "buildES5": "ng build --configuration=es5",
  "start": "ng serve",
  "startES5": "ng serve --configuration=es5",
}

现在，您可以为仅支持 ES5 的旧浏览器或支持 ES2015+ 的现代浏览器构建和提供您的应用程序：

• npm run build 为现代浏览器构建您的应用程序
• npm run buildES5 为旧版浏览器构建您的应用
• npm run start 为现代浏览器构建和提供您的应用程序
• npm run startES5 为旧版浏览器构建和提供您的应用程序

Answer 3

我通过执行以下操作解决了我的polyfill.ts问题：IE 11

1. 跑步npm install --save web-animations-js
2. 取消import 'web-animations-js' 里面的注释行polyfill.ts
3. 将内的target值从'es2015'更改为 'es5'tsconfig.json。

IE 11需要“es5”。