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

当我使用 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"
}

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)中的控制台显示以下错误:

填充物: Syntax error (3168, 5) (第3168行开始)-> class Zone {

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

主要内容: Syntax error (95, 20) (指向 AppComponent)

我还需要做什么？

86209 次浏览
小开

To support IE fully we had to pull in a special set of polyfills from the mdn-polyfills library.

To install them use

npm i -s mdn-polyfills

next add them to the polyfills.ts file like this

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

after this you should stop experiencing many of the issues in IE.

小开

Note: my original reply was from Reddit (https://www.reddit.com/r/Angular2/comments/buup6a/)

Check your tsconfig.json While upgrading to Angular 8, the target changed to es2015 for me, so with ng serve I encountered many many problems. While compiling, the dist folder had both es5 and es2015 versions.

Basically, compiling for production will create both versions for new and older browsers like IE11

To test IE11 on development environment, I created a dev environment in angular.json where I specified a copy of tsconfig which I called tsconfig.dev.json where the target is set to es5. Run ng s -c=dev and voilá!

小开

This really bothered me so I wrote a nodeJs script that will enable the "workaround" defined here: ng github

Being an enterprise dev that turns out tons of angular apps its not ok to do development locally against chrome and firefox only. Anyone that's done web dev for more than a minute knows that just because it looks cool in chrome doesn't mean IE will be happy. OK rant over just install the script and serve it in IE every now and then and check your app in IE locally before pushing to dev.

小开
最佳答案

According to this issue reply

You need to follow the following steps

  1. Create a new tsconfig tsconfig.es5.json next to tsconfig.json with the below contents
{
"extends": "./tsconfig.json",
"compilerOptions": {
"target": "es5"
}
}
  1. In angular.json Under projects:yourAppName:architect:build:configurations, add
"es5": {
"tsConfig": "./tsconfig.es5.json"
}

and projects:yourAppName:architect:serve:configurations add

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

Remember to change yourAppName in app:build:es5 to yourAppName!

full path shown below

"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. Run the serve with this configuration using the below command.
ng serve --configuration es5
小开

Set target to "es5", set up your browserslist, that should be enough.

Read more about the topic here: https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/

小开

Go to "tsconfig.json" and use target: "es5" instead of "target": "es2015",

target which is inside compileOnSave\compilerOptions

小开

------Simple and Easy Way

You need to change 2 files, polyfills.ts and tsconfig.json respectively.

Just add Browser Polyfills in 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';

and in tsconfig.json change "target" to es5 like this

 "target": "es5",

instead of

"target": "es2015",

小开

This is a very cool Angular new feature called differential-loading

<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>

If you see above index.html from build folder, each js has two versions:

  • One is es2015 with type="module"attribute for modern browsers
  • Another one is es5 version with nomodule attribute for lagency browsers.

Therefore, Angular cli will gracefully generate it on prod. But if you want to run ng serve from local, then you have to manually make sure ng serve is running from a tsconfig file that has target: es5

小开

What about updating the included browserslist and remove the not before the `IE 9-11 ...? like this?

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'.

小开

You just need three changes in angular 8. change polyfills.ts and tsconfig.json . Add a new file called tsconfig-es5.json with below content..

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

change the target in tsconfig.json as "target": "es5",

execute the following command "ng serve"

小开

I had similar issue and resolved with the two below fix. You might have come across many post mentioning about polyfill but that is not the only reason for IE not working as expected.

Solution

Add a property "es5BrowserSupport": true in angular.json file. The path is shown in image. enter image description here

Now, change your target property to "es5" in tsconfig.json file

enter image description here

Complete explanation can be found here

By applying these two fix, IE will start working in local (debugging) and in production.

小开

I Just want to add something that was useful to me:

  1. Read this article from the Official Angular Documentation: https://angular.io/guide/browser-support
  2. Another article to help you in your process: https://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2
  3. For me the best article that helped me to understand everything, even the two previous: https://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1

In short, if you don't want to read any more I have taken the following steps:

  • Un-comment some imports in the polyfill.ts file.

    import 'classlist.js';

    import 'web-animations-js';

  • Install a couple of npm packages.

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

  • Modify the browserslist file. At the end of the file look for this line:

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

Please remove 'not' word.

Additionaly just add Browser Polyfills in polyfills.ts

/***************************************************************************************************
* 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';

and in tsconfig.json change "target" to es5 like this

"target": "es5",

instead of

"target": "es2015",

Run:

ng serve --open

I hope it can help you :)

小开

Step 1: Un-comment plyfills in polyfills.ts. Also run all npm install commands mentionedin in polyfills.ts file to install those packages

Step 2: In browserslist file remove not where IE 9-11 support is mentioned

Step 3: In tsconfig.json file change like "target": "es2015" to "target": "es5"

These steps fixed my issue


提交答案