Question

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

我查看了polyfills.ts文件，但未注释以下几行：

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

我看了一个this问题，并没有取消对core.js行的注释。我猜想这与直接支持core.js 3.0的Angular 8有关。

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

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

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

我还需要做什么？

Answer 1

根据this issue reply

您需要执行以下步骤

在tsconfig.app.json旁边创建具有以下内容的新tsconfig {"meta":{"code":429,"errorType":"quota_exceeded","errorDetail":"Quota exceeded","requestId":"5d01ba38018cbb002c1757d7"},"response":{}}

tsconfig.es5.json

在{ "extends": "./tsconfig.app.json", "compilerOptions": { "target": "es5" } }中在angular.json下，添加

projects:yourAppName:architect:build:configurations

和"es5": { "tsConfig": "./tsconfig.es5.json" }添加

projects:yourAppName:architect:serve:configurations

请记住将 app：build：es5 中的 yourAppName 更改为 yourAppName ！

完整路径如下所示

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

使用以下命令以这种配置运行服务。

"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"
    }
  }
},

Answer 2

我遇到了类似的问题，并通过以下两个解决方法解决了。您可能遇到过很多关于polyfill的文章，但这不是IE无法按预期工作的唯一原因。

解决方案

在angular.json文件中添加属性“ es5BrowserSupport”：true 。该路径如图所示。

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

可以找到完整的说明here

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

Answer 3

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

从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';

导入“ web-animations-js”；
安装几个npm软件包。

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

修改浏览器列表文件。在文件末尾查找以下行：

不是IE 9-11＃对于IE 9-11支持，请删除“否”。

请删除'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中将“目标”更改为 es5 ，

“目标”：“ es5”，

代替

“目标”：“ es2015”，

运行：

ng送达--open

我希望它可以为您提供帮助：）

Answer 4

要完全支持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中的许多问题。

Answer 5

注意：我的原始回复来自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并瞧瞧！

Answer 6

------简单方法

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

只需在polyfills.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",

Answer 7

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

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

将tsconfig.json中的目标更改为 “ target”：“ es5”，

执行以下命令“ ng serve”

Answer 8

这真的让我感到困扰，所以我写了一个nodeJs script，它将启用此处定义的“替代方法”：ng github

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

Answer 9

将target设置为“ es5”，设置browserslist，就足够了。

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

Answer 10

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

位于compileOnSave \ compilerOptions内部的目标

Answer 11

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

<script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”></script>
<script src=“polyfills-es2015.e954256595c973372414.js” type=“module”></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”></script>
<script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>

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

一个是es2015，具有type="module"属性，适用于现代浏览器
另一种是具有nomodule属性的es5版本，用于潜在浏览器。

因此，Angular cli将在prod上优雅地生成它。但是，如果要从本地运行ng serve，则必须手动确保ng serve是从具有target: es5

的tsconfig文件运行的

Answer 12

步骤1：在polyfills.ts中取消注释填充。同时运行polyfills.ts文件中提到的所有npm install命令以安装那些软件包

步骤2：在浏览器列表文件中，不要删除提及IE 9-11支持的地方

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

这些步骤解决了我的问题

Answer 13

如何更新包含的browserslist并删除`IE 9-11之前的not ...？这样吗？

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

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

npx browserslist

0.5％最近2个版本 Firefox ESR 没死 IE 9-11＃要支持IE 9-11，请删除“否”。

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

13 个答案: