Deseja atualizar o projeto do Angular v5 para o Angular v6

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

De acordo comigo, eu só preciso executar uma nova CLI Angular e depois mover minha fonte antiga 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 o Ivy?

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

Etapas de atualização:

  1. Certifique-se de que a versão do NodeJS seja 8.9+, se não for atualizada.

  2. Atualize cli Angular globalmente 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 a versão 6 e a versão correta de RxJS e TypeScript executando o seguinte:

    ng update @ angular / core

  4. Atualize o material angular para a versão mais recente, executando o seguinte:

    ng update @ angular / material

  5. O RxJS v6 tem grandes mudanças da v5, o v6 traz o pacote de compatibilidade com versões anteriores rxjs-compat que manterá seus aplicativos funcionando, mas você deve refatorar o código do TypeScript para que ele não dependa do 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 dependencies tenham sido atualizadas para o RxJS 6, remova o rxjs-compat à medida que ele aumenta o tamanho do pacote. por favor, veja este RxJS Upgrade Guide para mais informações.

    npm desinstalar rxjs-compat

  6. A execução feita ng serve para verificar isso.
    Se você receber erros na compilation, consulte https://update.angular.io para obter informações detalhadas.

Edit on 20-Apr-2018: Versão angular atualizada para 6.0.0-rc.5 e adicionada etapa 6 para mudanças no formato de configuração da Angular CLI.

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

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

  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 então use o npm cache clean

     npm install -g @angular/cli@next 
  4. Alterar versões de 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 Angi 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 da CLI Angular foi alterado da versão cli 6.0.0-rc.2 angular 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 typescript@2.7.2 

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 – apenas migrar –from = 1.7.0
  4. ng update @ angular / core
  5. npm instalar o rxjs-compat
  6. ng servir

Você pode precisar atualizar seus scripts de execução em package.json Por exemplo. se você usar sinalizadores como “app” e “environment” Eles foram atualizados para “project” e “configuration” respectivamente.

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

Basta usar o guia de atualização oficial que lhe dirá o que você precisa fazer para suas próprias necessidades:

Atualizar angular

https://update.angular.io/

Eu tive que re-executar update @ angular / cli para angular-cli.json para ser alterado para angular.json

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

  • Atualize a versão do seu nó para 8 ou acima e instale o Cli Angular mais recente globalmente por npm i -g @ angular / cli @ latest.
  • Angular 6 usa angular.json como arquivo de configuração em vez de .anguar-cli.json. Também tslint foi alterado. Verifique https://github.com/angular/angular-cli/wiki/angular-workspace para obter os detalhes da configuração mais recente. Você precisa mover qualquer configuração existente para o novo arquivo de configuração.
  • Para fazer isso, crie outro projeto fictício com o mais recente cli usando ng new ‘your-project’ e os mesmos padrões como prefixo, estilo etc. que você usou anteriormente para o seu projeto. Crie um novo projeto com cli https://github.com/angular/angular-cli/wiki/new
  • Use https://update.angular.io/ para verificar o que foi alterado da sua versão atual do Angular → Angular 6. Ele fornece o uso de como alterá-los / corrigi-los.
  • Siga as etapas acima e copie / atualize o arquivo angular.json criado na etapa2. Faça o npm i no seu projeto para obter todas as dependencies e fazer atualização npm
  • Agora vem a grande parte. RxJS atualizar e resolver conflitos. O RxJS padronizou as importações de operadores e criadores Observable com esta versão. Faça o npm i-g rxjs-tslint e adicione a configuração abaixo de lint 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 ng 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 os 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 🙂 Confira meu post aqui em como atualizar

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

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

Note que se você quiser 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 próprio Angular, mas elas estão no RxJS, portanto, não se esqueça de usar a biblioteca rxjs-compat para trabalhar com código legado.

  npm install --save rxjs-compat 

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

Por favor, execute os comentários abaixo para atualizar para o Angular 6 do Angular 5

  1. ng update @ angular / cli
  2. ng update @ angular / core
  3. npm install rxjs-compat (para suportar versões mais antigas do rxjs 5.6)
  4. npm install -g rxjs-tslint (Para mudar do formato rxjs 5 para rxjs 6 no código. Instale globalmente e 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 isso finalmente)

É assim que eu faço funcionar.

Meu ambiente:

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

Nota: Para habilitar o ng Update você 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/core@10.0.1 --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //for ng-bootstrap

Se você usa Observable e obtém 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'.

Alterar: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of'; 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

—————– Com angular-cli ————————–

1. Atualize o CLI globalmente e localmente

  1. Usando o NPM (verifique se você possui a versão de nó 8+)

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

  2. Usando o fio

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

2.Atualizar dependencies

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

Angular 6 agora depende do TypeScript 2.7 e do RxJS 6

Normalmente isso significaria que você precisa atualizar seu código em todos os lugares onde as importações e operadores do 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 rodar o rxjs-5-to-6-migrate

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

finalmente remover 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 ————————-

Então você tem que atualizar manualmente o seu arquivo package.json .

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 

Existem alguns passos para atualizar 2/4/5 para Angular 6.

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

Para corrigir o problema relacionado com “angular.json”: –

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

Armazenar MIGRAÇÃO
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS MIGRATION
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Esperando que isso ajude você 🙂

simplesmente execute o seguinte comando:

ng update

observação: isso não será atualizado globalmente.