How do I support Internet Explorer in an Angular 8

问题:

When I generate a project with Angular CLI (8.0.0), I run ng serve, open the application up in Internet Explorer and I am presented with a blank screen.

I had a look at the polyfills.ts files and I uncommented the following lines:

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

I've also removed all core.js imports as Angular 8 supports core.js 3.0 directly.

I've also ran 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"
    ]
  }
}

EDIT:

browserlists:

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

EDIT 2:

The console in Internet Explorer (11) shows the following errors:

polyfills.js: Syntax error (3168, 5) (line 3168 beginning) -> class Zone {

vendor.js: Syntax error (156, 1) (line 156 beginning) -> class PlatformLocation {

main.ts: Syntax error (95, 20) (points to the AppComponent)

What else do I need to do?

回答1:

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

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

3. Run the serve with this configuration using the below command.

ng serve --configuration es5

回答2:

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

target which is inside compileOnSave\compilerOptions

回答3:

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

回答4:

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.

回答5:

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.

回答6:

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/

回答7:

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

回答8:

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

回答9:

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"

回答10:

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