angular - 如何在 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。

包.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：（ Syntax error (3168, 5) 第 3168 行开始）->class Zone {

vendor.js：（ Syntax error (156, 1) 第 156 行开头）->class PlatformLocation {

main.ts：（ Syntax error (95, 20) 指向 AppComponent）

我还需要做什么？

score 106 · Accepted Answer

根据这个问题回复

您需要按照以下步骤操作

tsconfig.es5.json使用以下内容在 tsconfig.json 旁边创建一个新的 tsconfig

{
 "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 更改为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

score 31 · Accepted Answer

转到“tsconfig.json”并使用目标：“es5”而不是“目标”：“es2015”，

compileOnSave\compilerOptions 中的目标

score 12 · Accepted Answer

------简单易行的方法

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

只需添加Browser Polyfillspolyfills.ts

/***************************************************************************************************
* 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 将“目标”更改为es5

 "target": "es5",

代替

"target": "es2015",

score 7 · Accepted Answer

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

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

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

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

score 6 · Accepted Answer

为了完全支持 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 中遇到许多问题。

score 3 · Accepted Answer

我只想添加一些对我有用的东西：

从官方 Angular 文档中阅读这篇文章：https ://angular.io/guide/browser-support
另一篇文章可以在您的过程中为您提供帮助：https ://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2
对我来说，帮助我理解一切的最好的文章，甚至是前两篇：https ://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1

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

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

导入'classlist.js'；

导入“网络动画-js”；
安装几个 npm 包。

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

修改 browserslist 文件。在文件末尾查找这一行：

not IE 9-11 # 对于 IE 9-11 支持，删除 'not'。

请去掉“不”字。

另外只需在 polyfills.ts 中添加浏览器 Polyfill

/***************************************************************************************************
* 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将“目标”更改为es5

“目标”：“es5”，

代替

“目标”：“es2015”，

跑：

ng服务--打开

我希望它可以帮助你:)

score 2 · Accepted Answer

设置target为“es5”，设置你的browserslist，应该足够了。

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

score 2 · Accepted Answer

我有类似的问题，并通过以下两个修复解决了。您可能会看到很多关于 polyfill 的帖子，但这并不是 IE 无法按预期工作的唯一原因。

解决方案

在 angular.json 文件中添加属性 "es5BrowserSupport": true 。路径如图所示。

现在，在 tsconfig.json 文件中将目标属性更改为“ es5 ”

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

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

score 2 · Accepted Answer

您只需要在 Angular 8 中进行三处更改。更改 polyfills.ts 和 tsconfig.json 。添加一个名为 tsconfig-es5.json 的新文件，其内容如下..

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

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

执行以下命令“ng serve”

score 1 · Accepted Answer

这是一个非常酷的 Angular 新功能，称为差异加载

<script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”&gt;</script>
<script src=“polyfills-es2015.e954256595c973372414.js” type=“module”&gt;</script>
<script src=“runtime-es5.741402d1d47331ce975c.js” nomodule></script>
<script src=“polyfills-es5.405730e5ac8f727bd7d7.js” nomodule></script>
<script src=“main-es2015.63808232910db02f6170.js” type=“module”&gt;</script>
<script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>

如果您从 build 文件夹中看到上面的 index.html，则每个 js 都有两个版本：

一种是 es2015，具有type="module"现代浏览器的属性
另一个是带有nomodule延迟浏览器属性的 es5 版本。

因此，Angular cli 会在 prod 上优雅地生成它。但是如果你想ng serve从本地运行，那么你必须手动确保ng serve从一个 tsconfig 文件运行target: es5

score 1 · Accepted Answer

这真的让我很困扰，所以我编写了一个nodeJs 脚本，它将启用此处定义的“解决方法”：ng github

作为一个开发出大量 Angular 应用程序的企业开发人员，仅在本地针对 chrome 和 firefox 进行开发是不行的。任何做过网络开发超过一分钟的人都知道，仅仅因为它在 chrome 中看起来很酷并不意味着 IE 会很高兴。好吧，只需安装脚本并时不时地在 IE 中提供它，然后在推送到 dev 之前在本地检查您的 IE 中的应用程序。

score 0 · Accepted Answer

第 1 步：取消注释 polyfills.ts 中的 plyfills。同时运行 polyfills.ts 文件中提到的所有 npm install 命令来安装这些包

第 2 步：在 browserslist 文件中删除没有提到 IE 9-11 支持的地方

第 3 步：在 tsconfig.json 文件中将“target”：“es2015”更改为“target”：“es5”

这些步骤解决了我的问题

score -3 · Accepted Answer

在`IE 9-11 ...之前更新包含browserslist和删除的内容怎么样？not像这样？

构建系统使用此文件来调整 CSS 和 JS 输出以支持以下指定的浏览器。有关格式和规则选项的更多信息，请参阅： https ://github.com/browserslist/browserslist#queries

您可以通过运行以下命令查看查询选择了哪些浏览器：

npx browserslist

0.5% last 2 个版本 Firefox ESR not dead IE 9-11 # 对于 IE 9-11 支持，删除 'not'。

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

13 回答 13

Related

Reference