wake-up-neo.com

Aktualisierung/Upgrade von Angular 4 auf Angular 5+

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:

 CLI Config

angularupdatesangular5
36
Sangwin Gawande

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"
}
16
Sangwin Gawande

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

output

Verwenden Sie dann den Befehl ncu -u Das folgende Paket sollte auf die neueste Version aktualisiert werden

pakage update

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

Quelllink

47
San Jaisy

Wenn Sie Ihr angle4-Projekt einfach auf angle 5 aktualisieren möchten, gehen Sie wie folgt vor.

  1. Gehen Sie in Ihr Projektverzeichnis. 
  2. Öffnen Sie eine Eingabeaufforderung und führen Sie die folgenden Befehle aus
  3. npm install -g npm-check-updates
  4. ncu -u

Das hat bei mir funktioniert.

http://www.talkingdotnet.com/upgrade-angular-4-app-angular-5-visual-studio-2017/

7
Jerin Kurian

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.

6
Bunyamin Coskuner

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

https://update.angular.io/

 enter image description here

5
Francisco d'Anconia

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. 

0
tjm1706

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)/
0
user1349544