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?

Thiele

In browserslist, replace not IE 9-11 by IE 9-11 – Dada

EDIT: The screen still remains blank and produces 3 syntax errors in polyfills.js, vendor.js and main.js @JBNizet – Thiele

I understand - I've updated the question. @JBNizet – Thiele

github.com/angular/angular-cli/issues/14455 – Buoyancy

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

Discomfort

If ng serve --configuration es5 doesn't work, try ng s -c=es5 – Thiele

I had to provide the the tsconfig path like so: "tsConfig": "src/tsconfig-es5.app.json" – Ayrshire

do i need to this if i only use ng build ? – Cavefish

this is not working when i do with ng build.How work my app in development build on ie11? – Fault

If I have projects > projectName > architect > build > options > styles in angular.json, do I need to copy it to projects > projectName > architect > build > configurations > es5? The thing is my application loads, but styles are missing. – Polyzoarium

This solution is not working for me. getting "Invalid character" from vendor.js in IE11 browser console. have tried all the solutions that are in this page. struggling from 3 days. any help would be much appreciated. for more about issue description and project details #64387106. – Woolly

for production should i put my production config into es5 config file? – Emirate

Answer 2

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

target which is inside compileOnSave\compilerOptions

Dotty

this disables the "differential loading" feature of angular. So the bundle size at the end (which the browsers download) is "always (independent of browser)" bigger than needed. – Nothingness

This solution is not working for me. getting "Invalid character" from vendor.js in IE11 browser console. have tried all the solutions that are in this page. struggling from 3 days. any help would be much appreciated. for more about issue description and project details stackoverflow.com/questions/64386606/ – Woolly

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

Fitted

Please note that: core-js/es6/* does not work instead use core-js/es/*. just change es6 to es. – Narration

This solution is not working for me. getting "Invalid character" from vendor.js in IE11 browser console. have tried all the solutions that are in this page. struggling from 3 days. any help would be much appreciated. for more about issue description and project details stackoverflow.com/questions/64386606/ – Woolly

@Raju, please check first in incongito mode, second can you delete your node_module and npm cache clean -f then npm install. hope that will help you – Fitted

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

Sidwel

Brilliant, thanks. I found a relevant issue in the angular-cli GitHub repository that mentions what Jie Lin has said: github.com/angular/angular-cli/issues/14455 It's quite annoying how this isn't documented anywhere – Thiele

This solution is not working for me. getting "Invalid character" from vendor.js in IE11 browser console. have tried all the solutions that are in this page. struggling from 3 days. any help would be much appreciated. for more about issue description and project details stackoverflow.com/questions/64386606/ – Woolly

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.

Mercy

Can you please explain what was the reason you had to install mdn-polyfills? – Ahl

For Angular 8 specifically, importing MDN polyfills will not fix the problem. – Thiele

Ran into a problem with IE 11 not loading my app after updating to Angular 8 and I noticed an Object.entries error in my console. Followed the instructions here and it solved my problem. – Smarten

@Smarten The ES 2015 features should be supported out of the box with differential loading in Angular 8. You only need to add polyfills for the ES2017 features like Object.values and Object.entries. Instead of the mdn-polyfills, you can also import 'core-js/es/object/values' and import 'core-js/es/object/entries'. – Placida

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

Hubbub

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/

Homochromous

This solution is not working for me. getting "Invalid character" from vendor.js in IE11 browser console. have tried all the solutions that are in this page. struggling from 3 days. any help would be much appreciated. for more about issue description and project details stackoverflow.com/questions/64386606/ – Woolly

Answer 8

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.

Chalutz

This worked for me using the Visual Studio .NET Core 3 template - just changing the target to "es5" did it - though I'm using it for a pretty low functionlity POC – Subdue

This solution is not working for me. getting "Invalid character" from vendor.js in IE11 browser console. have tried all the solutions that are in this page. struggling from 3 days. any help would be much appreciated. for more about issue description and project details stackoverflow.com/questions/64386606/ – Woolly

Answer 9

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.

Swipple

This is great! Doesn't work in an NX workspace as the app with browserslistand tsconfig.* is in apps/app-name while angular.json is in the workspace root. Ran this in the app's folder and still saved some time having to manually edit only angular.json. So thanks! :) – Kasper

Answer 10

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

Vanscoy

Answer 11

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"

Vikki

This solution is not working for me. getting "Invalid character" from vendor.js in IE11 browser console. have tried all the solutions that are in this page. struggling from 3 days. any help would be much appreciated. for more about issue description and project details stackoverflow.com/questions/64386606/ – Woolly

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

Chaeta

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

Terbium