Roadmap do Angular

Reatividade assíncrona

Para permitir que desenvolvedores lidem com fluxo de dados assíncrono com signals, desenvolvemos a primitiva assíncrona resource. Construindo sobre ela, introduzimos httpResource que permite você enviar requisições HTTP e receber sua resposta como um signal.

Ainda estamos ativamente coletando feedback para essas novas APIs experimentais. Por favor, experimente-as e compartilhe seu feedback conosco no GitHub!

Melhorar HMR (Hot Module Reload)

Estamos trabalhando para um ciclo de edição/atualização mais rápido habilitando hot module replacement.

No Angular v19 lançamos suporte inicial para HMR de CSS e template e na v20 graduamos o HMR de template para estável. Continuaremos coletando feedback para garantir que estamos atendendo às necessidades dos desenvolvedores antes de marcar este projeto como completo.

Avaliando suporte a Nitro no Angular CLI

Estamos animados com o conjunto de funcionalidades que Nitro oferece, como mais opções de deployment, melhor compatibilidade de server-side rendering com diferentes runtimes e roteamento baseado em arquivos. Em 2025 avaliaremos como ele se encaixa no modelo de server-side rendering do Angular.

Compartilharemos atualizações conforme fazemos progresso nesta investigação.

Entregar Angular Signals

Este projeto repensa o modelo de reatividade do Angular introduzindo Signals como uma primitiva de reatividade. O planejamento inicial resultou em centenas de discussões, conversas com desenvolvedores, sessões de feedback, estudos de experiência do usuário e uma série de RFCs, que receberam mais de 1.000 comentários.

No Angular v20 graduamos todas as primitivas fundamentais de reatividade para estável, incluindo signal, effect, linkedSignal, queries baseadas em signal e inputs.

Suporte a drag-and-drop bidimensional

Como parte deste projeto, implementamos suporte a orientação mista para drag and drop do Angular CDK. Esta é uma das funcionalidades mais solicitadas do repositório.

Event replay com SSR e prerendering

Na v18 introduzimos uma funcionalidade de event replay ao usar server-side rendering ou prerendering. Para essa funcionalidade dependemos da primitiva de event dispatch (anteriormente conhecida como jsaction) que está rodando no Google.com.

No Angular v19 graduamos event replay para estável e habilitamos por padrão para todos os novos projetos.

Expandir a customização do Angular Material

Para fornecer melhor customização de nossos components do Angular Material e habilitar capacidades do Material 3, estaremos colaborando com o time de Material Design do Google na definição de APIs de theming baseadas em tokens.

Na v17.2 compartilhamos suporte experimental para Angular Material 3 e na v18 graduamos para estável.

Introduzir carregamento diferido

Na v17 lançamos deferrable views em developer preview, que fornecem uma API ergonômica para carregamento de código diferido. Na v18 habilitamos deferrable views para desenvolvedores de bibliotecas e graduamos a API para estável.

Automação para transição de projetos de renderização híbrida existentes para esbuild e vite

Na v17 lançamos um application builder baseado em vite e esbuild e o habilitamos por padrão para novos projetos. Ele melhora o tempo de build para projetos usando renderização híbrida em até 87%. Como parte da v18 lançamos schematics e um guia que migram projetos existentes usando renderização híbrida para o novo pipeline de build.

Tornar Angular.dev o lar oficial para desenvolvedores Angular

Angular.dev é o novo site, domínio e lar para desenvolvimento Angular. O novo site contém documentação atualizada, tutoriais e orientações que ajudarão desenvolvedores a construir com as funcionalidades mais recentes do Angular.

Introduzir controle de fluxo embutido

Na v17 lançamos uma versão developer preview de um novo controle de fluxo. Ele traz melhorias significativas de performance e melhor ergonomia para autoria de templates. Também fornecemos uma migração de *ngIf, *ngFor e *ngSwitch existentes que você pode executar para mover seu projeto para a nova implementação. A partir da v18 o controle de fluxo embutido agora está estável.

Investigar bundlers modernos

No Angular v16, lançamos um developer preview de um builder baseado em esbuild com suporte para ng build e ng serve. O servidor de desenvolvimento ng serve usa Vite e uma compilação multi-arquivo por esbuild e o compilador Angular. Na v17 graduamos as ferramentas de build de developer preview e habilitamos por padrão para novos projetos.

Introduzir APIs de debugging para dependency injection

Para melhorar os utilitários de debugging do Angular e Angular DevTools, trabalharemos em APIs que fornecem acesso ao runtime de dependency injection. Como parte do projeto, exporemos métodos de debugging que nos permitem explorar a hierarquia de injetores e as dependências através de seus providers associados. A partir da v17, lançamos uma funcionalidade que nos permite conectar ao ciclo de vida de dependency injection. Também lançamos uma visualização da árvore de injetores e inspeção dos providers declarados dentro de cada nó individual.

Melhorar documentação e schematics para components standalone

Lançamos um developer preview da coleção de schematics ng new --standalone, permitindo você criar aplicações livres de NgModules. Na v17 mudamos o formato de autoria de novas aplicações para APIs standalone e alteramos a documentação para refletir a recomendação. Adicionalmente, lançamos schematics que suportam atualizar aplicações existentes para components, directives e pipes standalone. Embora NgModules permaneçam pelo futuro previsível, recomendamos que você explore os benefícios das novas APIs para melhorar a experiência do desenvolvedor e se beneficiar das novas funcionalidades que construímos para elas.

Hidratação completa de aplicação não destrutiva

Na v16, lançamos um developer preview de hidratação completa não destrutiva, que permite ao Angular reutilizar nós DOM existentes em uma página renderizada no servidor, em vez de recriar uma aplicação do zero. Veja informações adicionais no guia de hidratação.

Melhorias na image directive

Lançamos a image directive do Angular como estável na v15. Introduzimos uma nova funcionalidade de modo fill que permite imagens se ajustarem dentro de seu container pai em vez de ter dimensões explícitas. Nos últimos dois meses, o time Chrome Aurora fez backport da directive para v12 e mais recentes.

Refatoração da documentação

Garantir que toda a documentação existente se encaixe em um conjunto consistente de tipos de conteúdo. Atualizar uso excessivo de documentação estilo tutorial em tópicos independentes. Queremos garantir que o conteúdo fora dos tutoriais principais seja autossuficiente sem estar fortemente acoplado a uma série de guias. No Q2 2022, refatoramos o conteúdo de templates e dependency injection. No Q1 2023, melhoramos os guias HTTP e, com isso, estamos colocando o projeto de refatoração de documentação em espera.

Melhorar performance de imagens

Os times Aurora e Angular estão trabalhando na implementação de uma image directive que visa melhorar os Core Web Vitals. Lançamos uma versão estável da image directive na v15.

CSS moderno

O ecossistema web evolui constantemente e queremos refletir os últimos padrões modernos no Angular. Neste projeto visamos fornecer diretrizes sobre o uso de funcionalidades modernas de CSS no Angular para garantir que desenvolvedores sigam boas práticas para layout, estilização, etc. Compartilhamos diretrizes oficiais para layout e como parte da iniciativa paramos de publicar flex layout.

Suporte para adicionar directives a elementos host

Uma solicitação de funcionalidade de longa data é adicionar a capacidade de adicionar directives a elementos host. A funcionalidade permite desenvolvedores aumentarem seus próprios components com comportamentos adicionais sem usar herança. Na v15 lançamos nossa API de composição de directive, que permite aprimorar elementos host com directives.

Melhores stack traces

Os times Angular e Chrome DevTools estão trabalhando juntos para habilitar stack traces mais legíveis para mensagens de erro. Na v15 lançamos stack traces melhoradas, relevantes e linkadas. Como uma iniciativa de menor prioridade, estaremos explorando como tornar os stack traces mais amigáveis fornecendo nomes de call frame mais precisos para templates.

Components Angular Material aprimorados integrando MDC Web

MDC Web é uma biblioteca criada pelo time Google Material Design que fornece primitivas reutilizáveis para construir components Material Design. O time Angular está incorporando essas primitivas no Angular Material. Usar MDC Web alinha o Angular Material mais proximamente com a especificação Material Design, expande acessibilidade, melhora qualidade de components e melhora a velocidade do nosso time.

Implementar APIs para NgModules opcionais

No processo de tornar o Angular mais simples, estamos trabalhando em introduzir APIs que permitem desenvolvedores inicializarem aplicações, instanciarem components e usar o router sem NgModules. O Angular v14 introduz developer preview das APIs para components, directives e pipes standalone. Nos próximos trimestres coletaremos feedback de desenvolvedores e finalizaremos o projeto tornando as APIs estáveis. Como próximo passo trabalharemos em melhorar casos de uso como TestBed, Angular elements, etc.

Permitir binding a campos protegidos em templates

Para melhorar o encapsulamento de components do Angular habilitamos binding a membros protegidos da instância do component. Dessa forma você não precisará mais expor um campo ou método como público para usá-lo dentro de seus templates.

Publicar guias sobre conceitos avançados

Desenvolver e publicar um guia aprofundado sobre detecção de mudanças. Desenvolver conteúdo para profiling de performance de aplicações Angular. Cobrir como a detecção de mudanças interage com Zone.js e explicar quando ela é acionada, como fazer profiling de sua duração, bem como práticas comuns para otimização de performance.

Lançamento de tipagens estritas para @angular/forms

No Q4 2021 projetamos uma solução para introduzir tipagens estritas para forms e no Q1 2022 concluímos a solicitação de comentários correspondente. Atualmente, estamos implementando uma estratégia de lançamento com uma etapa de migração automatizada que habilitará as melhorias para projetos existentes. Estamos primeiro testando a solução com mais de 2.500 projetos no Google para garantir um caminho de migração suave para a comunidade externa.

Remover View Engine legado

Após a transição de todas as nossas ferramentas internas para Ivy estar completa, removeremos o View Engine legado para reduzir a sobrecarga conceitual do Angular, tamanho menor de pacote, menor custo de manutenção e menor complexidade da base de código.

Modelo mental simplificado do Angular com NgModules opcionais

Para simplificar o modelo mental do Angular e a jornada de aprendizado, estaremos trabalhando em tornar NgModules opcionais. Este trabalho permite desenvolvedores desenvolverem components standalone e implementarem uma API alternativa para declarar o escopo de compilação do component. Iniciamos este projeto com discussões de design de alto nível que capturamos em um RFC.

Projetar tipagem estrita para @angular/forms

Trabalharemos em encontrar uma maneira de implementar verificação de tipo mais estrita para reactive forms com implicações mínimas de incompatibilidade retroativa. Dessa forma, permitimos desenvolvedores capturarem mais problemas durante o tempo de desenvolvimento, habilitamos melhor suporte de editor de texto e IDE e melhoramos a verificação de tipo para reactive forms.

Melhorar integração do Angular DevTools com framework

Para melhorar a integração do Angular DevTools com o framework, estamos trabalhando em mover a base de código para o monorepositório angular/angular. Isso inclui fazer a transição do Angular DevTools para Bazel e integrá-lo nos processos existentes e pipeline de CI.

Lançar diagnósticos avançados do compilador

Estender os diagnósticos do compilador Angular além da verificação de tipo. Introduzir outras verificações de correção e conformidade para garantir ainda mais correção e boas práticas.

Atualizar nossa estratégia de testes e2e

Para garantir que fornecemos uma estratégia de testes e2e à prova de futuro, queremos avaliar o estado do Protractor, inovações da comunidade, boas práticas de e2e e explorar novas oportunidades. Como primeiros passos do esforço, compartilhamos um RFC e trabalhamos com parceiros para garantir integração suave entre o Angular CLI e ferramentas de ponta para testes e2e. Como próximo passo, precisamos finalizar as recomendações e compilar uma lista de recursos para a transição.

Bibliotecas Angular usam Ivy

No início de 2020, compartilhamos um RFC para distribuição de bibliotecas Ivy. Após feedback inestimável da comunidade, desenvolvemos um design do projeto. Agora estamos investindo no desenvolvimento da distribuição de bibliotecas Ivy, incluindo uma atualização do formato de pacote de biblioteca para usar compilação Ivy, desbloquear a depreciação do formato de biblioteca View Engine e ngcc.

Melhorar tempos de teste e debugging com desmontagem automática do ambiente de teste

Para melhorar o tempo de teste e criar melhor isolamento entre testes, queremos mudar TestBed para automaticamente limpar e desmontar o ambiente de teste após cada execução de teste.

Depreciar e remover suporte a IE11

Internet Explorer 11 (IE11) tem impedido o Angular de tirar proveito de algumas das funcionalidades modernas da plataforma web. Como parte deste projeto vamos depreciar e remover o suporte a IE11 para abrir o caminho para funcionalidades modernas que navegadores evergreen fornecem. Executamos um RFC para coletar feedback da comunidade e decidir sobre os próximos passos para avançar.

Aproveitar ES2017+ como linguagem de saída padrão

Suportar navegadores modernos nos permite tirar proveito da sintaxe mais compacta, expressiva e performática do novo JavaScript. Como parte deste projeto investigaremos quais são os bloqueadores para avançar com este esforço e tomaremos as medidas para habilitá-lo.

Debugging acelerado e profiling de performance com Angular DevTools

Estamos trabalhando em ferramentas de desenvolvimento para Angular que fornecem utilitários para debugging e profiling de performance. Este projeto visa ajudar desenvolvedores a entender a estrutura de components e a detecção de mudanças em uma aplicação Angular.

Simplificar lançamentos com versionamento e branching consolidados do Angular

Queremos consolidar ferramentas de gerenciamento de lançamento entre os múltiplos repositórios GitHub para Angular (angular/angular, angular/angular-cli e angular/components). Este esforço nos permite reutilizar infraestrutura, unificar e simplificar processos e melhorar a confiabilidade do nosso processo de lançamento.

Maior consistência de desenvolvimento com padronização de mensagens de commit

Queremos unificar requisitos de mensagem de commit e conformidade entre repositórios Angular (angular/angular, angular/components e angular/angular-cli) para trazer consistência ao nosso processo de desenvolvimento e reutilizar ferramentas de infraestrutura.

Fazer transição do Angular language service para Ivy

O objetivo deste projeto é melhorar a experiência e remover dependência legada fazendo a transição do language service para Ivy. Hoje o language service ainda usa o compilador View Engine e verificação de tipo, mesmo para aplicações Ivy. Queremos usar o parser de template Ivy e verificação de tipo melhorada para o Angular Language service para corresponder ao comportamento da aplicação. Esta migração também é um passo em direção a desbloquear a remoção do View Engine, o que simplificará o Angular, reduzirá o tamanho do pacote npm e melhorará a manutenibilidade do framework.

Maior segurança com Trusted Types nativo no Angular

Em colaboração com o time de segurança do Google, estamos adicionando suporte para a nova API Trusted Types. Esta API de plataforma web ajuda desenvolvedores a construir aplicações web mais seguras.

Velocidade de build otimizada e tamanhos de bundle com webpack 5 no Angular CLI

Como parte do lançamento v11, introduzimos um preview opt-in de webpack 5 no Angular CLI. Para garantir estabilidade, continuaremos iterando na implementação para habilitar melhorias de velocidade de build e tamanho de bundle.

Aplicações mais rápidas através de inlining de estilos críticos em aplicações Universal

Carregar folhas de estilo externas é uma operação bloqueante, o que significa que o navegador não pode começar a renderizar sua aplicação até carregar todo o CSS referenciado. Ter recursos que bloqueiam renderização no cabeçalho de uma página pode impactar significativamente sua performance de carregamento, por exemplo, seu first contentful paint. Para tornar aplicações mais rápidas, temos colaborado com o time do Google Chrome no inlining de CSS crítico e carregamento do resto dos estilos assincronamente.

Melhorar debugging com melhores mensagens de erro do Angular

Mensagens de erro frequentemente trazem informação acionável limitada para ajudar desenvolvedores a resolvê-las. Temos trabalhado em tornar mensagens de erro mais descobríveis adicionando códigos associados, desenvolvendo guias e outros materiais para garantir uma experiência de debugging mais suave.

Melhor onboarding de desenvolvedor com documentação introdutória atualizada

Redefiniremos as jornadas de aprendizado do usuário e atualizaremos a documentação introdutória. Declararemos claramente os benefícios do Angular, como explorar suas capacidades e forneceremos orientação para que desenvolvedores possam se tornar proficientes com o framework no menor tempo possível.

Expandir boas práticas de component harnesses

O Angular CDK introduziu o conceito de component test harnesses ao Angular na versão 9. Test harnesses permitem autores de components criarem APIs suportadas para testar interações de components. Estamos continuando a melhorar esta infraestrutura de harness e esclarecendo as boas práticas sobre usar harnesses. Também estamos trabalhando para impulsionar mais adoção de harness dentro do Google.

Criar um guia para projeção de conteúdo

Projeção de conteúdo é um conceito central do Angular que não tem a presença que merece na documentação. Como parte deste projeto queremos identificar os principais casos de uso e conceitos para projeção de conteúdo e documentá-los.

Migrar para ESLint

Com a depreciação de TSLint estaremos migrando para ESLint. Como parte do processo, trabalharemos em garantir compatibilidade retroativa com nossa configuração TSLint recomendada atual, implementar uma estratégia de migração para aplicações Angular existentes e introduzir novas ferramentas à toolchain do Angular CLI.

Operation Bye Bye Backlog (também conhecida como Operation Byelog)

Estamos investindo ativamente até 50% de nossa capacidade de engenharia em triagem de issues e PRs até termos uma compreensão clara das necessidades mais amplas da comunidade. Depois disso, nos comprometeremos com até 20% de nossa capacidade de engenharia para acompanhar novas submissões prontamente.