Angular and Internet Explorer

Post Editor

Supporting Internet Explorer as a browser for your Angular 8.x or Angular 9.x application.

4 min read
post

Angular and Internet Explorer

Supporting Internet Explorer as a browser for your Angular 8.x or Angular 9.x application.

post
post
4 min read

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
Link to this section

First use Angular CLI to generate and serve a starter application:

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

Content imageContent image

The Symptom
Link to this section

But, if we try to use Internet Explorer, we see something like this:

Content imageContent image

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.

Content imageContent image

The Cure
Link to this section

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
Link to this section

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:

<>Copy
// import 'classlist.js'; // Run `npm install --save classlist.js`. // import 'web-animations-js'; // Run `npm install --save web-animations-js`.

Install npm Packages
Link to this section

Notice there are some npm install commands in the comments. You need to run:

<>Copy
npm install --save classlist.js npm install --save web-animations-js

Modify browserslist File
Link to this section

Open the browserslist file in your IDE or text editor:
ie-test\browserslist

The default file created by Angular CLI looks something like this:

<>Copy
# 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:

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

Internet Explorer in Production
Link to this section

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:

<>Copy
$\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:

<>Copy
cd .\dist\ie-test\ npx local-web-server

This serves up your Angular application. Point Internet Explorer at it and you should see:

Content imageContent image

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.

Content imageContent image

Internet Explorer in Development
Link to this section

However, if you use:

<>Copy
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
Link to this section

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:

<>Copy
{ "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:

<>Copy
"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
Link to this section

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
Link to this section

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

Share

About the author

author_image

Computer Scientist, Fujitsu Distinguished Engineer, and Senior Software Engineer http://t-palmer.github.io

author_image

About the author

Todd Palmer

Computer Scientist, Fujitsu Distinguished Engineer, and Senior Software Engineer http://t-palmer.github.io

About the author

author_image

Computer Scientist, Fujitsu Distinguished Engineer, and Senior Software Engineer http://t-palmer.github.io

Looking for a JS job?
Job logo
Fullstack (Angular, Node.js) Developer

Nextian Corp.

Worldwide
Remote
$84k - $107k
Job logo
Application Developer (Angular)

Karsun Solutions, LLC

Worldwide
Remote
$104k - $132k
Job logo
Angular Developer

Ryan Consulting Group

Worldwide
Remote
$77k - $80k
More jobs

Featured articles

Angularpost
17 January 202323 min read
Improve page performance and LCP with NgOptimizedImage

Explore mechanisms of NgOptimizedImage directive to improve overall page performance, targeting especially the Largest Contentful Paint (LCP) metric from Core Web Vitals. Enhance pages, make the best user experience and improve the web.