How do I support Internet Explorer in an Angular 8 application?

When I generate a project with Angular CLI (8.0.0), I run ng serve, open the application up in Internet Explorer and I am presented with a blank screen.

I had a look at the polyfills.ts files and I uncommented the following lines:

    import 'classlist.js';
    import 'web-animations-js';

I've also removed all core.js imports as Angular 8 supports core.js 3.0 directly.

I've also ran npm i.

package.json:

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "classlist.js": "^1.1.20150312",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

EDIT:

browserlists:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

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

EDIT 2:

The console in Internet Explorer (11) shows the following errors:

polyfills.js: Syntax error (3168, 5) (line 3168 beginning) -> class Zone {

vendor.js: Syntax error (156, 1) (line 156 beginning) -> class PlatformLocation {

main.ts: Syntax error (95, 20) (points to the AppComponent)

What else do I need to do?

Solution 1:

According to this issue reply

You need to follow the following steps

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

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

In angular.json Under projects:yourAppName:architect:build:configurations, add

"es5": {
      "tsConfig": "./tsconfig.es5.json"
    }

and projects:yourAppName:architect:serve:configurations add

    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }

Remember to change yourAppName in app:build:es5 to yourAppName!

full path shown below

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig.es5.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }
  }
},

Run the serve with this configuration using the below command.

ng serve --configuration es5

Solution 2:

Go to "tsconfig.json" and use target: "es5" instead of "target": "es2015",

target which is inside compileOnSave\compilerOptions

Solution 3:

------Simple and Easy Way

You need to change 2 files, polyfills.ts and tsconfig.json respectively.

Just add Browser Polyfills in polyfills.ts

/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/promise';
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/weak-map';
import 'core-js/es6/set';

and in tsconfig.json change "target" to es5 like this

 "target": "es5",

instead of

"target": "es2015",

Solution 4:

Note: my original reply was from Reddit (https://www.reddit.com/r/Angular2/comments/buup6a/)

Check your tsconfig.json While upgrading to Angular 8, the target changed to es2015 for me, so with ng serve I encountered many many problems. While compiling, the dist folder had both es5 and es2015 versions.

Basically, compiling for production will create both versions for new and older browsers like IE11

To test IE11 on development environment, I created a dev environment in angular.json where I specified a copy of tsconfig which I called tsconfig.dev.json where the target is set to es5. Run ng s -c=dev and voilá!

Solution 5:

To support IE fully we had to pull in a special set of polyfills from the mdn-polyfills library.

To install them use

npm i -s mdn-polyfills

next add them to the polyfills.ts file like this

import 'mdn-polyfills/Object.assign';
import 'mdn-polyfills/Object.create';
import 'mdn-polyfills/Object.entries';
import 'mdn-polyfills/Array.from';
import 'mdn-polyfills/Array.of';
import 'mdn-polyfills/Array.prototype.find';
import 'mdn-polyfills/Array.prototype.forEach';
import 'mdn-polyfills/Array.prototype.filter';
import 'mdn-polyfills/Array.prototype.findIndex';
import 'mdn-polyfills/Array.prototype.includes';
import 'mdn-polyfills/String.prototype.includes';
import 'mdn-polyfills/String.prototype.repeat';
import 'mdn-polyfills/String.prototype.startsWith';
import 'mdn-polyfills/String.prototype.endsWith';
import 'mdn-polyfills/String.prototype.padStart';
import 'mdn-polyfills/String.prototype.padEnd';
import 'mdn-polyfills/Function.prototype.bind';
import 'mdn-polyfills/NodeList.prototype.forEach';
import 'mdn-polyfills/Element.prototype.closest';
import 'mdn-polyfills/Element.prototype.matches';
import 'mdn-polyfills/MouseEvent';
import 'mdn-polyfills/CustomEvent';

after this you should stop experiencing many of the issues in IE.