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?

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]

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.

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

https://update.angular.io/

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

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

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)

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 .

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

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/

simplesmente execute o seguinte comando:

ng update

nota: isso não será atualizado globalmente.

É 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:

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

4. 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

Existem algumas etapas 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 a "angular.json": -

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

Loja MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

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

Espero que isso ajude você :)