Ponieważ Angular 6 jest tutaj, chcę zaktualizować lub przenieść moją aplikację kliencką Angular 5 do Angular 6, ale nie otrzymuję żadnego samouczka ani niczego, co mogłoby mnie poprowadzić.

Według mnie wystarczy uruchomić nowy Angular CLI, a następnie przenieść moje starsze źródło do nowego projektu. Czytałem, że Angular 6 używa nowego renderera o nazwie Ivy. Czy według Ivy będę musiał zmienić mój projekt?

Aktualizacja z Angular v6 do Angular v7

Wersja 7 Angular została udostępniona Oficjalny link do bloga Angular . Odwiedź oficjalny przewodnik aktualizacji kątowej https://update.angular.io, aby uzyskać szczegółowe informacje. Te kroki będą działać dla podstawowych aplikacji kątowych 6 używających Angular Material.

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

Uaktualnij z Angular v5 do Angular v6

Wersja 6 Angular została udostępniona Oficjalny link do bloga Angular . Wspomniałem poniżej o ogólnych krokach aktualizacji, ale przed i po aktualizacji musisz wprowadzić zmiany w swoim kodzie, aby działał w wersji 6, aby uzyskać szczegółowe informacje, odwiedź oficjalną stronę https://update.angular.io .

Kroki aktualizacji (w dużej mierze zaczerpnięte z oficjalnego przewodnika aktualizacji Angular dla podstawowej aplikacji Angular używającej Angular Material):

1. Upewnij się, że wersja NodeJS to 8.9+, jeśli nie, zaktualizuj ją.

2. Zaktualizuj Angular cli globalnie i lokalnie oraz przeprowadź migrację starej konfiguracji .angular-cli.json do nowego formatu angular.json , uruchamiając następujące polecenie:

   npm install -g @angular/cli  
   npm install @angular/cli  
   ng update @angular/cli
   

3. Zaktualizuj wszystkie pakiety platformy Angular do wersji 6 oraz poprawną wersję RxJS i TypeScript, uruchamiając następujące polecenie:

   ng update @angular/core
   

4. Zaktualizuj materiał kątowy do najnowszej wersji, uruchamiając następujące polecenie:

   ng update @angular/material
   

5. RxJS v6 zawiera duże zmiany w stosunku do v5, v6 wprowadza pakiet kompatybilności wstecznej rxjs-Compatible, który zapewni działanie aplikacji, ale powinieneś refaktoryzować kod TypeScript, aby nie zależał od rxjs-complement. Aby refaktoryzować kod TypeScript, wykonaj następujące czynności:

   npm install -g rxjs-tslint   
   rxjs-5-to-6-migrate -p src/tsconfig.app.json
   

   Uwaga: Kiedy wszystkie zależności zostaną zaktualizowane do RxJS 6, usuń rxjs-Compatible, ponieważ zwiększa rozmiar pakietu. więcej informacji można znaleźć w tym przewodniku aktualizacji RxJS .

   npm uninstall rxjs-compat
   

6. Gotowe, ng serveżeby to sprawdzić.
   Jeśli otrzymasz błędy w kompilacji, odwiedź https://update.angular.io, aby uzyskać szczegółowe informacje.

Aktualizacja z Angular v5 do Angular 6.0.0-rc.5

1. Zaktualizuj rxjs do wersji 6.0.0-beta.0. Więcej informacji znajdziesz w tym przewodniku aktualizacji RxJS . RxJS v6 zawiera istotne zmiany, dlatego najpierw spraw, aby Twój kod był zgodny z najnowszą wersją RxJS.

2. Zaktualizuj wersję NodeJS do 8.9+ (jest to wymagane przez wersję angular cli 6)

3. Zaktualizuj pakiet globalny Angular cli do następnej wersji.

   npm uninstall -g @angular/cli
   npm cache verify
   

   jeśli wersja npm jest <5, użyj npm cache clean

   npm install -g @angular/cli@next
   

4. Zmień wersje pakietów kątowych w pliku package.json na ^6.0.0-rc.5

   "dependencies": {
     "@angular/animations": "^6.0.0-rc.5",
     "@angular/cdk": "^6.0.0-rc.12",
     "@angular/common": "^6.0.0-rc.5",
     "@angular/compiler": "^6.0.0-rc.5",
     "@angular/core": "^6.0.0-rc.5",
     "@angular/forms": "^6.0.0-rc.5",
     "@angular/http": "^6.0.0-rc.5",
     "@angular/material": "^6.0.0-rc.12",
     "@angular/platform-browser": "^6.0.0-rc.5",
     "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
     "@angular/router": "^6.0.0-rc.5",
     "core-js": "^2.5.5",
     "karma-jasmine": "^1.1.1",
     "rxjs": "^6.0.0-uncanny-rc.7",
     "rxjs-compat": "^6.0.0-uncanny-rc.7",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.5.0",
     "@angular/cli": "^6.0.0-rc.5",
     "@angular/compiler-cli": "^6.0.0-rc.5",
     "@types/jasmine": "2.5.38",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.1.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "postcss-loader": "^2.1.4",
     "protractor": "~5.1.0",
     "ts-node": "~5.0.0",
     "tslint": "~5.9.1",
     "typescript": "^2.7.2"
   }
   

5. Następnie zaktualizuj pakiet lokalny Angular cli do następnej wersji i zainstaluj wyżej wymienione pakiety.

   rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows 
   Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
   npm install --save-dev @angular/cli@next
   npm install 
   

6. Format konfiguracji Angular CLI został zmieniony z wersji angular cli 6.0.0-rc.2, a istniejąca konfiguracja może zostać zaktualizowana automatycznie, uruchamiając następujące polecenie. Usunie stary plik konfiguracyjny .angular-cli.json i zapisze nowy plik angular.json .

   ng update @angular/cli --migrate-only --from=1.7.4

Uwaga: - Jeśli pojawi się następujący błąd „Kompilator Angular wymaga TypeScript> = 2.7.2 i <2.8.0, ale zamiast tego został znaleziony 2.8.3”. uruchom następujące polecenie:

npm install [email protected]

Angular 6 właśnie został wydany.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Oto, co zadziałało w przypadku jednego z moich mniejszych projektów

1. npm install -g @ angular / cli
2. npm install @ angular / cli
3. ng update @ angular / cli --migrate-only --from = 1.7.0
4. ng update @ angular / core
5. npm install rxjs -atible
6. ng służyć

Może być konieczne zaktualizowanie skryptów uruchamiania w package.json Na przykład. jeśli używasz flag takich jak „aplikacja” i „środowisko” Zostały one zaktualizowane odpowiednio do „projektu” i „konfiguracji”.

Bardziej szczegółowy przewodnik można znaleźć pod adresem https://update.angular.io/ .

Po prostu skorzystaj z oficjalnego przewodnika aktualizacji, który powie Ci, co musisz zrobić dla swoich własnych potrzeb:

https://update.angular.io/

Sprawdź szczegółowe informacje o aktualizacji z Angular 5 do Angular 6. Zawiera szczegółowe informacje na temat problemów, które napotkasz podczas aktualizacji, oraz sposobów ich rozwiązania.

• Zaktualizuj wersję swojego węzła do wersji 8 lub nowszej i zainstaluj najnowszą wersję Angular cli na całym świecie przez npm i -g @ angular / cli @ latest.
• Angular 6 używa angular.json jako pliku konfiguracyjnego zamiast .anguar-cli.json. Zmieniono również tslint. Sprawdź https://github.com/angular/angular-cli/wiki/angular-workspace, aby uzyskać najnowsze szczegóły konfiguracji. Musisz przenieść wszystkie istniejące konfiguracje do nowego pliku konfiguracyjnego.
• Aby to zrobić, utwórz kolejny fikcyjny projekt z najnowszym kliknięciem przy użyciu nowego „twojego-projektu” i tych samych ustawień domyślnych, takich jak prefiks, styl itp., Których użyłeś wcześniej w swoim projekcie. Utwórz nowy projekt za pomocą cli https://github.com/angular/angular-cli/wiki/new
• Użyj https://update.angular.io/, aby sprawdzić, co zostało zmienione w stosunku do twojej aktualnej wersji Angular → Angular 6. Zawiera wskazówki, jak je zmienić / naprawić.
• Wykonaj powyższe kroki i skopiuj / zaktualizuj plik angular.json utworzony w kroku 2. Wykonaj npm i w swoim projekcie, aby pobrać wszystkie zależności i wykonać aktualizację npm
• Teraz najważniejsza część. Aktualizacja RxJS i rozwiązywanie konfliktów. W tej wersji RxJS ustandaryzował import operatorów i obserwowalnych twórców. Zrób npm i -g rxjs-tslint i dodaj poniżej konfigurację lint w tslint.json

{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}

• Teraz uruchom ng lint --fix. To naprawia kilka elementów, ale większość pozostałych problemów zostanie podświetlona i musisz to naprawić ręcznie.

Zmiana nazwy operatora:

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

Wszyscy operatorzy przenieśli się do rxjs / operatorzy

import { map, filter, reduce } from 'rxjs/operators';

Obserwowalne metody tworzenia zostały przeniesione do rxjs

   import { Observable, Subject, of, from } from 'rxjs'; 

Wszystko gotowe. Witaj w Angular 6 :) Sprawdź mój wpis na blogu, aby dowiedzieć się, jak zaktualizować

Musiałem ponownie uruchomić ng update @ angular / cli, aby angular-cli.json został zmieniony na angular.json

Uruchom poniższe komentarze, aby zaktualizować Angular 6 z Angular 5

1. ng update @ angular / cli
2. ng update @ angular / core
3. npm install rxjs -atible (w celu obsługi starszej wersji rxjs 5.6)
4. npm install -g rxjs-tslint (aby zmienić format z rxjs 5 na rxjs 6 w kodzie. Zainstaluj globalnie, wtedy zadziała tylko)
5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (po zainstalowaniu musimy zmienić to w naszym kodzie źródłowym na format rxjs6)
6. npm uninstall rxjs -atible (Usuń to ostatecznie)

Kompletny przewodnik

----------------- Z kątownikiem --------------------------

1. Zaktualizuj CLI globalnie i lokalnie

1. Korzystanie z NPM (upewnij się, że masz wersję 8+ węzła)

   npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

2. Korzystanie z przędzy

   yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2. Zaktualizuj zależności

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

Angular 6 zależy teraz od TypeScript 2.7 i RxJS 6

Zwykle oznaczałoby to, że musisz zaktualizować swój kod wszędzie tam, gdzie używane są importy RxJS i operatorzy, ale na szczęście istnieje pakiet, który zajmuje się większością ciężkich zadań:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Następnie możesz uruchomić rxjs-5-to-6-migrate

rxjs-5-to-6-migrate -p src/tsconfig.app.json

na koniec usuń rxjs-complement

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Skorzystaj z tego linku https://alligator.io/angular/angular-6/

------------------- Bez kątowników -------------------------

Musisz więc ręcznie zaktualizować swój package.jsonplik.

Następnie uruchomić

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json

Jak zauważył Vinay Kumar, nie zaktualizuje on globalnie zainstalowanego interfejsu CLI Angulara. Aby zaktualizować go globalnie, użyj następujących poleceń:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Zauważ, że jeśli chcesz zaktualizować istniejący projekt, musisz zmodyfikować istniejący projekt, powinieneś zmienić package.json w swoim projekcie.

Nie ma żadnych istotnych zmian w samym Angular, ale są one w RxJS, więc nie zapomnij użyć biblioteki rxjs-Compatible do pracy ze starszym kodem.

  npm install --save rxjs-compat  

Napisałem dobry artykuł o instalacji / aktualizacji Angular CLI http://bmnteam.com/angular-cli-installation/

po prostu uruchom następujące polecenie:

ng update

Uwaga: to nie zaktualizuje się globalnie.

Tak to robię.

Moje środowisko:

Angular CLI Global: 6.0.0, Local: 1.7.4, Angular: 5.2, Typescript 2.5.3

Uwaga: aby włączyć ng Update, musisz najpierw zainstalować Angular CLI 6.0 npm install -g @angular/cli or npm install @angular/cli

1. ng update //update Angular Package core/common/complier... to 6.0.0

2. ng update @angular/cli //change angular-cli.json to angular.json

opcjonalnie, jeśli masz angular-material 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1:

3. ng update @angular/material //upgrade to 6.0.1

4. npm install @ngx-translate/[email protected] --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/[email protected] //for ng-bootstrap

Jeśli używasz Observable i otrzymujesz błąd:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

Zmiana: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

Do

import { Observable, of } from "rxjs";

Problem z Angular CLI: https://github.com/angular/angular-cli/issues/10621

Istnieje kilka kroków, aby zaktualizować 2/4/5 do Angular 6.

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

Aby rozwiązać problem związany z plikiem „angular.json”: -

ng update @angular/cli --migrate-only --from=1.7.4

MIGRACJA sklepu
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

MIGRACJA RXJS
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Mam nadzieję, że to ci pomoże :)