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

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

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

Se faccio semplicemente npm update alcuni moduli (precaricati con il tutorial) vengono aggiornati ma non Angular2 (posso vederlo con npm ls ).

Se faccio npm update angular 2 o npm update angular2@2.0.0beta.14, non fa nulla.

Il comando npm update -D && npm update -Saggiornerà tutti i pacchetti all'interno package.jsonalla loro ultima versione, in base al loro intervallo di versioni definito . Puoi leggere di più qui .

Se si desidera aggiornare Angular da una versione precedente 2.0.0-rc.1, è necessario modificarlo manualmente package.json, poiché Angular è stato suddiviso in diversi moduli npm. Senza questo, come indica il pacchetto angular22.0.0-beta.21 , non potrai mai usare l'ultima versione di Angular.
Un elenco con alcuni dei moduli più comuni che è necessario iniziare è disponibile nel repository di avvio rapido .

Appunti:

• Un modo interessante per rimanere aggiornato con l'ultima versione dei tuoi pacchetti è quello npm outdateddi mostrarti tutti i pacchetti obsoleti insieme alla loro versione desiderata e più recente.

• Il motivo per cui abbiamo bisogno di incatenare due comandi, npm update -Ded npm update -Sè quello di superare questo bug fino a quando non viene risolto.

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

Mostra l'ultima versione disponibile di tutti i pacchetti specificati in package.json. Al contrario npm outdated, è anche in grado di modificare il tuo package.json, permettendoti di farlo in un npm upgradesecondo momento.

Installare

sudo npm install -g npm-check-updates

uso

ncuper la visualizzazione

ncu -u per riscrivere il pacchetto.json

Aggiorna all'ultimo Angular 5

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

Altri pacchetti installati dal cli angolare npm install --save core-js@latest rxjs@latest zone.js@latest

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

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

Altri pacchetti installati come dev dev dal client angolare: 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

Installa l'ultima versione supportata utilizzata dal client angolare (non fare @latest): npm install --save-dev typescript@2.4.2

Rinomina il file angular-cli.json in .angular-cli.json e aggiorna 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": {}
  }
}

AGGIORNAMENTO:
A partire da CLI v6 è possibile eseguire solo ng updateper aggiornare automaticamente le dipendenze a una nuova versione.

A ng updatevolte potresti voler aggiungere --forceflag. Se lo fai, assicurati che la versione di dattiloscritto installata in questo modo sia supportata dalla tua attuale versione angolare, altrimenti potresti dover eseguire il downgrade della versione di dattiloscritto.

Dai un'occhiata anche a questa guida Aggiornamento dei tuoi progetti angolari

Per bash utenti

Se sei acceso Mac/Linuxo esegui bash on Windows(che non funzionerà in modo predefinito Windows CMD) puoi eseguire quell'eleliner:

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 si desidera ad es. @ 4.4.5 o inserire @latest per ottenere l'ultima

Controlla il tuo package.jsonsolo per assicurarti di aggiornare tutti i @angular/*pacchetti su cui si basa l'app

• Per visualizzare la @angularversione esatta nell'esecuzione del progetto:
  npm ls @angular/compileroyarn list @angular/compiler
• Per verificare l'ultima @angularversione stabile disponibile su npm run:
  npm show @angular/compiler version

La pagina ufficiale npm suggerisce un metodo strutturato per aggiornare la versione angolare per scenari globali e locali.

1. Innanzitutto, è necessario disinstallare l'attuale angolare 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 cleanviene rinominato npm cache verifyda npm 5 in poi

3.Installazione angolare a livello globale

npm install -g @angular/cli@latest

4. Setup locale del progetto se ne hai uno

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

Si prega di controllare lo stesso sul link qui sotto:

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

Questo risolverà il problema.

Approccio alternativo usando npm-upgrade :

1. npm i -g npm-upgrade

Vai alla cartella del tuo progetto

2. npm-upgrade check

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

È semplice

Se vuoi installare / aggiornare tutti i pacchetti alla versione più recente e stai usando Windows puoi usarlo in powershell.exe:

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

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

Inizia qui:

https://update.angular.io

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

Consiglio di scegliere "Avanzate" per vedere tutti i passaggi. La complessità è un concetto relativo - e non so di chi sia stata questa stupida idea di questa funzione, ma se selezioni "Base" non ti mostrerà tutti i passaggi necessari e potresti perdere qualcosa di importante che l'applicazione altrimenti "Base" sta usando .

Dalla versione 6 c'è un nuovo comando CLI angolare ng updateche passa in modo intelligente attraverso le tue dipendenze ed esegue i controlli per assicurarti di aggiornare le cose giuste :-)

I passaggi illustreranno come usarlo :-)

npm uninstall --save-dev angular-cli

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

aggiornamento @ angular / cli

di 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 verifica la soddisfazione di tutti e verifica la migliore vestibilità.

ho avuto un sacco di problemi con l'aggiornamento e il mantenimento della funzionalità della mia unità, ho lasciato che la lente verbosa facesse il controllo e poi ho eseguito

npm i

per installare le dipendenze appena suggerite.

Se mi assomigli solo ad aggiornare il tuo progetto all'ultimo, ecco cosa funziona da me da Angular 6:

Apri la console nella cartella del tuo progetto: If you type: ng updateotterrai il seguente messaggio:

        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.

Quindi di solito vado dritto e faccio:

ng update --all

Finalmente puoi controllare la tua nuova versione:

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