Poiché Angular 6 è qui, voglio aggiornare o spostare la mia applicazione client angular 5 su angular 6, ma non ricevo alcun tutorial o altro che possa guidarmi.

Secondo me ho solo bisogno di eseguire una nuova CLI angolare e quindi devo spostare la mia vecchia fonte su un nuovo progetto. Ho letto che Angular 6 utilizza un nuovo renderer chiamato Ivy. Dovrò cambiare il mio progetto secondo Ivy?

Aggiornamento da Angular v6 a Angular v7

La versione 7 di Angular è stata rilasciata Link al blog ufficiale di Angular . Visita la guida all'aggiornamento angolare ufficiale https://update.angular.io per informazioni dettagliate. Questi passaggi funzioneranno per le app angolari di base 6 che utilizzano Angular Material.

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

Aggiornamento da Angular v5 a Angular v6

La versione 6 di Angular è stata rilasciata Link al blog ufficiale di Angular . Ho menzionato i passaggi di aggiornamento generali di seguito, ma prima e dopo l'aggiornamento è necessario apportare modifiche al codice per renderlo funzionante nella v6, per informazioni dettagliate visitare il sito Web ufficiale https://update.angular.io .

Passaggi di aggiornamento (in gran parte presi dalla Guida all'aggiornamento Angular ufficiale per un'app Angular di base che utilizza Angular Material):

1. Assicurati che la versione di NodeJS sia 8.9+ se non aggiornala.

2. Aggiorna angular cli globalmente e localmente e migra la vecchia configurazione .angular-cli.json nel nuovo formato angular.json eseguendo quanto segue:

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

3. Aggiorna tutti i tuoi pacchetti del framework Angular alla v6 e la versione corretta di RxJS e TypeScript eseguendo quanto segue:

   ng update @angular/core
   

4. Aggiorna Angular Material all'ultima versione eseguendo quanto segue:

   ng update @angular/material
   

5. RxJS v6 ha importanti modifiche dalla v5, v6 porta il pacchetto di compatibilità all'indietro rxjs-compat che manterrà le tue applicazioni funzionanti, ma dovresti refactoring del codice TypeScript in modo che non dipenda da rxjs-compat. Per eseguire il refactoring del codice TypeScript eseguire quanto segue:

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

   Nota: una volta che tutte le dipendenze sono state aggiornate a RxJS 6, rimuovere rxjs- compat man mano che aumenta la dimensione del bundle. si prega di consultare questa Guida all'aggiornamento di RxJS per maggiori informazioni.

   npm uninstall rxjs-compat
   

6. Fatto corri ng servea controllarlo.
   Se si verificano errori nella compilazione, fare riferimento a https://update.angular.io per informazioni dettagliate.

Aggiornamento da Angular v5 ad Angular 6.0.0-rc.5

1. Aggiorna rxjs a 6.0.0-beta.0, consulta questa Guida all'aggiornamento di RxJS per maggiori informazioni. RxJS v6 ha modifiche sostanziali, quindi prima rendi il tuo codice compatibile con l'ultima versione di RxJS.

2. Aggiorna la versione di NodeJS a 8.9+ (richiesto dalla versione angular cli 6)

3. Aggiorna il pacchetto globale di Angular cli alla versione successiva.

   npm uninstall -g @angular/cli
   npm cache verify
   

   se la versione di npm è <5, usa npm cache clean

   npm install -g @angular/cli@next
   

4. Cambia le versioni dei pacchetti angolari nel file package.json in ^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. Successivamente aggiorna il pacchetto locale di Angular cli alla versione successiva e installa i pacchetti sopra menzionati.

   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. Il formato di configurazione della CLI Angular è stato modificato dalla versione angular cli 6.0.0-rc.2 e la configurazione esistente può essere aggiornata automaticamente eseguendo il seguente comando. Rimuoverà il vecchio file di configurazione .angular-cli.json e scriverà il nuovo file angular.json .

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

Nota: - Se viene visualizzato il seguente errore "Il compilatore angolare richiede TypeScript> = 2.7.2 e <2.8.0 ma invece è stato trovato 2.8.3". eseguire il seguente comando:

npm install typescript@2.7.2

Angular 6 è appena stato rilasciato.

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

Ecco cosa ha funzionato per uno dei miei progetti più piccoli

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 installa rxjs-compat
6. servire

Potrebbe essere necessario aggiornare gli script di esecuzione in package.json Per es. se utilizzi flag come "app" e "ambiente", questi sono stati aggiornati rispettivamente a "progetto" e "configurazione".

Fare riferimento a https://update.angular.io/ per una guida più dettagliata.

Usa la guida ufficiale all'aggiornamento che ti dirà cosa devi fare per le tue esigenze particolari:

https://update.angular.io/

Controlla i dettagli dell'aggiornamento passo passo da Angular 5 ad Angular 6. Questi forniscono dettagli sui problemi riscontrati durante l'aggiornamento e su come risolverli.

• Aggiorna la versione del tuo nodo a 8 o superiore e installa Angular cli latest globalmente da npm i -g @ angular / cli @ latest.
• Angular 6 utilizza angular.json come file di configurazione invece di .anguar-cli.json. Anche tslint è stato modificato. Controlla https://github.com/angular/angular-cli/wiki/angular-workspace per i dettagli di configurazione più recenti. Devi spostare qualsiasi configurazione esistente in un nuovo file di configurazione.
• Per fare questo, crea un altro progetto fittizio con l'ultimo cli usando il nuovo 'tuo-progetto' e gli stessi valori predefiniti come prefisso, stile ecc. Che hai usato in precedenza per il tuo progetto. Crea un nuovo progetto con cli https://github.com/angular/angular-cli/wiki/new
• Usa https://update.angular.io/ per controllare cosa è stato cambiato dalla tua attuale versione di Angular → Angular 6. Fornisce l'uso di come cambiarli / correggerli.
• Segui i passaggi precedenti e copia / aggiorna il file angular.json creato nel passaggio 2. Eseguire npm i nel progetto per ottenere tutte le dipendenze ed eseguire l'aggiornamento di npm
• Adesso arriva la parte più importante. Aggiornamento RxJS e risoluzione dei conflitti. RxJS ha standardizzato le importazioni di operatori e creatori di Observable con questa versione. Eseguire npm i -g rxjs-tslint e aggiungere di seguito la configurazione lint in 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
  }
}

• Ora esegui ng lint --fix. Ciò risolve alcuni elementi ma la maggior parte dei problemi rimanenti verrà evidenziata e sarà necessario risolverla manualmente.

Cambio del nome degli operatori:

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

Tutti gli operatori sono stati spostati in rxjs / operators

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

I metodi di creazione osservabili vengono spostati in rxjs

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

Siete a posto. Benvenuto in Angular 6 :) Controlla il mio post sul blog qui su come aggiornare

Ho dovuto rieseguire ng update @ angular / cli per angular-cli.json da modificare in angular.json

Si prega di eseguire i commenti seguenti per aggiornare ad Angular 6 da Angular 5

1. ng update @ angular / cli
2. ng update @ angular / core
3. npm installa rxjs-compat (per supportare la versione precedente rxjs 5.6)
4. npm install -g rxjs-tslint (Per cambiare dal formato rxjs 5 a rxjs 6 nel codice. Installa globalmente solo allora funzionerà)
5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (Dopo l'installazione dobbiamo cambiarlo nel nostro codice sorgente in formato rxjs6)
6. npm disinstalla rxjs-compat (rimuovilo finalmente)

Guida completa

----------------- Con angular-cli --------------------------

1. Aggiorna la CLI a livello globale e locale

1. Utilizzando NPM (assicurati di avere la versione del nodo 8+)

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

2. Utilizzando Yarn

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

2.Aggiorna le dipendenze

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

Angular 6 ora dipende da TypeScript 2.7 e RxJS 6

Normalmente ciò significherebbe che devi aggiornare il tuo codice ovunque vengano utilizzate le importazioni e gli operatori RxJS, ma per fortuna c'è un pacchetto che si occupa della maggior parte del lavoro pesante:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Quindi puoi eseguire rxjs-5-to-6-migrate

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

infine rimuovere rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Fare riferimento a questo link https://alligator.io/angular/angular-6/

------------------- Senza angolare-cli -------------------------

Quindi devi aggiornare manualmente il tuo package.jsonfile.

Allora corri

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

Come ha sottolineato Vinay Kumar, non aggiornerà la CLI angolare installata a livello globale. Per aggiornarlo globalmente basta usare i seguenti comandi:

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

Nota se vuoi aggiornare un progetto esistente devi modificare il progetto esistente, dovresti cambiare package.json all'interno del tuo progetto.

Non ci sono modifiche sostanziali in Angular stesso ma sono in RxJS, quindi non dimenticare di utilizzare la libreria rxjs-compat per lavorare con il codice legacy.

  npm install --save rxjs-compat  

Ho scritto un buon articolo sull'installazione / aggiornamento della CLI Angular http://bmnteam.com/angular-cli-installation/

esegui semplicemente il seguente comando:

ng update

nota: questo non verrà aggiornato a livello globale.

Ecco come lo faccio funzionare.

Il mio ambiente:

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

Nota: per abilitare ng Updateè necessario installare prima 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

opzionale se hai 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/core@10.0.1 --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //for ng-bootstrap

Se utilizzi Observable e ottieni l'errore:

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'.

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

Per

import { Observable, of } from "rxjs";

Problema con la CLI di Angular: https://github.com/angular/angular-cli/issues/10621

Ci sono alcuni passaggi per aggiornare 2/4/5 ad Angular 6.

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

Per risolvere il problema relativo a "angular.json": -

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

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

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

Spero che questo ti aiuti :)