Angular 8 project not working in Microsoft Edge and IE11

Question

I need to make my Angular project work on both IE11 and Edge, but a very simple hello world is not even showing in these two browsers.

Here's what I did:

npm version:

$npm -v
6.10.2

Angular version:

$ng v
Angular CLI: 8.1.3
Node: 10.15.1
OS: win32 x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

I create a simple project

ng new ie-test

I install the needed packages as described in the polyfills.ts,

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

I uncomment the imports lines in polyfills.ts

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

And then run the application.

Works on Chrome and Firefox, but not in IE11 or Edge.

When I checked the console in the developer tools, I've found that the app-root tag is completely empty! And no errors are showing up.

Am I missing something?

Edge black and no error:

Edge empty app-root:

Chrome works fine:

EDIT : Update

When I deploy the app in tomcat it works (after building it with ng build --base-href=/ietest/).

But still not working with ng serve

Answer 1

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"
   }
   }
   },
   

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

   ng serve --configuration 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'.

Answer 2

You don't have to touch the polyfills directly anymore with Angular 8. There is a browserslist file inside the root directory of your Angular project. There you can specify which browser should be supported and which are not. You can check your browser with

npx browserslist

For example you can add

ie 6-8

to support Internet Explorer version 6 to 8. You can find a detailed list with all options here. This automatically imports the required polyfills and it also separates between modern and legacy browsers to ship only the necessary code, which is called Differential Loading. As a result you have es2015 and es5 bundles in your ./dist folder.

Answer 3

In the latest Angular version (V.12 or above), there will be a file called browserslistrc in the root location of your project, where you can mention the target browsers for your project.