Question

我使用private setData(resource: string, value: string) { if (!value) { return; } return this.localStorage.setItem(resource, value); }升级到了Angular 8。它运行了迁移脚本，该脚本除其他外还删除了ng update中的es6 / es7导入。根据我的阅读，Angular将为较旧的浏览器（包括IE11）创建一个特殊的版本，而我不必担心polyfills了吗？我将polyfills.ts更新为browserlist，而不是not IE 9-10来（我认为）提示它应该构建适当的polyfills。

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

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

Answer 1

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

执行以下操作：

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

Answer 2

如果您希望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"
  }
}

Answer 3

通过执行以下操作，我已经解决了IE11的polyfill问题：

运行npm install --save web-animations-js
取消注释行在polyfill.ts中导入'web-animations-js'
在tsconfig.json中将目标值从“ es2015”更改为“ es5”。

IE11需要“ es5”

Answer 4

如果您希望将应用程序提供给IE11之类的ES5浏览器以及Chrome和Firefox等现代ES2015 +浏览器，请向您的angular.json添加其他构建配置，以提供应用程序的ES5捆绑包。

在angular.json的architect部分中添加新的“ es5”配置：

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

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

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

更新browserlist以启用IE 11支持。确保browserlist在angular.json文件旁边，位于应用程序的根目录中。例如：

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

向package.json添加新的启动脚本，以使用您在步骤1中创建的ES5配置。

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

现在，您可以使用npm run startES5在IE 11中测试应用程序的ES5捆绑版本，并使用npm start在现代浏览器（例如Chrome）中测试ES2015捆绑版本。

如何使Angular 8与IE11兼容？

4 个答案: