Cómo actualizar la versión Angular en angular - cli proyecto?

La respuesta de JJB me puso en el camino correcto, pero la actualización no fue muy bien. 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 sencillo.

Detalles de la solución

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

$ 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 paquete.archivo json a mano y subir las dependencias @ angular a 2.4.1, luego hacer otro npm install.

Después de esto pude hacer ng init. He actualizado mis archivos de configuración, pero ninguno de mis archivos app/*. Cuando esto se hizo, todavía estaba recibiendo 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ímbolo estáticamente. 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 original .ts file), resolviendo el símbolo AppModule en C:/_git/my-project/code/src/main/frontend/src/app/app.módulo.ts

Este error está vinculado al 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 abordar este error, había utilizado una función exportada e hizo el después del cambio al 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 requerían los siguientes cambios: {[13]]}

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

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

3. Con la ayuda de angular-cli y el ng init comando, he actualizado mis archivos de configuración. Creo que los cambios críticos fueron a angular-cli.json y paquete.json. Consulte cambios en el archivo de configuración en la parte inferior.

4. Realice cambios de código en las funciones de exportación antes de que haga referencia a ellas, como se muestra en los detalles de la solución.

Cambios en la Configuración de las claves

Angular-cli.json changes

{
  "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 paquete.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 buscaba era la herencia de componentes que se introdujo en 2.3, por lo que estaba bien con estas versiones. El paquete original.json 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"
  }
}

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

Instalación de Npm@angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest save save

Lo intenté y obtuve un par de errores debido a mi zona.las bibliotecas js y ngrx / store son versiones anteriores.

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

Simplemente use la función incorporada de Angular CLI

ng update

Para actualizar a la última versión.

Eliminar:

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 para actualizar.

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 proyectos locales:

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

Véase la referencia https://github.com/angular/angular-cli