web-dev-qa-db-fra.com

Comment rendre Angular 8 compatible avec IE11?

Je suis passé à Angular 8 en utilisant ng update. Il a exécuté ses scripts de migration qui, entre autres, ont supprimé les importations es6/es7 dans polyfills.ts. D'après ce que j'ai lu, Angular créera une version spéciale pour les navigateurs plus anciens (y compris IE11) et je n'ai plus à me soucier des polyfills? J'ai mis à jour browserlist pour être not IE 9-10 au lieu de not IE 9-11 à (je présume) un indice qu'il devrait créer les polyfills appropriés.

Malheureusement, après avoir exécuté ng build, J'obtiens des erreurs liées au polyfill, par exemple. Reflect.getMetadata is not a function et Object doesn't support property or method 'includes'. J'ai essayé de replacer les importations reflect et array dans les polyfills et de contourner ces erreurs, mais j'en reçois d'autres. Quel est le problème? Suis-je censé inclure des polyfills ou non?

Comment faire fonctionner Angular 8 avec IE11?

angularangular-clipolyfills
12
adamdport

Une façon de faire fonctionner IE 11 avec Angular 8 consiste à désactiver chargement différentiel.

Procédez comme suit:

  1. Mettre à jour tsconfig.json avec "target": "es5"
  2. Mettre à jour polyfills.ts avec import 'core-js'; // core-js@^3.1.4
10
Christopher Taleck

Si vous souhaitez servir votre application aux navigateurs ES5 comme IE11 ainsi qu'aux navigateurs ES2015 + modernes comme Chrome et Firefox, ajoutez une configuration de construction supplémentaire à votre angular.json pour servir le bundle ES5 de votre application.

  1. Ajoutez une nouvelle configuration "es5" à la section architect de angular.json:
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "es5" : {
              "tsConfig": "tsconfig.app.es5.json"
            }
          }
        },
        "serve": {
          "configurations": {
            "es5": {
              "browserTarget": "my-app:build:es5"
}}}}}}}
  1. Créer tsconfig.app.es5.json aux côtés de angular.json:
{
    "extends": "./tsconfig.app.json",
    "compilerOptions": {
        "target": "es5"
    }
}
  1. Mettez à jour browserslist pour activer IE 11 support. Assurez-vous que la liste des navigateurs se trouve dans le répertoire racine de votre application, à côté du angular.json fichier. Par exemple:
not IE 9-10 # For IE 9-11 support, remove 'not'.
IE 11
  1. Ajoutez un nouveau script de démarrage à package.json pour utiliser la configuration ES5 que vous avez créée à l'étape 1:
"scripts": {
  "build": "ng build",
  "buildES5": "ng build --configuration=es5",
  "start": "ng serve",
  "startES5": "ng serve --configuration=es5",
}

Vous pouvez désormais créer et diffuser votre application pour les navigateurs hérités qui ne prennent en charge que ES5 ou les navigateurs modernes qui prennent en charge ES2015 +:

  • npm run build crée votre application pour les navigateurs modernes
  • npm run buildES5 crée votre application pour les anciens navigateurs
  • npm run start crée et sert votre application pour les navigateurs modernes
  • npm run startES5 crée et sert votre application pour les anciens navigateurs
3
Brian De Sousa

Si tu veux ng serve pour construire l'application pour "es5" par défaut.

angular.json

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

liste de navigateurs

...
IE 11
not IE 9-10

tsconfig-es5.app.json

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

J'ai résolu mon polyfill.ts problèmes avec IE 11 en procédant comme suit:

  1. Courir npm install --save web-animations-js
  2. Décommenter la ligne import 'web-animations-js' à l'intérieur polyfill.ts
  3. Modifiez la valeur de target de 'es2015' à 'es5' à l'intérieur tsconfig.json.

IE 11 nécessite 'es5'.

0
sosNiLa