Como atualizar o Angular CLI para a versão mais recente

102

Usando ng --versioneu consegui:

@ angular / cli: 1.0.0

que não é a versão mais recente disponível.

Como tenho o Angular CLI globalmente instalado em meu sistema, tentei atualizá-lo:

npm update angular-cli -g

Mas não funciona, pois fica até a versão 1.0.0.

Francesco Borzi
fonte

Respostas:

833

Depois de ler alguns problemas relatados no repositório GitHub, encontrei a solução.

Para atualizar o pacote angular-cli instalado globalmente em seu sistema, você precisa executar:

npm uninstall -g @angular-cli
npm install -g @angular/cli@latest

Dependendo do seu sistema, você pode precisar prefixar os comandos acima com sudo.

Além disso, provavelmente você também deseja atualizar a versão do projeto local, porque dentro do diretório do projeto, ele será selecionado com maior prioridade do que o global:

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

obrigado grizzm0 por apontar isso no GitHub .

Depois de atualizar sua CLI, você provavelmente deseja atualizar sua versão Angular também.

Nota : se você estiver atualizando para Angular CLI 6+ a partir de uma versão mais antiga, pode ser necessário ler isto .

Editar : Além disso, se você ainda estava em uma versão 1.x do cli, você precisa converter seu angular-cli.jsonpara angular.json, o que pode ser feito com o seguinte comando:

ng update @angular/cli --from=1.7.4 --migrate-only

(verifique isto para mais detalhes).

Francesco Borzi
fonte
3
Alerta pedante: você pode encontrar mais detalhes sobre as mudanças entre as versões na guia Versões no GitHub. Link: github.com/angular/angular-cli/releases
Stuti Verma
14
Atualização de 2017 (npm @ 5): se você realmente precisar limpar seu cache: "npm cache clean --force"
Neyt
3
por que desinstalar o angular-cli e não todo @ angular / cli?
YASH DAVE
4
Executar o comando npm cache clean lança o erro 'A partir do npm @ 5, o cache npm se recupera automaticamente de problemas de corrupção e os dados extraídos do cache têm garantia de validade. Se você quiser ter certeza de que tudo está consistente, use 'npm cache verify'. ' "se quiser forçar, você pode adicionar --force
Pushkal Boganatham
1
@PushkalBoganatham como @neyt declarou, você precisa usar a --forcesinalização
svict4
149

ng6 + -> 7,0

Atualizar RxJS (depende do RxJS 6.3)

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

Remover rxjs-compat

Em seguida, atualize os pacotes principais e Cli:

ng update @angular/cli @angular/core

(Opcional: atualize o Node.js para a versão 10, que é compatível com o NG7)

ng6 + (Cli 6.0+) : apresenta comandos simplificados

Primeiro, atualize seu Cli

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

Em seguida, atualize seus pacotes principais

ng update @angular/core

Se você usa RxJS, execute

ng update rxjs

Ele irá atualizar o RxJS para a versão 6 e instalar o rxjs-compatpacote sob o capô.

Se você encontrar erros de compilação, tente uma instalação manual de:

npm i rxjs-compat
npm i @angular-devkit/build-angular

Por fim, verifique sua versão

ng v

Nota sobre construção de produção:

ng6 não usa mais intlempolyfills.ts

//remove them to avoid errors
import 'intl';
import 'intl/locale-data/jsonp/en';

ng5 + (Cli 1.5+)

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@next [email protected] rxjs@'^5.5.2'
npm install [email protected] --save-exact

Nota:

  1. A versão do Typescript suportada para Cli 1.6 no momento da escrita é até 2.5.3.
  2. Usar @next atualiza o pacote para beta, se disponível. Use @latest para obter a versão não beta mais recente.

Depois de atualizar o pacote global e local, limpe o cache para evitar erros:

npm cache verify (recommended)
npm cache clean (for older npm versions)

Aqui estão as referências oficiais:

  1. Atualizando o Cli
  2. Atualizando o pacote principal dos pacotes principais .
Pageii Studio
fonte
4
npm cache clean --force Realmente me ajudou
Pini Cheyni
1
Por que, ah, por que essa parte não está nas notas de lançamento!
Drenai de
você pode confirmar o que disse sobre o RxJS 6 estar obsoleto. Onde quer que eu olhe, parece que a v6 é a versão estável mais recente github.com/ReactiveX/rxjs rxjs-dev.firebaseapp.com
Joey Gough
1
@JoeyGough nice catch! Ng7 depende do rxjs 6.3. Obrigado por seu comentário. ref: github.com/angular/angular/blob/master/…
Pageii Studio
107

você pode simplesmente usar

npm install -g angular-cli - se for sua primeira vez

npm install -g @angular/cli@latest - se você já estiver instalado, para atualizar

SamYah
fonte
37

O poderoso comando instala e substitui o último pacote.

Eu tive um problema parecido. Eu consertei isso.

 npm install -g @angular/cli@latest

e

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

insira a descrição da imagem aqui

BehrouzMoslem
fonte
isso funcionará para um CLI Angular local, verifique minha resposta para melhorar o global
Francesco Borzi,
atualizei meu cli global
Rahmathullah M
35

Este comando funciona bem:

npm upgrade -g @angular/cli
wdavilaneto
fonte
22

A seguinte abordagem funcionou para mim:

npm uninstall -g @angular/cli

então

npm cache verify

então

npm install -g @angular/cli@latest

Eu trabalho no Windows 10, às vezes tive que usar: npm cache clean --forcetambém. Você não precisa fazer isso se não tiver nenhum problema durante a instalação.

Enayat
fonte
2
Você não precisa especificar @latest, pois último é o padrão.
Ambroise Rabier
Se esta solução não funcionar para você: stackoverflow.com/a/58678941/8718377
veben
17

Se você tiver alguma dificuldade em gerenciar sua versão CLI global , é melhor usar NVM: MAC , Windows .

Para atualizar a CLI local em seu projeto Angular, siga estas etapas:

A partir do CLI v6, você pode apenas executar ng updatepara que suas dependências sejam atualizadas automaticamente para uma nova versão.

ng update @angular/cli

Com ng updatealgumas vezes você pode querer adicionar --forcebandeira.

Você também pode passar o --allsinalizador para atualizar todos os pacotes ao mesmo tempo.

ng update --all --force

Se você deseja apenas migrar CLI, execute isto:

ng update @angular/cli --migrateOnly

Você também pode passar a --from=fromversão da bandeira da qual migrar, por exemplo --from=1.7.4. Este sinalizador está disponível apenas com um único pacote sendo atualizado e apenas na migração.

Depois que a atualização for concluída, certifique-se de que a versão do texto digitado que você instalou é compatível com sua versão angular atual, caso contrário, você pode precisar fazer o downgrade da versão datilografada. Também tenha em mente que normalmente a versão mais recente do angular não suporta a última versão do texto datilografado.

Confira as Angular CLI / Angular / NodeJS / Typescriptversões de compatibilidade aqui

Verifique também este guia Atualizando seus projetos Angular e update.angular.io


RESPOSTA ANTIGA:
Tudo que você precisa fazer é diferenciar com angular-cli-diff e aplicar as mudanças em seu projeto atual.

Aqui estão as etapas:

  1. Digamos que você vá de 1.4. para 1.5, então você faz https://github.com/cexbrayat/angular-cli-diff/compare/1.4.0...1.5.0
  2. clique na File changedguia
  3. Aplique as alterações ao seu projeto atual.
  4. npm install / yarn
  5. Teste todos npm scripts( mais detalhes aqui: https://stackoverflow.com/a/45431592/415078 )
kuncevic.dev
fonte
14

Além da resposta @ShinDarth .

Fiz o que ele disse, mas meu pacote não atualizou a versão angular, e sei que esse post é sobre angular-cli, mas acho que isso pode ajudar também.

  • então depois de fazer o que @ShinDarth disse acima, para consertar minha versão angular eu tive que criar um novo projeto com -ng new projectnameque gerou um pacote.
  • copie o novo pacote, então cole o novo pacote em todos os pacotes de projetos que precisam de atualização (lembre-se de adicionar as dependências que você tinha e mudar o nome na primeira linha) ou você pode apenas mudar as versões manualmente sem copiar e colar.
  • então corra -npm install.

Agora o meu ng servetá funcionando de novo, talvez haja uma maneira melhor de fazer tudo isso, se alguém souber, por favor divulgue, pois é uma chatice fazer com todos os projetos que precisam de atualização.

Leonardo Souza Paiva
fonte
parece mais um acréscimo à minha resposta do que uma resposta, então talvez você possa movê-lo como um comentário abaixo da minha resposta.
Francesco Borzi
7
sry, você está certo, mas preciso de 50 de reputação para comentar sua resposta.
Leonardo Souza Paiva
9

Para atualizar o Angular CLI para uma nova versão, você deve atualizar o pacote global e o pacote local do seu projeto.

Pacote global:

npm uninstall -g @angular/cli
npm cache clean
# if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using --force)
npm install -g @angular/cli@latest

Pacote de projeto 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

Fonte: Github

Hasan Fathi
fonte
3

No meu caso, instalei o angular-cli localmente usando npm install --save-dev angular-cli. Portanto, quando eu uso o comando npm install -g @ angular / cli, ele gera um erro dizendo que "Sua versão Angular CLI global (1.7.3) é maior que sua versão local (1.4.9)" . Observe que angular-cli, @ angular / cli e @ angular / cli @ latest são dois cli's diferentes. O que resolve isso é desinstalar todos os cli e depois instalar o mais recente do angular cli usando npm install -g @ angular / cli @ latest

ARKhan
fonte