¿Cómo actualizo correctamente angular 2 (npm) a la última versión?

Recientemente comencé el tutorial de Angular 2 en https://angular.io/docs/ts/latest/tutorial/ .

y lo dejé con Angular 2 beta 8. Ahora reanudé el tutorial y la última versión beta es beta 14.

Si simplemente actualizo npm, se actualizan algunos módulos (precargados con el tutorial) pero no Angular2 (puedo ver eso con npm ls ).

Si hago npm update angular 2 o npm update [email protected] tampoco hace nada.

El comando npm update -D && npm update -Sactualizará todos los paquetes dentro package.jsonde su última versión, de acuerdo con su rango de versión definido . Puedes leer más sobre esto aquí .

Si desea actualizar Angular desde una versión anterior 2.0.0-rc.1, deberá editar manualmente package.json, ya que Angular se dividió en varios módulos npm. Sin esto, como señala el paquete angular22.0.0-beta.21 , nunca podrás usar la última versión de Angular.
Puede encontrar una lista con algunos de los módulos más comunes que necesitará para comenzar en el repositorio de inicio rápido .

Notas:

• Una manera genial de mantenerse actualizado con la última versión de sus paquetes es usarlo, npm outdatedque le muestra todos los paquetes obsoletos junto con su versión deseada y la última.

• La razón por la que necesitamos para encadenar dos comandos, npm update -Dy npm update -Ses superar este error hasta que esté fijo.

Otro paquete agradable que utilicé para migrar desde una versión beta de Angular2 Angular2 2.0.0 finalesnpm-check-updates

Muestra la última versión disponible de todos los paquetes especificados en su package.json. En contraste npm outdated, también es capaz de editar su package.json, permitiéndole hacer npm upgrademás tarde.

Instalar en pc

sudo npm install -g npm-check-updates

Uso

ncupara mostrar

ncu -u para reescribir su paquete.json

Actualice al último Angular 5

Paquetes de Angular Dep: npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Otros paquetes instalados por el cli angular npm install --save core-js@latest rxjs@latest zone.js@latest

Paquetes de desarrollo angular: npm install --save-dev @angular/{compiler-cli,cli,language-service}@latest

Tipos de paquetes de desarrollo: npm install --save-dev @types/{jasmine,jasminewd2,node}@latest

Otros paquetes que el cli angular instala como dev dev: npm install --save-dev codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest

Instale la última versión compatible utilizada por Angular cli (no haga @latest): npm install --save-dev [email protected]

Cambie el nombre del archivo angular-cli.json a .angular-cli.json y actualice el contenido:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "project3-example"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

ACTUALIZACIÓN: a
partir de CLI v6 , puede ejecutar ng updatepara actualizar sus dependencias automáticamente a una nueva versión.

A ng updateveces es posible que desee agregar una --forcebandera. Si lo hace, asegúrese de que la versión del mecanografiado que instaló de esta manera sea compatible con su versión angular actual; de lo contrario, es posible que deba degradar la versión del mecanografiado.

Consulte también esta guía Actualizando sus proyectos angulares

Para bash sólo los usuarios

Si está Mac/Linuxactivado o está ejecutando bash on Windows(que no funcionará de forma predeterminada Windows CMD) puede ejecutar ese elemento de línea:

npm install @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5 --save

yarn add @angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}@4.4.5

Simplemente especifique la versión que desea, por ejemplo, @ 4.4.5 o ponga @latest para obtener la última versión

Comprueba tu package.jsonsolo para asegurarte de que estás actualizando todos los @angular/*paquetes en los que confía tu aplicación

• Para ver la @angularversión exacta en la ejecución de su proyecto:
  npm ls @angular/compileroyarn list @angular/compiler
• Para verificar la última @angularversión estable disponible en npm run:
  npm show @angular/compiler version

La página oficial de npm sugiere un método estructurado para actualizar la versión angular para escenarios globales y locales.

1.En primer lugar, debe desinstalar el angular actual de su sistema.

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g @angular/cli

2.limpia el caché

npm cache clean

EDITAR

Como señaló @candidj

npm cache cleanse renombra a partir npm cache verifyde npm 5 en adelante

3.Instalar angular globalmente

npm install -g @angular/cli@latest

4. Configuración del proyecto local si tiene uno

rm -rf node_modules
npm install --save-dev @angular/cli@latest
npm install

Por favor marque lo mismo en el siguiente enlace:

https://www.npmjs.com/package/@angular/cli#updating-angular-cli

Esto solucionará el problema.

Enfoque alternativo con npm-upgrade :

1. npm i -g npm-upgrade

Ve a la carpeta de tu proyecto

2. npm-upgrade check

Le preguntará si desea actualizar el paquete, seleccione Sí

Así de simple

Si desea instalar / actualizar todos los paquetes a la última versión y está ejecutando Windows, puede usar esto en powershell.exe:

foreach($package in @("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
    npm install @angular/$package@latest -E
}

Si también usa el cli, puede hacer esto:

foreach($package in @('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
    iex "npm install @angular/$package@latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}

Esto guardará los paquetes exactos (-E) y los paquetes cli en devDependencies(-D)

Solo comienza aquí:

https://update.angular.io

Seleccione la versión que está utilizando y le dará una guía paso a paso.

Recomiendo elegir 'Avanzado' para ver todos los pasos. La complejidad es un concepto relativo, y no sé de quién fue esta estúpida idea, pero si selecciona 'Básico' no le mostrará todos los pasos necesarios y puede perder algo importante que su aplicación 'Básica' está utilizando .

A partir de la versión 6, hay un nuevo comando CLI angular ng updateque revisa de forma inteligente sus dependencias y realiza comprobaciones para asegurarse de que está actualizando las cosas correctas :-)

Los pasos explicarán cómo usarlo :-)

Desinstalación de npm --save-dev angular-cli

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

ng update @ angular / cli

ng update @ angular / core --force

ng update @ angular / material o npm i @ angular / cdk @ 6 @ angular / material @ 6 --save

npm install typecript @ '> = 2.7.0 <2.8.0'

La mejor manera de hacerlo es usar la extensión (pflannery.vscode-versionlens) en vscode.

esto verifica todas las satisfacciones y verifica el mejor ajuste.

Tuve muchos problemas con la actualización y el mantenimiento de mi aplicación.

npm i

para instalar dependencias recién sugeridas.

Si se parece a mí por actualizar su proyecto a la última versión, esto es lo que funciona desde Angular 6:

Abra la consola en la carpeta de su proyecto: If you type: ng updateluego recibirá el siguiente mensaje:

        We analyzed your package.json, there are some packages to update:

          Name                               Version                  Command to update
         --------------------------------------------------------------------------------
          @angular/cli                       7.0.7 -> 7.2.2           ng update @angular/cli
          @angular/core                      7.0.4 -> 7.2.1           ng update @angular/core

There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

Así que generalmente voy derecho y hago:

ng update --all

Finalmente puedes consultar tu nueva versión:

ng version

Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.2
@angular-devkit/build-angular     0.12.2
@angular-devkit/build-optimizer   0.12.2
@angular-devkit/build-webpack     0.12.2
@angular-devkit/core              7.2.2
@angular-devkit/schematics        7.2.2
@angular/cli                      7.2.2
@ngtools/webpack                  7.2.2
@schematics/angular               7.2.2
@schematics/update                0.12.2
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4