update - Como atualizo corretamente o angular 2(npm) para a versão mais recente?
update version angular project (8)
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'
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 a versão beta mais recente é a 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 [email protected], ele também não fará nada.
Basta começar aqui:
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 eu 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 Angular CLI
ng update
que passa por suas dependências de forma inteligente e executa verificações para garantir que você esteja atualizando as coisas certas :-)
As etapas descreverão como usá-lo :-)
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 como
npm cache verify
do npm
npm cache verify
partir do npm 5 em diante
3.Instalar angular globalmente
npm install -g @angular/[email protected]
Configuração do projeto 4.Local, se você tiver um
rm -rf node_modules
npm install --save-dev @angular/[email protected]
npm install
Verifique o mesmo no link abaixo:
https://www.npmjs.com/package/@angular/cli#updating-angular-cli
Isto resolverá o problema.
ATUALIZAR:
A partir da
CLI v6,
você pode simplesmente executar a
ng update
para atualizar suas dependências automaticamente para uma nova versão.
Às vezes, com a
ng update
você pode querer adicionar o sinalizador--force
. Se você fizer isso, verifique se a versão do texto datilografado que você instalou dessa maneira é suportada pela sua versão angular atual; caso contrário, talvez seja 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 no
Mac/Linux
ou executando o bash no
Windows
(que não funcionará no
Windows CMD
padrão do
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 seu
package.json
apenas para ter certeza de que está atualizando todos os pacotes@angular/*
quais o aplicativo está confiando.
-
Para ver a versão exata do
@angular
em seu projeto, execute:
npm ls @angular/compiler
ouyarn list @angular/compiler
-
Para verificar a última versão estável do
@angular
disponível no npm, execute:
npm show @angular/compiler version
O comando
npm update -D && npm update -S
atualizará todos os pacotes dentro do
package.json
para sua versão mais recente, de
acordo com
o intervalo de versões definido
.
Você pode ler mais sobre isso
here
.
Se você deseja atualizar o Angular de uma versão anterior à
2.0.0-rc.1
, precisará editar manualmente o
package.json
, pois o Angular foi dividido em vários módulos npm.
Sem isso, como o pacote
angular2
aponta para
2.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 outdated
que 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 -D
enpm update -S
é superar esse bug até que ele seja corrigido.
Outro bom pacote que usei para migrar da versão beta do Angular2 para o
Angular2 2.0.0 final
é o
npm-check-updates
Ele mostra a versão mais recente disponível de todos os pacotes especificados em seu package.json.
Ao contrário do
npm outdated
, também é capaz de editar o seu package.json, permitindo que você faça um
npm upgrade
mais tarde.
Instalar
sudo npm install -g npm-check-updates
Uso
ncu
para exibição
ncu -u
para reescrever seu package.json
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 update
, 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
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 angular cli
npm install --save [email protected] [email protected] [email protected]
Pacotes Angular Dev:
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 [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
Instale a versão mais recente suportada usada pelo angular cli (não faça @latest):
npm install --save-dev [email protected]
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": {}
}
}