Angular 2/4/5 funktioniert in IE11 nicht

124

Ich versuche herauszufinden, warum meine Angular 2-App beim Ausführen in IE 11 nicht mehr angezeigt wird.

Auf Anregung von jemandem habe ich diesen Plunker ausprobiert, der von jemandem mit Stapelüberlauf sowohl auf Chrome als auch auf IE 11 gepostet wurde. Funktioniert gut auf Chrome, schlägt jedoch auf IE 11 fehl.

Der Plunker lautet: 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>

Hat jemand eine Idee, warum IE 11 die Angular 2-App nicht ausführen kann?

Danke dir!

angular  typescript  internet-explorer 
— Pat Knochenbrecher Laplante
quelle
Die Antwort ist, vorerst 2.0.0-beta.0 zu verwenden.
— Pat Bone Crusher Laplante

Antworten:

187

Die neueste Version von angular ist standardmäßig nur für immergrüne Browser eingerichtet ...

Das aktuelle Setup ist für sogenannte "immergrüne" Browser; die letzten Versionen von Browsern, die sich automatisch aktualisieren. Dies umfasst Safari> = 10, Chrome> = 55 (einschließlich Opera), Edge> = 13 auf dem Desktop sowie iOS 10 und Chrome auf Mobilgeräten.
Dies schließt auch Firefox ein, obwohl nicht erwähnt.

Weitere Informationen zur Browserunterstützung sowie eine Liste der vorgeschlagenen Polyfills für bestimmte Browser finden Sie hier. https://angular.io/guide/browser-support#polyfill-libs

Dies bedeutet, dass Sie die richtigen Polyfills manuell aktivieren müssen, damit Angular in IE11 und darunter funktioniert.

Um dies zu erreichen, gehen Sie in polyfills.ts( srcstandardmäßig im Ordner) und kommentieren Sie einfach die folgenden Importe aus:

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

Beachten Sie, dass sich der Kommentar buchstäblich in der Datei befindet, sodass dieser leicht zu finden ist.

Wenn Sie weiterhin Probleme haben, können Sie die targetEigenschaft wie vorgeschlagen auf es5in herabstufen . Dadurch wird die Kompilierungsausgabe aller Definitionen in Definitionen geändert . Zum Beispiel werden fette Pfeilfunktionen ( ) zu anonymen Funktionen ( ) kompiliert . Eine Liste der von es6 unterstützten Browser finden Sie hier .tsconfig.json@MikeDubes6es5()=>{}function(){}

Anmerkungen

• In den Kommentaren wurde ich gefragt, @jackOfAllob IE11-Polyfills geladen werden, auch wenn sich der Benutzer in einem immergrünen Browser befindet, der sie nicht benötigt. Die Antwort lautet: Ja, das sind sie! Durch die Aufnahme der IE11-Polyfills wird Ihre Polyfill-Datei vom ~162KBbis ~258KBzum 8. August 17 verlängert. Ich habe in den Versuch investiert, dies zu lösen, aber es scheint derzeit nicht möglich zu sein.

• Wenn in IE10 und darunter Fehler auftreten, gehen Sie zu Ihnen package.jsonund führen Sie ein Downgrade webpack-dev-serverauf " 2.7.1Speziell" durch. Höhere Versionen unterstützen keine "älteren" IE-Versionen mehr.

— Zze
quelle
3
Mein Angular 5-Projekt hat auch den gleichen Fehler, auch wenn ich die Polyfüllung für den IE auskommentiert habe und im IE-Browser immer noch nicht funktionieren kann. Zu seltsam ...
— Abby
Kommentieren Sie alle genannten Importe aus und importieren Sie die darunter liegende NgClass. Installieren Sie abschließend "npm install --save classlist.js". Das hat in meinem Fall funktioniert.
— Vaibhav
2
@dudewad Ich habe experimentiert, zwei separate Bundles zu erstellen, eines explizit für IE11, und dieses Bundle dann in einen IE-bedingten Kommentar eingeschlossen, der verhindert hätte, dass es in Chrome durchkommt.
— Zze
1
@Zze gut, das ist sicherlich gründlich von dir. Schön, ich mag das.
— Dudewad
1
@Zze bedingte Kommentare wurden in IE10 entfernt, sie werden nur in IE5-9 unterstützt. Ihr IE-Bundle würde also nicht für IE10 + geladen, es sei denn, Sie haben speziell ein Benutzeragenten-Sniffing durchgeführt, um Ihr Bundle zur Laufzeit zur Seite hinzuzufügen.
— BMcminn
22

Ich hatte genau das gleiche Problem und keine der Lösungen funktionierte für mich. Fügen Sie stattdessen die folgende Zeile in der (Homepage) .html unter " <head>Fixed" hinzu.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Alex W.
quelle
In Anbetracht der Informationen aus diesem SO stackoverflow.com/questions/26346917/… scheint die Empfehlung zur Verwendung von X-UA-Compatible ungültig zu sein.
— Lubiluk
19

Ich bin heute auf dieses Problem gestoßen. Ich habe auf GitHub eine Lösung gefunden, für die keine spätere Beta-Version erforderlich ist.

Fügen Sie Ihrem HTML das folgende Skript hinzu:

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

Dies löste das Problem für mich. Weitere Informationen finden Sie im Github-Problem hier: https://github.com/angular/angular/issues/7144

— Ashley Grenon
quelle
2
Diese Lösung funktionierte nicht für mich :( ... [auf VS2015-Projekt läuft auf IE]
— Ceylan Mumun Kocabaş
12

Stand Februar 2017

Bei Verwendung eines Angular-Cli- Projekts waren alle Zeilen in der polyfills.tsDatei bereits unkommentiert, sodass bereits alle Polyfüllungen verwendet wurden.

Ich habe diese Lösung hier gefunden , um mein Problem zu beheben.

Um den obigen Link zusammenzufassen, IE unterstützt keine Lambda-Pfeil- / Fettpfeil- Funktionen, die eine Funktion von es6 sind . ( Dies ist der Fall, wenn polyfills.ts bei Ihnen nicht funktioniert .)

Lösung : Sie müssen es5 als Ziel festlegen, damit es in allen IE-Versionen ausgeführt werden kann. Die Unterstützung hierfür wurde nur im neuen Edge-Browser von Microsoft eingeführt.

Dies ist zu finden unter src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
— MikeDub
quelle
Diese Antwort ist sehr irreführend. Die Polyfills sind die Skripte, die IE 9 und höher mit den hier gezeigten ES6-Standards kompatibel machen: angle.io/docs/ts/latest/guide/browser-support.html Es spielt also keine Rolle, ob der Browser nativ Pfeilfunktionen unterstützt. Die Polyfills mildern dieses Problem vollständig.
— Zze
8
Wie ist das, was ich in meinem Fall erlebt habe ... irreführend? Die Polyfills waren bereits unkommentiert und haben das Problem, das ich in IE11 hatte, nicht behoben. Ich denke kaum, dass dies einer Ablehnung würdig ist.
— MikeDub
Nachdem ich dies noch einmal gelesen habe, verstehe ich, was Sie sagen wollen, aber die Art und Weise, wie es derzeit formuliert ist, klingt so .ts, als müssten Sie alle Ihre Dateien manuell ändern, indem Sie den fetten Pfeil auf anon funcs verwenden. Ich denke, Sie sollten aus diesem Link ein Zitat darüber herausschneiden, wie sich die Compilerausgabe unterscheidet, wenn Sie das Ziel des Ecma-Skripts ändern, wodurch das Problem fortan behoben wird.
— Zze
5
Außerdem ziele ich bereits auf es5 in meiner tsconfig und habe immer noch Probleme.
— Gh0st
1
@ MikeDub Ich habe versucht, Ihre Lösung zu verwenden, aber sie funktioniert nicht für IE11. Können Sie mir einen besseren Ansatz bieten?
— Prasanna Sasne
11

Sie müssen die Datei polyfills.ts für Ihre Zielbrowser anpassen, indem Sie die entsprechenden Abschnitte auskommentieren.

/** 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
quelle
1
Das ist toll. Danke dir.
— AtLeastTheresToast
10

Für mich mit iexplorer 11 und Angular 2 habe ich alle oben genannten Probleme behoben, indem ich zwei Dinge getan habe:

in index.html hinzufügen:

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

in src \ polyfills.ts Kommentar:

/** 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
quelle
1
Ja, das funktioniert für IE11, aber nicht für 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. Deaktivieren Sie einige Importe in der Datei 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';
Erweitern Sie das Snippet

Installieren von npm Pacakages Beachten Sie, dass die Kommentare einige npm-Installationsbefehle enthalten. Wenn Sie eine frühe Version von Angular CLI verwenden, gibt es möglicherweise auch eine dritte. Für Angular CLI-Versionen 7, 6 und 1.7 müssen Sie Folgendes ausführen:

npm install --save classlist.js

npm install --save Webanimationen-js

Öffnen Sie jetzt den IE und rendern Sie Ihre Anwendung und überprüfen Sie :)

— Ali
quelle
8

Ab September 2017 (Knotenversion = v6.11.3, npm-Version = 3.10.10) hat dies für mich funktioniert (danke @Zze):

Bearbeiten polyfills.tsund kommentieren Sie die für IE11 erforderlichen Importe.

Genauer gesagt, bearbeiten Sie polyfills.ts( srcstandardmäßig im Ordner) und kommentieren Sie einfach alle für IE11 erforderlichen Zeilen aus (die Kommentare in der Datei erklären genau, welche Importe für die Ausführung auf IE11 erforderlich sind).

Eine kleine Warnung: Achten Sie darauf, wenn Sie die Zeilen für classlist.jsund auskommentieren web-animations-js. Diese kommentierten Zeilen haben jeweils einen bestimmten Kommentar: Sie müssen die zugehörigen npm-Befehle ausführen, bevor Sie sie auskommentieren können. Andernfalls wird die Verarbeitung von polyfills.ts unterbrochen.

Zur Erklärung: Die Polyfills sind Codeteile, die eine Funktion in einem Webbrowser implementieren, die sie nicht unterstützt. Aus diesem Grund ist in der Standardkonfiguration von polyfills.ts nur eine minimale Anzahl von Importen aktiv (da dies auf die sogenannten "immergrünen" Browser abzielt ; die letzten Versionen von Browsern, die sich automatisch aktualisieren ).

— Ekeko
quelle
8

EDIT 2018/05/15 : Dies kann mit einem Meta-Tag erreicht werden ; Bitte fügen Sie dieses Tag zu Ihrer index.html hinzu und ignorieren Sie diesen Beitrag.

Dies ist keine vollständige Antwort auf die Frage (für die technische Antwort entnehmen Sie bitte @ Zze Antwort oben ), aber es ist ein wichtiger Schritt , dass Bedarf hinzugefügt werden:

KOMPATIBILITÄTSMODUS

Selbst wenn die entsprechenden Polyfills vorhanden sind, gibt es immer noch Probleme beim Ausführen von Angular 2+ -Apps mit den Polyfills in IE11. Wenn Sie die Site von einem Intranet-Host aus ausführen (dh wenn Sie sie unter http: // localhost oder einem anderen zugeordneten lokalen Domainnamen testen ), müssen Sie in den Einstellungen der Kompatibilitätsansicht die Option "Intranetsites in der Kompatibilitätsansicht anzeigen" deaktivieren. Da die Kompatibilitätsansicht von IE11 gegen einige der Konventionen verstößt, die in den ES5-Polyfüllungen für Angular enthalten sind.

Geben Sie hier die Bildbeschreibung ein

— Schrotflinte Ninja
quelle
1
Wenn Sie dieser Lösung folgen, müssen Sie dies auf allen Clients tun, auf denen Ihre Anwendung ausgeführt wird. Durch Hinzufügen eines speziellen Tags zu Ihrer HTML-Datei wird der Browser gezwungen, die neueste verfügbare Version anstelle des Kompatibilitätsmodus auszuführen. Beziehen
— Poly
2
Wenn Ihre App auf einem Intranet-Host bereitgestellt wird, überschreibt die Verwendung dieses Meta-Tags meiner Erfahrung nach nicht die Standardeinstellung von IE 11 für "Intranetsites in der Kompatibilitätsansicht anzeigen". Benutzer der Intranet-App müssen diese Option, die nicht ideal ist, weiterhin manuell deaktivieren. Ich suche derzeit nach einer Problemumgehung - möglicherweise eher zum Kompilieren auf ES5 als auf ES6.
— Kyle Vassella
6

Ich habe eine Angular4-Anwendung, auch für mich funktionierte sie nicht im IE11-Browser. Ich habe die folgenden Änderungen vorgenommen, jetzt funktioniert sie korrekt. Fügen Sie einfach den folgenden Code in die Datei index.html ein

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

Sie müssen nur die folgenden Zeilen aus der Datei polyfills.ts auskommentieren

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

Diese oben genannten 2 Schritte lösen Ihr Problem. Bitte lassen Sie mich wissen, ob etwas vorhanden ist. Vielen Dank!!!

— Sanjay Tiwari
quelle
Ich habe diese 2 Teile bereits unkommentiert, aber es funktioniert immer noch nicht. Haben Sie eine andere Lösung
— Menna Ramadan
5

Wenn Sie immer noch Probleme haben, dass nicht alle JavaScript-Funktionen funktionieren, fügen Sie diese Zeile in Ihre Polyfills ein. Es behebt die fehlende 'Werte'-Methode:

import 'core-js/es7/object';

Und diese Zeile behebt die fehlende "Includes" -Methode:

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

Ich hatte das gleiche Problem. Wenn Sie die Option zum Anzeigen von Intranetsites in der Kompatibilitätsansicht aktiviert haben, funktioniert die Datei polyfills.ts nicht. Sie müssen dennoch die folgende Zeile hinzufügen, wie bereits erwähnt.

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

Was für mich funktioniert hat, ist, dass ich die folgenden Schritte ausgeführt habe, um meine Anwendungsleistung in IE 11 zu verbessern. 1.) Fügen Sie in der Datei Index.html die folgenden CDNs hinzu

<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.) Fügen Sie in der Datei polyfills.ts den folgenden Import hinzu:

import 'core-js/client/shim';
— Gaurav Gupta
quelle
2

In 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
quelle
2

Wenn keine der anderen Lösungen für Sie funktioniert, lohnt es sich, die Ursache des Problems zu untersuchen. Es kann sein, dass ein npm-Modul direkt ES6-Code einfügt, der nicht transpiliert werden kann.

In meinem Fall hatte ich die

SCRIPT1002: Syntaxfehler vendor.js (114536,27) in der folgenden Zeile:

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

Ich habe den Ordner node_modules durchsucht und festgestellt, aus welcher Datei die Zeile stammt. Es stellte sich heraus, dass der Schuldige punycode.js war, das in seiner Version 2.1.0 ES6 direkt verwendet.

Nachdem ich es auf 1.4.1 heruntergestuft hatte, das ES5 verwendet, wurde das Problem gelöst.

— typhon04
quelle
1
Vielen Dank für deine Antwort. Obwohl es das Problem nicht gelöst hat, hat es mir geholfen, das Unruhestifter-Modul zu finden und den Autor über das Problem zu informieren.
— Lucifer63
2

So beheben Sie dieses Problem in Angular8

polyfills.ts auskommentieren import 'classlist.js'; und import 'web-animations-js';dann zwei Abhängigkeiten mit npm install --save classlist.jsund installieren npm install --save web-animations-js.

Update tsconfig.jsonmit"target":"es5",

ng serveFühren Sie dann die Anwendung aus und öffnen Sie sie im IE. Sie funktioniert

— Rijo
quelle
1

  1. Kommentar entfernen IE-Abschnitt in der src / polyfill.js,

    / ** IE10 und IE11 erfordern Folgendes für die NgClass-Unterstützung für SVG-Elemente * /

    import 'classlist.js';

  2. Wenn ein Build-Fehler für ein fehlendes Paket vorliegt,

    npm install classlist.js - sicher speichern

  3. Stellen Sie sicher, dass Sie die folgende Zeile einfügen, um den Standard-IE-Dokumentmodus festzulegen. Andernfalls wird es in Version 7 geöffnet

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

Ich habe jede Lösung in diesem Thread sowie einige andere ausprobiert, ohne Erfolg. Was dies für mich behoben hat, war, jedes Paket in meinem Projekt zu aktualisieren, einschließlich der wichtigsten Versionsänderungen. So:

  1. Führen Sie npm veraltet aus
  2. Aktualisieren Sie package.json mit der in der aktuellen Spalte angegebenen Nummer aus den Ergebnissen (dies kann Ihr Projekt beschädigen, seien Sie vorsichtig).
  3. Führen Sie die npm-Installation aus
  4. Stellen Sie sicher, dass ich auch die Polyfills unkommentiert habe, wie in den anderen Antworten angegeben.

Das ist es. Ich wünschte, ich könnte herausfinden, welche Bibliothek der Schuldige war. Der tatsächliche Fehler, den ich erhielt, war "Syntaxfehler" in vendor.js in Angular 6.

— Jordanien
quelle
0

Winkel 9 aus der Box sollte jetzt in IE11 absolut gut funktionieren.

Ich habe alle hier aufgeführten Vorschläge ausprobiert und keiner von ihnen hat funktioniert. Es gelang mir jedoch, eine bestimmte Bibliothek zu finden, in die ich importierte app.module( ZXingScannerModuleum genau zu sein). Wenn Ihre App in IE11 auf der ersten Seite fehlschlägt, entfernen Sie die Bibliotheken nacheinander und checken Sie IE11 ein. Bei allen Build-Warnfehlern wurde dies vollständig übersehen. Wenn Sie feststellen, dass dies der Fall ist, sollten Sie den Bereich Ihrer Site, der diese Bibliothek als faul geladenes Modul verwendet, unterteilen.

— Andrew Junior Howard
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.