Angular 6: principais novidades

7 min readMay 4, 2018

O Angular 6 acabou de ser lançado, e neste post irei sumarizar as principais novidades e mudanças que vieram com esta versão.

Se quiser aprender a atualizar um projeto existente na v5 para a v6, escrevi um outro post com o passo a passo.

IMPORTANTE: o Angular 6, assim como a v4 e v5, não são reescritas completas do framework como foi a transição do Angular 1.x (AngularJS) para o Angular 2 (somente Angular). Em 07 de outubro de 2016 a equipe do Angular anunciou a adoção do semver (Semantic Versioning) como política de versionamento, recomendo que tire um tempinho para ler. Inclusive você pode consultar a programação de lançamento de releases do angular aqui: Angular Release Schedule.

Angular CLI

As maiores alterações nesta nova versão foram em relação ao Angular CLI, que trouxe vários recursos úteis que vão facilitar algumas tarefas .

Primeiro vamos destacar as novidades do CLI, e depois falaremos sobre o framework em si.

ng update

Com a chegada do “ng update” ao Angular CLI, atualizar um projeto existente ficou muito simples. Na raiz do seu projeto basta rodar este comando para o CLI analisar as alterações que deverão ser feitas:

> ng update

E você terá uma saída parecida com isso:

Por baixo dos panos, o “ng update” trabalha em cima do package.json e faz uso do gerenciador de pacotes do projeto (npm ou yarn). Ele usa também um recurso lançado recentemente no Angular, chamado Schematics, que basicamente permite editar seu código fonte onde for necessário.

Para que tudo funcione corretamente, a biblioteca que você estiver atualizando tem que ter implementado o “script” que irá rodar usando Schematics.

Para mais informações sobre Schematics, existe um post no blog oficial do Angular.

Para atualizar seu código, basta rodar o comando para cada pacote:

> ng update @angular/core
> ng update @angular/material

Ou tentar atualizar tudo de uma só vez:

> ng update --all

ng add

O comando “ng add” é útil quando precisamos adicionar uma nova biblioteca ao nosso projeto. Também faz uso de Schematics e novamente a biblioteca precisa ter implementado o script que será rodado.

O que ele faz é instalar a lib e configurar o setup inicial para que ela funcione no projeto.

Veja alguns exemplos:

ng add @angular/material : Instala e configura o Angular Material com o tema default e registra os modelos de componentes do material para serem usados via ng generate
ng add @angular/pwa : Transforma sua aplicação em uma PWA (Progressive Web App) adicionando um Service Worker e um Web Manifest
ng add @ng-bootstrap/schematics : Adiciona o Bootstrap ao projeto

ng generate library

Sabe aquele trecho de código ou funcionalidade que você sempre quis transformar em uma biblioteca para poder reutilizar em outros projetos? Pois é, o ng generate library vai permitir que você faça isso!

Dentro do seu projeto Angular bastaria rodar:

> ng generate library my-custom-library

E uma estrutura parecida com essa será gerada:

Para usar a “library” dentro do seu projeto local, você precisa primeiro rodar este comando:

ng build my-custom-library

IMPORTANTE: sempre rode o comando acima quando fizer alguma alteração.

O build da lib será gerado dentro do diretório dist/my-custom-library , e para usá-la agora é bem simples. No “app.module.ts” (ou outro módulo) faça o importe do MyCustomLibraryModule :

import { MyCustomLibraryModule } from 'my-custom-library';...@NgModule({
   imports: [
      BrowserModule,
      MyCustomLibraryModule // <-- aqui
   ],
   ...
})
export class AppModule { }

E no “app.component.ts” pode usar o serviço (ou components, pipes, diretivas, etc), que no meu caso implementei um simples método “myCustomMethod” que apenas loga uma mensagem no console:

import { MyCustomLibraryService } from 'my-custom-library';...export class AppComponent implements OnInit {   constructor(
      private customLibraryService: MyCustomLibraryService
   ) {}   ngOnInit() {
      // Hello! This is my custom library!
      this.customLibraryService.myCustomMethod();
   }}

Simples assim! É possível também publicar sua biblioteca no npm caso quiser.

Para mais detalhes visite este link: https://github.com/angular/angular-cli/wiki/stories-create-library

Outras mudanças do Angular CLI

Na versões anteriores do CLI, o arquivo de configurações era o .angular-cli.json , na v6 ele se tornou apenas angular.json e teve sua estrutura alterada também.

A v6 do CLI traz suporte também a workspaces, onde basicamente é possível ter múltiplas aplicações em um mesmo projeto.

Angular Framework

As alterações no framework em si foram mínimas, com apenas uma grande Breaking Change em relação ao RxJS@6 mas que pode ser resolvida de forma simples (veja como atualizar seu projeto no meu outro post).

Angular Elements

Com outros frameworks se movendo para dar suporte a Web Components, o Angular não ficou de fora!

A primeira release do Angular Elements vai nos permitir criar components Angular e registrá-los como Custom Elements.

A grosso modo, isso vai permitir que você use Components do Angular com outros frameworks ou mesmo com JS Vanilla.

Se quiser mais detalhes, já existe uma seção na documentação sobre o assunto: https://angular.io/guide/elements

Tree shakable providers

Se você ainda não conhece, “tree shaking” basicamente permite que código desnecessário que não estiver sendo usado seja removido quando você gerar o build de produção da sua aplicação.

Detalhe: esse não é um recurso exclusivo do Angular.

Os serviços agora podem tirar proveito do Tree Shaking para deixar suas aplicações menores!

Antes:

Os módulos (ou components) eram responsáveis por registrar seus serviços:

// implementação do serviçoimport { Injectable } from '@angular/core'; @Injectable()
export class MyService {  
   constructor() { }
}// disponbilizando via injeção de dependência@NgModule({  
   ...  
   providers: [
      MyService
   ]
})
export class AppModule {}

Depois:

Referências não são mais necessárias no NgModule:

// implementação do serviçoimport { Injectable } from '@angular/core';@Injectable({
   providedIn: 'root'
})
export class MyService {  
   constructor() { }
}

Mais detalhes: https://angular.io/guide/dependency-injection

Melhorias de perfomance em animações

As animações do Angular não dependem mais da polyfill para web animations.

A remoção dessa dependência irá diminuir o tamanho do bundle final da aplicação em aproximadamente 47KB, e como adicional irá melhorar o desempenho das animações no Safari!

<template>

A tag <template> havia sido depreciada no Angular v4 para evitar colisões com Web Components.

A partir da v6 o suporte foi removido e agora deverá ser usada a <ng-template> .

Antes:

<!-- template html -->
<template>some template content</template># tsconfig.json
{
  # ...
  "angularCompilerOptions": {
    # ...
    # Esta opção não é mais suportada e não terá efeito
    "enableLegacyTemplate": [true|false]
  }
}

Depois:

<!-- template html -->
<ng-template>some template content</ng-template>

RxJS 6

A maior mudança que afeta o framework em si é a major release do RxJS na versão 6.

A principais mudanças se dão na forma de importar e usar os operadores e classes que operam nos Observables.

Não é mais necessário fazer “deep import”:

Antes:

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';import { map } from 'rxjs/operators/map';
import { mergeMap } from 'rxjs/operators/mergeMap';
import { tap } from 'rxjs/operators/tap';

Depois:

import { Observable, Subject, of, merge, fromEvent } from 'rxjs';import { map, mergeMap, tap } from 'rxjs/operators';

Use operadores “pipeaveis” (pipeable operators):

Antes:

myObservable
   .map(x => x * 10)
   .mergeMap(n => Observable.of(n + 1, n + 2))
   .catch(err => Observable.of('Error found: ', err))
   .subscribe(data => console.log(data));

Depois:

myObservable
   .pipe(
      map(x => x * 10),
      mergeMap(n => of(n + 1, n + 2)),
      catchError(err => of('Error found: ', err))
   ).subscribe(data => console.log(data));

Essa nova versão das Extensões Reativas foi necessária para que biblioteca possa tirar mais proveito do “tree shaking” também, garantindo que somente as “peças” que forem usadas no seu projeto sejam incluídas no bundle de produção da aplicação, novamente diminuindo o tamanho final.

Para saber como atualizar sua aplicação existente, visite meu outro post.

Se quiser consultar o guia de migração do RxJS, acesse: https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

Conclusão

O Angular 6 chegou e como se pode perceber as mudanças mais notáveis ficaram por conta do CLI, que trouxe vários novos recursos interessantes que vão nos ajudar a evitar código boilerplate e também a fazer uma transição bem mais suave entre versões.

Vale destacar também o esforço do time do Angular para deixar nossas aplicações cada vez menores e mais performáticas.

Links de referência:

Anúncio no blog oficial do Angular:
https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Angular Changelog completo:
https://github.com/angular/angular/blob/master/CHANGELOG.md#600-2018-05-03

Angular CLI Changelog:
https://github.com/angular/angular-cli/releases/tag/v6.0.0

RxJS Migration Guide:
https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

Angular Material Changelog:
https://github.com/angular/material2/blob/master/CHANGELOG.md#600-vibranium-vivarium-2018-05-03

Aligator.io: Upgrading & Summary of New Features
https://alligator.io/angular/angular-6/?utm_campaign=Revue%20newsletter&utm_medium=Newsletter&utm_source=Alligator.io