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

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?

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" 
  }
}

2. 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"
    }
  }
},

3. Führen Sie den Serve mit dieser Konfiguration mit dem folgenden Befehl aus.

ng serve --configuration es5

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

Ziel, das sich in compileOnSave \ compilerOptions befindet

------ 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",

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!

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.

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/

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.

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.

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

Eine vollständige Erklärung finden Sie hier

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

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

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.

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

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

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