Angular and Internet Explorer

Supporting Internet Explorer in an Angular CLI application

Yes Angular CLI applications can support Internet Explorer

AngularInDepth is moving away from Medium. This article, its updates and more recent articles are hosted on the new platform inDepth.dev

You installed the Angular CLI and used it to generate your new application. But, when you try to view it in Internet Explorer (IE), you see nothing. Now what?

The bad news:
Angular CLI applications require a few more steps in order to support Internet Explorer.

The good news:
It’s really simple: un-comment a few imports and install a couple of npm packages.

In this article I will show you:

• Getting started with an Angular CLI application
• The error in Internet Explorer
• What actually causes the error
• The two steps necessary to support Internet Explorer

If you just want to make it work and don’t care about the details, you can scroll down to the section: The Cure.

Note:
This article has been updated to reflect Angular 7. However, it works exactly the same for Angular 5 and 6. Although, you may see some minor differences in the comments of the file polyfills.ts.

Getting Started

First use Angular CLI and have it 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 your application working. For example, in Chrome it looks like this:

The Symptom

However, if we try to use Internet Explorer, we see:

Well, it seems to be doing something because the title is at least correct. If we open the Browser Console and re-load the page, we see an error in _for-of.js that says: Exception thrown and not caught

So you are probably asking, “Todd, what causes this error?” Good question. The answer is…

The Disease

We see this error because there are a lot of commonly used parts of JavaScript that Internet Explorer just doesn’t support. This is especially true for array functions.

For example, look at the Mozilla Developer Network JavaScript Reference. You have it book marked in your Favorites Bar right? Specifically, let’s look at for…of under Statements & declarations. Scroll down to the bottom to the Browser Compatibility section.

We can see that IE doesn’t support for..of. Hence, it throws an error when the core Angular code tries to use it.

However, there’s no need to panic. Angular uses the core-js library by Denis Pushkarev (zloirock) to provide polyfills for all the stuff that Angular needs but IE doesn’t support. We just need to import it.

So now that we know the problem, let’s fix it!

The Cure

To get IE working there are basically two steps we need to do:

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

Polyfill Imports

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

Un-comment all the import lines in there. For me, the easy way is just to replace all
// import
with
import

After that mine looks like this:

Install npm Pacakages

Notice there are some npm install commands in the comments. If you are using an early version of Angular CLI, there may also be a third one. For Angular CLI versions 7, 6, and 1.7 you need to run:

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

Success

Now in the root of your project just run:

ng serve

Point Internet Explorer at: http://localhost:4200 and you will see your application working.

Summary

Supporting Internet Explorer in Angular is easy if you just remember where to find that polyfills.ts file.

Finally, take a minute to stop by the core-js GitHub project and give it a star.