Angular4 Application running issues in IE11

Question

I am building a Angular4 project using Angular CLI (1.1.2). It runs perfectly in Chrome (Version 59.0.3071.115) and firefox(54.0.1) but when I tried to use IE11 (Verison 11.0.9600.18738) nothings shows up and when I open the develper mode in IE, it shows me the following Error:

SCRIPT5022: Exception thrown and not caught
File: polyfills.bundle.js, Line: 829, Column: 34

And the detailed Error message is following:

Anyone knows how to solve this problem?

Thanks!

Solution 1

The default polyfills.ts file is commented and need to uncomment lines of code and run npm install the corresponding module. Then it will compatible with the IE11

Solution 2

To add more detail to @Zeqing's answer.

I uncommented the following line of codes in .\my-app\src\polyfills.ts :

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

Solution 3

I got this when I tried to add an es7 import. I simply replaced the es6 import with the es7 import. Turns out I needed both.

Gives me "Exception thrown and not caught" error:

import 'core-js/es7/array';

Works fine:

import 'core-js/es6/array';
import 'core-js/es7/array';

Comments

[Steve]

Worked for me when i added a Angular CLI template app in VS 2017

[adamdport]

You're probably importing more than you need and bloating your bundle size. As of March 2018, a new cli project will run fine on IE11 with all these commented out except es6/string and es6/array.

[dmitry_bond]

Sorry, what the modules should be installed to make it compatibe with IE11?

[Manohar Reddy Poreddy]

The file is .\my-app\src\polyfills.ts

[adamdport]

@dmitry_bond whichever ones you need. If you use [1,2,3].includes(3) for example, .includes would blow up in IE11 until you uncommented core-js/es6/array. If you don't use any es6 features, you don't need to include any of them and your app will still be compatible with IE11.

[gnzg]

Super helpful. Thank you :)