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.
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.
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:
The Symptom
But, if we try to use Internet Explorer, we see something like this:
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.
The Cure
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.
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:
// 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:
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:
# 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'.
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.
ng build --prod
Notice that now, when you run the build, it is producing the ES5 bundles:
$\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 with npx. By the way, if you haven’t used npx, check out Kat Marchán’s article:
Introducing npx: an npm package runner
After building you can run:
cd .\dist\ie-test\
npx local-web-server
This serves up your Angular application. Point Internet Explorer at it and you should see:
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 in Development
However, if you use:
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:
- Modify the tsconfig.json file.
- 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:
{
"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:
"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
Summary
Supporting Internet Explorer in Angular is easy if you just remember where to find the polyfills.ts and browserslist files.
Top comments (1)
How about animations on IE?)