tutorial proyecto instalar español crear cli app angular angular-cli

proyecto - instalar angular 6



¿Cómo actualizar el proyecto CLI angular? (7)

Estoy intentando actualizar mi proyecto angular 2 de 2.0.0 a 2.4.1 . Entiendo que las versiones semánticas se han adoptado desde la versión 2.0.0 y 2.xx versiones 2.xx deben ser reemplazos 2.xx . Mi experiencia parece indicar lo contrario. Tal vez simplemente no sé lo que estoy haciendo, pero no he encontrado que esto sea sencillo ...

Intento 1 - Actualización manual de la versión

Mi primer enfoque ingenuo fue actualizar manualmente mis dependencias @angular . Puede hacer referencia a mi package.json a continuación (actualización 1). Hice estos cambios, luego hice una npm install y recibí varias advertencias y luego recibí el siguiente error cuando intenté hacer un ng serve .

No se puede leer la propiedad ''AssetUrl'' de undefined

Y mis advertencias ...

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN @angular/[email protected] requires a peer of rxjs@^5.0.1 but none was installed. npm WARN @angular/[email protected] requires a peer of zone.js@^0.7.2 but none was installed. npm WARN @angular/[email protected] requires a peer of rxjs@^5.0.1 but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. npm WARN @ngtools/[email protected] requires a peer of @angular/compiler-cli@^2.3.1 but none was installed. npm WARN @ngtools/[email protected] requires a peer of @angular/tsc-wrapped@^0.5.0 but none was installed. npm WARN @ngtools/[email protected] requires a peer of webpack@^2.1.0-beta.25 but none was installed.

Así que decidí corregir estas advertencias, pero no sé cómo solucionarlas todas (por ejemplo, @ ngtools / webpack) y algunas de ellas parecen estar en conflicto entre sí. Así que abandoné el enfoque manual de actualizar mi versión angular 2 ...

Paquete original json

{ "name": "frontend", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "lint": "tslint /"src/**/*.ts/"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor", "build": "ng build", "buildProd": "ng build --env=prod" }, "private": true, "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/material": "^2.0.0-alpha.9-experimental-pizza", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@types/google-libphonenumber": "^7.4.8", "angular2-datatable": "^0.4.2", "apollo-client": "^0.4.22", "core-js": "^2.4.1", "google-libphonenumber": "^2.0.4", "graphql-tag": "^0.1.15", "hammerjs": "^2.0.8", "ng2-bootstrap": "^1.1.16", "rxjs": "5.0.0-beta.12", "ts-helpers": "^1.1.2", "zone.js": "^0.6.26" }, "devDependencies": { "@types/hammerjs": "^2.0.33", "@types/jasmine": "^2.2.30", "@types/lodash": "^4.14.39", "angular-cli": "1.0.0-beta.16", "codelyzer": "~0.0.26", "jasmine-core": "2.4.1", "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.9", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "2.0.2", "typings": "1.4.0" } }

Actualización 1 de package.json

{ "name": "frontend", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "lint": "tslint /"src/**/*.ts/"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor", "build": "ng build", "buildProd": "ng build --env=prod" }, "private": true, "dependencies": { "@angular/common": "2.4.1", "@angular/compiler": "2.4.1", "@angular/core": "2.4.1", "@angular/forms": "2.4.1", "@angular/http": "2.4.1", "@angular/material": "^2.0.0-alpha.9-experimental-pizza", "@angular/platform-browser": "2.4.1", "@angular/platform-browser-dynamic": "2.4.1", "@angular/router": "3.0.0", "@types/google-libphonenumber": "^7.4.8", "angular2-datatable": "^0.4.2", "apollo-client": "^0.4.22", "core-js": "^2.4.1", "google-libphonenumber": "^2.0.4", "graphql-tag": "^0.1.15", "hammerjs": "^2.0.8", "ng2-bootstrap": "^1.1.16", "rxjs": "5.0.1", "ts-helpers": "^1.1.2", "zone.js": "^0.7.2" }, "devDependencies": { "@types/hammerjs": "^2.0.33", "@types/jasmine": "^2.2.30", "@types/lodash": "^4.14.39", "angular-cli": "1.0.0-beta.16", "codelyzer": "~0.0.26", "jasmine-core": "2.4.1", "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.9", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "2.0.2", "typings": "1.4.0" } }

Intento 2 - Use npm-check-updates

Desde que intenté seleccionar mis dependencias angulares para actualizaciones, terminé en una telaraña de otras dependencias que debían actualizarse, luego intenté simplemente actualizar todo.

En base a esta respuesta probé lo siguiente:

npm i -g npm-check-updates npm-check-updates -u npm install

Esto salió bien, pero cuando intenté ng serve me sale el siguiente error:

ERROR en AppModule no es un NgModule

Usando la información reunida here , bajé la versión de mi mecanografiado, ese error desapareció, pero apareció un nuevo error.

ERROR en error encontrado resolviendo valores de símbolos estáticamente. Referencia a una función no exportada (posición 29:10 en el archivo .ts original), resolviendo el símbolo restPaths en rest-paths.ts, resolviendo el símbolo AppModule en app.module.ts, resolviendo el símbolo AppModule en app.module.ts

He estado luchando para superar estos errores, pero el hecho de que estoy teniendo tantos problemas está levantando banderas rojas.

¿Alguien puede ayudar? ¿Estoy tomando el enfoque equivocado?

Tenga en cuenta que he visto algunas sugerencias sobre la actualización de proyectos de angular-cli que recomiendan desinstalar angular-cli y reinstalarlo, luego hacer un ng init y sobrescribir sus archivos de configuración. Esto no funcionó para mí porque ya tenía la última versión.

Editar: La declaración sobre tener el último angular-cli era incorrecta. Tenía angular-cli version 1.0.0-beta.16 mientras que la última en el momento de esta edición es 1.0.0-beta.24 . Sin embargo, intenté actualizar mi angular-cli y ejecutar ng init en mi proyecto existente. Ahora me doy cuenta de que no seguí los pasos descritos en la página de github angular-cli con precisión. Me npm install --save-dev angular-cli@latest , y npm install --save-dev angular-cli@latest todos mis node_modules en lugar de usar el comando rm que describen.

ÚTIL:

Utilice 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 oficial de actualización angular mencionada en la sección útil anterior. Proporciona la información más actualizada con enlaces a otros recursos que pueden ser útiles durante la actualización.

ACTUALIZADO 08/05/2018:

Angular CLI 1.7 introdujo una ng update .

ng update

Un nuevo comando Angular CLI 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 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 here

1.7 a 6 actualizaciones

CLI 1.7 no admite una actualización automática de 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/cli@^6.0.0 ng update @angular/cli --migrate-only --from=1

ACTUALIZADO 30/04/2017:

1.0 Actualización

Ahora debe seguir la guía de migración de CLI angular

ACTUALIZADO 03/03/2017:

Actualización RC

Debe seguir la 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 ha eliminado ng init and ng update

La solicitud de extracción here establece lo siguiente:

CAMBIO DE ROMPER: 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 se deberán realizar actualizaciones manuales de las aplicaciones.

El angular-cli CHANGELOG.md establece lo siguiente:

ROMPIENDO CAMBIOS - @ 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, no necesitaremos usarlos para actualizar más, 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 Nang @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/cli@latest

Paquete de proyecto local:

rm -rf node_modules dist # On Windows use rmdir /s /q node_modules dist npm install --save-dev @angular/cli@latest npm install ng init

RESPUESTA ORIGINAL

Debe seguir los pasos de README.md en GitHub para actualizar angular mediante angular-cli .

Aquí están:

Actualización 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 angular-cli@latest

Paquete de proyecto local:

rm -rf node_modules dist tmp # On Windows use rmdir /s /q node_modules dist tmp npm install --save-dev angular-cli@latest npm install ng init

La ejecución de ng init verificará los cambios en todos los archivos autogenerados creados por ng new y le permitirá actualizar los suyos. Se le ofrecen cuatro opciones para cada archivo modificado: y (sobrescribir), n (no sobrescribir), d (mostrar diferencias entre su archivo y el archivo actualizado) y h (ayuda).

Lea cuidadosamente los diferenciales para cada archivo de código y acepte los cambios o incorpórelos manualmente después de que ng init finalice.

De acuerdo con la documentación aquí http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html , ''debería'' poder ejecutar ...

npm install @ angular / {común, compilador, compilador-cli, núcleo, formularios, http, plataforma-navegador, plataforma-navegador-dinámico, plataforma-servidor, enrutador, animaciones} @latest typecript @ latest --save

Lo probé y obtuve un par de errores debido a que mis bibliotecas zone.js y ngrx / store son versiones anteriores.

Actualizarlos a las últimas versiones npm install zone.js@latest --save y npm install @ngrx/store@latest -save , luego ejecutar la instalación angular nuevamente funcionó para mí.

La respuesta de JJB me llevó por el buen camino, pero la actualización no fue muy fácil. Mi proceso se detalla a continuación. Esperemos que el proceso se vuelva más fácil en el futuro y la respuesta de JJB se pueda usar o algo aún más directo.

Detalles de la solución

He seguido los pasos capturados en la respuesta de JJB para actualizar el cli angular con precisión. Sin embargo, después de ejecutar npm install angular-cli se rompió. Incluso intentar hacer una ng version produciría un error. Entonces no pude hacer el comando ng init . Ver error a continuación:

$ ng init core_1.Version is not a constructor TypeError: core_1.Version is not a constructor at Object.<anonymous> (C:/_git/my-project/code/src/main/frontend/node_modules/@angular/compiler-cli/src/version.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 esto se hizo, 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 error encontrado resolviendo valores de símbolos estáticamente. Las llamadas a funciones no son compatibles. 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:

  1. Actualice la versión angular-cli utilizando los pasos detallados en la respuesta de JJB (y en su página de github).

  2. Actualizando la versión @angular a mano, 2.0.0 no parecía ser compatible con la versión angular-cli 1.0.0-beta.24

  3. Con la ayuda de angular-cli y el comando ng init , actualicé mis archivos de configuración. Creo que los cambios críticos fueron en angular-cli.json y package.json. Vea los cambios en el archivo de configuración en la parte inferior.

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

{ "project": { "version": "1.0.0-beta.16", "name": "frontend" }, "apps": [ { "root": "src", "outDir": "dist", "assets": "assets", ...

cambiado a...

{ "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 fusió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 estaba buscando era la herencia de componentes que se introdujo en 2.3, por lo que estaba bien con estas versiones. El package.json original está en la pregunta.

{ "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" } }

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 @angular/cli@latest

Paquete de proyecto local:

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@latest npm install

Ver la referencia angular-cli

Retirar :

npm uninstall -g angular-cli

Reinstalar (con hilo)

# npm install --global yarn yarn global add @angular/cli@latest ng set --global packageManager=yarn # This will help ng-cli to use yarn

Reinstalar (con npm)

npm install --global @angular/cli@latest

Otra forma es no usar la instalación global y agregar la carpeta /node_modules/.bin en la RUTA, o usar scripts npm. Será más suave actualizar.

Simplemente use la función incorporada de Angular CLI

ng update

para actualizar a la última versión.

Solución que funcionó para mí:

  • Eliminar node_modules y la carpeta dist
  • (en cmd) >> actualización ng --todos --force
  • (en cmd) >> npm install typescript @ "> = 3.4.0 y <3.5.0" --save-dev --save-exacto
  • (en cmd) >> npm install --save core-js
  • Comentando la importación ''core-js / es7 / reflect''; en polyfill.ts
  • (en cmd) >> ng servir