Atualizando do Angular 5.x para o 6

Vou ser breve, pois vou focar nas dificuldades que tive ao atualizar 3 aplicações, coisas que tive de analisar um pouco mais do que apenas seguir as recomendações da equipe do Angular:

1 — Abra este endereço, ele vai te ajudar e te guiar na atualização, https://update.angular.io/, mas não espere que diga como resolver todos o problemas.

2 — Seguindo as recomendações do update.angular.io tive de executar duas vezes o comando ng update @angular/cli para funcionar, é como se ele deixasse algo para trás na primeira execução.

3 — Provável que você tenha bibliotecas, que precisam ser atualizadas para o RxJS 6 e ainda não o foram, para este caso você precisa instalar o rxjs-compat para manter a compatibilidade com o 5, basicamente você faz isto assim:

npm install rxjs@6 rxjs-compat@6 — save

ReactiveX/rxjs

Lembre-se de que o rxjs-compat é temporário, logo que tudo estiver na versão 6 do RxJS você pode remove-lo das duas dependências. Isso significa que suas dependências precisarão subir para o RxJS 6 também ou você vai ficar preso em breve.

Em uma aplicação feita apenas com tecnologia Google, AngularCli, Angular, Material Design, RxJS não foi necessário o rxjs-compact, já em uma app com @PrimeNG foi.

4 — Quanto aos script no package.json precisei mudar os parâmetros, antigamente existiam alguns que utilizavam -, agora alguns mudaram para — -(dois-), por exemplo antes tinha -sr para executar testes apenas uma vez sem fazer watch, agora você precisa utilizar --watch=false e se quiser ver a cobertura de código — — code-coverage.

6 — Observable.of

Precisei trocar todos os Observable.of por apenas of

Onde havia

return Observable.of([]);

Precisei trocar por

import {of} from 'rxjs/index';
return of([]);

7 — Deprecations

Talvez você tenha de mudar algumas das suas implementações, principalmente quando você encadeia operadores do RxJS, eu tive de mudar isso:

this.activatedRoute.params
  .mergeMap(params => this.grupoService.find(+params['idGrupo']))
  .do(grupo => this.grupoAtual = grupo)
  .mergeMap(grupo => this.temaService.findByGrupo(grupo))
  .subscribe((temas: Tema[]) => {
   ...
  });

Para isto:

import {map, filter, catchError, mergeMap, tap} from 'rxjs/operators';

const idGrupo = this.activatedRoute.snapshot.paramMap.get('idGrupo');
this.grupoService.find(+idGrupo).pipe(
  tap(grupo => this.grupoAtual = grupo),
  mergeMap(grupo => this.temaService.findByGrupo(grupo))
).subscribe((temas: Tema[]) => {
  ...
});

Usando pipe() , também tive de trocar o do()por tap()

8 — do() não existe mais

Troque do()por tap()

Operadores renomeados foram:

1. do -> tap
2. catch -> catchError
3. switch -> switchAll
4. finally -> finalize

9 — catchError

Antes você usava . (ponto) assim:

return next.handle(request)
  .do(event => {
   ...
  }).catch((err: HttpErrorResponse) => {
    ...
  });

Agora você usa , (virgula) assim:

return next.handle(request).pipe(
  tap(event => {
   ...
  }),
  catchError((err: HttpErrorResponse) => {
   ...
  }));

10- npm-check-updates

E por fim, você pode utilizar o comando ncu do npm-check-updates para te ajudar a identificar outras dependências que podem ser atualizadas.

Te aconcelho a não utilizar ncu -u para deixar a ferramenta atualizar o package.json , pois ele pode atualizar o TypeScript. Já vi diversas issues no github do Angular, falando sobre incompatibilidade com versões mais recentes, acredito que esta é uma dependência que deva seguir o Angular, deixando de lado o desejo de testar a versão mais recente.

Aqui tem um projeto free que atualizei, caso queira dar uma olhada nos commits :D

netstart/parapasa

Agregador de vagas de TI