Angular 8.x / 9.x & Internet Explorer Not Working. Quick Solution!  
Tags: angular, ie
Published: 2020-02-13 17:25:30

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: 
```javascript
// 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:

```javascript
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:
```
"target": "es5",
```

Now you can run: 
```ng serve```

## Hooray! at this point IE should work.