Jak poprawnie zaktualizować Angular 2 (npm) do najnowszej wersji?

Niedawno zacząłem samouczek Angular 2 na https://angular.io/docs/ts/latest/tutorial/ .

i skończyłem z Angular 2 beta 8. Teraz wznowiłem samouczek, a najnowszą wersją beta jest beta 14.

Jeśli po prostu zrobię aktualizację npm, kilka modułów (wstępnie załadowanych z tutorialem) zostanie zaktualizowanych, ale nie Angular2 (widzę to z npm ls ).

Jeśli zrobię npm update angular 2 lub npm update [email protected] to też nic nie robi.

Polecenie npm update -D && npm update -Szaktualizuje wszystkie zawarte w nich pakiety package.jsondo najnowszej wersji, zgodnie z określonym zakresem wersji . Więcej na ten temat przeczytasz tutaj .

Jeśli chcesz zaktualizować Angular z wersji wcześniejszej 2.0.0-rc.1, musisz ręcznie edytować package.json, ponieważ Angular został podzielony na kilka modułów npm. Bez tego, jak wskazuje pakiet angular22.0.0-beta.21 , nigdy nie będziesz mógł używać najnowszej wersji Angular.
Listę niektórych z najpopularniejszych modułów, których będziesz potrzebować, aby rozpocząć, można znaleźć w repozytorium szybkiego startu .

Uwagi:

• Fajnym sposobem, aby być na bieżąco z najnowszą wersją swoich pakietów, jest użycie, npm outdatedktóre pokazuje wszystkie nieaktualne pakiety wraz z ich pożądaną i najnowszą wersją.

• Powodem, dla którego musimy połączyć w łańcuch dwa polecenia npm update -Di npm update -Sjest przezwyciężyć ten błąd, dopóki nie zostanie naprawiony.

Kolejnym fajnym pakietem, którego użyłem do migracji z wersji beta Angular2 do Angular2 2.0.0 finaljestnpm-check-updates

Pokazuje najnowszą dostępną wersję wszystkich pakietów określonych w pliku package.json. W przeciwieństwie do npm outdatedtego jest również w stanie edytować plik package.json, umożliwiając zrobienie tego npm upgradepóźniej.

zainstalować

sudo npm install -g npm-check-updates

Stosowanie

ncudo wyświetlenia

ncu -u za ponowne napisanie pliku package.json

Zaktualizuj do najnowszej wersji Angular 5

Pakiety Angular Dep: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Inne pakiety instalowane przez angular cli npm install --save core-js@latest rxjs@latest zone.js@latest

Pakiety Angular Dev: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

Pakiety deweloperskie typów: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

Inne pakiety, które są instalowane jako dev dev przez angular cli: npm install --save-dev codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest

Zainstaluj najnowszą obsługiwaną wersję używaną przez Angular cli (nie rób @latest): npm install --save-dev [email protected]

Zmień nazwę pliku angular-cli.json na .angular-cli.json i zaktualizuj zawartość:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "project3-example"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

AKTUALIZACJA:
Począwszy od CLI v6 , możesz po prostu uruchomić ng update, aby automatycznie zaktualizować swoje zależności do nowej wersji.

Z ng updateczasem możesz dodać --forceflagę. Jeśli to zrobisz, upewnij się, że wersja maszynopisu, którą zainstalowałeś w ten sposób, jest obsługiwana przez twoją aktualną wersję kątową, w przeciwnym razie może być konieczne obniżenie wersji maszynopisu.

Zapoznaj się również z tym przewodnikiem Aktualizowanie projektów Angular

Tylko dla użytkowników basha

Jeśli jesteś włączony, jesteś włączony Mac/Linuxlub uruchamiasz bash włączony Windows(to nie zadziała domyślnie Windows CMD), możesz uruchomić ten oneliner:

npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5 --save

yarn add @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5

Po prostu określ wersję, której chcesz, np. @ 4.4.5 lub umieść @latest, aby uzyskać najnowszą

Sprawdź, package.jsonczy aktualizujesz wszystkie @angular/*pakiety, na których opiera się Twoja aplikacja

• Aby zobaczyć dokładną @angularwersję w swoim projekcie, uruchom:
  npm ls @angular/compilerlubyarn list @angular/compiler
• Aby sprawdzić najnowszą stabilną @angularwersję dostępną na npm run:
  npm show @angular/compiler version

Oficjalna strona npm sugeruje ustrukturyzowaną metodę aktualizacji wersji kątowej zarówno dla scenariuszy globalnych, jak i lokalnych.

1. Przede wszystkim musisz odinstalować aktualny kąt z systemu.

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli

2. Wyczyść pamięć podręczną

npm cache clean

EDYTOWAĆ

Jak wskazał @candidj

npm cache cleanjest zmieniana na npm cache verifynpm 5

3. Zainstaluj kątowe globalnie

npm install -g @angular/cli@latest

4. Konfiguracja projektu lokalnego, jeśli taki posiadasz

rm -rf node_modules
npm install --save-dev @angular/cli@latest
npm install

Sprawdź to samo w poniższym linku:

https://www.npmjs.com/package/@angular/cli#updating-angular-cli

To rozwiąże problem.

Alternatywne podejście z użyciem npm-upgrade :

1. npm i -g npm-upgrade

Przejdź do folderu swojego projektu

2. npm-upgrade check

Zostaniesz zapytany, czy chcesz zaktualizować pakiet, wybierz Tak

To proste

Jeśli chcesz zainstalować / zaktualizować wszystkie pakiety do najnowszej wersji i korzystasz z systemu Windows, możesz użyć tego w powershell.exe:

foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
    npm install @angular/$package@latest -E
}

Jeśli używasz również cli, możesz to zrobić:

foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
    iex "npm install @angular/$package@latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}

To zapisze pakiety dokładnie (-E), a pakiety cli w devDependencies(-D)

Po prostu zacznij tutaj:

https://update.angular.io

Wybierz wersję, której używasz, a otrzymasz przewodnik krok po kroku.

Zalecam wybranie opcji „Zaawansowane”, aby zobaczyć wszystkie kroki. Złożoność jest pojęciem względnym - i nie wiem, czyj głupim pomysłem była ta funkcja, ale jeśli wybierzesz „Podstawowy”, nie pokaże wszystkich potrzebnych kroków i możesz przegapić coś ważnego, z którego w przeciwnym razie korzysta Twoja aplikacja „Podstawowa” .

Od wersji 6 pojawiło się nowe polecenie Angular CLI, ng updatektóre inteligentnie sprawdza zależności i sprawdza, czy aktualizujesz właściwe rzeczy :-)

W krokach opisano, jak go używać :-)

npm uninstall --save-dev angular-cli

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

ng update @ angular / cli

ng update @ angular / core --force

ng update @ angular / material lub npm i @ angular / cdk @ 6 @ angular / material @ 6 --zapisz

npm install typescript @ '> = 2.7.0 <2.8.0'

Najlepszym sposobem jest użycie rozszerzenia (pflannery.vscode-versionlens) w vscode.

to sprawdza, czy wszystkie spełniają wymagania i sprawdzają najlepsze dopasowanie.

Miałem wiele problemów z aktualizacją i utrzymaniem jednostki funkcjonalnej mojej aplikacji, niech pozwolę, aby obiektyw pełny sprawdził, a potem uruchomię

npm i

aby zainstalować nowo sugerowane zależności.

Jeśli wyglądasz tak jak ja, jeśli chodzi o aktualizację twojego projektu do najnowszego, oto co działa we mnie od Angular 6:

Otwórz konsolę w folderze projektu: If you type: ng updatewtedy otrzymasz poniższą wiadomość:

        We analyzed your package.json, there are some packages to update:

          Name                               Version                  Command to update
         --------------------------------------------------------------------------------
          @angular/cli                       7.0.7 -> 7.2.2           ng update @angular/cli
          @angular/core                      7.0.4 -> 7.2.1           ng update @angular/core

There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

Więc zwykle idę prosto i robię:

ng update --all

Wreszcie możesz sprawdzić swoją nową wersję:

ng version

Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.2
@angular-devkit/build-angular     0.12.2
@angular-devkit/build-optimizer   0.12.2
@angular-devkit/build-webpack     0.12.2
@angular-devkit/core              7.2.2
@angular-devkit/schematics        7.2.2
@angular/cli                      7.2.2
@ngtools/webpack                  7.2.2
@schematics/angular               7.2.2
@schematics/update                0.12.2
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4