如何使 Angular 8 与 IE11 兼容？

Posted 2023-02-18

【中文标题】如何使 Angular 8 与 IE11 兼容？

【英文标题】：How do I make Angular 8 compatible with IE11?

【发布时间】：2019-10-27 01:24:52

【问题描述】：

我使用 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 一起工作？

【问题讨论】：

你有 ng serve 的问题吗？

@FatehMohamed ng serve 不适用于 IE11，但这是设计使然。我的问题是在运行ng build 之后。刚刚编辑以反映这一点。谢谢。

你试过ng build --prod吗？使用 JIT 编译器的正常构建需要 Reflect polyfill，并且不适用于 IE11。

@AvinKavish 没有，但我使用 -c 标志运行它并指定了使用 aot 的配置

如果我运行npx browserlist，我会在列表中看到 IE11，所以我不认为是这样，但我会试一试。

【参考方案1】：

让 IE 11 与 Angular 8 一起工作的一种方法是禁用 差异加载。

执行以下操作：

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

【讨论】：

我不知道为什么这被否决了，因为它救了我的命。好的，差分加载已禁用，但这没什么大不了的。我在 IE11 中没有错误，所以不知道出了什么问题。

@Robouste 我没有投反对票，但这个答案在质量上等同于“只是不要使用角度 8”。虽然它在技术上解决了问题，但这并不是我们大多数人正在寻找的答案。

不幸的是，这不是理想的解决方案，即使它有效:(

我认为 IE11 应该支持差异加载的期望过于乐观。来自另一个source：关于此的一个非常重要的说明：看到不是 IE 9-11 部分吗？如果您需要支持这些浏览器，您可以删除 not，但这是有代价的。这些版本的 Internet Explorer 无法利用差异加载，因此将被禁用。

我想我误解了什么是差分加载。听起来它要检测浏览器，并为 IE 加载 es5，为现代浏览器加载 es2015。至少这是我在阅读发布公告中的差异加载时得到的印象。我想我在字里行间读得太多了。如果它不能根据浏览器功能提供不同的捆绑包，可以差异加载做什么？

【参考方案2】：

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

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

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

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

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

更新 browserslist 以启用 IE 11 支持。确保 browserslist 在您的应用程序的根目录中，以及 angular.json 文件。例如：

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

将新的启动脚本添加到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 为旧版浏览器构建和提供您的应用

【讨论】：

这只考虑ng serve。您可以使用ng build 添加更多详细信息以支持吗？

angular.json 中的构建步骤已经包含一个等效的“ES5”配置，但是我未能演示一个 package.json 脚本来独立于服务运行构建。我更新了原始帖子以阐明构建与服务。

这是有用的信息；但这并不是真正的差异加载，是吗？您可以仅使用 ES5 支持或仅使用 ES2015+ 支持来构建它；它们是两个单独的命令。有没有什么可能的方式让你的蛋糕（构建两个包）也吃掉（同时使用 IE 和 Chrome 以及它们各自的包）？

@BrianDeSousa，将为 es5 和 es2015 运行 ng serve 运行应用程序，还是我们需要单独运行它们？另外，根据我的理解，如果我们以 es5 为目标，我们不会失去 es2015 的功能吗？

嗨@Maddy，使用此解决方案，您必须分别运行它们。我已经有一段时间没有看到这个了，但是由于这些是编译器选项并且您使用的是 Typescript，您仍然可以使用 ES2015 功能进行编码，但是在编译时，typescript 编译器将构建与目标浏览器兼容的东西，使用 polyfill 和这样的。

【参考方案3】：

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

运行npm install --save web-animations-js 取消注释行 import 'web-animations-js' 内 polyfill.ts 在tsconfig.json 中将target 的值从'es2015' 更改为'es5'。

IE 11 需要“es5”。

【讨论】：

以 ES5 为目标有效地禁用了差异加载，Angular 8 只会像在 Angular 2-7 中那样构建一组代码。您正在禁用有问题的 Angular 8 优化。因此，虽然这在技术上有效，但它不是正确的答案。

我非常清楚这一点，但我们之前一直没有差异加载:) 不要误会我的意思，我真的支持你关于 polyfills 的要求，因为就像现在一样，差异加载没有用，它就像未完成......在我的情况下，我必须说不幸的是，我需要选择 IE 11 消费者而不是差异加载......

【参考方案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"
  

【讨论】：

Angular CLI 默认情况下在开发过程中禁用差异加载，“但是，ng serve、ng test 和 ng e2e 命令会生成一个无法在旧版本中运行的 ES2015 构建不支持这些模块的浏览器，例如 IE 11。” - docs

好的，那我修改一下我的答案。谢谢