Angular 9 Application Not running on IE11

Question

Our team has created an angular 9 new project and it is working perfectly fine on Google Chrome and Firefox but on IE11 I cant see anything. I have tried everything on from the internet followed every blog related to this but I unable to achieve the goal.

Here is my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@app/*": ["src/app/*"],
      "@modules/*": ["src/app/modules/*"],
      "@services/*": ["src/app/services/*"],
      "@shared/*": ["src/app/shared/*"],
      "@env/*": ["src/environments/*"],
      "@mocks/*": ["mocks/*"],
      "@models/*": ["src/app/models/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig-es5.app.json

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

package.json

{
  "name": "connect-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 6574",
    "start:dev": "concurrently \"npm run mocks\" \"npm start\"",
    "mocks": "json-server --watch db.json --routes db.routes.json --port 6575",
    "build": "ng build --base-href /ng/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "storybook": "start-storybook -p 6576",
    "build-storybook": "build-storybook"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.1.9",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/localize": "~9.1.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "@ngx-gallery/core": "^5.0.0-beta.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/zingchart": "^2.8.0",
    "angular-gridster2": "^9.1.0",
    "angular2-uuid": "^1.1.1",
    "bootstrap": "^4.4.0",
    "classlist.js": "^1.1.20150312",
    "concurrently": "^5.2.0",
    "core-js": "^2.5.5",
    "flatpickr": "^4.6.3",
    "json-server": "^0.16.1",
    "moment": "^2.26.0",
    "ng2-flatpickr": "^9.0.0",
    "normalize.css": "^8.0.1",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.5.4",
    "shortcut-buttons-flatpickr": "^0.3.0",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zingchart": "^2.9.0",
    "zingchart-angular": "0.0.6",
    "zinggrid": "^1.2.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.7",
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@babel/core": "^7.10.3",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-docs": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-notes": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/angular": "^5.3.19",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "babel-loader": "^8.1.0",
    "codelyzer": "^5.1.2",
    "ember-cli-cors": "0.0.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

I have followed this link https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920

Also I have seen for others in the posts that they had some error in their console of IE11 but there is no as such any error in my Console window of IE11. Please check this screenshot of IE11.

pollyfills.ts

/***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';
/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */






/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  //Run `npm install --save classlist.js`.


 import 'core-js/es6/reflect';



/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.


/***************************************************************************************************
 * APPLICATION IMPORTS
 */

---------------EDIT--------------------

Ape

Have you looked at the pollyfills.js? There's some IE-specific stuff in there that you may want to uncomment. – Shower

@Shower that I have already uncommented.. – Ape

Anything strange in the network tab? – Ragland

I have edited my question and have added the network tab and pollyfils.ts – Ape

As I can see in your polyfills.js file, you have added the import for @angular/localize/init, which does not support for the IE11 browser as this function uses 'let' and 'const' to define the function. Remove the import of localize from your polyfills.js file and you can run your project in IE11 browser. – Venue

Answer 1

Have you edited the browserslist file? You should remove not before IE 9-11. The browserslist is like below:

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

I also made a new angular 9 app and it can work well in IE 11. I added a new tsconfig-es5.app.json file, updated angular.json configuration, edited browserslist then run ng serve --configuration es5. The result is like this. Besides, you don't need to uncomment in polyfills.ts.

My tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

My package.json:

{
  "name": "angular9",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

Predator

Yes I have edit the browserlist as well and I too made the tsconfig.app.json where I gave the es5 as configuration in order support js on IE also added the Meta tag but still no luck. – Ape

Please don't uncomment the polyfills in polyfills.ts. I tried that if I uncomment them and install the packages, it won't load in IE. Then you could clear IE cache and try again. – Predator

you mean to say I should comment out again the classlist.js and web-animations-js? – Ape

Yes, you could try to restore the polyfills.ts to its original state. In my polyfills.ts, there's only this line import 'zone.js/dist/zone'; uncommented. As far as I know, Angular 8+ doesn't need to uncomment polyfills.ts to make it compatible with IE. – Predator

I have done that. Now I'm getting some errors in IE. I have edited my question and added the images – Ape

It seems that your Angular app is not a new blank app. The issue seems not related to the configuration but some syntax not compatible with IE. I suggest you to provide a reproducibe sample through online code editor like StackBlitz or something so that we can have a test and see where the issue is. – Predator

Thanks @YuZhou along with es5 tsconfig file I had to also install core-js in order to run on IE11. npm i -S core-js and in the polyfills.js I add this line import 'core-js'; then it worked. – Yellowbird

Answer 2

Modifying the below two things will make it work (tested on both Angular 8 & 9 version).

• In browserslist file, change not IE 9-11 -> IE 9-11

• In tsconfig.json file, change "target": "es2015" -> "target": "es5"

Mostly, the above changes suffice. If you still get some error (may be due to more complex UI/UX), you can try modify the polyfills.ts file,

• Uncomment // import 'classlist.js'; and // import 'web-animations-js';
• Must npm install --save classlist.js web-animations-js

Scrobiculate

Answer 3

Please remove below line from your polyfills.js file.

**/***************************************************************************************************
 * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
 */
import '@angular/localize/init';**

And it will work fine in IE11 browser as well. As I have gone through some documentation it says that, localize is not compatible with es5.

Venue

Answer 4

if issue not resolved still, here is the steps

1. browserlists.ts (uncomment IE11)
2. tsconfig.ts (in target as "es5" and add in lib: "es5") "target": "es5", "lib": [ "es2018", "es5", "dom" ]

once done, ng build again before ng serve

Kilo

Answer 5

1.Add a property like below in angular.json file inside projects > architect > build:

"es5BrowserSupport": true

2.Change your target from "target": "es2015" to "target": "es5" in tsconfig.json file

Yggdrasil

Answer 6

Go to your polyfills.ts file and find the import statements commented out under the section /** IE9, IE10 and IE11 requires all of the following polyfills. */:

// import 'classlist.js';  // Run `npm install --save classlist.js`.

Uncomment the above import to have your app working with those IE browsers but don't forget to run the following command.

npm install --save classlist.js

You might be also required to uncomment the following import:

// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

And not to forget to run the following command:

npm install --save web-animations-js

If the above process does not work then you may do the following and check if it works:)

In browserslist file, you may replace not IE 9-11 with IE 9-11.

Also, in tsconfig.json file, you may replace "target": "es2015" (or whatever) with "target": "es5".

Transfiguration

Answer 7

Put below code to index.html file inside of head tag (projectName/src/index.html) and Rerun your application (ng serve)

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Gyroscope

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> – Gyroscope