Deseja atualizar o projeto de Angular v5 para Angular v6

114

Como o Angular 6 está aqui, quero atualizar ou mover meu aplicativo cliente do Angular 5 para o Angular 6, mas não estou recebendo nenhum tutorial ou qualquer coisa que possa me orientar.

De acordo com mim, só preciso executar uma nova CLI Angular e, em seguida, mover minha fonte anterior para um novo projeto. Eu li que o Angular 6 está usando um novo renderizador chamado Ivy. Terei que mudar meu projeto de acordo com Ivy?

Abhishek Chokra
fonte
7
update.angular.io
lealceldeiro

Respostas:

272

Atualize do Angular v6 para o Angular v7

A versão 7 do Angular foi lançada no link do blog oficial do Angular . Visite o guia oficial de atualização angular https://update.angular.io para obter informações detalhadas. Essas etapas funcionarão para aplicativos angulares básicos 6 usando Angular Material.

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

Atualize de Angular v5 para Angular v6

A versão 6 do Angular foi lançada no link do blog oficial do Angular . Mencionei as etapas gerais de atualização abaixo, mas antes e depois da atualização você precisa fazer alterações em seu código para torná-lo viável na v6. Para obter informações detalhadas, visite o site oficial https://update.angular.io .

Etapas de atualização (em grande parte retiradas do Guia de atualização Angular oficial para um aplicativo Angular básico usando Material Angular):

  1. Certifique-se de que a versão do NodeJS é 8.9+, caso não atualize.

  2. Atualize o Angular cli global e localmente e migre a configuração antiga .angular-cli.json para o novo formato angular.json executando o seguinte:

    npm install -g @angular/cli  
    npm install @angular/cli  
    ng update @angular/cli
    
  3. Atualize todos os seus pacotes de estrutura Angular para v6 e a versão correta de RxJS e TypeScript executando o seguinte:

    ng update @angular/core
    
  4. Atualize o Angular Material para a versão mais recente executando o seguinte:

    ng update @angular/material
    
  5. RxJS v6 tem grandes mudanças em relação à v5, v6 traz o pacote de compatibilidade com versões anteriores rxjs-compat que manterá seus aplicativos funcionando, mas você deve refatorar o código TypeScript para que ele não dependa de rxjs-compat. Para refatorar o código TypeScript, execute o seguinte:

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

    Nota: Uma vez que todas as suas dependências tenham sido atualizadas para RxJS 6, remova rxjs-compat, pois ele aumenta o tamanho do pacote. consulte este Guia de atualização do RxJS para obter mais informações.

    npm uninstall rxjs-compat
    
  6. Feito correr ng servepara verificar isso.
    Se você receber erros na compilação, consulte https://update.angular.io para informações detalhadas.

Atualize do Angular v5 para o Angular 6.0.0-rc.5

  1. Atualize rxjs para 6.0.0-beta.0, consulte este Guia de atualização RxJS para obter mais informações. RxJS v6 tem mudanças significativas, portanto, primeiro torne seu código compatível com a versão mais recente do RxJS.

  2. Atualize a versão do NodeJS para 8.9+ (isso é exigido pela versão do angular cli 6)

  3. Atualize o pacote global Angular cli para a próxima versão.

    npm uninstall -g @angular/cli
    npm cache verify
    

    se a versão npm for <5, use npm cache clean

    npm install -g @angular/cli@next
    
  4. Altere as versões dos pacotes angulares no arquivo package.json para ^6.0.0-rc.5

    "dependencies": {
      "@angular/animations": "^6.0.0-rc.5",
      "@angular/cdk": "^6.0.0-rc.12",
      "@angular/common": "^6.0.0-rc.5",
      "@angular/compiler": "^6.0.0-rc.5",
      "@angular/core": "^6.0.0-rc.5",
      "@angular/forms": "^6.0.0-rc.5",
      "@angular/http": "^6.0.0-rc.5",
      "@angular/material": "^6.0.0-rc.12",
      "@angular/platform-browser": "^6.0.0-rc.5",
      "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
      "@angular/router": "^6.0.0-rc.5",
      "core-js": "^2.5.5",
      "karma-jasmine": "^1.1.1",
      "rxjs": "^6.0.0-uncanny-rc.7",
      "rxjs-compat": "^6.0.0-uncanny-rc.7",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.5.0",
      "@angular/cli": "^6.0.0-rc.5",
      "@angular/compiler-cli": "^6.0.0-rc.5",
      "@types/jasmine": "2.5.38",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.1.0",
      "jasmine-core": "~2.5.2",
      "jasmine-spec-reporter": "~3.2.0",
      "karma": "~1.4.1",
      "karma-chrome-launcher": "~2.0.0",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^0.2.0",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "postcss-loader": "^2.1.4",
      "protractor": "~5.1.0",
      "ts-node": "~5.0.0",
      "tslint": "~5.9.1",
      "typescript": "^2.7.2"
    }
    
  5. Em seguida, atualize o pacote local Angular cli para a próxima versão e instale os pacotes mencionados acima.

    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@next
    npm install 
    
  6. O formato de configuração do Angular CLI foi alterado da versão angular cli 6.0.0-rc.2 e sua configuração existente pode ser atualizada automaticamente executando o seguinte comando. Ele removerá o arquivo de configuração antigo .angular-cli.json e gravará o novo arquivo angular.json .

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

Nota: - Se você receber o seguinte erro "O compilador angular requer TypeScript> = 2.7.2 e <2.8.0, mas 2.8.3 foi encontrado". execute o seguinte comando:

npm install [email protected]
Ashish Jain
fonte
update.angular.io não funciona no Edge neste momento. Carrega bem, mas quando você começa a usá-lo um pouco, causa algum tipo de problema que faz com que a página não responda e o navegador pergunte se você gostaria de recuperar a página.
Devon Holcombe
3
Etapa 5 estou conseguindo bash: rxjs-5-to-6-migrate: command not found. Alguma ideia?
Kyle Krzeski
quando corro ng update @angular/corena minha pasta de projeto iônico, recebo um erroInvalid range: "*"
smk
1
Depois de todas as etapas acima, eu estava tendo este problema estúpido: Não foi possível encontrar o módulo "@angular-devkit/build-angular"de ... Isso foi corrigido por npm install @angular-devkit/build-angular --save-dev. Outros, que eu tinha que atualizar as bibliotecas que estavam usando anterior rxjs-compat, como ng update @ngx-translate/core, ng update @ng-bootstrap/ng-bootstrapporque alguns deles não foi devidamente atualizado.
Arsen Khachaturyan
2
se receber "Sua versão Angular CLI global (6.0.8) é superior à sua versão local (1.6.8). A versão Angular CLI local é usada." use npm install @ angular / cli @ latest
Nakres
19

O Angular 6 acaba de ser lançado.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Aqui está o que funcionou para um dos meus projetos menores

  1. npm install -g @ angular / cli
  2. npm install @ angular / cli
  3. ng update @ angular / cli --migrate-only --from = 1.7.0
  4. ng update @ angular / core
  5. npm install rxjs-compat
  6. ng serve

Você pode precisar atualizar seus scripts de execução em package.json Por exemplo. se você usar sinalizadores como "app" e "ambiente", eles foram atualizados para "projeto" e "configuração", respectivamente.

Consulte https://update.angular.io/ para obter um guia mais detalhado.

Arjun Shankar
fonte
Após a etapa 2, tive que converter os seguintes arquivos .json (tsconfig, angular-cli.json, tslint) para UTF8, sem BOM. Recebi um erro de caractere JSON inválido nessa etapa.
Benjamin
16

Basta usar o guia de atualização oficial, que dirá o que você precisa fazer para atender às suas necessidades específicas:

Upgrade angular

https://update.angular.io/

Valentin Despa
fonte
1
esta deve ser realmente a resposta aceita, pois responde a todas as outras questões de atualização
theTechRebel
8

Verifique os detalhes da atualização passo a passo do Angular 5 para o Angular 6. Eles fornecem detalhes sobre os problemas que você encontra durante a atualização e como resolvê-los.

  • Atualize a versão do seu nó para 8 ou superior e instale o Angular cli mais recente globalmente por npm i -g @ angular / cli @ latest.
  • O Angular 6 usa angular.json como arquivo de configuração em vez de .anguar-cli.json. Também o tslint foi alterado. Verifique https://github.com/angular/angular-cli/wiki/angular-workspace para obter os detalhes de configuração mais recentes. Você deve mover qualquer configuração existente para um novo arquivo de configuração.
  • Para fazer isso, crie outro projeto fictício com o último cli usando o novo 'seu-projeto' e os mesmos padrões, como prefixo, estilo, etc., que você usou anteriormente para seu projeto. Crie um novo projeto com cli https://github.com/angular/angular-cli/wiki/new
  • Usar https://update.angular.io/ para verificar o que foi alterado em relação à sua versão atual do Angular → Angular 6. Ele fornece informações sobre como alterá-los / corrigi-los.
  • Siga as etapas acima e copie / atualize o arquivo angular.json criado na etapa 2. Faça o npm i em seu projeto para obter todas as dependências e faça a atualização do npm
  • Agora vem a grande parte. Atualização do RxJS e resolução de conflitos. RxJS padronizou as importações de operadores e criadores Observable com este lançamento. Faça npm i -g rxjs-tslint e adicione a configuração lint abaixo em tslint.json
{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}
  • Agora execute o lint --fix. Isso corrige alguns itens, mas a maioria dos problemas restantes serão destacados e você terá que corrigi-los manualmente.

Alteração do nome dos operadores:

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

Todos os operadores mudaram para rxjs / Operadores

import { map, filter, reduce } from 'rxjs/operators';

Métodos de criação observáveis ​​são movidos para rxjs

   import { Observable, Subject, of, from } from 'rxjs'; 

Estás pronto. Bem-vindo ao Angular 6 :) Verifique minha postagem do blog aqui sobre como atualizar

Uday Vunnam
fonte
4

Tive que executar novamente o ng update @ angular / cli para que angular-cli.json fosse alterado para angular.json

Kris Bonev
fonte
2

Por favor, execute os comentários abaixo para atualizar para Angular 6 a partir de Angular 5

  1. ng update @ angular / cli
  2. ng update @ angular / core
  3. npm install rxjs-compat (para suportar a versão mais antiga do rxjs 5.6)
  4. npm install -g rxjs-tslint (para mudar do formato rxjs 5 para rxjs 6 no código. Instale globalmente, então só funcionará)
  5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (após a instalação, temos que alterá-lo em nosso código-fonte para o formato rxjs6)
  6. npm uninstall rxjs-compat (remova finalmente)
user2716958
fonte
2

Guia completo

----------------- Com angular-cli --------------------------

1. Atualize a CLI global e localmente

  1. Usando NPM (certifique-se de ter a versão do nó 8+)

    npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

  2. Usando Yarn

    yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2. Atualizar dependências

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

Angular 6 agora depende do TypeScript 2.7 e RxJS 6

Normalmente, isso significaria que você tem que atualizar seu código em todos os lugares onde as importações e operadores RxJS são usados, mas felizmente há um pacote que cuida da maior parte do trabalho pesado:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Então você pode executar rxjs-5-to-6-migrate

rxjs-5-to-6-migrate -p src/tsconfig.app.json

finalmente remova o rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Consulte este link https://alligator.io/angular/angular-6/


------------------- Sem angular-cli -------------------------

Portanto, você deve atualizar seu package.jsonarquivo manualmente .

package.json screenhoot de pacotes de atualização

Então corra

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json
Bereket Gebredingle
fonte
Estou começando bash: rxjs-5-to-6-migrate: command not foundquando tento executar o comando rxjs-5-to-6-migrate. Alguma ideia?
Kyle Krzeski
1
@WilliamHampshire você executou npm install -g rxjs-tslint
Joe
Sim, não tenho ideia do que é @Joe
Kyle Krzeski
talvez você não tenha o último tslint?
Joe
1
Você sabe como fazer isso sem usar cli angular? No meu projeto eu faço tudo manualmente
Daniel
1

Como Vinay Kumar apontou que ele não atualizará o Angular CLI globalmente instalado. Para atualizá-lo globalmente, basta usar os seguintes comandos:

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

Observe se você deseja atualizar o projeto existente, você deve modificar o projeto existente, você deve alterar o package.json dentro do seu projeto.

Não há mudanças significativas no Angular em si, mas elas estão no RxJS, então não se esqueça de usar a biblioteca rxjs-compat para trabalhar com código legado.

  npm install --save rxjs-compat  

Escrevi um bom artigo sobre instalação / atualização do Angular CLI http://bmnteam.com/angular-cli-installation/

Maksim B.
fonte
0

simplesmente execute o seguinte comando:

ng update

nota: isso não será atualizado globalmente.

Vinay Kumar
fonte
0

É assim que eu faço funcionar.

Meu ambiente:

Angular CLI Global: 6.0.0, Local: 1.7.4, Angular: 5.2, Typescript 2.5.3

Nota: Para habilitar, ng Updatevocê precisa instalar o Angular CLI 6.0 primeiro npm install -g @angular/cli or npm install @angular/cli

  1. ng update //update Angular Package core/common/complier... to 6.0.0

  2. ng update @angular/cli //change angular-cli.json to angular.json

opcional se você tiver material angular 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1:

  1. ng update @angular/material //upgrade to 6.0.1

  2. npm install @ngx-translate/[email protected] --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/[email protected] //for ng-bootstrap

Se você usar Observable e obtiver o erro:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

Mudança: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

Para

import { Observable, of } from "rxjs";

Problema de CLI angular: https://github.com/angular/angular-cli/issues/10621

Ryan Huang
fonte