Angular App Empty Page in IE but works in Chrome

Question

I have started learning Angular 4 and wrote a default application using Angular CLI (NG New HelloWorld). When i write ng serve, and browse to http://localhost:4200/, the page loads fine in Chrome, However in IE-Edge, it opens up as an empty page. there is an error in the console window of IE which is SCRIPT5022: Exception thrown and not caught File: polyfills.bundle.js, Line: 859, Column: 36. Is this expected?

Screenshot of Empty Page in Internet Explorer

Screenshot of How it loads in Chrome

probably not normal... are there any console errors reported from the debug tools? — Michael Kang, Oct 10 '17 at 01:42
sorry yes there is an error thrown in the console window: Exception thrown and not caught: polyfills.bundle.js — Baahubali, Oct 10 '17 at 03:38
SCRIPT5022: Exception thrown and not caught File: polyfills.bundle.js, Line: 859, Column: 36 — Baahubali, Oct 10 '17 at 05:00

score 22 · Answer 1 · answered Jan 06 '20 at 13:29

22

I'm running angular 8 application in windows 10 with IE11.

I tried many solutions from stackoverflow. But didn't worked anything. then i tried same solutions separately, then i got to one conclusion.

This is my final solution. i don't for howmany people it will work. but for me it worked.

1. tsconfig.json

"target": "es2015"

changed to

"target": "es5"

2. Restart your applications. this Mandatory.

answered Jan 06 '20 at 13:29

Arunkumar Chinthapalli

351
2
6

The localhost app started working after adding the polyfills and changing the target variable as you stated above. Just letting you know - thanks! – Matt Feb 25 '20 at 10:48
2

To add, es2015 (es6) is not supported by IE hence the blank page issue. – Saurabh Gour Jan 26 '21 at 19:21

score 13 · Accepted Answer · edited Aug 28 '20 at 08:01

13

Found my answer here: Angular4 Application running issues in IE11.

Go to polyfills.ts file under the src/ folder and then as per the instructions in that file, uncomment (or add if there aren't these lines) the following lines:

/** 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';

Final notes

For the newer versions of core-js you need to change the import from '…/es6/…' to '…/es/…' (example: import 'core-js/es/symbol';).

edited Aug 28 '20 at 08:01

vcoppolecchia

398
1
4
18

answered Oct 10 '17 at 13:16

Baahubali

4,604
6
33
72

2

I also had to put `` in the header of `index.html` – takasoft Jun 26 '18 at 21:05
1

And it's polyfills.ts it's not in the js file – David Bradley Mar 04 '19 at 14:11
3

I uncommented the pollyfills and even tried adding meta in index.html but I am still facing same issue. – Cpt Kitkat Jul 31 '19 at 11:55

score 5 · Answer 3 · answered Apr 30 '20 at 08:04

step 1:

Include or uncomment the below lines in pollyfills.ts below which is under src folder


> import 'classlist.js';  import 'web-animations-js'; (window as
> any).__Zone_enable_cross_context_check = true; import
> 'zone.js/dist/zone';

Step 2:

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

Step 3:change the value of target from es2015 to es5 in your tsconfig.json file as below

"target": "es5",

Step 4:

Restart your application by doing ng serve

One more step- You need to also remove 'not' from 'not IE 9-11' in browserlist file. — DpkTheJavaCoder, Jul 23 '20 at 12:51

score 1 · Answer 4 · answered Oct 10 '17 at 01:43

1

what is your ie version.

at official site it's only support 9,10,11

see more : https://angular.io/guide/browser-support

answered Oct 10 '17 at 01:43

Nuttertools

120
1
6

Angular App Empty Page in IE but works in Chrome

4 Answers4

Final notes

Linked