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.ts
Dateien 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?
angular
angular-cli
polyfills
angular8
James Barrett
quelle
quelle
not IE 9-11
IE 9-11
polyfills.js
,vendor.js
undmain.js
@JBNizetAntworten:
Nach dieser Ausgabe antworten
Sie müssen die folgenden Schritte ausführen
tsconfig.es5.json
neben tsconfig.json mit dem folgenden Inhaltangular.json
Unterprojects:yourAppName:architect:build:configurations
hinzuund
projects:yourAppName:architect:serve:configurations
hinzufügenDenken Sie daran, IhrenAppName in app: build: es5 in yourAppName zu ändern !
vollständiger Pfad unten gezeigt
quelle
ng serve --configuration es5
es nicht funktioniert, versuchen Sie esng s -c=es5
"tsConfig": "src/tsconfig-es5.app.json"
projects > projectName > architect > build > options > styles
in habeangular.json
, muss ich es kopierenprojects > projectName > architect > build > configurations > es5
? Die Sache ist, dass meine Anwendung geladen wird, aber Stile fehlen.Gehen Sie zu "tsconfig.json" und verwenden Sie target: "es5" anstelle von "target": "es2015".
Ziel, das sich in compileOnSave \ compilerOptions befindet
quelle
------ Einfach und leicht
Sie müssen zwei Dateien ändern,
polyfills.ts
undtsconfig.json
jeweils.Fügen Sie einfach Browser Polyfills in
polyfills.ts
und im
tsconfig.json
Wechsel "Ziel" auf es5 wie folgtanstatt
"target": "es2015",
quelle
core-js/es6/*
nicht funktioniert, sondern verwendencore-js/es/*
. wechseln Sie einfaches6
zues
.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!
quelle
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
Fügen Sie sie anschließend wie folgt zur Datei polyfills.ts hinzu
Danach sollten Sie aufhören, viele Probleme im IE zu haben.
quelle
Object.entries
Fehler in meiner Konsole festgestellt . Befolgen Sie die Anweisungen hier und es hat mein Problem gelöst.import 'core-js/es/object/values'
undimport 'core-js/es/object/entries'
.Auf
target
"es5" setzen, einrichtenbrowserslist
, das sollte reichen.Weitere Informationen zum Thema finden Sie hier: https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/
quelle
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.
Ändern Sie das Ziel in tsconfig.json als "Ziel": "es5",
Führen Sie den folgenden Befehl "ng serve" aus.
quelle
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.
quelle
Ich möchte nur etwas hinzufügen, das mir nützlich war:
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.
Ä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
und im
tsconfig.json
Wechsel "Ziel" auf es5 wie folgtanstatt
Lauf:
Ich hoffe es kann dir helfen :)
quelle
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.
quelle
browserslist
undtsconfig.*
ist inapps/app-name
währendangular.json
im Arbeitsbereich Wurzel ist. Lief dies im Ordner der App und sparte trotzdem einige Zeit, da nur manuell bearbeitet werden mussteangular.json
. So danke! :)Dies ist eine sehr coole neue Angular-Funktion namens Differential-Loading
Wenn Sie oben index.html aus dem Build-Ordner sehen, hat jedes js zwei Versionen:
type="module"
Attribut für moderne Browsernomodule
Attribut für Lagency-Browser.Daher wird Angular Cli es elegant auf dem Produkt erzeugen. Wenn Sie jedoch
ng serve
lokal ausführen möchten , müssen Sie manuell sicherstellen, dassng serve
eine tsconfig-Datei ausgeführt wirdtarget: es5
quelle
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
quelle
Was ist mit der Aktualisierung der enthaltenen
browserslist
und entfernen Sie dienot
vor 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:
quelle