web-dev-qa-db-fra.com

Angular 2/4/5 ne fonctionne pas dans IE11

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

Suivant les suggestions de quelqu'un, j'ai essayé ce pilote, posté par quelqu'un sur le dépassement de capacité de la pile, à la fois sur chrome et IE 11. Fonctionne correctement sur Chrome, mais échoue sur IE 11. Même erreur , bloqué en disant "Chargement ..."

Le lecteur 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 quant à la raison pour laquelle IE 11 ne parvient pas à exécuter l'application angulaire 2?

Je vous remercie!

angulartypescriptinternet-explorer
95
Pat Bone Crusher Laplante

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

La configuration actuelle est destinée aux 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. 
Ceci inclut également Firefox, bien que non mentionné.

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

Cela signifie que vous manuellement devez activer les bons remplissages pour que Angular fonctionne avec IE11 et les versions antérieures. 

Pour ce faire, allez dans polyfills.ts (dans le dossier src par défaut) et juste uncomment 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, il est donc facile à trouver.

Si vous rencontrez toujours des problèmes, vous pouvez rétrograder la propriété target à es5 dans tsconfig.json en tant que @MikeDub suggéré. Cela modifie la sortie de compilation de toutes les définitions es6 en définitions es5. Par exemple, les fonctions de flèche grasse (()=>{}) seront compilées en fonctions anonymes (function(){}). Vous pouvez trouver une liste des navigateurs compatibles avec es6 ici .

Remarques

@jackOfAll m’a demandé dans les commentaires si les polyfills IE11 étaient chargés même si l’utilisateur se trouvait dans un navigateur à feuilles persistantes qui n’en avait pas besoin. La réponse est oui, ils le sont! L'inclusion des polyfills IE11 fera passer votre fichier polyfill du ~162KB au ~258KB à compter 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 rencontrez des erreurs dans IE10 et les versions antérieures, entrez package.json dans votre version antérieure et rétrogradez webpack-dev-server pour le remplacer par 2.7.1. Les versions supérieures ne prennent plus en charge les versions "anciennes" IE.

163
Zze

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

Ajoutez le script suivant à votre code 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 numéro de github ici: https://github.com/angular/angular/issues/7144

19
Ashley Grenon

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

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
18
Alex W.

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';
8
Jigar Bhatt

À partir de février 2017

Avec un projet Angular-Cli, toutes les lignes du fichier polyfills.ts n'étaient déjà pas commentées, de sorte que tous les remplissages multiples é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 flèche lambda/flèche fat qui sont une fonctionnalité de 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 IE. Cette prise en charge a été uniquement introduite dans le nouveau navigateur Edge par Microsoft.

Cela se trouve sous src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
8
MikeDub

EDIT 2018/05/15: Ceci peut être réalisé avec un meta tag ; veuillez ajouter cette balise à votre index.html et ignorer ce post.

Ce n'est pas une réponse complète à la question (pour la réponse technique, reportez-vous à la réponse de @ Zze ci-dessus ), mais il y a une étape importante que nécessite d'ajouter:

LE MODE DE COMPATIBILITÉ

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

 enter image description here

7
Shotgun Ninja

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

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

in src\polyfills.ts sans commentaire:

/** 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';
7
Belen Martin

A partir de septembre 2017 (version du noeud = v6.11.3, version de npm = 3.10.10), voici ce qui a fonctionné pour moi (merci @Zze):

Éditez polyfills.ts et décommentez les importations nécessaires pour IE11.

Plus précisément, éditez polyfills.ts (situé dans le dossier src par défaut) et décommentez 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.js et 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 commenter sans quoi le traitement de polyfills.ts sera interrompu.

En tant que mot d’explication, les polyfills sont des éléments 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. (parce qu'il vise les navigateurs dits "à feuilles persistantes"; les dernières versions des navigateurs qui se mettent à jour automatiquement ).

6
Ekeko
  1. Décommentez 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';

Installez npm Pacakages Notez qu'il y a quelques commandes npm install dans les commentaires. Si vous utilisez une première version de l'interface de ligne de commande angulaire, il est également possible qu'une troisième version existe. 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

maintenant, ouvrez IE et rendez votre application et vérifiez :)

3
Ali

J'avais le même problème. Si vous avez activé Afficher les sites intranet dans Affichage de compatibilité, les polyfills.ts ne fonctionneront pas, vous devez toujours ajouter la ligne suivante, comme indiqué.

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
3
Ivan Lopez

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/[email protected] 
 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, ajoutez l’importation suivante:

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

changer tsconfig.json 

"target":"es5",

résolu mon problème

1
user3050538

Si aucune des autres solutions ne vous convient, il est utile 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é le dossier node_modules et trouvé de quel fichier la ligne est venue. 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é à la version 1.4.1, qui utilise ES5, le problème a été résolu.

1
typhon04

En 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`.
1
Kuldip D Gandhi

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

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

Vous devez juste supprimer les commentaires ci-dessous de polyfills.ts file

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 vont résoudre votre problème, s'il vous plaît laissez-moi savoir si quelque chose sera là. Merci!!!

0
S Tiwari

Si vous avez toujours 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 "includes" manquante:

import 'core-js/es7/array'
0
Christian

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 paquetages de mon projet, y compris les changements de version majeurs. Alors:

  1. Run npm obsolète
  2. Mettez à jour package.json avec le nombre indiqué dans la colonne en cours à partir des résultats (cela peut casser votre projet, soyez prudent)
  3. Lancer npm install
  4. Je me suis assuré que les feuilles de polyfilms n'étaient pas commentées, comme indiqué dans les autres réponses.

C'est tout. Je voudrais 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.

0
Jordan