Confira as grandes novidades do Angular 19

Depois de uma versão incrível que foi o Angular 18, já temos o seu sucessor. Como protocolo, a equipe do Angular promete lançar uma nova versão a cada 6 meses, e cá estamos com a versão 19, que estabilizou várias features da versão anterior e também trouxe excelentes novidades, além de vários schematics, onde podemos migrar facilmente nosso código para as novas estruturas.

Atualizando sua aplicação

Como muitos devem saber, é muito simples atualizar a versão da sua aplicação Angular utilizando o Angular CLI. Para atualizar para a versão 19 basta seguir o passo-a-passo no Guia de Atualização.

Dica: A minha Talk Angular Update: Guia Prático para Atualizações Sem Estresse talvez possa te ajudar nesse processo.

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

Standalone por padrão

Na versão 19, o Angular terá standalone: true como padrão para componentes, pipes e diretivas!

Nas últimas versões, percebemos como Standalone components vêm evoluindo e ganhando cada vez mais espaço dentro das aplicações. Parece ser um excelente momento para deixá-las como padrão.

"Quero continuar usando componentes com NgModules. O que devo fazer?" Basta atribuir a propriedade standalone: false.

Para atribuir um componente Standalone, utilizávamos desta maneira:

@Component({
  standalone: true,
  selector: 'app-user',
  template: './user.component.html',
})
export class UserComponent {…}

Agora podemos omitir a propriedade:

@Component({
  selector: 'app-user',
  template: './user.component.html',
})
export class UserComponent {…}

Diagnóstico de imports não utilizados em Standalone Components

Um dos recursos mais esperados desde a introdução de Standalone Components é a capacidade de detectar se um componente ou diretiva importada para um componente está realmente sendo usada. Agora, essa necessidade foi finalmente abordada!

Este diagnóstico relata um warning caso tenham importações não utilizadas , dando aos desenvolvedores um aviso sem quebrar a compilação. Caso seja necessário, o comportamento de diagnóstico pode ser desabilitado usando a seguinte opção no arquivo tsconfig.json:

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "unusedStandaloneImports": "suppress"
      }
    }
  }
}

Nova API de configuração de roteamento para SSR

É impressionante como Server Side Rendering vem sendo uma prioridade para o Angular. Nesta versão conseguimos definir qual será o modo de renderização para cada página, utilizando a interface ServerRoutes.

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', mode: RenderMode.Server },
  { path: '/dashboard', mode: RenderMode.Client },
  { path: '/**', mode: RenderMode.Prerender },
];

- 𝐑𝐞𝐧𝐝𝐞𝐫𝐌𝐨𝐝𝐞.𝐒𝐞𝐫𝐯𝐞𝐫: Renderização do lado do servidor
- 𝐑𝐞𝐧𝐝𝐞𝐫𝐌𝐨𝐝𝐞.𝐂𝐥𝐢𝐞𝐧𝐭: Renderização do lado do cliente
- 𝐑𝐞𝐧𝐝𝐞𝐫𝐌𝐨𝐝𝐞.𝐏𝐫𝐞𝐫𝐞𝐧𝐝𝐞𝐫: Pré-renderização de conteúdo estático

Fantástico, não?

Incremental Hydration

E as novidades para Server Side Rendering não param por aí. Incremental Hydration permite que você anote partes do seu template, usando a sintaxe já conhecida @defer, instruindo o Angular a carregá-las e hidratá-las em eventos específicos, de forma Lazy.

Veja só este exemplo em ação para uma página renderizada do lado do servidor. Conforme o usuário interage com a página, os componentes são carregados de forma automática, proporcionando uma performance fantástica para aplicações Server Side!

Você pode conferir mais a fundo essa feature neste vídeo.

Resource API

A próxima versão do Angular vai introduzir uma nova forma de recuperar os dados de um servidor HTTP: a Resource API.

Muito parecida com a TanStack Query do React, ela vai permitir que acompanhemos o status de uma requisição e atualizemos os dados localmente quando necessário.

Mas o mais curioso é que os principais casos de uso são utilizando a Fetch API e não o já conhecido HttpClient do framework. O que significa que o RxJS vem se tornando cada vez mais opcional nas novas versões do Angular.

import { resource } from "@angular/core";

@Component()
export class MyComponent {
  todosResource = resource({
    loader: () => {
      return fetch(`https://server-todo.com`)
        .then((res) => res.json() as Promise<Todo[]>);
    },
  });

  refresh() {
    this.todosResource.refresh();
  }
}

A Resource API é bastante integrada com os Signals. Sabemos que os Signals são reativos, e os dois funcionam muito bem juntos. Veja no exemplo abaixo onde temos um Signal todoId e toda vez que esse valor mudar, uma nova requisição é feita.

import { resource } from "@angular/core";

@Component()
export class MyComponent {
  todoId = signal(1);

  todoResource = resource({
    request: this.todoId, 
    loader: ({ request: todoId }) => {  
        return fetch( 
          `https://jsonplaceholder.typicode.com/todos/${todoId}`,
        ).then((res) => res.json() as Promise<Todo>);
    },
  });
}

Para saber mais sobre a Resource API confira este artigo completo.

Conclusão

Muitos outros recursos foram apresentados na versão 19, veja a lista completa neste link e também no Blog oficial do Angular.

Podemos concluir que cada vez mais o Angular está olhando para o futuro, simplificando e aprimorando a experiência de desenvolvimento. Recursos como Standalone Components e Signals já são uma realidade e vieram pra ficar de vez. Além disso, o RxJS, que possui uma curva de aprendizado alta, pode se tornar totalmente opcional dado essas novas APIs que o Angular vem disponibilizando.