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

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