Como Angular 6 está aquí, quiero actualizar o mover mi aplicación cliente angular 5 a angular 6, pero no recibo ningún tutorial ni nada que pueda guiarme.

Según yo, solo necesito ejecutar una nueva CLI de Angular y luego tengo que mover mi fuente anterior a un nuevo proyecto. Leí que Angular 6 está usando un nuevo renderizador llamado Ivy. ¿Tendré que cambiar mi proyecto según Ivy?

Actualizar de Angular v6 a Angular v7

Se ha lanzado la versión 7 de Angular . Enlace oficial del blog de Angular . Visite la guía oficial de actualización angular https://update.angular.io para obtener información detallada. Estos pasos funcionarán para aplicaciones básicas de angular 6 que utilicen Angular Material.

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

Actualizar de Angular v5 a Angular v6

Se ha lanzado la versión 6 de Angular Enlace oficial del blog de Angular . He mencionado los pasos generales de actualización a continuación, pero antes y después de la actualización debe realizar cambios en su código para que funcione en v6, para obtener información detallada, visite el sitio web oficial https://update.angular.io .

Pasos de actualización (en gran parte tomados de la Guía oficial de actualización de Angular para una aplicación angular básica que usa Material angular):

1. Asegúrese de que la versión de NodeJS sea 8.9+ si no la actualiza.

2. Actualice Angular cli global y localmente, y migre la configuración anterior .angular-cli.json al nuevo formato angular.json ejecutando lo siguiente:

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

3. Actualice todos sus paquetes de marco Angular a v6 y la versión correcta de RxJS y TypeScript ejecutando lo siguiente:

   ng update @angular/core
   

4. Actualice Angular Material a la última versión ejecutando lo siguiente:

   ng update @angular/material
   

5. RxJS v6 tiene cambios importantes desde v5, v6 trae el paquete de compatibilidad con versiones anteriores rxjs-compat que mantendrá sus aplicaciones en funcionamiento, pero debe refactorizar el código TypeScript para que no dependa de rxjs-compat. Para refactorizar el código TypeScript, ejecute lo siguiente:

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

   Nota: Una vez que todas sus dependencias se hayan actualizado a RxJS 6, elimine rxjs- compat ya que aumenta el tamaño del paquete. Consulte esta Guía de actualización de RxJS para obtener más información.

   npm uninstall rxjs-compat
   

6. Listo, ejecuta ng servepara comprobarlo.
   Si obtiene errores en la compilación, consulte https://update.angular.io para obtener información detallada.

Actualizar de Angular v5 a Angular 6.0.0-rc.5

1. Actualice rxjs a 6.0.0-beta.0, consulte esta Guía de actualización de RxJS para obtener más información. RxJS v6 tiene cambios importantes, por lo tanto, primero haga que su código sea compatible con la última versión de RxJS.

2. Actualice la versión NodeJS a 8.9+ (esto es requerido por la versión angular cli 6)

3. Actualice el paquete global de Angular cli a la próxima versión.

   npm uninstall -g @angular/cli
   npm cache verify
   

   si la versión npm es <5, entonces use npm cache clean

   npm install -g @angular/cli@next
   

4. Cambie las versiones de los paquetes angulares en el archivo package.json a ^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. A continuación, actualice el paquete local de Angular cli a la siguiente versión e instale los paquetes mencionados anteriormente.

   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. El formato de configuración de Angular CLI se ha cambiado de la versión angular cli 6.0.0-rc.2, y su configuración existente se puede actualizar automáticamente ejecutando el siguiente comando. Eliminará el archivo de configuración antiguo .angular-cli.json y escribirá un nuevo archivo angular.json .

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

Nota: - Si obtiene el siguiente error "El compilador angular requiere TypeScript> = 2.7.2 y <2.8.0 pero se encontró 2.8.3 en su lugar". ejecutar el siguiente comando:

npm install [email protected]

Angular 6 acaba de ser lanzado.

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

Esto es lo que funcionó para uno de mis proyectos más pequeños.

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 instalar rxjs-compat
6. ng servir

Es posible que deba actualizar sus scripts de ejecución en package.json. Por ejemplo. si usa indicadores como "aplicación" y "entorno" Estos se han actualizado a "proyecto" y "configuración" respectivamente.

Consulte https://update.angular.io/ para obtener una guía más detallada.

Simplemente use la guía de actualización oficial que le dirá lo que debe hacer para sus propias necesidades particulares:

https://update.angular.io/

Consulte los detalles de la actualización paso a paso de Angular 5 a Angular 6. Estos proporcionan detalles sobre los problemas que encuentra durante la actualización y cómo resolverlos.

• Actualice la versión de su nodo a 8 o superior e instale Angular cli más reciente globalmente por npm i -g @ angular / cli @ latest.
• Angular 6 usa angular.json como archivo de configuración en lugar de .anguar-cli.json. También se ha cambiado tslint. Consulte https://github.com/angular/angular-cli/wiki/angular-workspace para obtener los detalles de configuración más recientes. Tiene que mover cualquier configuración existente a un nuevo archivo de configuración.
• Para hacer esto, cree otro proyecto ficticio con el último cli usando ng new 'your-project' y los mismos valores predeterminados, como prefijo, estilo, etc., que utilizó anteriormente para su proyecto. Cree un nuevo proyecto con cli https://github.com/angular/angular-cli/wiki/new
• Use https://update.angular.io/ para verificar qué se ha cambiado desde su versión actual de Angular → Angular 6. Proporciona el uso de cómo cambiarlos / corregirlos.
• Siga los pasos anteriores y copie / actualice el archivo angular.json creado en el paso 2. Haga npm i en su proyecto para obtener todas las dependencias y realice la actualización de npm
• Ahora viene la gran parte. Actualización de RxJS y resolución de conflictos. RxJS ha estandarizado las importaciones de operadores y creadores observables con esta versión. Haga npm i -g rxjs-tslint y agregue la siguiente configuración de lint en 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
  }
}

• Ahora ejecute lint --fix. Esto corrige algunos elementos, pero la mayoría de los problemas restantes se resaltarán y tendrá que solucionarlo manualmente.

Cambio de nombre de los operadores:

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

Todos los operadores se movieron a rxjs / operator

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

Los métodos de creación observables se mueven a rxjs

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

Estas listo. Bienvenido a Angular 6 :) Consulte la publicación de mi blog aquí sobre cómo actualizar

Tuve que volver a ejecutar ng update @ angular / cli para que angular-cli.json se cambiara a angular.json

Ejecute los siguientes comentarios para actualizar a Angular 6 desde Angular 5

1. ng actualizar @ angular / cli
2. ng update @ angular / core
3. npm install rxjs-compat (para admitir la versión anterior rxjs 5.6)
4. npm install -g rxjs-tslint (Para cambiar del formato rxjs 5 al rxjs 6 en el código. Instalar globalmente, entonces solo funcionará)
5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (Después de la instalación tenemos que cambiarlo en nuestro código fuente al formato rxjs6)
6. npm desinstalar rxjs-compat (eliminar esto finalmente)

Guía completa

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

1. Actualice la CLI a nivel mundial y local

1. Usando NPM (asegúrese de tener la versión de nodo 8+)

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

2. Usando hilo

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

2.Actualizar dependencias

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

Angular 6 ahora depende de TypeScript 2.7 y RxJS 6

Normalmente, eso significaría que tiene que actualizar su código en todos los lugares donde se utilizan las importaciones y los operadores de RxJS, pero afortunadamente hay un paquete que se encarga de la mayor parte del trabajo pesado:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Entonces puede ejecutar rxjs-5-to-6-migrate

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

finalmente eliminar rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Consulte este enlace https://alligator.io/angular/angular-6/

------------------- Sin angular-cli -------------------------

Por lo tanto, debe actualizar manualmente su package.jsonarchivo.

Entonces corre

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

Como señaló Vinay Kumar, no actualizará la CLI angular instalada globalmente. Para actualizarlo globalmente, solo use los siguientes comandos:

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

Tenga en cuenta que si desea actualizar un proyecto existente, debe modificar el proyecto existente, debe cambiar package.json dentro de su proyecto.

No hay cambios importantes en Angular, pero están en RxJS, así que no olvide usar la biblioteca rxjs-compat para trabajar con código heredado.

  npm install --save rxjs-compat  

Escribí un buen artículo sobre la instalación / actualización de Angular CLI http://bmnteam.com/angular-cli-installation/

simplemente ejecute el siguiente comando:

ng update

nota: esto no se actualizará globalmente.

Así es como lo hago funcionar.

Mi entorno:

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

Nota: Para habilitarlo ng Update, primero debe instalar 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

opcional si tiene 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

Si usa Observable y obtiene el error:

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

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

A

import { Observable, of } from "rxjs";

Problema de CLI angular: https://github.com/angular/angular-cli/issues/10621

Hay algunos pasos para actualizar 2/4/5 a Angular 6.

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

Para solucionar el problema relacionado con "angular.json": -

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

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

MIGRACIÓN RXJS
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Espero que esto te ayude :)