📝 Angular: A Revolução Standalone vs. a Tradição Module

Desde o Angular 14, os Standalone Components (Componentes Autônomos) têm simplificado a forma como as aplicações são estruturadas, oferecendo uma alternativa mais leve e direta aos tradicionais NgModules. Este artigo detalha as diferenças conceituais e mostra exemplos práticos de como migrar de um componente baseado em módulo para a nova abordagem autônoma.

🧐 O Modelo Tradicional: NgModules Link para o cabeçalho

O NgModule é o pilar da arquitetura Angular há anos. Ele atua como um contêiner de metadados que organiza e conecta partes coesas de sua aplicação.

🔑 Funções Chave do NgModule: Link para o cabeçalho

• declarations: Lista os componentes, diretivas e pipes que pertencem ao módulo.
• imports: Importa a funcionalidade de outros módulos (como CommonModule, FormsModule) que o módulo atual precisa usar.
• providers: Registra os services disponíveis para injeção de dependência.
• exports: Torna componentes, diretivas, pipes ou até outros módulos acessíveis para módulos que o importarem.

📦 Exemplo em NgModule Link para o cabeçalho

No modelo tradicional, o componente precisa ser declarado dentro de um Feature Module.

1. Módulo (user.module.ts)

Este módulo declara e exporta o UserComponent, além de importar o CommonModule para ter acesso a diretivas como *ngIf.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';

@NgModule({
  declarations: [
    UserComponent // <--- O componente é declarado aqui
  ],
  imports: [
    CommonModule
  ],
  exports: [
    UserComponent // <--- O componente é exportado
  ]
})
export class UserModule { }

2. Componente (user.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div *ngIf="isLoggedIn">Olá, Usuário!</div> 
    `,
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  isLoggedIn = true;
}

🚀 A Abordagem Moderna: Standalone Components Link para o cabeçalho

Os Standalone Components mudam o paradigma, tornando o componente autossuficiente e eliminando a necessidade de um Feature Module para agrupar e declarar.

🔑 Características do Standalone: Link para o cabeçalho

• standalone: true: Propriedade obrigatória no decorador @Component.

• imports: Todas as dependências externas (módulos, diretivas, pipes e até outros standalone components) são listadas diretamente no componente.

💻 Exemplo em Standalone Link para o cabeçalho

A migração envolve remover o arquivo de módulo e ajustar o decorador do componente.

1. Componente Standalone (user-standalone.component.ts)

O componente agora gerencia suas próprias dependências, importando o CommonModule diretamente.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // <--- Importado diretamente

@Component({
  selector: 'app-user-standalone',
  standalone: true, // <--- Propriedade chave
  imports: [CommonModule], // <--- Dependências no próprio componente
  template: `
    <div *ngIf="isLoggedIn">Olá, Usuário Standalone!</div>
    `,
  styleUrls: ['./user-standalone.component.css']
})
export class UserStandaloneComponent {
  isLoggedIn = true;
}

2. Utilização (No componente pai ou rota)

O componente standalone é importado diretamente em qualquer lugar que precise usá-lo, sem a intermediação de um NgModule.

** Em um componente pai standalone: **

import { Component } from '@angular/core';
import { UserStandaloneComponent } from './user-standalone.component';

@Component({
  selector: 'app-main',
  standalone: true,
  imports: [UserStandaloneComponent], // Importação direta
  template: '<app-user-standalone></app-user-standalone>'
})
export class MainComponent {}

🔄 Resumo e Benefícios da Migração Link para o cabeçalho

A tabela a seguir resume as principais diferenças conceituais:

A adoção dos Standalone Components oferece benefícios significativos:

1. Redução de Boilerplate: Menos arquivos de módulo para manter e configurar.

2. Melhor Tree-Shaking: O Angular pode otimizar e eliminar código não utilizado de forma mais eficaz.

3. Desenvolvimento Simplificado: Componentes se tornam mais fáceis de entender, mover e reutilizar, pois carregam suas dependências junto com eles.