Posteriormente a investigar con expertos en esta materia, programadores de deferentes áreas y maestros dimos con la solución al dilema y la compartimos en este post.
Solución:
ÚTIL:
Use la Guía de actualización angular oficial, seleccione su versión actual y la versión a la que desea actualizar para obtener la guía de actualización correspondiente. https://update.angular.io/
Consulte el repositorio de GitHub Angular CLI diff para comparar los cambios de Angular CLI. https://github.com/cexbrayat/angular-cli-diff/
ACTUALIZADO 26/12/2018:
Utilice la Guía de actualización angular oficial mencionada en la sección útil anterior. Proporciona la información más actualizada con enlaces a otros recursos que pueden resultar útiles durante la actualización.
ACTUALIZADO 05/08/2018:
Introducción de Angular CLI 1.7 ng update.
actualización ng
Un nuevo comando CLI de Angular para ayudar a simplificar el mantenimiento de sus proyectos actualizados con las últimas versiones. Los paquetes pueden definir la lógica que se aplicará a sus proyectos para garantizar el uso de las funciones más recientes, así como para realizar cambios para reducir o eliminar el impacto relacionado con los cambios importantes.
La información de configuración para la actualización de ng se puede encontrar aquí
1.7 a 6 actualización
CLI 1.7 no admite una actualización automática v6. Instale manualmente @ angular / cli a través de su administrador de paquetes, luego ejecute el esquema de migración de actualización para finalizar el proceso.
npm install @angular/[email protected]^6.0.0
ng update @angular/cli --migrate-only --from=1
ACTUALIZADO 30/04/2017:
1.0 actualización
Ahora deberías seguir el Guía de migración de CLI angular
ACTUALIZADO 03/04/2017:
Actualización RC
Deberías seguir el Guía de migración de Angular CLI RC
ACTUALIZADO 20/02/2017:
Tenga en cuenta que 1.0.0-beta.32 tiene cambios importantes y se ha eliminado ng init and ng update
La solicitud de extracción aquí indica lo siguiente:
CAMBIO IMPORTANTE: Eliminar los comandos ng init & ng update porque su implementación actual causa más problemas de los que resuelve. La funcionalidad de actualización volverá a la CLI, hasta entonces será necesario realizar actualizaciones manuales de las aplicaciones.
El CHANGELOG.md de angular-cli establece lo siguiente:
CAMBIOS IMPORTANTES
– @ angular / cli: Eliminando los comandos ng init & ng update porque su implementación actual causa más problemas de los que resuelve. Una vez que se lance RC, ya no necesitaremos usarlos para actualizar, ya que el paso será tan simple como instalar la última versión de la CLI.
ACTUALIZADO 17/02/2017:
Angular-cli ahora se ha agregado al paquete NPM @angular. Ahora debe reemplazar el comando anterior con lo siguiente:
Paquete global:
npm uninstall -g angular-cli @angular/cli
npm cache clean
npm install -g @angular/[email protected]Paquete de proyecto local:
rm -rf node_modules dist # On Windows use rmdir /s /q node_modules dist
npm install --save-dev @angular/[email protected]
npm install
ng init
RESPUESTA ORIGINAL
Debe seguir los pasos de README.md en GitHub para actualizar angular a través de angular-cli.
Aquí están:
Actualizando angular-cli
Para actualizar angular-cli a una nueva versión, debe actualizar tanto el paquete global como el paquete local de su proyecto.
Paquete global:
npm uninstall -g angular-cli
npm cache clean
npm install -g [email protected]Paquete de proyecto local:
rm -rf node_modules dist tmp # On Windows use rmdir /s /q node_modules dist tmp
npm install --save-dev [email protected]
npm install
ng init
Corriendo ng init buscará cambios en todos los archivos generados automáticamente creados por ng new y le permitirá actualizar el suyo. Se le ofrecen cuatro opciones para cada archivo modificado: y (sobrescribir), n (no sobrescribir), d (mostrar la diferencia entre su archivo y el archivo actualizado) y h (ayuda).
Lea atentamente las diferencias de cada archivo de código y acepte los cambios o incorpórelos manualmente después de que finalice ng init.
La respuesta de JJB me puso en el camino correcto, pero la actualización no fue muy fácil. Mi proceso se detalla a continuación. Con suerte, el proceso se vuelve más fácil en el futuro y se puede usar la respuesta de JJB o algo aún más sencillo.
Detalles de la solución
He seguido los pasos capturados en la respuesta de JJB para actualizar el angular-cli con precisión. Sin embargo, después de ejecutar npm install angular-cli estaba roto. Incluso tratando de hacer ng version produciría un error. Entonces no pude hacer el ng init mando. Vea el error a continuación:
$ ng init
core_1.Version is not a constructor
TypeError: core_1.Version is not a constructor
at Object. (C:_gitmy-projectcodesrcmainfrontendnode_modules@angularcompiler-clisrcversion.js:18:19)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
...
Para poder usar cualquier comando angular-cli, tuve que actualizar mi archivo package.json a mano y subir las dependencias @angular a 2.4.1, luego hacer otra npm install.
Después de esto pude hacer ng init. Actualicé mis archivos de configuración, pero ninguno de mis archivos de aplicación / *. Cuando se hizo esto, todavía recibía errores. El primero se detalla a continuación, el segundo fue el mismo tipo de error pero en un archivo diferente.
ERROR en Se encontró un error al resolver los valores de los símbolos de forma estática. No se admiten llamadas a funciones. Considere reemplazar la función o lambda con una referencia a una función exportada (posición 62: 9 en el archivo .ts original), resolviendo el símbolo AppModule en C: / _ git / my-project / code / src / main / frontend / src / app /app.module.ts
Este error está relacionado con el siguiente proveedor de fábrica en mi AppModule
provide: Http, useFactory:
(backend: XHRBackend, options: RequestOptions, router: Router, navigationService: NavigationService, errorService: ErrorService) =>
return new HttpRerouteProvider(backend, options, router, navigationService, errorService);
, deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
Para solucionar este error, utilicé una función exportada e hice el siguiente cambio en el proveedor.
provide: Http,
useFactory: httpFactory,
deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService]
... // elsewhere in AppModule
export function httpFactory(backend: XHRBackend,
options: RequestOptions,
router: Router,
navigationService: NavigationService,
errorService: ErrorService)
return new HttpRerouteProvider(backend, options, router, navigationService, errorService);
Resumen
Para resumir lo que entiendo que son los detalles más importantes, se requirieron los siguientes cambios:
-
Actualice la versión de angular-cli siguiendo los pasos detallados en la respuesta de JJB (y en su página de github).
-
Actualizando la versión @angular a mano, 2.0.0 no parecía ser compatible con la versión 1.0.0-beta.24 de angular-cli
-
Con la ayuda de angular-cli y el
ng initcomando, actualicé mis archivos de configuración. Creo que los cambios críticos fueron en angular-cli.json y package.json. Consulte los cambios en el archivo de configuración en la parte inferior. -
Realice cambios de código para exportar funciones antes de hacer referencia a ellas, como se captura en los detalles de la solución.
Cambios de configuración clave
cambios de angular-cli.json
{"proyecto": "versión": "1.0.0-beta.16", "nombre": "frontend", "aplicaciones": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
...
changed to…
{
"project":
"version": "1.0.0-beta.24",
"name": "frontend"
,
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
]...
Mi package.json se ve así después de una combinación manual que considera las versiones utilizadas por ng-init. Tenga en cuenta que mi versión angular no es 2.4.1, pero el cambio que buscaba era la herencia de componentes que se introdujo en 2.3, así que estaba bien con estas versiones. El package.json original está en cuestión.
"name": "frontend",
"version": "0.0.0",
"license": "MIT",
"angular-cli": ,
"scripts":
"ng": "ng",
"start": "ng serve",
"lint": "tslint "src/**/*.ts"",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor",
"build": "ng build",
"buildProd": "ng build --env=prod"
,
"private": true,
"dependencies":
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"@angular/material": "^2.0.0-beta.1",
"@types/google-libphonenumber": "^7.4.8",
"angular2-datatable": "^0.4.2",
"apollo-client": "^0.4.22",
"core-js": "^2.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2",
"google-libphonenumber": "^2.0.4",
"graphql-tag": "^0.1.15",
"hammerjs": "^2.0.8",
"ng2-bootstrap": "^1.1.16"
,
"devDependencies":
"@types/hammerjs": "^2.0.33",
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/lodash": "^4.14.39",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.0.3",
"typings": "1.4.0"
Simplemente use la función incorporada de Angular CLI
ng update
para actualizar a la última versión.
Reseñas y calificaciones del post
Si piensas que te ha resultado de provecho este post, sería de mucha ayuda si lo compartes con más entusiastas de la programación de esta manera contrubuyes a dar difusión a nuestra información.