How do I support Internet Explorer in an Angular 8 application?

Question

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?

Answer 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

Answer 2

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

target which is inside compileOnSave\compilerOptions

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

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/

Answer 8

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"

Answer 9

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.

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

Complete explanation can be found here

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

Answer 10

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.

Answer 11

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

Answer 12

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

Answer 13

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