Angular é uma estrutura usada por milhões de desenvolvedores para muitos aplicativos de missão crítica e levamos as principais mudanças a sério. Começamos a explorar APIs autônomas anos atrás , em 2022, as lançamos na visualização do desenvolvedor. Agora, depois de mais de um ano coletando feedback e iterando nas APIs, gostaríamos de encorajar uma adoção ainda mais ampla!

Para oferecer suporte aos desenvolvedores que fazem a transição de seus aplicativos para APIs independentes, desenvolvemos esquemas de migração e um guia de migração standalone . Quando estiver no diretório do projeto, execute:

ng generate @angular/core:standalone

Os esquemas converterão seu código, removerão NgModulesclasses desnecessárias e, por fim, alterarão o bootstrap do projeto para usar APIs independentes.

Standalone ng new collection

Como parte do Angular v16, você pode criar novos projetos como autônomos desde o início! Para experimentar a visualização do desenvolvedor dos esquemas autônomos, verifique se você está no Angular CLI v16 e execute:

ng new --standalone

Você obterá uma saída de projeto mais simples sem nenhum arquivo NgModules. Além disso, todos os geradores do projeto produzirão diretivas, componentes e tubos autônomos!

Configurar Zone.js

Após o lançamento inicial das APIs autônomas, ouvimos dos desenvolvedores que vocês gostariam de poder configurar o Zone.js com a nova bootstrapApplicationAPI.

Adicionamos uma opção para isso via provideZoneChangeDetection:

bootstrapApplication(App, {
  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
});

Ferramentas de desenvolvedor avançadas

Agora, vamos compartilhar alguns destaques de recursos da CLI Angular e do serviço de linguagem.

Visualização do desenvolvedor do sistema de compilação baseado em esbuild

Há mais de um ano, anunciamos que estamos trabalhando em suporte experimental para esbuild no Angular CLI para tornar suas compilações mais rápidas. Hoje estamos empolgados em compartilhar que na v16 nosso sistema de construção baseado em esbuild entra na visualização do desenvolvedor! Os primeiros testes mostraram uma melhoria de mais de 72% nas cold production builds.

Visualização do desenvolvedor do construtor baseado em esbuild

Agora ng serve estamos usando o Vite para o servidor de desenvolvimento, e o esbuild capacita tanto o desenvolvimento quanto a produção!

Queremos enfatizar que o Angular CLI depende exclusivamente do Vite como um servidor de desenvolvimento. Para oferecer suporte à correspondência de seletores, o compilador Angular precisa manter um gráfico de dependência entre seus componentes, o que requer um modelo de compilação diferente do Vite.

Você pode experimentar o Vite + esbuild atualizando seu angular.json:

...
"architect": {
  "build": {                     /* Add the esbuild suffix  */
    "builder": "@angular-devkit/build-angular:browser-esbuild",
...

Em seguida, abordaremos o suporte para i18n antes de graduarmos este projeto da visualização do desenvolvedor.

Melhor teste de unidade com Jest e Web Test Runner

Com base em pesquisas de desenvolvedores no Angular e na comunidade JavaScript mais ampla, o Jest é um dos frameworks de teste e executores de teste mais amados. Recebemos inúmeras solicitações para oferecer suporte ao Jest, que vem com complexidade reduzida, pois não são necessários navegadores reais.

Hoje, temos o prazer de anunciar que estamos introduzindo o suporte Jest experimental. Em uma versão futura, também moveremos projetos Karma existentes para o Web Test Runner para continuar a oferecer suporte a testes de unidade baseados em navegador. Isso será um no-op para a maioria dos desenvolvedores.

Você pode experimentar o Jest em novos projetos instalando o Jest npm install jest --save-dev e atualizando seu arquivo angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:jest",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": ["zone.js", "zone.js/testing"]
          }
        }
      }
    }
  }
}

Você pode aprender mais sobre nossa futura estratégia de teste de unidade em nosso post de blog recente .

Importações de preenchimento automático em modelos

Quantas vezes você usa um componente ou pipe em um modelo para obter um erro da CLI ou do serviço de linguagem que você realmente não importou a implementação correspondente? Aposto mil vezes!

O serviço de linguagem agora permite a importação automática de componentes e pipes.

Gif mostrando a funcionalidade de importação automática do serviço de linguagem Angular no VSCode

E tem mais!

Na v16, também estamos habilitando o suporte para TypeScript 5.0, com suporte para decoradores ECMAScript , removendo a sobrecarga de ngcc, adicionando suporte para service workers e app shell em aplicativos independentes, expandindo o suporte CSP na CLI e muito mais !

Melhorando a experiência do desenvolvedor

Juntamente com as grandes iniciativas nas quais estamos focados, também estamos trabalhando para trazer recursos altamente solicitados.

Required Inputs

Desde que introduzimos o Angular em 2016, não foi possível obter um erro de tempo de compilação se você não especificar um valor para uma entrada específica. A alteração adiciona zero sobrecarga no tempo de execução, pois o compilador Angular executa a verificação no tempo de compilação. Os desenvolvedores continuaram pedindo esse recurso ao longo dos anos e recebemos uma forte indicação de que isso será muito útil!

Na v16 agora você pode marcar uma entrada como necessária:

@Component(...)
export class App {
  @Input({ required: true }) title: string = '';
}

Passando dados do roteador como inputs do componente

A experiência do desenvolvedor do roteador está avançando rapidamente. Uma solicitação de recurso popular no GitHub está solicitando a capacidade de vincular parâmetros de rota às entradas do componente correspondente. Temos o prazer de informar que esse recurso agora está disponível como parte da versão v16!

Agora você pode passar os seguintes dados para as entradas de um componente de roteamento:

• Route data — resolvers and data properties
• Path parameters
• Query parameters

Aqui está um exemplo de como você pode acessar os dados de um resolvedor de rota:

const routes = [
  {
    path: 'about',
    loadComponent: import('./about'),
    resolve: { contact: () => getContact() }
  }
];

@Component(...)
export class About {
  // The value of "contact" is passed to the contact input
  @Input() contact?: string;
}

Você pode habilitar esse recurso usando withComponentInputBinding como parte do arquivo provideRouter.

Suporte CSP para estilos embutidos

Os elementos de estilo embutido que o Angular inclui no DOM para estilos de componente violam a style-src política de segurança de conteúdo (CSP) padrão . Para corrigir isso, eles devem conter um nonceatributo ou o servidor deve incluir um hash do conteúdo do estilo no cabeçalho CSP. Embora no Google não tenhamos encontrado um vetor de ataque significativo para essa vulnerabilidade, muitas empresas aplicam CSP estrito, levando à popularidade de uma solicitação de recurso no repositório Angular.

No Angular v16, implementamos um novo recurso que abrange a estrutura, Universal, CDK, Material e a CLI, que permite especificar um nonceatributo para os estilos dos componentes embutidos no Angular. Existem duas maneiras de especificar o nonce: usando o ngCspNonceatributo ou por meio do CSP_NONCEtoken de injeção.

O ngCspNonceatributo é útil se você tiver acesso a modelos do lado do servidor que podem adicionar nonceambos ao cabeçalho e ao index.html construir a resposta.

<html>
<body>
  <app ngCspNonce="{% nonce %}"></app>  
</body>
</html>

A outra maneira de especificar o nonce é por meio do CSP_NONCEtoken de injeção. Use esta abordagem se você tiver acesso ao noncetempo de execução e quiser armazenar em cache index.html:

import {bootstrapApplication, CSP_NONCE} from '@angular/core';
import {AppComponent} from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [{
    provide: CSP_NONCE,
    useValue: globalThis.myRandomNonceValue
  }]
});

Flexível ngOnDestroy

Os ganchos de ciclo de vida do Angular fornecem muito poder para conectar em diferentes momentos da execução do seu aplicativo. Uma oportunidade ao longo dos anos foi permitir maior flexibilidade, por exemplo, fornecer acesso ao OnDestroy como um arquivo .

Na v16, tornamos o OnDestroy injetável, o que permite a flexibilidade que os desenvolvedores solicitam. Este novo recurso permite que você injete DestroyRefcorrespondente a um componente, diretiva, serviço ou pipe — e registre o onDestroygancho de ciclo de vida. O DestroyRefpode ser injetado em qualquer lugar dentro de um contexto de injeção, inclusive fora do seu componente — nesse caso, o onDestroygancho é executado quando um injetor correspondente é destruído.:

import { Injectable, DestroyRef } from '@angular/core';

@Injectable(...)
export class AppService {
  destroyRef = inject(DestroyRef);

  destroy() {
    this.destroyRef.onDestroy(() => /* cleanup */ );
  }
}

Tags de fechamento automático

Um recurso altamente solicitado que implementamos recentemente permite que você use tags de fechamento automático para componentes em modelos Angular. É uma pequena melhoria na experiência do desenvolvedor que pode economizar um pouco de digitação!

Agora você pode substituir:

<super-duper-long-component-name [prop]="someVar"></super-duper-long-component-name>

com isso:

<super-duper-long-component-name [prop]="someVar"/>

Componentes melhores e mais flexíveis

Nos últimos trimestres, trabalhamos em estreita colaboração com a equipe de design de materiais do Google para fornecer a implementação de referência do Material 3 para a Web com o Angular Material. Os componentes baseados na Web do MDC que enviamos em 2022 estabelecem a base para esse esforço.

Como próximo passo, estamos trabalhando para lançar ainda este ano uma API de temas baseada em tokens expressivos que permite maior personalização dos componentes de material Angular.

Um lembrete de que removeremos os componentes legados não baseados em MDC na v17. Certifique-se de seguir nosso guia de migração para migrar para o mais recente.

Continuando nossa iniciativa de acessibilidade

Seguindo a missão do Google, o Angular permite que você crie aplicativos da web para todos! É por isso que estamos investindo continuamente em melhor acessibilidade para os componentes Angular CDK e Material.

Destaques da contribuição da comunidade

Duas das funcionalidades introduzidas pela comunidade que queremos destacar são:

• O diagnóstico estendido para uso adequado de ngSkipHydration por Matthieu Riegler
• A introdução de provideServiceWorkerpermitir o uso do trabalhador de serviço Angular sem NgModulespor Julien Saguet

Mais de 175 pessoas contribuíram para a v16 no GitHub e milhares de outras contribuíram por meio de postagens em blogs, palestras, podcasts, vídeos, comentários sobre as RFCs de reatividade, etc.

Queremos agradecer a todos que nos ajudaram a tornar este lançamento especial.

Vamos manter o ritmo juntos!

A versão 16 é o trampolim para as melhorias futuras que chegarão à reatividade do Angular e à renderização do lado do servidor no próximo ano. Estaremos avançando na Web inovando na experiência do desenvolvedor e no desempenho, permitindo que você crie para todos!

Você pode fazer parte do Angular Momentum e nos ajudar a moldar o futuro da estrutura compartilhando suas ideias nos próximos RFCs, pesquisas ou mídias sociais.

Obrigado por fazer parte da comunidade Angular. Mal podemos esperar para que você experimente esses recursos! ❤️

Texto extraído do blog angular e traduzído