Jak zaktualizować / uaktualnić z Angular 4 do Angular 5+

To rozwiązanie jest dla visual studio 2017 za pomocą szablonu kątowego

Użyj Węzła.wiersz polecenia js lub Otwórz PowerShell. Przejdź do katalogu projektu i użyj polecenia dir , aby sprawdzić, czy plik package.json istnieje.

Zamknij instancję Visual Studio i uruchom polecenie npm install -g npm-check-updates następnie powinno pojawić się wyjście

Następnie użyj polecenia ncu-u Poniższy pakiet powinien zostać zaktualizowany do najnowszej wersja

Jeśli Pakiety nadal wskazują kąt 4, Usuń {[2] } i wykonaj ponownie powyższe kroki.

Webpack jest używany jako moduł bundler przez Visual Studio. Webpack używa AotPlugin do kompilacji aplikacji Angular 4, Teraz Webpack nie używa już Aotplugin dla Angular 5. Obecnie używa AngularCompilerPlugin.So Otwórz webpack.config.js i zamień wszystkie wystąpienia AotPlugin na AngularCompilerPlugin.

Otwórz ClientApp / boot.serwer.plik ts i zastąpić następujący wiersz kodu (wiersz nr 22).

const zone = moduleRef.injector.get(NgZone);

Z,

const zone: NgZone = moduleRef.injector.get(NgZone);

Link źródłowy

Sprawdź Blog

Https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

W artykule wspomniano przewodnik aktualizacji.

Znajdziesz go tutaj: https://angular-update-guide.firebaseapp.com/

Możesz również zaktualizować swój angular-CLI do 1.5.0, co stworzy projekt angular v5. Możesz porównać różnice z Twoimi.

Jeśli chcesz po prostu uaktualnić swój projekt angular4 do angular 5 wykonaj następujące czynności.

1. Przejdź do katalogu projektu.
2. Otwórz wiersz polecenia i uruchom następujące polecenia
3. npm install-g npm-check-updates
4. ncu-u

To mi pomogło.

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

Oto prawidłowa odpowiedź i jest bardzo prosta.

Postępuj zgodnie z oficjalnym przewodnikiem aktualizacji kątowej.

Wypełnisz krótki formularz, wybierając wersję Angular, na której się znajdujesz i do której wersji chcesz uaktualnić. Następnie wyświetla listę niezbędnych kroków do wykonania aktualizacji. Należy postępować zgodnie z tym przewodnikiem dla wszystkich uaktualnień. (Proszę o upvote przed wyjazdem) :)

Https://update.angular.io/

Aby ulepszyć swój Angular 4 do Angular 5

Otwórz swój webpack.config.js

Dodaj poniższy kod wewnątrz ContextReplacementPlugin

 /angular(\\|\/)core(\\|\/)(@angular|esm5)/

Opracowując nieco więcej, pomogło mi to w zarówno globalnym, jak i lokalnym uaktualnieniu projektu .

Dokładne linie prowadzące są (oczywiście) w https://update.angular.io/.

Global :

$ npm uninstall -g angular-cli (to be sure)
$ npm uninstall -g @angular/cli
$ npm cache clean
$ npm install -g @angular-cli@1
$ ng -v ... this will show you the current CLI version. 

Projekt local :

$ cd to/your/project/folder
$ remove the folder node_modules
$ npm install --save-dev @angular/cli@1
$ npm install

Wtedy :

npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^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/platform-server@^5.0.0 @angular/router@^5.0.0 [email protected] rxjs@^5.5.2

$ npm install [email protected] --save-exact

Źródło:

Https://update.angular.io / pokaże ci najlepszą trasę.

Zasadnicza różnica polega na tym, że nadal używasz modułu 'http'. Możesz (lub musisz) przeprowadzić migrację z http do modułu httpclient. W większości przypadków jest to dość łatwe.