How do I make Angular 8 compatible with IE11?

14
votes

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?

4
angularangular-clipolyfills
you have that issue with ng serve ? - Fateh Mohamed
@FatehMohamed ng serve doesn't work on IE11, but that's by design. My problem is after running ng build. Just edited to reflect that. Thanks. - adamdport
Did you try with ng build --prod? The normal build which uses the JIT compiler requires the Reflect polyfill and will not work on IE11. - Avin Kavish
@AvinKavish no, but I ran it using the -c flag and specified a configuration that uses aot - adamdport
If I run npx browserlist I see IE11 in the list, so I don't think that's it, but I'll give it a try. - adamdport

4 Answers

11
votes

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

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"
}}}}}}}
  1. Create tsconfig.app.es5.json alongside angular.json:
{
    "extends": "./tsconfig.app.json",
    "compilerOptions": {
        "target": "es5"
    }
}
  1. 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
  1. 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
0
votes

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

0
votes

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