Angular v10 vs v15: Principais mudanças e melhorias

Olá!

Neste artigo, vou apresentar as principais melhorias e atualizações que ocorreram entre o Angular 10 e a versão 15 do framework. A migração de projetos Angular é crucial para aprimorar o desenvolvimento e a experiência final dos usuários. Para aqueles que atualmente utilizam em seus projetos o Angular 10, especialmente em conjunto com o Angular Material, é fundamental planejar a migração a fim de aproveitar ao máximo os recursos aprimorados disponíveis no Angular 15. O propósito deste artigo é fornecer uma lista das atualizações mais significativas e orientações sobre as migrações.

Dentro das atualizações, tivemos melhorias significativas no core e no processamento do build e melhorias e avanços no NGCC (Angular compatibility compiler) que podem trazer uma velocidade de compilação de até 4x mais rápido, trazendo mais velocidade para o desenvolvimento.

A versão 10 do angular consegue utilizar até a versão 3.9 do typescript e na 15 temos um grande avanço, podendo utilizar até a versão 5.0, trazendo benefícios e novas ferramentas para o desenvolvimento. Além disso, tivemos melhorias visuais na estrutura de log, facilitando a busca de problemas que podem ocorrer no desenvolvimento. Nas versões mais recentes, tivemos a depreciação do TSLint, de forma que agora é necessário migrar para o ESlint.

Foi adicionado também o “Hot Module Reloading”, que uma vez ativado não requer a atualização de toda a tela quando é feita uma mudança em algum módulo ou componente. Isso também traz velocidade para quando estivermos fazendo alterações em alguma tela na qual o tempo de carregamento é alto.

Para ativar o HMR, basta iniciar o server utilizando o parâmetro --hmr:

ng serve --hmr.

Agora, também podemos utilizar a coalescência nula no template e, com isso, além de poder utilizar a condição ternária, também podemos criar condições de forma mais simples. Confira o exemplo abaixo:

Ternario
{{age !== null && age !== undefined ? age : entity.age }}

Coalescência nula
{{ age ?? entity.age }}

A estrutura de um projeto angular é separada por módulos. E isso para quem está iniciando pode gerar um pouco de confusão. Mas não se preocupe, não é nada complexo: o lado positivo dos módulos é conseguir gerar um carregamento por demanda e com isso só será executado o código que for necessário. Isso ajuda a evitar carregamento desnecessário de script.

O problema atual é o seguinte: ao criar um dumb component (componente genérico sem regra de negócio) que seria compartilhado com outros módulos, você precisa criar um módulo apenas para ele e com isso importar nos módulos os locais nos quais gostaria de utilizar. Porém, na versão 14 do angular, foi estabilizado os “standalones” componentes, no qual um componente pode importar outros módulos para utilizar e pode ser importado por qualquer outro módulo, sendo independente de um módulo pai.

Isso ajuda e facilita bastante, sem essa ferramenta alguns projetos criam os “sharedModule” nos quais eles importam e declaram vários componentes. E o problema é que às vezes queremos utilizar apenas um ou dois componentes e precisamos importar o módulo inteiro. Com os “standalones” componentes, isso será resolvido: você apenas importará os componentes necessários, diminuindo a quantidade de código carregado pelo navegador.

Aqui está um exemplo de como seria um "standalone component":

@Component({
  standalone: true,// declara um standalone component
  selector: 'photo-gallery',
  imports: [ImageGridComponent], // importa os modulos utilizados por ele
  template: `
    ... <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}

Agora, basta importar esse componente no módulo que deseja utilizar e pronto: estará pronto para o uso.

Para a injeção de dependência, tivemos algumas melhorias e a maneira de declarar ficou facilitada. A partir de agora, temos o método inject() e a sua principal vantagem é poder realizar a injeção de dependência sem precisar declarar explicitamente o tipo do parâmetro, de forma a tornar o código mais limpo e legível.

Veja o exemplo abaixo:

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export function getRouteParam(key: string) {
  return inject(ActivatedRoute).snapshot.params[key];
}

@Component({
  selector: 'app-todo-page',
  templateUrl: './todo-page.component.html',
})
export class TodoPageComponent {
  id = getRouteParam('id');

  ngOnInit() {
    console.log(this.id)
  }
}

Tivemos melhorias gerais de acessibilidade, tanto para os componentes como para as rotas, que deixaram os componentes mais estáveis. Além disso, tivemos melhorias nas diretivas, de forma a permitir a inclusão nos elementos host e a estabilizar as diretivas para imagens.

Agora, se você for realizar uma migração extensa como essa partindo do angular 10 para o 15, eu tenho aqui algumas recomendações:

Comece a migração como uma escada, não parta do 10 direto para o 15, vá subindo gradualmente as versões do angular. Isso evita dores de cabeça e facilita identificar caso alguma biblioteca fique estagnada e não possa mais ser utilizada. Verifique a lib dos componentes e, caso esteja utilizando o angular material, fique atento às alterações de certos componentes (alguns mudaram até os seletores).

Conclusão

Neste artigo, exploramos as principais mudanças que ocorreram no Angular, desde a versão 10 até a versão 15. Ao destacar essas transformações, meu objetivo foi proporcionar a você uma compreensão mais clara das novas ferramentas e recursos disponíveis, e mostrar como você pode aproveitá-los para melhorar o desenvolvimento de seus aplicativos Angular.

No entanto, é fundamental notar que o Angular é uma plataforma em constante evolução. A partir da versão 16, testemunhamos mudanças significativas, inclusive na abordagem para o gerenciamento de estado e em muitos outros aspectos.

Portanto, se você estiver considerando a migração para as versões mais recentes do Angular, este artigo serviu como um ponto de partida, mas é altamente recomendável manter-se atualizado com a documentação oficial e as comunidades do Angular para aproveitar ao máximo essas novas oportunidades.