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 what I read, Angular will create a special build for older browsers (including IE11) and I don't have to worry about polyfills anymore? I updated browserlist to be not IE 9-10 instead of not IE 9-11 to (I presume) hint that it should build the appropriate polyfills.

Unfortunately, after running ng build, I get some polyfill related errors, eg. Reflect.getMetadata is not a function and Object doesn't support property or method 'includes'. I tried putting reflect and array imports back into polyfills and move past those errors, but I get others. What's the deal? Am I supposed to include polyfills or not?

How do I make Angular 8 work with IE11?

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 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