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
quelle
Antworten:
Die neueste Version von
angular
ist standardmäßig nur für immergrüne Browser eingerichtet ...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
(src
standardmäßig im Ordner) und kommentieren Sie einfach die folgenden Importe aus: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
target
Eigenschaft wie vorgeschlagen aufes5
in 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
@MikeDub
es6
es5
()=>{}
function(){}
Anmerkungen
• In den Kommentaren wurde ich gefragt,
@jackOfAll
ob 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~162KB
bis~258KB
zum 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.json
und führen Sie ein Downgradewebpack-dev-server
auf "2.7.1
Speziell" durch. Höhere Versionen unterstützen keine "älteren" IE-Versionen mehr.quelle
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.quelle
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:
Dies löste das Problem für mich. Weitere Informationen finden Sie im Github-Problem hier: https://github.com/angular/angular/issues/7144
quelle
Stand Februar 2017
Bei Verwendung eines Angular-Cli- Projekts waren alle Zeilen in der
polyfills.ts
Datei 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
:quelle
.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.quelle
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:
in src \ polyfills.ts Kommentar:
quelle
ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)
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 :)
quelle
Ab September 2017 (Knotenversion = v6.11.3, npm-Version = 3.10.10) hat dies für mich funktioniert (danke @Zze):
Bearbeiten
polyfills.ts
und kommentieren Sie die für IE11 erforderlichen Importe.Genauer gesagt, bearbeiten Sie
polyfills.ts
(src
standardmäß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.js
und auskommentierenweb-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 ).
quelle
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.
quelle
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
Diese oben genannten 2 Schritte lösen Ihr Problem. Bitte lassen Sie mich wissen, ob etwas vorhanden ist. Vielen Dank!!!
quelle
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:
Und diese Zeile behebt die fehlende "Includes" -Methode:
quelle
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.
quelle
Ändern
tsconfig.json
löste mein Problem
quelle
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
2.) Fügen Sie in der Datei polyfills.ts den folgenden Import hinzu:
quelle
quelle
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:
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.
quelle
So beheben Sie dieses Problem in Angular8
polyfills.ts auskommentieren
import 'classlist.js';
undimport 'web-animations-js';
dann zwei Abhängigkeiten mitnpm install --save classlist.js
und installierennpm install --save web-animations-js
.Update
tsconfig.json
mit"target":"es5",
ng serve
Führen Sie dann die Anwendung aus und öffnen Sie sie im IE. Sie funktioniertquelle
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';
Wenn ein Build-Fehler für ein fehlendes Paket vorliegt,
npm install classlist.js - sicher speichern
Stellen Sie sicher, dass Sie die folgende Zeile einfügen, um den Standard-IE-Dokumentmodus festzulegen. Andernfalls wird es in Version 7 geöffnet
quelle
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:
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.
quelle
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
(ZXingScannerModule
um 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.quelle