webentwicklung-frage-antwort-db.com.de

Winkel 2/4/5 funktioniert nicht in IE11

Ich versuche herauszufinden, warum meine Winkel-2-App beim Laden von ... beim Laufen in IE 11 hängen bleibt.

Dem Vorschlag von jemandem folgend habe ich diesen Plunker ausprobiert, der von jemandem im Stack-Überlauf sowohl auf Chrome als auch auf IE 11 gepostet wurde. Funktioniert gut mit Chrome, schlägt aber an IE 11 fehl "Wird geladen..."

Der Plunker ist: 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 Ahnung, warum IE 11 die winklige 2-App nicht ausführen kann?

Vielen Dank!

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

Das aktuelle Setup ist für sogenannte "Evergreen" -Browser. die letzten Versionen von Browsern, die sich automatisch aktualisieren. Dazu gehören Safari> = 10, Chrome> = 55 (einschließlich Opera), Edge> = 13 auf dem Desktop und iOS 10 und Chrome für Mobilgeräte. 
Dies gilt auch für Firefox, wird jedoch nicht erwähnt.

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


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


Um dies zu erreichen, gehen Sie in polyfills.ts (standardmäßig im Ordner src) und geben Sie einfach uncomment die folgenden Importe ein:

/***************************************************************************************************
 * 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 der Kommentar buchstäblich in der Datei enthalten ist, so dass dieser leicht zu finden ist.

Wenn Sie immer noch Probleme haben, können Sie die target-Eigenschaft in es5 in tsconfig.json als @MikeDub vorgeschlagen nach unten stufen. Dies bedeutet, dass Sie die Kompilierungsausgabe aller es6-Definitionen in es5-Definitionen ändern. Beispielsweise werden Fettpfeilfunktionen (()=>{}) in anonyme Funktionen (function(){}) übersetzt. Eine Liste der von es6 unterstützten Browser finden Sie hier .


Anmerkungen

• Ich wurde in den Kommentaren von @jackOfAll gefragt, ob IE11-Polyfills geladen werden, auch wenn sich der Benutzer in einem immergrünen Browser befindet, der sie nicht benötigt. Die Antwort ist, ja sie sind! Die Aufnahme der IE11-Polyfills führt ab dem 8. August 17 zur Aktualisierung der Polyfill-Datei von ~162KB zu ~258KB. Ich habe in den Versuch investiert, dieses Problem zu lösen, es scheint jedoch zur Zeit nicht möglich zu sein.

• Wenn Sie Fehler in IE10 und darunter erhalten, gehen Sie in package.json und runterstufen von webpack-dev-server auf 2.7.1. Ältere Versionen unterstützen keine älteren IE - Versionen mehr.

163
Zze

Ich bin heute auf dieses Thema gestoßen. Ich habe auf GitHub eine Lösung gefunden, die nicht zu einer späteren Version der Beta führt.

Fügen Sie das folgende Skript zu Ihrer HTML-Datei hinzu:

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

Dies hat das Problem für mich gelöst. Für weitere Informationen können Sie die Github-Ausgabe hier lesen: https://github.com/angular/angular/issues/7144

19
Ashley Grenon

Ich hatte genau das gleiche Problem und keine der Lösungen funktionierte für mich. Durch Hinzufügen der folgenden Zeile in der (Homepage) .html unter <head> wurde das Problem behoben. 

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

Sie müssen die Datei polyfills.ts für Ihre Zielbrowser anpassen durch Kommentieren der entsprechenden Abschnitte.

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

Stand Februar 2017

Bei Verwendung eines Angular-Cli -Projekts waren alle Zeilen in der polyfills.ts-Datei bereits unkommentiert, sodass alle Polyfills bereits verwendet wurden.

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

Um den obigen Link zusammenzufassen, unterstützt IE keine Lambda-Pfeil-/Fettpfeil-Funktionen, die ein Merkmal von es6 sind. (Dies ist der Fall, wenn polyfills.ts für Sie nicht funktioniert).

Solution: Sie müssen es5 als Ziel angeben, damit sie in einer IE -Version ausgeführt werden kann. Die Unterstützung hierfür wurde nur im neuen Edge-Browser von Microsoft eingeführt.

Dies ist unter src/tsconfig.json zu finden:

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

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

Dies ist keine vollständige Antwort auf die Frage (für die technische Antwort siehe @Zze's Antwort oben ), aber es gibt einen wichtigen Schritt, den hinzufügen muss:

KOMPATIBILITÄTSMODUS

Selbst wenn die entsprechenden Polyfills vorhanden sind, gibt es immer noch Probleme beim Ausführen von Angular 2+-Apps mit den Polyfills auf IE11. Wenn Sie die Site von einem Intranet-Host aus ausführen (z. B. wenn Sie sie unter http: // localhost oder einem anderen zugeordneten lokalen Domänennamen testen), müssen Sie die Einstellungen der Kompatibilitätsansicht aufrufen und die Option "Intranetseiten anzeigen in" deaktivieren Compatibility View ", da die Kompatibilitätsansicht von IE11 einige der in den ES5-Füllungen für Angular enthaltenen Konventionen bricht.

 enter image description here

7
Shotgun Ninja

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

in index.html füge hinzu:

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

in src\polyfills.ts unkommentar:

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

Seit September 2017 (Knotenversion = v6.11.3, npm-Version = 3.10.10) funktionierte dies bei mir (danke @Zze):

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

Genauer gesagt, bearbeiten Sie polyfills.ts (standardmäßig im Ordner src) und kommentieren Sie alle für IE11 erforderlichen Zeilen aus (die Kommentare in der Datei erklären genau, welche Importe auf IE11 ausgeführt werden müssen).

Eine kleine Warnung: Seien Sie vorsichtig, wenn Sie die Zeilen für classlist.js und web-animations-js auskommentieren. Diese kommentierten Zeilen enthalten jeweils einen bestimmten Kommentar: Sie müssen die zugehörigen npm-Befehle ausführen, bevor Sie deren Kommentar aufheben oder die Verarbeitung von polyfills.ts unterbrochen wird.

Kurz gesagt, handelt es sich bei den polyfills um Teile des Codes, die ein Feature in einem Webbrowser implementieren, das es nicht unterstützt .. .. Deshalb ist in der Standardkonfiguration von polyfills.ts nur ein minimaler Satz von Importen aktiv. (weil es auf die sogenannten "Evergreen" -Browser ausgerichtet ist; die letzten Versionen von Browsern, die sich automatisch aktualisieren).

6
Ekeko
  1. Einige Importe in der Datei polyfill.ts können nicht kommentiert werden.

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

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

npm install --save classlist.js

npm install --save web-animations-js

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

3
Ali

Ich hatte das gleiche Problem. Wenn Sie Intranetseiten in Kompatibilitätsansicht anzeigen aktiviert haben, funktioniert polyfills.ts nicht. Sie müssen dennoch die folgende Zeile hinzufügen.

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

Für mich hat sich bewährt, dass ich die folgenden Schritte befolgt habe, um die Anwendungsperformance in IE 11 1 zu verbessern

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

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

tsconfig.json ändern 

"target":"es5",

mein Problem gelöst

1
user3050538

Wenn keine der anderen Lösungen für Sie geeignet ist, sollten Sie die Ursache des Problems 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 durchsuchte den Ordner node_modules und fand heraus, aus welcher Datei die Zeile stammt. Es stellte sich heraus, dass der Täter punycode.js war, der in seiner Version 2.1.0 ES6 direkt verwendet. 

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

1
typhon04

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

Ich habe eine Angular4-Anwendung, auch für mich funktionierte es nicht im IE11-Browser, ich habe die folgenden Änderungen vorgenommen, jetzt funktioniert es richtig ..__ Fügen Sie einfach folgenden Code in der Datei index.html hinzu

<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 zwei Schritte lösen Ihr Problem. Bitte lassen Sie mich wissen, ob etwas vorhanden ist. Vielen Dank!!!

0
S Tiwari

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 Methode "values": 

import 'core-js/es7/object';

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

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

Ich habe jede Lösung in diesem Thread sowie eine Reihe anderer Lösungen ausprobiert, ohne Erfolg. Am Ende wurde das Problem behoben, indem jedes Paket in meinem Projekt aktualisiert wurde, 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 angezeigten Anzahl von Ergebnissen (dies kann Ihr Projekt beschädigen, seien Sie vorsichtig)
  3. Führen Sie npm install aus
  4. Sichergestellt, dass ich die Polyfills auch unkommentiert hatte, wie in den anderen Antworten vermerkt.

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

0
Jordan