1

I am new to Angular 8 and currently developing a web-app in it. It is working fine in Google Chrome and EDGE but it is not even being load in IE 11. I explored for the solution over the internet and tried some suggested solution.

What I tried is:

Attempt 01:

Pasted this lines of code in index.html

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

Attempt 02

Added these lines in polyfills.ts

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

Attempt 03

Included support of IE 9-11 in browserlist file.

But all in vain and I couldn't resolved this issue. Can someone please identify what am I doing wrong!

Arsman Ahmad
  • 2,000
  • 1
  • 26
  • 34
  • clear ie browser cache and try again – brk Nov 06 '19 at 10:32
  • I have tried that already. Even I stopped caching but it didn't worked. – Arsman Ahmad Nov 06 '19 at 10:35
  • have you tried changing your target in `tsconfig.json` from `es2015` to `es5`? there are several answers on SO dealing with that issues e.g.: https://stackoverflow.com/questions/56563742/how-do-i-make-angular-8-compatible-with-ie11 or – Arikael Nov 06 '19 at 10:40
  • In attempt 1, did you try to change from content="IE=edge" to content="IE=11"? – Paul Nov 06 '19 at 11:01
  • @Arikael I read somewhere that its not a good solution if you are working in `angular 8`. – Arsman Ahmad Nov 06 '19 at 11:23
  • it isn't but might be worth checking to see if that's the problem. Otherwise there is this comment -> https://stackoverflow.com/a/57368223/885338 – Arikael Nov 06 '19 at 11:43
  • @Arikael It works fine in this case. – Arsman Ahmad Nov 06 '19 at 13:01
  • Does this answer your question? [Angular 8 project not working in Microsoft Edge and IE11](https://stackoverflow.com/questions/57362323/angular-8-project-not-working-in-microsoft-edge-and-ie11) – Arikael Nov 06 '19 at 13:01

1 Answers1

2

By default in angular version 8, differential loading for ng build is enabled. However for ng test and ng serve, it only generates a single ES2015 build which cannot run in IE11.

There're two ways to have ES5 code during serve which make angular 8 app work in IE11.

  1. Disable differential loading completely. (Not recommended)

    You can turn differential loading off by changing the target from "es2015" to "es5" in your tsconfig.json.

  2. Have multiple configurations for serve.

    Create a new tsconfig tsconfig-es5.app.json next to tsconfig.app.json with the below contents:

    { 
 "extends": "./tsconfig.app.json",
 "compilerOptions": { 
 "target": "es5"   
  }
}

    In your angular.json add two new configuration section (es5 node) under the build and serve target to provide a new tsconfig.

    "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        ...
},
"configurations": {
"production": {
    ...
},
"es5": {
    "tsConfig": "./tsconfig-es5.app.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
    ...
},
"configurations": {
"production": {
...
},
"es5": {
    "browserTarget": "<your application name>:build:es5"
}
}
},

    Besides, the browserslist file content as below:

    > 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

    You can then run the serve with this configuration using the below command:

    ng serve --configuration es5
Zhi Lv
  • 18,845
  • 1
  • 19
  • 30