Muito empolgado com o novo lançamento do Angular v13 para compartilhar com todos vocês! Esta versão mais recente traz todos os tipos de atualizações e recursos para ajudar suas equipes a criar ótimos aplicativos.
Obtenha o Angular v13 agora executando ng updateem seu projeto. Também temos um guia de atualização disponível em update.angular.io para ajudar as equipes a obter instruções sobre como atualizar seus projetos.
A cada novo lançamento, nosso objetivo é encontrar maneiras materiais de tornar o Angular melhor. Neste lançamento, fizemos isso por meio da expansão de recursos e otimizações baseados em Ivy , fazendo parceria com nossa excelente comunidade Angular e continuando a fornecer um processo de atualização estável e suave para suas equipes e projetos.
Vamos começar dando uma olhada em como estamos avançando no Angular com o poder do Ivy.
Movendo a renderização angular para o futuro
Na versão v12 de maio de 2021, falamos sobre “Ivy Everywhere” e mencionamos que haveria algumas mudanças importantes no Angular para apoiar essa iniciativa. Temos sido diligentes nessa busca e estamos extremamente satisfeitos por termos realizado algumas mudanças impactantes na v13, à medida que Ivy continua abrindo portas para otimizações e melhorias.
Estado do motor de visualização
O View Engine não está mais disponível no Angular a partir da v13. Esta é uma ótima notícia porque o Angular pode continuar a criar recursos baseados em Ivy que aumentam sua produtividade com a plataforma. A remoção do View Engine também significa que o Angular pode reduzir sua dependência do ngcc( compilador de compatibilidade Angular ) no futuro, e as equipes podem esperar uma compilação mais rápida porque os metadados e os arquivos de resumo não estão mais incluídos.
Mudanças no formato do pacote angular (APF)
O Angular Package Format (APF) foi simplificado e modernizado para melhor atender aos desenvolvedores. Para simplificar o APF na v13, removemos formatos de saída mais antigos, incluindo metadados específicos do View Engine.
Para modernizá-lo, padronizamos os formatos JS mais modernos, como ES2020. Bibliotecas criadas com a versão mais recente do APF não exigirão mais o uso de ngcc. Como resultado dessas mudanças, os desenvolvedores de bibliotecas podem esperar uma saída de pacote mais enxuta e uma execução mais rápida.
Também atualizamos o APF para oferecer suporte às Exportações de Pacote de Nó . Isso ajudará os desenvolvedores a não dependerem inadvertidamente de APIs internas que podem mudar.
Atualizações de API de componentes
Ivy também permite melhorias de qualidade de vida na maneira como os desenvolvedores podem criar componentes de forma dinâmica. A API agora foi simplificada. Antes das mudanças no Angular v13, a criação dinâmica de componentes exigia muito código clichê.
A nova API elimina a necessidade de ComponentFactoryResolverser injetado no construtor. Ivy cria a oportunidade de instanciar o componente ViewContainerRef.createComponentsem criar uma fábrica associada.
Temos muito mais melhorias de API como essa em andamento que serão habilitadas pela Ivy.
Fim do suporte IE11
Ouvimos seus comentários e trabalhamos para abrir um caminho com a remoção do suporte do IE11 no Angular v13.
A remoção do suporte ao IE11 permite que o Angular aproveite os recursos modernos do navegador, como variáveis CSS e animações da web por meio de APIs da web nativas. Além do mais, os aplicativos serão menores e carregarão mais rápido porque podemos remover polyfills e caminhos de código específicos do IE. Também elimina a necessidade de carregamento diferencial . Os desenvolvedores se beneficiarão de APIs e infraestrutura de construção aprimoradas, enquanto os usuários de aplicativos se beneficiarão de um carregamento mais rápido e de uma experiência de usuário aprimorada.
A execução ng updateeliminará automaticamente esses polyfills específicos do IE e reduzirá o tamanho do pacote durante a migração do projeto.
Obrigado a todos que participaram do pedido de comentários (RFC). Os desenvolvedores que ainda precisam oferecer suporte aos usuários do IE11 para projetos existentes podem continuar a usar o Angular v12 e ele terá suporte até novembro de 2022 .
Melhorias na CLI Angular
Vamos para as atualizações das ferramentas do Angular . O Angular agora oferece suporte ao uso de cache de construção persistente por padrão para novos projetos v13 . O valioso feedback da [RFC] Cache de compilação persistente por padrão levou a esta atualização de ferramentas que resulta em uma melhoria de até 68% na velocidade de compilação e opções mais ergonômicas. Para que os projetos existentes que foram atualizados para a v13 habilitem esses recursos, os desenvolvedores podem adicionar esta configuração a angular.json:
Descubra mais detalhes na documentação .
ESBuild também vê algumas melhorias de desempenho nesta versão! Apresentamos esbuild, que agora funciona com tersera otimização de scripts globais. Além disso, esbuildsuporta mapas de origem CSS e pode otimizar CSS global, bem como otimizar todas as folhas de estilo.
Mudanças na estrutura e atualizações de dependências
O Angular v13 também apresenta algumas atualizações úteis e mudanças importantes. Primeiro, o RxJS 7.4 agora é o padrão para aplicativos criados com ng new. Os aplicativos existentes que usam RxJS v6.x terão que ser atualizados manualmente usando o npm install rxjs@7.4comando. Para saber mais sobre as mudanças da versão 6 para a versão 7, verifique este resumo em rxjs.dev .
Se isso não bastasse, agora há suporte para TypeScript 4.4. Mais informações podem ser encontradas no blog de lançamento do TypeScript .
Melhorias nos testes angulares
Fizemos algumas melhorias importantes TestBedque agora fazem um trabalho melhor de derrubar módulos e ambientes de teste após cada teste. O DOM agora é limpo após cada teste e os desenvolvedores podem esperar testes mais rápidos, menos intensivos de memória, menos interdependentes e mais otimizados.
Este recurso está ativado desde 12.1.0 e agora será o padrão, embora permaneça personalizável. Veja como – ele pode ser configurado para todo o conjunto de testes por meio do TestBed.initTestEnvironmentmétodo:
Ou pode ser configurado por módulo, atualizando o TestBed.configureTestingModule:
Isso fornece a flexibilidade de aplicar essas alterações onde fizerem mais sentido para cada projeto e seus testes. Confira este blog de Lars Gyrup Brink Nielsen para aprender ainda mais.
Tudo sobre componentes
Acessibilidade (a11y) deve ser a base de tudo o que construímos dentro e fora da comunidade Angular. Levamos essa responsabilidade a sério e o trabalho que realizamos resultou em melhorias e alterações significativas nos componentes do Angular Material .
Todos os componentes baseados em MDC foram avaliados para atender aos elevados padrões a11y em áreas como contraste, alvos de toque, ARIA e muito mais.
Para ter uma ideia melhor de como essas alterações afetam os componentes, dê uma olhada nos ajustes que fizemos nos tamanhos dos alvos de toque para componentes como caixa de seleção e botão de rádio .
Caixas de seleção exibindo tamanhos de alvos de toque atualizados
Uma comparação de tamanhos de alvos de toque. Os tamanhos à direita são os novos tamanhos.
Também houve algumas melhorias nos modos de alto contraste para vários componentes.
Vários componentes de botão em formas diferentes, mas com componentes em modo de alto contraste
Componentes de material em modo de alto contraste
Saiba mais sobre essas mudanças em nossa postagem do blog sobre como melhorar a acessibilidade do componente angular . Esperamos que isso ajude a todos a construir aplicativos angulares mais inclusivos.
Outras atualizações notáveis
Com o lançamento do Angular v11 em 2020, introduzimos o suporte para fontes inlining do Google. Agora, estamos estendendo o suporte para Adobe Fonts . Lembre-se de que as fontes inlining podem melhorar o desempenho do seu aplicativo, acelerando o First Contentful Paint (FCP). Esta mudança agora está habilitada para todos por padrão! Tudo que você precisa fazer é ng update. Temos um vídeo sobre inlining de fontes que pode ser útil, confira aqui:
Fizemos mudanças importantes nos documentos do angular.io para fornecer aos desenvolvedores mais informações sobre a API de localização. Os guias de localização foram atualizados para apresentar seções menores para tornar a jornada de aprendizagem mais clara. Também adicionamos mais documentação de API para $localize.
Considerações finais
Para uma visão geral mais detalhada, verifique o changelog completo . Obtenha a versão mais recente do Angular e diga-nos o que você pensa; você pode encontrar um guia de atualização detalhado em update.angular.io .
Até a próxima vez, amigos, construam ótimos aplicativos.