paquete - npm install-s

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

Question

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.

Answer 1

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''

Answer 2

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 Angular CLI ng update que 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 :-)

Answer 3

ACTUALIZAR:
A partir de CLI v6 , puede ejecutar ng update para actualizar sus dependencias automáticamente a una nueva versión.

Con ng update veces es posible que desee agregar --force flag. 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

Solo para usuarios de bash

Si está en Mac/Linux o ejecuta bash en Windows (que no funciona en Windows CMD predeterminado) puede ejecutar ese oneliner:

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

Verifique su package.json solo para asegurarse de que está actualizando todos los paquetes @angular/* que confía su aplicación

• Para ver la versión exacta @angular en su proyecto ejecute:
  npm ls @angular/compiler o yarn list @angular/compiler
• Para verificar la última versión estable de @angular disponible en npm run:
  npm show @angular/compiler version

Answer 4

El comando npm update -D && npm update -S actualizará todos los paquetes dentro de package.json a su última versión, de acuerdo con su rango de versiones definido . Puedes leer más sobre esto here .

Si desea actualizar Angular desde una versión anterior a 2.0.0-rc.1 , deberá editar manualmente package.json , ya que Angular se dividió en varios módulos npm. Sin esto, como el paquete angular2 apunta a 2.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 buena manera de mantenerse actualizado con la última versión de sus paquetes es usar npm outdated que le muestra todos los paquetes desactualizados junto con su versión deseada y la última.

• La razón por la que necesitamos encadenar dos comandos, npm update -D y npm update -S es superar este error hasta que se solucione.

Answer 5

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

Answer 6

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 la unidad de funcionamiento de mi aplicación, dejé que Lense verbose hiciera la comprobación y luego ejecuté

npm i

instalar dependencias recién sugeridas.

Answer 7

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 clean se renombra como npm cache verify partir de 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.

Answer 8

Otro paquete agradable que utilicé para migrar una versión beta de Angular2 a Angular2 2.0.0 final es npm-check-updates

Muestra la última versión disponible de todos los paquetes especificados en su package.json. A diferencia de npm outdated , también es capaz de editar su package.json, lo que le permite realizar una npm upgrade más adelante.

Instalar

sudo npm install -g npm-check-updates

Uso

ncu para mostrar

ncu -u para reescribir su paquete.json

Answer 9

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)

Answer 10

Si se parece a mí solo 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 update , 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

Answer 11

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 angular cli 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 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": {}
  }
}