Come aggiornare correttamente angular 2 (npm) all’ultima versione?

Recentemente ho iniziato il tutorial su Angular 2 su https://angular.io/docs/ts/latest/tutorial/ .

e terminato con Angular 2 beta 8. Ora ho ripreso il tutorial e l’ultima beta è la beta 14.

Se faccio semplicemente aggiornare npm, alcuni moduli (precaricati con il tutorial) sono aggiornati ma non Angular2 (lo vedo con npm ls ).

Se aggiorno npm angular 2 o npm update [email protected], non fa nulla.

Il comando npm update -D && npm update -S aggiornerà tutti i pacchetti all’interno di package.json alla loro versione più recente, in base al loro intervallo di versione definito . Puoi leggere di più qui .

Se si desidera aggiornare Angular da una versione precedente alla 2.0.0-rc.1 , sarà necessario modificare manualmente package.json , poiché Angular è stato diviso in diversi moduli npm. Senza questo, visto che il pacchetto angular2 punta alla 2.0.0-beta.21 , non si userà mai l’ultima versione di Angular.
Un elenco con alcuni dei moduli più comuni che è necessario iniziare è reperibile nel repository quickstart .

Gli appunti:

  • Un modo interessante per rimanere aggiornati con l’ultima versione dei pacchetti è usare npm outdated che mostra tutti i pacchetti obsoleti insieme alla loro versione desiderata e più recente.

  • Il motivo per cui abbiamo bisogno di concatenare due comandi, npm update -D e npm update -S è di superare questo bug finché non viene risolto.

Un altro bel pacchetto che ho usato per migrare da una versione beta di Angular2 a Angular2 2.0.0 final è npm-check-updates

Mostra l’ultima versione disponibile di tutti i pacchetti specificati all’interno del pacchetto package.json. Al contrario di npm outdated non npm outdated , è anche in grado di modificare il pacchetto package.json, consentendo di eseguire un npm upgrade seguito.

Installare

sudo npm install -g npm-check-updates

uso

ncu per la visualizzazione

ncu -u per riscrivere il tuo pacchetto.json

Passa all’ultimo Angular 5

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

Altri pacchetti che vengono installati dall’installazione cli npm install --save [email protected] [email protected] [email protected] angular npm install --save [email protected] [email protected] [email protected]

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

Tipi Pacchetti Dev: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

Altri pacchetti che vengono installati come dev dev dal programma angular: npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Installa l’ultima versione supportata utilizzata da Angular cli (non fare @latest): npm install --save-dev [email protected]

Rinominare il file angular-cli.json in .angular-cli.json e aggiornare il contenuto:

 { "$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": {} } } 

Solo per utenti bash

Se sei su Mac/Linux o esegui bash su Windows (che non funzionerà con Windows CMD predefinito) puoi eseguire quel 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

Basta specificare la versione che non vuoi, ad esempio 4.4.5 o mettere @latest per ottenere l’ultima versione

Controlla il tuo package.json solo per assicurarti di aggiornare tutti i pacchetti @angular/* su cui stai facendo affidamento l’app

  • Per vedere la versione esatta di @angular nell’esecuzione del tuo progetto:
    npm ls @angular/compiler o yarn list @angular/compiler
  • Per verificare l’ultima versione stabile di @angular disponibile su npm, esegui:
    npm show @angular/compiler version

AGGIORNARE:
A partire da CLI v6, è ansible eseguire ng update per far sì che le proprie dipendenze vengano aggiornate automaticamente a una nuova versione.

Con l’ ng update volte potresti voler aggiungere --force flag. In tal caso assicurati che la versione di typescript installata in questo modo sia supportata dalla versione angular corrente, altrimenti potresti dover eseguire il downgrade della versione dattiloscritta.

La pagina ufficiale di NPM suggerisce un metodo strutturato per aggiornare la versione angular per scenari sia globali che locali.

1.Prima di tutto, è necessario disinstallare l’angular corrente dal sistema.

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

2. Pulire la cache

 npm cache clean 

MODIFICARE

Come sottolineato da @candidj

npm cache clean viene rinominato come npm cache verify da npm 5 in poi

3.Installare angular a livello globale

 npm install -g @angular/[email protected] 

4. Impostazione del progetto locale se ne hai uno

 rm -rf node_modules npm install --save-dev @angular/[email protected] npm install 

Si prega di controllare lo stesso sul link sottostante:

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

Questo risolverà il problema.

Se si desidera installare / aggiornare tutti i pacchetti alla versione più recente e si sta eseguendo Windows è ansible utilizzarlo in powershell.exe :

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

Se usi anche il cli , puoi farlo:

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

Ciò salverà i pacchetti esatti (-E) e i pacchetti cli in devDependencies (-D)

Approccio alternativo usando npm-upgrade :

  1. npm i -g npm-upgrade

Vai alla cartella del tuo progetto

  1. npm-upgrade check

Ti verrà chiesto se desideri aggiornare il pacchetto, seleziona Sì

È semplice

Inizia da qui:

https://update.angular.io

Seleziona la versione che stai utilizzando e ti fornirà una guida passo passo.

Raccomando di scegliere ‘Avanzate’ per vedere tutti i passaggi. La complessità è un concetto relativo – e non so di chi sia stata questa stupida idea, ma se selezioni “Base” non ti mostrerà tutti i passaggi necessari e potresti perdere qualcosa di importante che la tua applicazione ‘di base’ altrimenti usa .

inserisci la descrizione dell'immagine qui

A partire dalla versione 6 è disponibile un nuovo ng update comando CLI di Angular che controlla in modo intelligente le dipendenze ed esegue controlli per assicurarsi di aggiornare le cose giuste 🙂

I passaggi descriveranno come usarlo 🙂

npm uninstall –save-dev angular-cli

Installa npm –save-dev @ angular / cli @ latest

ng update @ angular / cli

ng update @ angular / core –force

ng update @ angular / material o npm i @ angular / cdk @ 6 @ angular / material @ 6 –save

npm install typescript @ ‘> = 2.7.0 <2.8.0'

Il modo migliore per farlo è usare l’estensione (pflannery.vscode-versionlens) in vscode.

questo controlla per tutti soddisfare e controlla per la migliore forma.

Ho avuto un sacco di problemi con l’aggiornamento e mantenendo la mia funzione di unità di applicazione ho lasciato verbose lentezza ha fatto il controllo e poi ho eseguito

npm io

installare le dipendenze appena suggerite.