Angular 8.x / 9.x & Internet Explorer Not Working. Quick Solution!

#angular #ie

When it comes to web application Internet Explorer is always the bad boy (especially IE 11).

Angular 8 and above are not working on IE at all. Its really hard to test your application on IE, how the layout looks like and etc.

After you installed Angular 8 or Angular 9 when you run

ng serve

you will see a white page in Internet Explorer.

I will show you here how to fix that problem.

To get Internet Explorer working we need to do the following steps:

Un-comment some imports in the polyfill.ts file.
Install a couple of npm packages.
Modify the browserslist file.

Polyfill Imports

First, open the polyfills file in your IDE or text editor:
the file is found inside your project folder \src\polyfills.ts

There are two commented lines you need to un-comment:

// import 'classlist.js';  // Run `npm install --save classlist.js`.

// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

Install npm Packages

There are some

npm install

commands in the comments. You need to run:

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

Modify browserslist File

Open the browserslist file in your IDE or text editor:
the file is found inside your project folder \browserslist

The default file looks something like the below:

# 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
not IE 9-11 # For IE 9-11 support, remove 'not'.

You need to change that last line by removing the not. After you make the changes the last line should read:

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

Run on production

ng build --prod

After building you can run:

cd .\dist\project-folder\
npx local-web-server

Run on dev

ng serve

you will still get the blank Internet Explorer. This is because ng serve doesn’t automatically generate the ES5 bundle.

Do the below quick config:

Modify tsconfig.json

You can find your tsconfig.json file in the root of your Angular Workspace. Open it up in your IDE or text editor and you will see:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Notice that line:

target: es2015

. You can change it to es5. It will then look like this: