instalar - Desea actualizar el proyecto de Angular v5 a Angular v6

crear proyecto angular 4 (11)

Como Angular 6 está aquí, quiero actualizar o mover mi aplicación cliente de 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 angular y luego mover mi fuente anterior a un nuevo proyecto. Leí que Angular 6 está usando un nuevo procesador llamado Ivy. ¿Tendré que cambiar mi proyecto de acuerdo con Ivy?

Actualización de Angular v6 a Angular v7

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

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

Actualización 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 la v6, para obtener información detallada, visite el sitio web oficial update.angular.io .

Pasos de actualización (en gran parte tomados de la update.angular.io para una aplicación angular básica que utiliza material angular):

Asegúrese de que la versión de NodeJS sea 8.9+ si no la actualiza.
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
Actualice todos sus paquetes de framework Angular a v6 y la versión correcta de RxJS y TypeScript ejecutando lo siguiente:

ng update @angular/core
Actualice Angular Material a la última versión ejecutando lo siguiente:

ng update @angular/material
RxJS v6 tiene cambios importantes desde v5, v6 trae el paquete de compatibilidad con versiones anteriores rxjs-compat que mantendrá sus aplicaciones funcionando, 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
Hecho ejecutar ng serve para comprobarlo.
Si obtiene errores en la compilación, consulte update.angular.io para obtener información detallada.

Actualización de Angular v5 a Angular 6.0.0-rc.5

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.
Actualice la versión NodeJS a 8.9+ (esto es requerido por la versión angular cli 6)
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
Cambie las versiones de 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" }
A continuación, actualice el paquete local Angular cli a la próxima 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
El formato de configuración de CLI angular 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 antiguo archivo de configuración .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". ejecuta el siguiente comando:

npm install [email protected]

Guía completa

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

1. Actualizar CLI global y localmente

Uso de NPM (asegúrese de tener la versión 8+ del nodo)

npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save
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 todas partes donde se utilizan las importaciones y 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-a-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 archivo package.json .

Entonces corre

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

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.

npm install -g @ angular / cli
npm install @ angular / cli
ng update @ angular / cli --migrate-only --from = 1.7.0
ng update @ angular / core
npm install rxjs-compat
ng servir

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

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

Así es como lo hago funcionar.

Mi entorno:

CLI angular global: 6.0.0, local: 1.7.4, angular: 5.2, mecanografiado 2.5.3

Nota: Para habilitar ng Update , debe instalar Angular CLI 6.0 primero npm install -g @angular/cli or npm install @angular/cli

ng update //update Angular Package core/common/complier... to 6.0.0
ng update @angular/cli //change angular-cli.json to angular.json

opcional si tiene material angular 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1:

ng update @angular/material //upgrade to 6.0.1
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''; import { Observable } from "rxjs/Observable"; import { of } from ''rxjs/observable/of'';

import { Observable, of } from "rxjs";

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

Como Vinay Kumar señaló que no actualizará la CLI angular instalada global. 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 el 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 instalación / actualización de Angular CLI http://bmnteam.com/angular-cli-installation/

Hay pocos 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 MIGRACIÓN
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

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

Esperando que esto te ayude :)

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

update.angular.io

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

Verifique los detalles de actualización paso a paso de Angular 5 a Angular 6. Esto proporciona detalles sobre los problemas que encuentra durante la actualización y cómo resolverlos.

Actualice su versión de nodo a 8 o superior e instale Angular cli latest globalmente mediante npm i -g @ angular / cli @ latest.
Angular 6 usa angular.json como archivo de configuración en lugar de .anguar-cli.json. También tslint ha sido cambiado. Consulte https://github.com/angular/angular-cli/wiki/angular-workspace para obtener los últimos detalles de configuración. Debe mover cualquiera de sus configuraciones existentes a un nuevo archivo de configuración.
Para hacer esto, cree otro proyecto ficticio con el último cli usando ng nuevo ''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 update.angular.io para verificar qué 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 actualice npm
Ahora viene la gran parte. Actualización de RxJS y resolución de conflictos. RxJS ha estandarizado las importaciones de operadores y creadores de Observable con esta versión. Haga npm i -g rxjs-tslint y agregue la siguiente configuración de pelusa 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 ng lint --fix. Esto soluciona algunos elementos, pero la mayoría de los problemas restantes se resaltarán y tendrá que solucionarlo manualmente.

Operador Cambio de nombre:

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

Todos los operadores se trasladaron a rxjs / operadores

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 mi publicación de blog aquí sobre cómo actualizar

simplemente ejecute el siguiente comando:

ng update

nota: esto no se actualizará globalmente.

Ejecute los comentarios a continuación para actualizar Angular 6 desde Angular 5

ng update @ angular / cli
ng update @ angular / core
npm install rxjs-compat (para admitir la versión anterior rxjs 5.6)
npm install -g rxjs-tslint (Para cambiar de formato rxjs 5 a rxjs 6 en el código. Instalar globalmente, entonces solo funcionará)
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)
npm uninstall rxjs-compat (Eliminar esto finalmente)