A mudança declarativa do Angular

Comunidade
,
1

Imagem de capa para a Mudança Declarativa do Angular

Imagem de perfil do Angular FirebaseAntonio Cardenas

Antonio Cardenas para Angular Firebase

Postado em 19 de Out

11111

A Mudança Declarativa do Angular

#angular#typescript#webdev#spanish

Como a Nova Estrutura de Pastas Muda Tudo

Se você ainda não atualizou para a versão 20, a primeira e a segunda parte deste guia podem ajudá-lo a entender o que muda e como atualizar.

Parte 1: A Atualização em Si :hammer_and_wrench:

Primeiro, vamos resolver o básico. Antes de executar qualquer comando, certifique-se de que seu ambiente está pronto.

Pré-requisitos

  • Node.js: v20.11.1 ou posterior.
  • TypeScript: v5.8 ou posterior.
  • Backup do projeto: Certifique-se de confirmar todas as suas alterações atuais no Git. Sério.

O Comando de Atualização

Assim que você confirmar sua versão do Node.js, execute o comando que se ajuste ao seu projeto.

Para um projeto padrão do Angular:

ng update @angular/cli @angular/core

Se você usa Angular Material:

ng update @angular/cli @angular/core @angular/material

O processo de atualização será executado, mas é provável que você encontre seu primeiro obstáculo imediatamente.

Parte 2: O que Quebra Imediatamente :stop_sign:

Diferente das atualizações anteriores, o Angular 20 introduz uma mudança significativa que fará sua compilação parar.

1. A História Completa Por Trás da Remoção do Karma

A primeira coisa que você notará é que ng test falhará. Isso não é apenas um erro; é uma mudança fundamental nas ferramentas de compilação do Angular. Com o Angular 20, o pacote de compilação padrão muda de @angular-devkit/build-angular para o novo @angular/build. Este novo pacote não inclui o Karma. O ecossistema da web avançou para executores de testes mais rápidos e modernos, como Vitest e Jest, e o Karma se tornou um gargalo.

A solução temporária:

Para que seus testes sejam executados sem migrar tudo hoje, você deve reinstalar manualmente a antiga ferramenta de compilação. Isso força a CLI a usar o antigo compilador que ainda é compatível com o Karma.

npm install @angular-devkit/build-angular --save-dev

Isso é uma ponte de compatibilidade. A mensagem da equipe do Angular é clara: comece a planejar sua migração para Jest ou Vitest em breve.

2. browserslist e Suporte a Navegadores

Aqui há um detalhe menor que pode te surpreender. O Angular 20 não é mais oficialmente compatível com o Opera. Se você tem “Opera” listado no seu arquivo .browserslistrc, sua compilação pode falhar ou gerar avisos. Remova-o para resolver o problema.

Parte 3: A Nova Arquitetura :classical_building:

Além das mudanças significativas, o Angular 20 impulsiona uma arquitetura mais moderna, explícita e escalável.

1. Componentes standalone por padrão.

Novos projetos gerados com ng new agora são standalone (independentes) por padrão. Isso marca uma mudança arquitetônica fundamental que se afasta dos NgModules. Ao listar as dependências diretamente no array imports de um componente, cada componente se torna autocontido.

O que esse mudança implica?

  • Arquitetura mais clara e definida: Você sabe exatamente o que cada componente precisa.
  • Melhora o tree-shaking: Leva a pacotes mais pequenos e otimizados.

Para migrar seus projetos existentes, você pode executar o schematic de migração standalone:

ng generate @angular/core:standalone

2. Uma Estrutura de Pastas que Conta uma História

Uma boa estrutura de pastas não só contém arquivos, mas também te diz o que a aplicação faz. Vale a pena enfatizar a guia de estilo oficial do Angular, já que suas recomendações são baseadas em anos de experiência comunitária. Essa filosofia, detalhada em sua página de referência de estrutura de arquivos, muitas vezes é resumida com o acrônimo LIFT (por suas siglas em inglês: Localizar, Identificar, Plano, Tente ser DRY):

  • Locate (Localize) seu código facilmente.
  • Identify (Identifique) o que um arquivo faz de um relance.
  • Flat (Plano): Mantenha a estrutura plana tanto quanto possível.
  • Try to be DRY: Don’t Repeat Yourself (Tente não se repetir).

A conclusão principal é organizar por característica, não por tipo. Em vez de uma pasta components e uma pasta services, crie pastas para características como user-profile ou product-list.

Vamos usar um exemplo prático para uma aplicação de comércio eletrônico:

src/app/
├── core/
│   ├── auth/          # Lógica de autenticação usada em todos os lugares
│   │   ├── auth-store.ts
│   │   └── auth-interceptor.ts
│   └── layout/        # O shell da aplicação: barra de navegação, rodapé
│       ├── navbar.ts
│       └── footer.ts
│
├── features/
│   ├── products/      # Tudo para navegar pelos produtos
│   │   ├── product-list.ts
│   │   ├── product-details.ts
│   │   └── product-search.ts
│   │
│   └── cart/          # A característica do carrinho de compras
│       ├── cart-store.ts
│       ├── cart-view.ts
│       └── add-to-cart.ts
│
└── shared/            # Componentes "burros" reutilizáveis e utilitários
    └── ui/
        ├── button.ts
        ├── spinner.ts
        └── price.pipe.ts

Por que isso funciona?

  1. core :classical_building: (Fornecer uma vez): Serviços e componentes que a aplicação precisa para rodar, carregados apenas uma vez (AuthStore, Navbar).
  2. Features :sparkles: (O que sua aplicação faz): O coração da sua aplicação. Cada pasta é uma característica autocontida.
  3. shared :recycling_symbol: (Blocos de construção reutilizáveis): Componentes “burros”, pipes e diretivas que não sabem nada sobre as características em que são usadas (Button, Spinner). Eles são importados pelos módulos de características.

3. A Nova Convenção de Nomes

O Angular 20 introduz uma nova convenção oficial de nomes que elimina os sufixos tradicionais como .component.ts ou .service.ts.

Nomenclatura Antiga Nova Nomenclatura Intenção
user-profile.component.ts user-profile.ts Componente de Interface de Usuário
auth.service.ts auth-store.ts Gestão de estado
highlight.directive.ts highlight.ts Diretiva
user-api.service.ts user-api.ts Cliente HTTP

O objetivo é focar na intenção do arquivo em vez de seu tipo técnico. Uma classe que gerencia o estado é um “store” (armazenamento), e uma que faz requisições HTTP é uma “api”. Isso torna o propósito do seu código muito mais claro, especialmente em uma estrutura de pastas baseada em características.

Parte 4: As Novas Ferramentas e Sintaxes :rocket:

Finalmente, vamos ver as novas ferramentas que melhorarão seu desenvolvimento diário.

1. O Controle de Fluxo é Mais do que Açúcar Sintático.

O novo bloco @for substitui o *ngFor e é uma melhoria significativa.

Sintaxe Antiga:

<div *ngFor="let item of items; trackBy: trackItemById">
  {{ item.name }}
</div>

Nova Sintaxe:

@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
} @empty {
  <div>Não há itens para mostrar.</div>
```Melhorias-chave:

* `track` é **obrigatório**, o que impõe uma melhor prática de desempenho que frequentemente era esquecida.
* O bloco `@empty` embutido limpa os modelos ao eliminar a necessidade de um `*ngIf` separado.

Você pode usar a CLI para refatorar automaticamente seus modelos:

```bash
ng generate @angular/core:control-flow

2. Sem zonas: Escapando da “magia de detecção de alterações”.

Embora ainda seja experimental, o caminho para um Angular sem zonas (zoneless) está ficando mais claro. Em um mundo sem zonas, a interface do usuário só é atualizada quando você indica explicitamente.

Os signals (sinais) são a ferramenta principal para isso.

mySignal.set(newValue);

Esta linha indica diretamente ao Angular para atualizar apenas as partes específicas do DOM que dependem desse sinal. É uma abordagem cirúrgica, previsível e de alto desempenho que elimina a sobrecarga e a imprevisibilidade do Zone.js.

Conclusão

Angular 20 é uma versão significativa. A atualização requer intervenção manual para os testes, mas impulsiona o framework em direção a um futuro mais moderno, explícito e de alto desempenho. Ao adotar componentes standalone, uma arquitetura baseada em recursos e o novo fluxo de controle, você não está apenas atualizando, mas preparando sua aplicação para a próxima era do desenvolvimento web.