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


77

当我使用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:( Syntax error (3168, 5) 第3168行开始)->class Zone {

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

main.ts :( Syntax error (95, 20) 指向AppComponent)

我还需要做什么?


在浏览器列表中,替换not IE 9-11IE 9-11
JB Nizet,

3
编辑:屏幕仍是空白,并且产生3个语法错误polyfills.jsvendor.jsmain.js@JBNizet
詹姆斯巴雷特

我了解-我已经更新了问题。@JBNizet
詹姆斯·巴雷特

Answers:


90

根据这个问题回复

您需要遵循以下步骤

  1. tsconfig.es5.json使用以下内容在tsconfig.json旁边创建一个新的tsconfig
{
 "extends": "./tsconfig.json",
 "compilerOptions": {
     "target": "es5" 
  }
}
  1. angular.json 下方projects:yourAppName:architect:build:configurations,添加
"es5": {
      "tsConfig": "./tsconfig.es5.json"
    }

projects:yourAppName:architect:serve:configurations添加

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

记得改yourAppName应用:建筑:ES5yourAppName

完整路径如下所示

"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"
    }
  }
},
  1. 使用以下命令使用此配置运行服务。
ng serve --configuration es5

1
如果ng serve --configuration es5不起作用,请尝试ng s -c=es5
詹姆斯·巴雷特

5
我必须像这样提供tsconfig路径:"tsConfig": "src/tsconfig-es5.app.json"
DauleDK '19

如果我仅使用ng build,我需要吗?
Andreas Hadjithoma,

1
当我使用ng build时这不起作用。开发中的应用程序如何在ie11上构建?
Pranab VV

如果我projects > projectName > architect > build > options > stylesangular.json,我需要把它复制到projects > projectName > architect > build > configurations > es5?关键是我的应用程序加载了,但是样式丢失了。
Halfist

27

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

在compileOnSave \ compilerOptions内部的目标


4
这将禁用角度的“差异加载”功能。因此,最后的捆绑包大小(浏览器下载的大小)“总是(独立于浏览器)”大于所需的大小。
akcasoy

此解决方案不适用于我。在IE11浏览器控制台中从vendor.js获取“无效字符”。尝试了此页面中的所有解决方案。从3天开始苦苦挣扎。任何帮助将非常感激。有关问题描述和项目详细信息的更多信息stackoverflow.com/questions/64386606/
Raju

8

------简单方法

你需要改变两个文件,polyfills.tstsconfig.json分别。

只需添加浏览器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",


7
请注意:core-js/es6/*无效,请使用core-js/es/*。只需更改es6为即可es
Nimatullah Razmjo

此解决方案不适用于我。在IE11浏览器控制台中从vendor.js获取“无效字符”。尝试了此页面中的所有解决方案。从3天开始苦苦挣扎。任何帮助将非常感激。有关问题描述和项目详细信息的更多信息stackoverflow.com/questions/64386606/
Raju

@Raju,请先在incongito模式下检查,其次可以删除node_module和npm cache clean -f然后再安装npm。希望能对您有所帮助
Deva

7

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


太好了,谢谢。我在angular-cli GitHub存储库中发现了一个相关问题,其中提到了杰琳说的话:github.com/angular/angular-cli/issues/14455这在任何地方都没有得到记录很令人讨厌
James Barrett,

此解决方案不适用于我。在IE11浏览器控制台中从vendor.js获取“无效字符”。尝试了此页面中的所有解决方案。从3天开始苦苦挣扎。任何帮助将非常感激。有关问题描述和项目详细信息的更多信息stackoverflow.com/questions/64386606/
Raju

6

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


您能否解释一下安装mdn-polyfills的原因是什么?
Boldizsar

3
特别是对于Angular 8,导入MDN polyfills无法解决问题。
詹姆斯·巴雷特

升级到Angular 8后,遇到IE 11无法加载我的应用程序的问题,我发现Object.entries控制台中出现错误。按照这里的说明,它解决了我的问题。
doubleya

4
@doubleya应该使用Angular 8中的差异加载功能来开箱即用地支持ES 2015功能。您只需要为ES2017功能(如Object.values和Object.entries)添加polyfill。除了mdn-polyfills,您还可以import 'core-js/es/object/values'import 'core-js/es/object/entries'
Cito19年

2

设置target为“ es5”,设置您的browserslist,就足够了。

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


此解决方案不适用于我。在IE11浏览器控制台中从vendor.js获取“无效字符”。尝试了此页面中的所有解决方案。从3天开始苦苦挣扎。任何帮助将非常感激。有关问题描述和项目详细信息的更多信息stackoverflow.com/questions/64386606/
Raju

2

您只需要对角度8进行三个更改即可。请更改polyfills.ts和tsconfig.json。添加具有以下内容的名为tsconfig-es5.json的新文件。

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

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

执行以下命令“ ng serve”


此解决方案不适用于我。在IE11浏览器控制台中从vendor.js获取“无效字符”。尝试了此页面中的所有解决方案。从3天开始苦苦挣扎。任何帮助将非常感激。有关问题描述和项目详细信息的更多信息stackoverflow.com/questions/64386606/
Raju

2

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

在angular.json文件中添加属性 “ es5BrowserSupport”:true。该路径如图所示。 在此处输入图片说明

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

在此处输入图片说明

完整的说明可以在这里找到

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


这使用Visual Studio .NET Core 3模板对我有用-只是将目标更改为“ es5”即可完成-尽管我将其用于功能非常低的POC
ewomack,

此解决方案不适用于我。在IE11浏览器控制台中从vendor.js获取“无效字符”。尝试了此页面中的所有解决方案。从3天开始苦苦挣扎。任何帮助将非常感激。有关问题描述和项目详细信息的更多信息stackoverflow.com/questions/64386606/
Raju

2

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

  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文件中取消注释某些导入。

    导入'classlist.js';

    导入'web-animations-js';

  • 安装几个npm软件包。

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

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

    不是IE 9-11#要获得IE 9-11支持,请删除“否”。

请删除“不”字。

另外,只需在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

“ target”:“ es5”,

代替

“ target”:“ es2015”,

跑:

ng服务-打开

希望它能对您有所帮助:)


1

这真的让我很烦,所以我写了一个nodeJs脚本来启用此处定义的“解决方法”:ng github

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


这很棒!不工作在NX工作空间与应用程序browserslist,并tsconfig.*apps/app-name同时,angular.json在工作区的根。将其运行在应用程序的文件夹中,仍然节省了一些时间,只需手动进行编辑即可angular.json。那谢谢啦!:)
funkizer '19

0

这是一个非常酷的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将在生产时优雅地生成它。但是,如果ng serve要从本地运行,则必须手动确保ng serve正在从具有以下内容的tsconfig文件中运行target: es5


0

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

步骤2:在browserslist文件中,不要删除提到IE 9-11支持的地方

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

这些步骤解决了我的问题


-3

如何更新其中包含的内容browserslist并删除not`IE 9-11 ...之前的版本?像这样?

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

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

npx browserslist

0.5%的最近两个版本Firefox ESR尚未终止IE 9-11#对于IE 9-11支持,请删除“ not”。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.