Wie unterstütze ich Internet Explorer in einer Angular 8-Anwendung?

77

Wenn ich ein Projekt mit Angular CLI (8.0.0) generiere, starte ich ng serve, öffne die Anwendung in Internet Explorer und es wird ein leerer Bildschirm angezeigt.

Ich habe mir die polyfills.tsDateien angesehen und die folgenden Zeilen auskommentiert:

    import 'classlist.js';
    import 'web-animations-js';

Ich habe auch alle Importe von core.js entfernt, da Angular 8 core.js 3.0 direkt unterstützt.

Ich bin auch gelaufen npm i.

package.json:

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "classlist.js": "^1.1.20150312",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

BEARBEITEN:

Browserlisten:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

EDIT 2:

Die Konsole in Internet Explorer (11) zeigt die folgenden Fehler an:

polyfills.js: Syntax error (3168, 5) (Zeile 3168 beginnt) ->class Zone {

vendor.js: Syntax error (156, 1) (Zeile 156 beginnt) ->class PlatformLocation {

main.ts: Syntax error (95, 20) (zeigt auf die AppComponent)

Was muss ich noch tun?

James Barrett
quelle
Ersetzen Sie in der not IE 9-11IE 9-11
Browserliste
3
EDIT: Der Bildschirm bleibt leer und produziert 3 Syntaxfehler in polyfills.js, vendor.jsund main.js@JBNizet
James Barrett
Ich verstehe - ich habe die Frage aktualisiert. @JBNizet
James Barrett

Antworten:

90

Nach dieser Ausgabe antworten

Sie müssen die folgenden Schritte ausführen

  1. Erstellen Sie eine neue tsconfig tsconfig.es5.json neben tsconfig.json mit dem folgenden Inhalt
{
 "extends": "./tsconfig.json",
 "compilerOptions": {
     "target": "es5" 
  }
}
  1. Fügen Sie in angular.json Unter projects:yourAppName:architect:build:configurationshinzu
"es5": {
      "tsConfig": "./tsconfig.es5.json"
    }

und projects:yourAppName:architect:serve:configurationshinzufügen

    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }

Denken Sie daran, IhrenAppName in app: build: es5 in yourAppName zu ändern !

vollständiger Pfad unten gezeigt

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig.es5.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }
  }
},
  1. Führen Sie den Serve mit dieser Konfiguration mit dem folgenden Befehl aus.
ng serve --configuration es5
Peien Wang
quelle
1
Wenn ng serve --configuration es5es nicht funktioniert, versuchen Sie esng s -c=es5
James Barrett
5
Ich musste den tsconfig-Pfad wie "tsConfig": "src/tsconfig-es5.app.json"
folgt
brauche ich das, wenn ich nur ng build benutze?
Andreas Hadjithoma
1
Dies funktioniert nicht, wenn ich mit ng build mache. Wie funktioniert meine App in der Entwicklung auf ie11?
Pranab VV
Wenn ich projects > projectName > architect > build > options > stylesin habe angular.json, muss ich es kopieren projects > projectName > architect > build > configurations > es5? Die Sache ist, dass meine Anwendung geladen wird, aber Stile fehlen.
Halfist
27

Gehen Sie zu "tsconfig.json" und verwenden Sie target: "es5" anstelle von "target": "es2015".

Ziel, das sich in compileOnSave \ compilerOptions befindet

prabhat.mishra2812
quelle
4
Dies deaktiviert die Funktion "Differentialbelastung" des Winkels. Die Bundle-Größe am Ende (die der Browser herunterlädt) ist also "immer (unabhängig vom Browser)" größer als benötigt.
Akcasoy
Diese Lösung funktioniert bei mir nicht. Abrufen von "Ungültiges Zeichen" von vendor.js in der IE11-Browserkonsole. habe alle Lösungen auf dieser Seite ausprobiert. kämpfen von 3 Tagen. Jede Hilfe wäre sehr dankbar. Weitere Informationen zur Problembeschreibung und zu den Projektdetails stackoverflow.com/questions/64386606/
Raju
8

------ Einfach und leicht

Sie müssen zwei Dateien ändern, polyfills.tsund tsconfig.jsonjeweils.

Fügen Sie einfach Browser Polyfills inpolyfills.ts

/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/promise';
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';

und im tsconfig.json Wechsel "Ziel" auf es5 wie folgt

 "target": "es5", 

anstatt

"target": "es2015",

Deva
quelle
7
Bitte beachten Sie, dass: core-js/es6/*nicht funktioniert, sondern verwenden core-js/es/*. wechseln Sie einfach es6zu es.
Nimatullah Razmjo
Diese Lösung funktioniert bei mir nicht. Abrufen von "Ungültiges Zeichen" von vendor.js in der IE11-Browserkonsole. habe alle Lösungen auf dieser Seite ausprobiert. kämpfen von 3 Tagen. Jede Hilfe wäre sehr dankbar. Weitere Informationen zur Problembeschreibung und zu den Projektdetails stackoverflow.com/questions/64386606/
Raju
@ Raju, bitte überprüfen Sie zuerst im Incongito-Modus, zweitens können Sie Ihr node_module löschen und npm cache clean -f dann npm installieren. hoffe das wird dir helfen
Deva
7

Hinweis: Meine ursprüngliche Antwort stammte von Reddit ( https://www.reddit.com/r/Angular2/comments/buup6a/ ).

Überprüfen Sie Ihre tsconfig.json Während des Upgrades auf Angular 8 wurde das Ziel für mich in es2015 geändert, sodass ich mit ng serve viele, viele Probleme hatte. Während des Kompilierens hatte der Ordner dist sowohl die Versionen es5 als auch es2015.

Grundsätzlich werden beim Kompilieren für die Produktion beide Versionen für neue und ältere Browser wie IE11 erstellt

Um IE11 in einer Entwicklungsumgebung zu testen, habe ich in angle.json eine Entwicklungsumgebung erstellt, in der ich eine Kopie von tsconfig angegeben habe, die ich tsconfig.dev.json genannt habe und in der das Ziel auf es5 festgelegt ist. Führen Sie ng s -c = dev und voilá aus!

Jie Lin
quelle
Genial, danke. Ich habe ein relevantes Problem im Angular-Cli-GitHub-Repository gefunden, in dem erwähnt wird, was Jie Lin gesagt hat: github.com/angular/angular-cli/issues/14455 Es ist ziemlich ärgerlich, dass dies nirgendwo dokumentiert ist
James Barrett,
Diese Lösung funktioniert bei mir nicht. Abrufen von "Ungültiges Zeichen" von vendor.js in der IE11-Browserkonsole. habe alle Lösungen auf dieser Seite ausprobiert. kämpfen von 3 Tagen. Jede Hilfe wäre sehr dankbar. Weitere Informationen zur Problembeschreibung und zu den Projektdetails stackoverflow.com/questions/64386606/
Raju
6

Um den IE vollständig zu unterstützen, mussten wir einen speziellen Satz von Polyfills aus der mdn-polyfills- Bibliothek ziehen.

Um sie zu installieren, verwenden Sie

npm i -s mdn-polyfills

Fügen Sie sie anschließend wie folgt zur Datei polyfills.ts hinzu

import 'mdn-polyfills/Object.assign';
import 'mdn-polyfills/Object.create';
import 'mdn-polyfills/Object.entries';
import 'mdn-polyfills/Array.from';
import 'mdn-polyfills/Array.of';
import 'mdn-polyfills/Array.prototype.find';
import 'mdn-polyfills/Array.prototype.forEach';
import 'mdn-polyfills/Array.prototype.filter';
import 'mdn-polyfills/Array.prototype.findIndex';
import 'mdn-polyfills/Array.prototype.includes';
import 'mdn-polyfills/String.prototype.includes';
import 'mdn-polyfills/String.prototype.repeat';
import 'mdn-polyfills/String.prototype.startsWith';
import 'mdn-polyfills/String.prototype.endsWith';
import 'mdn-polyfills/String.prototype.padStart';
import 'mdn-polyfills/String.prototype.padEnd';
import 'mdn-polyfills/Function.prototype.bind';
import 'mdn-polyfills/NodeList.prototype.forEach';
import 'mdn-polyfills/Element.prototype.closest';
import 'mdn-polyfills/Element.prototype.matches';
import 'mdn-polyfills/MouseEvent';
import 'mdn-polyfills/CustomEvent';

Danach sollten Sie aufhören, viele Probleme im IE zu haben.

Vinez
quelle
Können Sie bitte erklären, warum Sie mdn-polyfills installieren mussten?
Boldizsar
3
Speziell für Angular 8 kann das Problem durch den Import von MDN-Polyfills nicht behoben werden.
James Barrett
Beim Aktualisieren auf Angular 8 ist ein Problem mit IE 11 aufgetreten, bei dem meine App nicht geladen wurde, und ich habe einen Object.entriesFehler in meiner Konsole festgestellt . Befolgen Sie die Anweisungen hier und es hat mein Problem gelöst.
Doubleya
4
@doubleya Die ES 2015-Funktionen sollten sofort mit differenzieller Belastung in Angular 8 unterstützt werden. Sie müssen nur Polyfills für die ES2017-Funktionen wie Object.values ​​und Object.entries hinzufügen. Anstelle der mdn-Polyfills können Sie auch import 'core-js/es/object/values'und import 'core-js/es/object/entries'.
Cito
2

Auf target"es5" setzen, einrichten browserslist, das sollte reichen.

Weitere Informationen zum Thema finden Sie hier: https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/

yglodt
quelle
Diese Lösung funktioniert bei mir nicht. Abrufen von "Ungültiges Zeichen" von vendor.js in der IE11-Browserkonsole. habe alle Lösungen auf dieser Seite ausprobiert. kämpfen von 3 Tagen. Jede Hilfe wäre sehr dankbar. Weitere Informationen zur Problembeschreibung und zu den Projektdetails stackoverflow.com/questions/64386606/
Raju
2

Sie brauchen nur drei Änderungen in Winkel 8. Ändern Sie polyfills.ts und tsconfig.json. Fügen Sie eine neue Datei mit dem Namen tsconfig-es5.json mit dem folgenden Inhalt hinzu.

{
 "extends": "./tsconfig.json",
 "compilerOptions": {
 "target": "es5" 
 }
 }

Ändern Sie das Ziel in tsconfig.json als "Ziel": "es5",

Führen Sie den folgenden Befehl "ng serve" aus.

Anand
quelle
Diese Lösung funktioniert bei mir nicht. Abrufen von "Ungültiges Zeichen" von vendor.js in der IE11-Browserkonsole. habe alle Lösungen auf dieser Seite ausprobiert. kämpfen von 3 Tagen. Jede Hilfe wäre sehr dankbar. Weitere Informationen zur Problembeschreibung und zu den Projektdetails stackoverflow.com/questions/64386606/
Raju
2

Ich hatte ein ähnliches Problem und löste es mit den beiden folgenden Korrekturen. Möglicherweise sind Sie auf viele Posts gestoßen, in denen über Polyfill gesprochen wurde, aber dies ist nicht der einzige Grund dafür, dass der IE nicht wie erwartet funktioniert.

Lösung

Fügen Sie eine Eigenschaft "es5BrowserSupport" hinzu: true in der Datei angle.json. Der Pfad ist im Bild dargestellt. Geben Sie hier die Bildbeschreibung ein

Nun ändern Sie Ihr Ziel Eigenschaft auf „ ES5 “ in tsconfig.json Datei

Geben Sie hier die Bildbeschreibung ein

Eine vollständige Erklärung finden Sie hier

Durch Anwenden dieser beiden Korrekturen beginnt der IE, lokal (Debugging) und in der Produktion zu arbeiten.

Karthik
quelle
Dies funktionierte bei mir mit der Visual Studio .NET Core 3-Vorlage - nur das Ändern des Ziels in "es5" hat es geschafft - obwohl ich es für einen POC mit ziemlich geringer Funktionalität verwende
ewomack
Diese Lösung funktioniert bei mir nicht. Abrufen von "Ungültiges Zeichen" von vendor.js in der IE11-Browserkonsole. habe alle Lösungen auf dieser Seite ausprobiert. kämpfen von 3 Tagen. Jede Hilfe wäre sehr dankbar. Weitere Informationen zur Problembeschreibung und zu den Projektdetails stackoverflow.com/questions/64386606/
Raju
2

Ich möchte nur etwas hinzufügen, das mir nützlich war:

  1. Lesen Sie diesen Artikel aus der offiziellen Angular-Dokumentation: https://angular.io/guide/browser-support
  2. Ein weiterer Artikel, der Ihnen bei Ihrem Prozess helfen soll: https://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2
  3. Für mich der beste Artikel, der mir geholfen hat, alles zu verstehen, auch die beiden vorherigen: https://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1

Kurz gesagt, wenn Sie nicht mehr lesen möchten, habe ich die folgenden Schritte unternommen:

  • Deaktivieren Sie einige Importe in der Datei polyfill.ts.

    import 'classlist.js';

    'Webanimationen-js' importieren;

  • Installieren Sie einige npm-Pakete.

npm install --save classlist.js npm install --save web-animations-js

  • Ändern Sie die Browserlistendatei. Suchen Sie am Ende der Datei nach dieser Zeile:

    nicht IE 9-11 # Entfernen Sie für die Unterstützung von IE 9-11 'nicht'.

Bitte entfernen Sie das Wort "nicht" .

Fügen Sie zusätzlich einfach Browser-Polyfills in polyfills.ts hinzu

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

und im tsconfig.jsonWechsel "Ziel" auf es5 wie folgt

"Ziel": "es5",

anstatt

"Ziel": "es2015",

Lauf:

ng dienen - öffnen

Ich hoffe es kann dir helfen :)

Samack77
quelle
1

Das hat mich wirklich gestört , also habe ich ein nodeJs-Skript geschrieben , das die hier definierte " Problemumgehung " ermöglicht: ng github

Als Unternehmensentwickler, der Tonnen von eckigen Apps entwickelt, ist es nicht in Ordnung, die Entwicklung nur lokal gegen Chrome und Firefox durchzuführen. Jeder, der mehr als eine Minute lang Webentwickler ist, weiß, dass IE nicht glücklich sein wird, nur weil es in Chrome cool aussieht. OK, schimpfen Sie einfach über das Skript und stellen Sie es ab und zu im IE bereit. Überprüfen Sie Ihre App lokal im IE, bevor Sie zu dev wechseln.

Cobolstinks
quelle
Das ist toll! Funktioniert nicht in einem NX Arbeitsplatz als App mit browserslistund tsconfig.*ist in apps/app-namewährend angular.jsonim Arbeitsbereich Wurzel ist. Lief dies im Ordner der App und sparte trotzdem einige Zeit, da nur manuell bearbeitet werden musste angular.json. So danke! :)
Funkizer
0

Dies ist eine sehr coole neue Angular-Funktion namens Differential-Loading

<script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”></script>
<script src=“polyfills-es2015.e954256595c973372414.js” type=“module”></script>
<script src=“runtime-es5.741402d1d47331ce975c.js” nomodule></script>
<script src=“polyfills-es5.405730e5ac8f727bd7d7.js” nomodule></script>
<script src=“main-es2015.63808232910db02f6170.js” type=“module”></script>
<script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>

Wenn Sie oben index.html aus dem Build-Ordner sehen, hat jedes js zwei Versionen:

  • Eines ist es2015 mit type="module"Attribut für moderne Browser
  • Eine andere ist die es5-Version mit nomoduleAttribut für Lagency-Browser.

Daher wird Angular Cli es elegant auf dem Produkt erzeugen. Wenn Sie jedoch ng servelokal ausführen möchten , müssen Sie manuell sicherstellen, dass ng serveeine tsconfig-Datei ausgeführt wirdtarget: es5

Yuchao Wu
quelle
0

Schritt 1: Plyfills in polyfills.ts auskommentieren. Führen Sie auch alle in der Datei polyfills.ts genannten npm-Installationsbefehle aus, um diese Pakete zu installieren

Schritt 2: Entfernen Sie in der Browserlistendatei nicht, wo die IE 9-11-Unterstützung erwähnt wird

Schritt 3: Ändern Sie in der Datei tsconfig.json wie "Ziel": "es2015" in "Ziel": "es5".

Diese Schritte haben mein Problem behoben

user68275
quelle
-3

Was ist mit der Aktualisierung der enthaltenen browserslist und entfernen Sie die notvor dem IE 9-11 ...? so was?

Diese Datei wird vom Build-System verwendet, um die CSS- und JS-Ausgabe so anzupassen, dass die unten angegebenen Browser unterstützt werden. Weitere Informationen zu Format und Regeloptionen finden Sie unter: https://github.com/browserslist/browserslist#queries

Sie können sehen, welche Browser von Ihren Abfragen ausgewählt wurden, indem Sie Folgendes ausführen:

npx browserslist

0,5% letzte 2 Versionen Firefox ESR nicht tot IE 9-11 # Für IE 9-11-Unterstützung entfernen Sie 'nicht'.

jie
quelle