Angular 2/4/5 ne fonctionne pas dans IE11

124

J'essaie de comprendre pourquoi mon application angular 2 est bloquée sur l'affichage de Chargement ... lors de l'exécution dans IE 11.

Suite à la suggestion de quelqu'un, j'ai essayé ce plunker, posté par quelqu'un sur le débordement de pile, sur Chrome et IE 11. Fonctionne bien sur Chrome, mais échoue sur IE 11. Même erreur, coincé en disant "Chargement ..."

Le plunker est: https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Router Sample</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
      System.import('src/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

Quelqu'un a-t-il une idée de la raison pour laquelle IE 11 ne parvient pas à exécuter l'application angular 2?

Je vous remercie!

angular  typescript  internet-explorer 
— Pat Bone Crusher Laplante
source
La réponse est d'utiliser 2.0.0-beta.0 pour le moment.
— Pat Bone Crusher Laplante

Réponses:

187

La dernière version de angular n'est configurée que pour les navigateurs à feuilles persistantes par défaut ...

La configuration actuelle concerne les navigateurs dits "à feuilles persistantes"; les dernières versions des navigateurs qui se mettent à jour automatiquement. Cela inclut Safari> = 10, Chrome> = 55 (y compris Opera), Edge> = 13 sur le bureau et iOS 10 et Chrome sur mobile.
Cela inclut également Firefox, bien que cela ne soit pas mentionné.

Voir ici pour plus d'informations sur la prise en charge des navigateurs ainsi qu'une liste de polyfills suggérés pour des navigateurs spécifiques. https://angular.io/guide/browser-support#polyfill-libs

Cela signifie que vous devez activer manuellement les polyfills corrects pour que Angular fonctionne dans IE11 et les versions antérieures.

Pour ce faire, allez dans polyfills.ts(dans le srcdossier par défaut) et décommentez simplement les importations suivantes:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/set';

Notez que le commentaire est littéralement dans le fichier, donc c'est facile à trouver.

Si vous rencontrez toujours des problèmes, vous pouvez rétrograder la targetpropriété es5en tsconfig.jsoncomme @MikeDubsuggéré. Cela change la sortie de compilation de toutes les es6définitions en es5définitions. Par exemple, les fonctions de grosse flèche ( ()=>{}) seront compilées en fonctions anonymes ( function(){}). Vous pouvez trouver une liste des navigateurs pris en charge par es6 ici .

Remarques

• On m'a demandé dans les commentaires @jackOfAllsi les polyfills IE11 sont chargés même si l'utilisateur est dans un navigateur à feuilles persistantes qui n'en a pas besoin. La réponse est, oui, ils le sont! L'inclusion des polyfills IE11 prendra votre fichier polyfill du au ~162KBà ~258KBpartir du 8 août 17. J'ai investi pour essayer de résoudre ce problème, mais cela ne semble pas possible pour le moment.

• Si vous obtenez des erreurs dans IE10 et ci - dessous, allez dans vous package.jsonet downgrade webpack-dev-serverà 2.7.1particulier. Les versions supérieures à cela ne prennent plus en charge les «anciennes» versions d'IE.

— Zze
source
3
Mon projet angular 5 a également la même erreur même si j'ai décommenté le polyfill pour IE, ne peut toujours pas fonctionner dans le navigateur IE. Trop étrange ....
— Abby
Décommentez toutes les importations mentionnées et importez NgClass en dessous. Enfin, installez "npm install --save classlist.js". Cela a fonctionné dans mon cas.
— Vaibhav
2
@dudewad J'essayais de créer 2 bundles séparés, un explicitement pour IE11, puis d'envelopper ce bundle dans un commentaire conditionnel IE qui l'aurait empêché de passer dans Chrome.
— Zze
1
@Zze bien, c'est certainement minutieux de votre part. Bien, j'aime ça.
— dudewad
1
Les commentaires conditionnels @Zze ont été supprimés dans IE10, ils ne sont pris en charge que dans IE5-9. Ainsi, votre bundle IE ne serait pas chargé pour IE10 +, sauf si vous avez spécifiquement fait un sniffing d'agent utilisateur pour ajouter votre bundle à la page au moment de l'exécution.
— bmcminn
22

J'ai eu exactement le même problème et aucune des solutions n'a fonctionné pour moi. Au lieu de cela, l'ajout de la ligne suivante dans le (page d'accueil) .html sous <head>corrigé.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Alex W.
source
Compte tenu des informations de ce SO stackoverflow.com/questions/26346917/… , la recommandation d'utiliser X-UA-Compatible semble être invalide.
— Lubiluk
19

J'ai rencontré ce problème aujourd'hui. J'ai trouvé une solution sur GitHub qui ne nécessite pas de passer à une version ultérieure de la bêta.

Ajoutez le script suivant à votre html:

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

Cela a résolu le problème pour moi. Pour plus de détails, vous pouvez suivre le problème github ici: https://github.com/angular/angular/issues/7144

— Ashley Grenon
source
2
cette solution n'a pas fonctionné pour moi :( ... [sur le projet VS2015 fonctionnant sur IE]
— Ceylan Mumun Kocabaş
12

À partir de février 2017

En utilisant un projet Angular-Cli , toutes les lignes du polyfills.tsfichier étaient déjà décommentées, donc tous les polyfills étaient déjà utilisés.

J'ai trouvé cette solution ici pour résoudre mon problème.

Pour résumer le lien ci-dessus, IE ne prend pas en charge les fonctions de flèche lambda / grosse flèche qui sont une fonctionnalité d' es6 . ( C'est si polyfills.ts ne fonctionne pas pour vous ).

Solution : vous devez cibler es5 pour qu'il s'exécute dans toutes les versions d'IE, la prise en charge de cela n'a été introduite que dans le nouveau navigateur Edge de Microsoft.

Cela se trouve sous src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
— MikeDub
source
Cette réponse est très trompeuse. Les polyfills sont les scripts qui rendent IE 9 et supérieur compatible avec les normes ES6 comme on le voit ici: angular.io/docs/ts/latest/guide/browser-support.html Donc, peu importe si le navigateur prend en charge nativement les fonctions fléchées, les polyfills atténuent entièrement ce problème.
— Zze le
8
En quoi ce que j'ai vécu dans mon cas est-il ... trompeur? Les polyfills n'étaient déjà pas commentés et ils n'ont pas résolu le problème que je rencontrais dans IE11. Je pense à peine que cela mérite un vote défavorable.
— MikeDub
Après avoir relu ceci, je comprends ce que vous essayez de dire, mais la façon dont il est actuellement libellé, il semble que vous deviez modifier manuellement tous vos .tsfichiers en passant d'une grosse flèche à une fonction anon. Je pense que vous devriez extraire une citation de ce lien sur la façon dont la sortie du compilateur est différente si vous modifiez la cible du script ecma, ce qui atténue désormais le problème.
— Zze
5
De plus, je cible déjà es5 dans mon tsconfig et j'ai toujours des problèmes.
— gh0st
1
@MikeDub J'ai essayé d'utiliser votre solution mais cela ne fonctionne pas pour IE11. Pouvez-vous me fournir une meilleure approche.
— Prasanna Sasne
11

Vous devrez ajuster le fichier polyfills.ts pour vos navigateurs cibles en décommentant les sections appropriées.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
— Jigar Bhatt
source
1
C'est bien. Je vous remercie.
— AtLeastTheresToast
10

Pour moi, avec iexplorer 11 et Angular 2, j'ai résolu tous les problèmes ci-dessus en faisant 2 choses:

dans index.html ajoutez:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

dans src \ polyfills.ts décommenter:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
— Belen Martin
source
1
Oui, cela fonctionne pour IE11 mais pas pour IE10:ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)
— Junior Mayhé
10
  1. Annulez le commentaire de certaines importations dans le fichier polyfill.ts.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
Développer l'extrait

Installer npm Pacakages Remarquez qu'il y a des commandes d'installation npm dans les commentaires. Si vous utilisez une première version de Angular CLI, il peut également y en avoir une troisième. Pour les versions 7, 6 et 1.7 de la CLI angulaire, vous devez exécuter:

npm install --save classlist.js

npm install --save web-animations-js

ouvrez maintenant IE et effectuez le rendu de votre application et vérifiez :)

— Ali
source
8

Depuis septembre 2017 (version du nœud = v6.11.3, version npm = 3.10.10), voici ce qui a fonctionné pour moi (merci @Zze):

Modifiez polyfills.tset supprimez les commentaires des importations nécessaires pour IE11.

Plus précisément, éditez polyfills.ts(situé dans le srcdossier par défaut) et décommentez simplement toutes les lignes requises pour IE11 (les commentaires à l'intérieur du fichier expliquent exactement quelles importations sont nécessaires pour s'exécuter sur IE11).

Un petit avertissement: faites attention lorsque vous décommentez les lignes pour classlist.jset web-animations-js. Ces lignes commentées ont chacune un commentaire spécifique: vous devez exécuter les commandes npm associées avant de les décommenter ou le traitement de polyfills.ts sera interrompu.

En guise d'explication, les polyfills sont des morceaux de code qui implémentent une fonctionnalité sur un navigateur Web qui ne la prend pas en charge. C'est pourquoi, dans la configuration par défaut de polyfills.ts, seul un ensemble minimal d'importations est actif (car il vise les navigateurs dits "persistants"; les dernières versions de navigateurs qui se mettent à jour automatiquement ).

— Ekeko
source
8

EDIT 2018/05/15 : Ceci peut être réalisé avec une balise meta ; veuillez ajouter cette balise à votre index.html et ne pas tenir compte de ce message.

Ce n'est pas une réponse complète à la question (pour la réponse technique, veuillez vous référer à la réponse de @ Zze ci-dessus ), mais il y a une étape importante qui doit être ajoutée:

LE MODE DE COMPATIBILITÉ

Même avec les polyfills appropriés en place, il y a toujours des problèmes avec l'exécution des applications Angular 2+ en utilisant les polyfills sur IE11. Si vous exécutez le site depuis un hôte intranet (c'est-à-dire si vous le testez sur http: // localhost ou un autre nom de domaine local mappé), vous devez accéder aux paramètres d'affichage de compatibilité et décocher "Afficher les sites intranet dans l'affichage de compatibilité", puisque la vue de compatibilité d'IE11 enfreint quelques-unes des conventions incluses dans les polyfills ES5 pour Angular.

entrez la description de l'image ici

— Fusil de chasse Ninja
source
1
Si vous suivez cette solution, vous devez le faire sur tous les clients exécutant votre application. L'ajout d'une balise spéciale à votre fichier html force le navigateur à s'exécuter dans la dernière version disponible au lieu du mode de compatibilité. Reportez-vous à la réponse suivante pour trouver la balise: stackoverflow.com/a/47777695/4628364
— Poly
2
D'après mon expérience, si votre application est servie sur un hôte intranet, l'utilisation de cette balise meta ne remplace pas le paramètre par défaut d'IE 11 sur «Afficher les sites intranet dans la vue de compatibilité». Les utilisateurs de l'application intranet devront toujours entrer et décocher manuellement cette option, ce qui est loin d'être idéal. Je recherche actuellement une solution de contournement - peut-être en compilant vers ES5 plutôt que ES6.
— Kyle Vassella
6

J'ai une application Angular4, même pour moi aussi cela ne fonctionnait pas dans le navigateur IE11, j'ai fait les modifications ci-dessous, maintenant cela fonctionne correctement. Ajoutez simplement le code ci-dessous dans le fichier index.html

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Il vous suffit de décommenter ces lignes ci-dessous du fichier polyfills.ts

import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Ces 2 étapes ci-dessus résoudront votre problème, veuillez me faire savoir si quelque chose sera là. Merci!!!

— Sanjay Tiwari
source
J'ai déjà ces 2 parties non commentées mais cela ne fonctionne toujours pas, avez-vous une autre solution
— Menna Ramadan
5

Si vous avez encore des problèmes que toutes les fonctions JavaScript ne fonctionnent pas, ajoutez cette ligne dans vos polyfills. Il corrige la méthode des 'valeurs' manquantes:

import 'core-js/es7/object';

Et cette ligne corrige la méthode manquante 'includes':

import 'core-js/es7/array'
— Christian
source
4

J'avais le même problème, si vous avez activé Afficher les sites intranet dans la vue de compatibilité, le polyfills.ts ne fonctionnera pas, vous devez toujours ajouter la ligne suivante comme cela a été dit.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Ivan Lopez
source
2

Ce qui a fonctionné pour moi, c'est que j'ai suivi les étapes suivantes pour améliorer les performances de mon application dans IE 11 1.) Dans le fichier Index.html, ajoutez les CDN suivants

<script src="https://npmcdn.com/angular2@2.0.0- 
 beta.17/es6/dev/src/testing/shims_for_IE.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

2.) Dans le fichier polyfills.ts et ajoutez l'importation suivante:

import 'core-js/client/shim';
— gaurav gupta
source
2

Dans polyfills.ts

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';

import 'core-js/es6/array';
import 'core-js/es7/array';

import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
— Kuldip D Gandhi
source
2

Si aucune des autres solutions ne fonctionne pour vous, il vaut la peine de rechercher la source du problème. Il se peut qu'un module npm insère directement du code ES6, qui ne peut pas être transpilé.

Dans mon cas, j'avais le

SCRIPT1002: Erreur de syntaxe vendor.js (114536,27) à la ligne suivante:

const ucs2encode = array => String.fromCodePoint(...array);

J'ai cherché dans le dossier node_modules et j'ai trouvé de quel fichier la ligne provenait. Il s'est avéré que le coupable était punycode.js qui, dans sa version 2.1.0, utilise directement ES6.

Après l'avoir rétrogradé à 1.4.1, qui utilise ES5, le problème a été résolu.

— typhon04
source
1
Merci beaucoup pour votre réponse. Bien que cela n'ait pas résolu le problème, cela m'a cependant aidé à trouver le module de fauteur de troubles et à informer son auteur du problème.
— lucifer63
2

Comment résoudre ce problème dans Angular8

polyfills.ts uncomment import 'classlist.js'; et import 'web-animations-js';ensuite installer deux dépendances en utilisant npm install --save classlist.jset npm install --save web-animations-js.

mettre tsconfig.jsonà jour avec"target":"es5",

puis ng serveexécutez l'application et ouvrez dans IE, cela fonctionnera

— Rijo
source
1

  1. Décommentez la section IE dans le src / polyfill.js,

    / ** IE10 et IE11 nécessitent les éléments suivants pour la prise en charge de NgClass sur les éléments SVG * /

    import 'classlist.js';

  2. Si une erreur de construction pour un package manquant, alors,

    npm install classlist.js --save-exact

  3. Assurez-vous d'inclure la ligne ci-dessous pour définir le mode de document IE par défaut. Sinon, il s'ouvrira dans la version 7

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Sudheer Muhammed
source
0

J'ai essayé toutes les solutions de ce fil ainsi que d'autres solutions, sans succès. Ce qui a fini par résoudre ce problème pour moi a été de mettre à jour tous les packages de mon projet, y compris les changements de version MAJEURS. Alors:

  1. Exécuter npm obsolète
  2. Mettez à jour package.json avec le numéro indiqué dans la colonne actuelle à partir des résultats (cela peut casser votre projet, soyez prudent)
  3. Exécutez l'installation de npm
  4. Je me suis assuré que j'avais également les polyfills non commentés, comme indiqué dans les autres réponses.

C'est tout. J'aurais aimé pouvoir identifier quelle bibliothèque était le coupable. L'erreur réelle que j'obtenais était «Erreur de syntaxe» dans vendor.js dans Angular 6.

— Jordan
source
0

Angular 9 hors de la boîte devrait fonctionner parfaitement dans IE11 maintenant.

J'ai essayé toutes les suggestions énumérées ici et aucune d'elles n'a fonctionné. Cependant, j'ai réussi à le retrouver dans une bibliothèque spécifique dans laquelle j'importais app.module( ZXingScannerModulepour être précis). Si votre application échoue dans IE11 sur la première page, essayez de supprimer les bibliothèques une par une et archivez IE11 - elle a été complètement manquée dans toutes mes erreurs d'avertissement de construction. Si vous trouvez que c'est le cas, envisagez de compartimenter la zone de votre site qui utilise cette bibliothèque comme un module chargé paresseusement.

— Andrew Junior Howard
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.