Angular and Internet Explorer
Tags: angular, internetexplorer
Published: 2020-02-14 16:01:41

---
title: Angular and Internet Explorer
published: true
description: Supporting Internet Explorer as a browser for your Angular 8.x or Angular 9.x application.
tags: Angular, Internet Explorer
canonical_url: https://indepth.dev/angular-internet-explorer/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0sqbkemah2d04c2b1u8s.png
---

This article addresses supporting **Internet Explorer** as a browser for your **Angular 8.x or Angular 9.x application**. If you are using an earlier version of Angular, please see my [previous article on this topic](https://medium.com/angular-in-depth/angular-and-internet-explorer-5e59bb6fb4e9).

In this article we will discuss:

- Getting started with an **Angular CLI** application
- The error in **Internet Explorer**
- The steps necessary to support Internet Explorer in **Production**
- How to support Internet Explorer in **Development**

If you just want to make it work and **don’t care about the details**, you can scroll down to the section: [The Cure](#cure).

# Getting Started
First use **Angular CLI** to generate and serve a starter application:
```
ng new ie-test
cd ie-test
ng serve
```
Point basically any browser **except Internet Explorer** at: `http://localhost:4200` and you will see the basic Angular CLI application that we all know and love. In **Firefox** it looks like this:
![Basic Angular CLI application on FireFox](https://dev-to-uploads.s3.amazonaws.com/i/znveym82jmoggbo6svay.png)

# The Symptom
But, if we try to use **Internet Explorer**, we see something like this:
![The Symptom](https://dev-to-uploads.s3.amazonaws.com/i/8z2kwqrnh7jyp142bewl.png)

Well, it seems to be doing something because at least the title is correct. If we open the **Browser Console** and re-load the page, we see something like:
**Unspecified error**.
![Error in Internet Explorer Console](https://dev-to-uploads.s3.amazonaws.com/i/8tq8k73w28nv18hjg4vz.png)

<a name="cure"></a>
# The Cure 
To get Internet Explorer working we need to do the following steps:

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

Below are the details for each of these steps.

## Polyfill Imports
First open the polyfills file in your IDE or text editor:
`ie-test\src\polyfills.ts`

There are two commented out lines that you need to un-comment:
```text
// import 'classlist.js';  // Run `npm install --save classlist.js`.

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

## Install npm Packages
Notice there are some npm install commands in the comments. You need to run:
```text
npm install --save classlist.js
npm install --save web-animations-js
```

## Modify browserslist File
Open the browserslist file in your IDE or text editor:
`ie-test\browserslist`

The default file created by Angular CLI looks something like this:
```text
# 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:
```text
IE 9-11 # For IE 9-11 support, remove 'not'.
```
#Internet Explorer in Production
For now, Internet Explorer still won’t work with `ng serve`. There are a few more steps required.

However, if all you care about is supporting Internet Explorer in production, the previous steps are enough. You can prove this to yourself by doing a production build and pointing a web server at your **dist/ie-test** folder.
```text
ng build --prod
```
Notice that now, when you run the build, it is producing the ES5 bundles:
```text
$\ie-test> ng build --prod
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {0} runtime-es2015.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.2987770fde9daa1d8a2e.js (polyfills) 36.4 kB [initial] [rendered]
chunk {3} polyfills-es5.ef4b1e1fc703b3ff76e3.js (polyfills-es5) 123 kB [initial] [rendered]
chunk {1} main-es2015.77c5c44e21b70d1ec41a.js (main) 169 kB [initial] [rendered]
chunk {1} main-es5.77c5c44e21b70d1ec41a.js (main) 190 kB [initial] [rendered]
chunk {4} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]
Date: 2019-12-03T23:28:06.809Z - Hash: 89a94328c69b68370cb8 - Time: 43148ms
```
Now you can use a web server to test. For example, I will use [local-web-server](https://www.npmjs.com/package/local-web-server) with npx. By the way, if you haven’t used **npx**, check out [Kat Marchán’s](https://dev.to/zkat) article:
[Introducing npx: an npm package runner](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)

After building you can run:
```text
cd .\dist\ie-test\
npx local-web-server
```

This serves up your Angular application. Point **Internet Explorer** at it and you should see:
![Angular CLI application in Internet Explorer](https://dev-to-uploads.s3.amazonaws.com/i/5rjizmgz7zh5vjo3uwgv.png)

**NOTE:**
If you still don’t see your application you may need to turn off **Display intranet sites in Compatibility View** in your **Compatibility View Settings**.
![Internet Explorer Compatibility View](https://dev-to-uploads.s3.amazonaws.com/i/ttvgv5p8mqxtyocntzdl.png)

#Internet Explorer in Development
However, if you use:
```text
ng serve
```
you will still get the blank Internet Explorer. This is because `ng serve` doesn’t automatically generate the **ES5 bundle**.

There are a couple of ways to configure this:

1. Modify the **tsconfig.json** file.
2. Create an **ES5** configuration.

##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:
```json
{
  "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 the line: `target: es2015`. You can change it to `es5`. It will then look like this:
```json
"target": "es5",
```
Now you can run: `ng serve`

Point Internet Explorer at `http://localhost:4200` and you should see it working just fine.

##Creating an ES5 Configuration
If you don’t like the idea of directly modifying your tsconfig.json just so you can use Internet Explorer with ng serve, your can create an ES5 configuration.

I won’t go into detail about this here as **Ali Kamalizade** did a pretty good job of explaining it in his article:
[How To Fix Your Angular App When It’s Not Working in IE11](https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920)

#Summary
Supporting **Internet Explorer in Angular** is easy if you just remember where to find the **polyfills.ts and browserslist files**.