How do I make Angular 8 compatible with IE11?

Question

I upgraded to Angular 8 using ng update. It ran its migration scripts which (among other things) removed the es6/es7 imports in polyfills.ts. From

Answer 1

One way to get IE 11 to work with Angular 8 is to disable differential loading.

Do the following:

1. Update tsconfig.json with "target": "es5"
2. Update polyfills.ts with import 'core-js'; // core-js@^3.1.4

Answer 2

If you want ng serve to build the app for "es5" by default.

angular.json

"architect": {
  "build": {
    ...
    "configurations": {
      "development": {
        "tsConfig": "tsconfig-es5.app.json"
      },
      ...
    }
  },
  "serve": {
    ...
    "options": {
      "browserTarget": "bludesk-web:build:development"
    },
    ...
  }

browserlist

...
IE 11
not IE 9-10

tsconfig-es5.app.json

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

Answer 3

I have solved my polyfill.ts issues with IE 11 by doing the following:

1. Run npm install --save web-animations-js
2. Uncomment line import 'web-animations-js' inside polyfill.ts
3. Change target value from 'es2015' to 'es5' inside tsconfig.json.

IE 11 requires 'es5'.

Answer 4

If you want to serve your app to ES5 browsers like IE11 as well as modern ES2015+ browsers like Chrome and Firefox, add additional build configuration to your angular.json to serve your app's ES5 bundle.

1. Add a new "es5" configuration to the architect section of angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "es5" : {
              "tsConfig": "tsconfig.app.es5.json"
            }
          }
        },
        "serve": {
          "configurations": {
            "es5": {
              "browserTarget": "my-app:build:es5"
}}}}}}}

2. Create tsconfig.app.es5.json alongside angular.json:

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

3. Update browserslist to enable IE 11 support. Make sure browserslist is in the root directory of your app, alongside the angular.json file. For example:

not IE 9-10 # For IE 9-11 support, remove 'not'.
IE 11

4. Add a new start script to package.json to use the ES5 configuration you created in step 1:

"scripts": {
  "build": "ng build",
  "buildES5": "ng build --configuration=es5",
  "start": "ng serve",
  "startES5": "ng serve --configuration=es5",
}

Now you can build and serve your app for legacy browsers that only support ES5 or modern browsers that support ES2015+:

• npm run build builds your app for modern browsers
• npm run buildES5 builds your app for legacy browsers
• npm run start builds and serves your app for modern browsers
• npm run startES5 builds and serves your app for legacy browsers