如何使 Angular 8 与 IE11 兼容？

Question

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

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

如何让 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. 将新的“es5”配置添加到 angular.json 的 architect 部分：

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

1. 在angular.json旁边创建tsconfig.app.es5.json：

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

1. 更新 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. 在tsconfig.json 中将target 的值从'es2015' 更改为'es5'。

IE 11 需要“es5”。

Answer 4

如果你想让ng serve默认为“es5”构建应用程序。

angular.json

"architect": {
  "build": {
    ...
    "configurations": {
      "development": {
        "tsConfig": "tsconfig-es5.app.json"
      },
      ...
    }
  },
  "serve": {
    ...
    "options": {
      "browserTarget": "bludesk-web:build:development"
    },
    ...
  }

浏览器列表

...
IE 11
not IE 9-10

tsconfig-es5.app.json

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