Ich muss mein Projekt von Angular 4 auf Angular 5+ aktualisieren.
Ich muss alle folgenden Abhängigkeiten auf Angular 5+ ändern.
Ich habe auch Angular CLI auf 1.5.0 aktualisiert.
Ich habe versucht, ein neues Projekt zu erstellen, aber es scheint nur ein Angular 4-Projekt zu erstellen.
ng neues NG5_Projekt
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
}
Was mache ich falsch.
CLI Config:
Problem mit dem Node-Versionsupdate behoben.
Ich musste die Node-Version aktualisieren,
Sudo apt-get install nodejs
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/[email protected]
ng new ProjectName
knoten --version ==> 8.9.0
ng --version ==> 1.5.0
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
}
Diese Lösung ist für Visual Studio 2017 unter Verwendung der Vorlage angular
Verwenden Sie die Eingabeaufforderung Node.js oder Open PowerShell. Navigieren Sie zum Projektverzeichnis und überprüfen Sie mit dem Befehl dir , ob die Datei package.json
Vorhanden ist.
Schließen Sie die Visual Studio-Instanz und führen Sie den Befehl npm install -g npm-check-updates
Aus. Die folgende Ausgabe sollte erscheinen
Verwenden Sie dann den Befehl ncu -u Das folgende Paket sollte auf die neueste Version aktualisiert werden
Wenn die Pakete immer noch auf Angular 4) zeigen, löschen Sie den package-lock.json
Und befolgen Sie die oben angegebenen Schritte erneut.
Webpack wird von Visual Studio als Modulbündler verwendet. Webpack verwendet AotPlugin zum Kompilieren der Angular 4 Apps, jetzt verwendet Webpack Aotplugin nicht mehr für Angular 5. Es verwendet jetzt AngularCompilerPlugin.So öffnen Sie webpack.config.js
und ersetzen Sie alle Vorkommen von AotPlugin durch AngularCompilerPlugin.
Öffnen Sie die Datei ClientApp/boot.server.ts und ersetzen Sie die folgende Codezeile (Zeile Nr. 22).
const zone = moduleRef.injector.get(NgZone);
mit,
const zone: NgZone = moduleRef.injector.get(NgZone);
Wenn Sie Ihr angle4-Projekt einfach auf angle 5 aktualisieren möchten, gehen Sie wie folgt vor.
Das hat bei mir funktioniert.
http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/
Check Angular Blog heraus
https://blog.angular.io/version-5-0-0-von-angular-now-available-37e414935ced
In dem Artikel wird ein Update-Handbuch erwähnt.
Sie finden es hier: https://angular-update-guide.firebaseapp.com/
Sie können auch Ihren angular-CLI
auf 1.5.0
aktualisieren, wodurch ein Winkel-v5-Projekt erstellt wird. Sie können die Unterschiede mit Ihren vergleichen.
Hier ist die richtige Antwort und es ist super einfach.
Folgen Sie der offiziellen Angular-Upgrade-Anleitung.
Sie füllen ein kurzes Formular aus, in dem Sie auswählen, auf welcher Angular-Version Sie sich befinden und auf welche Version Sie ein Upgrade durchführen möchten. Es zeigt Ihnen dann die Liste der erforderlichen Schritte, um das Upgrade durchzuführen. Sie sollten diese Anleitung für alle Upgrades befolgen. (Bitte vor dem Navigieren abstimmen) :)
Erarbeitung ein bisschen mehr, dies half mir bei BEIDE das globale als PROJECT LOCAL-Upgrade.
Die genauen Richtlinien sind (natürlich) in https://update.angular.io/ .
Global:
$ npm uninstall -g angular-cli (to be sure)
$ npm uninstall -g @angular/cli
$ npm cache clean
$ npm install -g @[email protected]
$ ng -v ... this will show you the current CLI version.
Projekt lokal:
$ cd to/your/project/folder
$ remove the folder node_modules
$ npm install --save-dev @angular/[email protected]
$ npm install
Dann:
npm install @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 [email protected] [email protected]^5.5.2
Dies kann erforderlich sein (und schadet nicht): $ npm Audit-Fix
$ npm install [email protected] --save-exact
Quelle:
https://update.angular.io/ zeigt Ihnen die beste Route.
Der Hauptunterschied besteht darin, dass Sie noch das 'http'-Modul verwenden. Sie können (oder müssen) von http zum httpclient-Modul migrieren. In den meisten Fällen ist dies ziemlich einfach.
So aktualisieren Sie Ihren Angular 4 auf Angular 5
Öffne deine webpack.config.js
Fügen Sie den folgenden Code in ContextReplacementPlugin ein.
/angular(\\|\/)core(\\|\/)(@angular|esm5)/