How do I make Angular 8 compatible with IE11?

问题

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?

回答1:

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

Do the following:

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

回答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.

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

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

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

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

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

回答3:

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

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

IE 11 requires 'es5'.

来源：https://stackoverflow.com/questions/56563742/how-do-i-make-angular-8-compatible-with-ie11

标签

angular

angular-cli

polyfills