Aula 08: Standalone Components 📦

Nesta aula, entramos na era do Angular Moderno. Vamos aprender como criar componentes que não precisam mais de um NgModule para funcionar.

---

🆕 O que mudou no Angular 15+?

Historicamente, todo componente precisava estar declarado em um módulo. Com os Standalone Components, o componente se torna autossuficiente.

graph LR
    A[Componente Clássico] --> B[NgModule]
    B --> C[Aplicação]

    D[Componente Standalone] --> E[Aplicação]
    D -.-> |Importa diretamente| F[CommonModule/Outros]

---

🛠️ Anatomia de um Standalone Component

A principal diferença está no decorator @Component, onde adicionamos a propriedade standalone: true.

@Component({
  selector: 'app-perfil',
  standalone: true, // A mágica acontece aqui!
  imports: [CommonModule, MeusOutrosComponents], // Importa o que precisa
  templateUrl: './perfil.component.html'
})
export class PerfilComponent {}

---

🚀 Iniciando a App sem Módulo

No Angular Moderno, o bootstrap da aplicação muda do módulo para o componente raiz diretamente usando bootstrapApplication.

Arquivo main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

---

⚖️ Comparação: Clássico vs Standalone

Característica	Clássico (NgModule)	Standalone (Moderno)
Declaração	Obrigatória no Module	Nenhuma (auto-gerido)
Imports	Feito no Module	Feito no próprio Componente
Complexidade	Alta (muitos arquivos)	Baixa (mais direto)
Performance	Padrão	Melhor (Tree-shaking)

---

🛠️ Gerando no CLI

# Gerar um componente standalone
$ ng generate component meu-comp --standalone

Dica

A partir de versões mais recentes, o Angular CLI pode ser configurado para que todos os componentes novos sejam standalone por padrão.

---

🚀 Prática: Primeiro Projeto Moderno

1. Crie um novo componente usando a flag --standalone.
2. Tente importar o CommonModule dentro dele para usar o *ngIf e o *ngFor.
3. Note que você não precisou tocar no arquivo app.module.ts!

---

🏁 Mini-Projeto da Aula

Refatore seu projeto da Aula 02 (que usava módulos) para usar apenas Standalone Components. Remova o arquivo app.module.ts e atualize o main.ts para usar o bootstrapApplication.