O que há de novo no revolucionário Angular 14

A versão 14 do framework Angular foi oficialmente lançada e ela está repleta de grandes novidades. Algumas delas eram esperadas pela comunidade há muito tempo e finalmente estão disponíveis!

Acredito que desde a versão 9, onde o compilador Ivy foi introduzido, não tínhamos uma versão com novidades tão significativas.

Atualizando sua aplicação

É muito simples atualizar as versões da sua aplicação Angular utilizando o Angular CLI. Então para atualizar para a versão 14 basta seguir o passo-a-passo no Guia de Atualização.

Agora que estamos com a aplicação atualizada, vamos conhecer as principais novidades apresentadas nesta versão.

Standalone Components

Essa é a principal e mais aguardada feature da versão. Os Standalone Components já estavam sendo cogitados há um tempo e finalmente eles são uma realidade.

Uma das maiores insatisfações dos desenvolvedores Angular era a questão da obrigatoriedade da criação dos NgModules. Isso acabava aumentando a curva de aprendizado no Framework.

Na versão 14, graças aos Standalone Components podemos criar uma aplicação inteira sem utilizar nenhum NgModule. Como o próprio nome já diz, agora temos o poder de criar componentes, diretivas e pipes totalmente independentes.

Veja abaixo como podemos criar um Standalone Component:

O sinalizador standalone: ​​true indica que este é um componente independente. A nova propriedade imports define o contexto de compilação, ou seja, o número de todas as dependências que o componente pode usar. Isso pode ser usado para importar outros componentes independentes, mas também NgModules existentes.

Podemos também gerar um Standalone Component pelo Angular CLI, basta rodar o seguinte comando:

ng generate component title --standalone

Algumas pessoas podem não gostar dessa nova forma por talvez deixar o componente um tanto poluído. Mas calma! Ainda é possível utilizar os NgModules. A diferença é que a partir de agora eles são opcionais. Caso você queira refatorar sua aplicação removendo-os, é possível fazer isso de forma gradual.

Você pode conferir mais detalhes dessa novidade neste artigo.

Reactive Forms Tipados

Mais um sonho que se tornou realidade! Os Reactive Forms são uma das ferramentas mais poderosas para a criação e manipulação de formulários e é um grande diferencial do Angular. Porém uma das coisas que os desenvolvedores mais reclamavam era o fato de não termos tipagem. Mesmo informando implicitamente os tipos de um controle, os retornos de seus valores eram sempre any.

Para mensurar a tamanha dor que era para os desenvolvedores, algumas bibliotecas foram criadas somente para resolver essa falta de tipagem para os Reactive Forms.

Veja um exemplo de criação de um FormControl com o tipo string:

Por padrão o TypeScript irá inferir o tipo FormControl<string | null>. Isso acontece pois caso se utilize o método reset() então seu valor será nulo. Se você garante que o valor do seu controle nunca será nulo então basta informar a propriedade nonNullable como true.

Veja agora como o TypeScript infere os tipos de um FormGroup:

Temos a tipagem completa, tanto do FormGroup como dos FormControls. Ela pode ser undefined caso o controle esteja desabilitado.

Confira este artigo onde todas as novidades são demonstradas de forma mais detalhada.

Injeção de Dependência com a função inject()

A função inject já existe no Angular desde a versão 9. Com ela podemos capturar a referência de um token ou serviço injetável, porém até então seu escopo era bastante limitado.

Na versão 14 podemos utilizar esta função diretamente em nossos componentes, diretivas ou pipes. Antes dessa versão só conseguíamos este feito pelo método construtor.

Isso abre um mundo de possibilidades. Podemos por exemplo criar funções reutilizáveis para utilizar em nossos componentes.

É um recurso muito poderoso, porém acredito que deve ser utilizado com cautela, pois não fica definido explicitamente onde estão todas as dependências. É como se fosse “mágica”.

Vale a pena acompanhar a utilização do inject pela comunidade para entendermos sua aceitação dentro das aplicações. Se definirmos certos padrões para a sua utilização, imagino que teremos um grande ganho, principalmente na reutilização de código.

Para mais informações sobre essa função acesse este artigo.

Conclusão

Muitos outros recursos foram apresentados na versão 14, veja a lista completa neste link e também no Blog oficial do Angular. Porém acredito que os recursos descritos neste artigo são os mais significativos e que vão mudar bastante a forma como desenvolvemos nossas aplicações utilizando o Angular.