Como atualizo corretamente o angular 2 (npm) para a versão mais recente?

Recentemente, iniciei o tutorial do Angular 2 em https://angular.io/docs/ts/latest/tutorial/ .

e parei com o Angular 2 beta 8. Agora retomei o tutorial e o beta mais recente é o beta 14.

Se eu simplesmente atualizar o npm, alguns módulos (pré-carregados com o tutorial) serão atualizados, mas não o Angular2 (posso ver isso com o npm ls ).

Se eu fizer o npm atualizar o angular 2 ou o npm atualizar o angular2@2.0.0beta.14, ele também não fará nada.

O comando npm update -D && npm update -Satualizará todos os pacotes internos package.jsonpara a versão mais recente, de acordo com o intervalo de versões definido . Você pode ler mais sobre isso aqui .

Se você deseja atualizar o Angular de uma versão anterior a 2.0.0-rc.1, precisará editar manualmente package.json, pois o Angular foi dividido em vários módulos npm. Sem isso, como aponta o pacote angular22.0.0-beta.21 , você nunca poderá usar a versão mais recente do Angular.
Uma lista com alguns dos módulos mais comuns que você precisa para começar pode ser encontrada no repositório de início rápido .

Notas:

• Uma maneira legal de manter-se atualizado com a versão mais recente dos seus pacotes é usar o npm outdatedque mostra todos os pacotes desatualizados, juntamente com a versão desejada e a mais recente.

• A razão pela qual precisamos encadear dois comandos npm update -De npm update -Ssuperar esse bug até que ele seja corrigido.

Outro bom pacote que usei para migrar de uma versão beta do Angular2 Angular2 2.0.0 finalénpm-check-updates

Ele mostra a versão mais recente disponível de todos os pacotes especificados em seu package.json. Em contraste, npm outdatedele também é capaz de editar o seu package.json, permitindo que você faça isso npm upgrademais tarde.

Instalar

sudo npm install -g npm-check-updates

Uso

ncupara exibição

ncu -u para reescrever seu package.json

Atualize para o Angular 5 mais recente

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

Outros pacotes que são instalados pelo CLI angular npm install --save core-js@latest rxjs@latest zone.js@latest

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

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

Outros pacotes que são instalados como dev dev pelo angular cli: 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 a versão mais recente suportada usada pelo angular cli (não faça @latest): npm install --save-dev typescript@2.4.2

Renomeie o arquivo angular-cli.json para .angular-cli.json e atualize o conteúdo:

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

ATUALIZAÇÃO:
A partir da CLI v6, você pode simplesmente executar ng updatepara atualizar suas dependências automaticamente para uma nova versão.

Com ng updatealgumas vezes você pode querer adicionar --forcebandeira. Se você fizer isso, verifique se a versão datilografada que você instalou dessa maneira é suportada pela sua versão angular atual; caso contrário, poderá ser necessário fazer o downgrade da versão datilografada.

Consulte também este guia Atualizando seus projetos Angular

Apenas para usuários do bash

Se você estiver Mac/Linuxativado ou executando o bash Windows(que não funcionará por padrão Windows CMD), execute o 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

Basta especificar a versão que você não quer, por exemplo, @ 4.4.5 ou colocar @latest para obter as últimas

Verifique package.jsonse você está apenas atualizando todos os @angular/*pacotes nos quais seu aplicativo está confiando

• Para ver a @angularversão exata do seu projeto, execute:
  npm ls @angular/compilerouyarn list @angular/compiler
• Para verificar a @angularversão estável mais recente disponível no npm, execute:
  npm show @angular/compiler version

A página oficial do npm sugere um método estruturado para atualizar a versão angular para cenários globais e locais.

1.Primeiro de tudo, você precisa desinstalar o angular atual do seu sistema.

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

2. Limpe o cache

npm cache clean

EDITAR

Como apontado por @candidj

npm cache cleané renomeado a partir npm cache verifyda npm 5 em diante

3.Instalar angular globalmente

npm install -g @angular/cli@latest

Configuração do projeto 4.Local, se você tiver um

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

Verifique o mesmo no link abaixo:

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

Isto resolverá o problema.

Abordagem alternativa usando o npm-upgrade :

1. npm i -g npm-upgrade

Vá para a pasta do seu projeto

2. npm-upgrade check

Ele perguntará se você deseja atualizar o pacote, selecione Sim

Isso é simples

Se você deseja instalar / atualizar todos os pacotes para a versão mais recente e estiver executando o Windows, pode usá-lo em powershell.exe:

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

Se você também usar o cli, poderá fazer o seguinte:

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'})";
}

Isso salvará exatamente os pacotes (-E) e os pacotes cli em devDependencies(-D)

Basta começar aqui:

https://update.angular.io

Selecione a versão que você está usando e ele fornecerá um guia passo a passo.

Eu recomendo escolher 'Avançado' para ver todas as etapas. Complexidade é um conceito relativo - e não sei de quem foi essa ideia estúpida, mas se você selecionar 'Básico', ele não mostrará todas as etapas necessárias e você poderá perder algo importante que seu aplicativo 'Básico' está usando. .

A partir da versão 6, existe um novo comando da CLI angular ng updateque passa por suas dependências de forma inteligente e executa verificações para garantir que você esteja atualizando as coisas certas :-)

As etapas descrevem como usá-lo :-)

desinstalação do npm --save-dev angular-cli

npm install --save-dev @ angular / cli @ mais recente

ng update @ angular / CLI

ng update @ angular / core --force

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

npm install typescript @ '> = 2.7.0 <2.8.0'

A melhor maneira de fazer é usar a extensão (pflannery.vscode-versionlens) no vscode.

isso verifica se todos satisfazem e verifica o melhor ajuste.

Eu tive muitos problemas com a atualização e a manutenção da unidade de funcionamento do aplicativo. Deixei a lente detalhada fazer a verificação e, em seguida, corro

npm i

para instalar dependências recentemente sugeridas.

Se você está parecendo comigo apenas atualizando seu projeto para o mais recente, é isso que funciona desde o Angular 6:

Abra o console na pasta do seu projeto: If you type: ng updateentão você receberá a mensagem abaixo:

        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.

Então eu costumo ir direto e fazer:

ng update --all

Finalmente, você pode verificar sua nova versão:

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