如何在Angular 8应用程序中支持Internet Explorer？

Question

当我使用Angular CLI（8.0.0）生成一个项目后，运行ng serve，在Internet Explorer中打开应用程序，却发现出现了空白屏幕。

我查看了polyfills.ts文件，并取消注释了以下行：

    import 'classlist.js';
    import 'web-animations-js';

我还删除了所有core.js的导入，因为Angular 8直接支持core.js 3.0。

我也运行了npm i。

package.json:

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "classlist.js": "^1.1.20150312",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

编辑:

浏览器列表：

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

编辑2：

Internet Explorer（11）中的控制台显示以下错误：

polyfills.js: 语法错误（3168，5） （从第3168行开始）-> class Zone {

vendor.js: 语法错误（156，1） （从第156行开始）-> class PlatformLocation {

main.ts： 语法错误（95，20） （指向AppComponent）

我还需要做什么？

- James Barrett

---

在 browserslist 中，将 not IE 9-11 替换为 IE 9-11。 - JB Nizet

屏幕仍然保持空白，并在 polyfills.js、vendor.js 和 main.js 中产生了3个语法错误。 - James Barrett

我明白了 - 我已经更新了问题。@JBNizet - James Barrett

这是一个关于Angular CLI的GitHub问题报告，报告编号为14455。该报告提供了有关在使用Angular CLI创建新项目时可能遇到的错误的详细信息和解决方法。 - Robin Dijkhof

Answer 1

根据这个问题的回复，您需要按照以下步骤进行操作：

1. 创建一个新的tsconfig文件tsconfig.es5.json，并将以下内容添加进去。

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

在angular.json文件中，在projects:yourAppName:architect:build:configurations下添加。

"es5": {
      "tsConfig": "./tsconfig.es5.json"
    }

并且在projects:yourAppName:architect:serve:configurations中添加

    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }

请记得在app:build:es5中更改yourAppName为您的应用程序名称！

完整路径如下所示

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig.es5.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }
  }
},

使用以下命令以此配置运行服务器。

ng serve --configuration es5

- Peien Wang

---

如果 ng serve --configuration es5 无法工作，请尝试使用 ng s -c=es5。 - James Barrett

我需要提供tsconfig的路径，像这样："tsConfig": "src/tsconfig-es5.app.json"。 - DauleDK

如果我只使用ng build，我需要这样做吗？ - Andreas Hadjithoma

当我使用ng build时，这个不起作用。在IE11上如何在开发构建中运行我的应用程序？ - Pranab V V

如果我在 angular.json 中有 projects > projectName > architect > build > options > styles，我需要将其复制到 projects > projectName > architect > build > configurations > es5 吗？问题是我的应用程序已经加载了，但样式却丢失了。 - Halfist

Answer 2

前往 "tsconfig.json" 并使用 target: "es5" 替换 "target": "es2015",

将位于 compileOnSave\compilerOptions 中的目标更改为 target。

- prabhat.mishra2812

---

这会禁用 Angular 的“差分加载”功能。因此，最终的捆绑包大小（浏览器下载的）始终比需要的要大，与浏览器无关。 - akcasoy

这个解决方案对我不起作用。在IE11浏览器控制台中从vendor.js获取“无效字符”。已尝试此页面中的所有解决方案。已经苦苦挣扎了3天。任何帮助都将不胜感激。有关问题描述和项目详细信息，请访问stackoverflow.com/questions/64386606/。 - Raju

Answer 3

———简单易行的方法

您需要分别更改2个文件：polyfills.ts和tsconfig.json。

只需在polyfills.ts中添加浏览器Polyfills即可。

/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/promise';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

在 tsconfig.json 中，像这样将 "target" 改为 es5

 "target": "es5", 

< p>而不是< /p>

"目标": "es2015",

- Deva

---

请注意：core-js/es6/* 无法使用，需使用 core-js/es/*。只需要将 es6 改为 es 即可。 - Nimatullah Razmjo

这个解决方案对我不起作用。在IE11浏览器控制台中从vendor.js获取“无效字符”。已尝试此页面中的所有解决方案。已经苦苦挣扎了3天。任何帮助都将不胜感激。有关问题描述和项目详细信息，请访问stackoverflow.com/questions/64386606/。 - Raju

@Raju，请先在隐身模式下检查，其次您可以删除您的node_module和npm cache clean -f，然后运行npm install。希望这能帮到您。 - Deva

Answer 4

注意：我原先的回复来自Reddit (https://www.reddit.com/r/Angular2/comments/buup6a/)

请检查您的tsconfig.json文件。 当升级到Angular 8时，我的目标更改为es2015，所以使用ng serve时遇到了许多问题。在编译时，dist文件夹中有es5和es2015版本。

基本上，为生产而编译会为新旧浏览器（如IE11）创建两个版本。

为了在开发环境中测试IE11，我在angular.json中创建了一个名为tsconfig.dev.json的tsconfig副本，在其中指定了目标设置为es5。 运行ng s -c = dev就OK了！

- Jie Lin

---

太棒了，谢谢。我在angular-cli的GitHub存储库中找到了一个相关问题，其中提到了Jie Lin所说的内容：https://github.com/angular/angular-cli/issues/14455 很烦人的是这个问题在任何地方都没有得到记录。 - James Barrett

这个解决方案对我不起作用。在IE11浏览器控制台中从vendor.js获取“无效字符”。已尝试此页面中的所有解决方案。已经苦苦挣扎了3天。任何帮助都将不胜感激。有关问题描述和项目详细信息，请访问stackoverflow.com/questions/64386606/。 - Raju

Answer 5

为了完全支持IE，我们需要从mdn-polyfills库中引入一组特殊的polyfill。

要安装它们，请使用：

npm i -s mdn-polyfills

接下来将它们添加到polyfills.ts文件中，如下所示

import 'mdn-polyfills/Object.assign';
import 'mdn-polyfills/Object.create';
import 'mdn-polyfills/Object.entries';
import 'mdn-polyfills/Array.from';
import 'mdn-polyfills/Array.of';
import 'mdn-polyfills/Array.prototype.find';
import 'mdn-polyfills/Array.prototype.forEach';
import 'mdn-polyfills/Array.prototype.filter';
import 'mdn-polyfills/Array.prototype.findIndex';
import 'mdn-polyfills/Array.prototype.includes';
import 'mdn-polyfills/String.prototype.includes';
import 'mdn-polyfills/String.prototype.repeat';
import 'mdn-polyfills/String.prototype.startsWith';
import 'mdn-polyfills/String.prototype.endsWith';
import 'mdn-polyfills/String.prototype.padStart';
import 'mdn-polyfills/String.prototype.padEnd';
import 'mdn-polyfills/Function.prototype.bind';
import 'mdn-polyfills/NodeList.prototype.forEach';
import 'mdn-polyfills/Element.prototype.closest';
import 'mdn-polyfills/Element.prototype.matches';
import 'mdn-polyfills/MouseEvent';
import 'mdn-polyfills/CustomEvent';

在此之后，您应该停止在IE中遇到许多问题。

- Vinez

---

请问您能否解释一下为什么需要安装mdn-polyfills？ - Boldizsar

针对Angular 8，导入MDN polyfill并不能解决这个问题。 - James Barrett

在更新到Angular 8后，我遇到了IE 11无法加载我的应用程序的问题，并且我在控制台中注意到了一个“Object.entries”错误。按照这里的说明操作，问题得到了解决。 - doubleya

在Angular 8中，差异加载应该能够直接支持ES2015功能。你只需要为ES2017的功能如Object.values和Object.entries添加polyfills。除了mdn-polyfills之外，你还可以使用import 'core-js/es/object/values'和import 'core-js/es/object/entries'。 - Cito

Answer 6

我只想补充一些对我有用的东西：

1. 阅读官方Angular文档中的这篇文章：https://angular.io/guide/browser-support
2. 另一篇帮助您进行处理的文章：https://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2
3. 对我而言，最好的文章是让我理解一切，甚至包括前两篇文章：https://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1

简而言之，如果您不想再读了，我已经采取了以下步骤：

• 取消注释polyfill.ts文件中的某些导入。

  import 'classlist.js';

  import 'web-animations-js';

• 安装几个npm软件包。

npm install --save classlist.js npm install --save web-animations-js

• 修改browserslist文件。在文件末尾找到此行：

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

请删除'not'这个单词。

此外，只需在polyfills.ts中添加浏览器Polyfills。

/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es/symbol';
// import 'core-js/es/promise';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';

在tsconfig.json文件中，将"target"更改为es5，像这样：

"target": "es5",

而不是

"target": "es2015",

运行：

ng serve --open

希望这能帮到您 :)

- Samack77

Answer 7

我遇到了类似的问题，并通过以下两种方法解决。您可能已经看到了许多帖子提到polyfill，但这不是IE无法按预期工作的唯一原因。

解决方案：

在angular.json文件中添加属性"es5BrowserSupport": true。路径显示在图像中。 现在，在tsconfig.json文件中将target属性更改为"es5"。

完整的解释可以在这里找到。

通过应用这两个修复程序，IE将在本地（调试）和生产环境中开始工作。

- Karthik

---

这适用于我使用的Visual Studio .NET Core 3模板-只需将目标更改为“es5”即可-尽管我将其用于相当低的功能POC。 - ewomack

这个解决方案对我不起作用。在IE11浏览器控制台中从vendor.js获取“无效字符”。已尝试此页面中的所有解决方案。已经苦苦挣扎了3天。任何帮助都将不胜感激。有关问题描述和项目详细信息，请访问stackoverflow.com/questions/64386606/。 - Raju

Answer 8

将target设置为"es5"，设置您的browserslist，这就足够了。

在此处阅读更多有关该主题的信息：https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/

- yglodt

---

这个解决方案对我不起作用。在IE11浏览器控制台中从vendor.js获取“无效字符”。尝试了此页面中的所有解决方案。已经苦苦挣扎了3天。任何帮助都将不胜感激。有关问题描述和项目详细信息，请访问stackoverflow.com/questions/64386606/。 - Raju

Answer 9

这件事真的让我很困扰，所以我写了一个nodeJs脚本，它可以实现这里定义的“解决方法”：ng github。作为企业级开发人员，我们需要开发大量的angular应用程序，仅在chrome和firefox上进行本地开发是不够的。任何做过网页开发的人都知道，仅因为在chrome中看起来很酷并不意味着IE也会很高兴。好了，发牢骚结束，只需安装脚本，并偶尔在IE中运行并在本地检查您的应用程序，然后再将其推送到开发环境中。

- cobolstinks

---

太好了！在 NX 工作区中不起作用，因为带有 browserslist 和 tsconfig.* 的应用程序位于 apps/app-name 中，而 angular.json 位于工作区根目录中。在应用程序文件夹中运行此命令，仍然节省了一些时间，因为只需要手动编辑 angular.json。所以谢谢！ :) - funkizer

Answer 10

你只需要在Angular 8中进行三个更改。 更改polyfills.ts和tsconfig.json。 添加一个名为tsconfig-es5.json的新文件，并使用以下内容。

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

将tsconfig.json中的目标更改为 "target": "es5",

执行以下命令 "ng serve"

- Anand

---

这个解决方案对我没有用。在IE11浏览器控制台中从vendor.js收到“无效字符”的错误。尝试了这个页面中的所有解决方案，但已经苦于3天。非常感谢任何帮助。有关问题描述和项目详细信息，请访问stackoverflow.com/questions/64386606/。 - Raju