🚀 Capítulo 16: Módulos vs Standalone Components

🎯 Objetivo da Aula

Ao final desta aula, você entenderá a diferença entre a abordagem clássica do Angular (baseada em NgModule) e a abordagem moderna (baseada em Standalone Components), e saberá como criar e utilizar componentes independentes.

---

🏢 O Cenário Prático (Seu Desafio)

Os sistemas das naves antigas eram todos interligados em um único grande painel central (Módulos). Se uma peça quebrasse, o painel todo podia falhar. As naves novas usam sistemas modulares independentes (Standalone). Seu desafio é atualizar os sistemas da sua nave para essa nova era tecnológica!

---

🧠 Fundamentos: A Teoria Traduzida

Até a versão 14, o Angular exigia que todo componente pertencesse a um NgModule. O módulo dizia quais componentes podiam usar quais ferramentas.

1. A Era Clássica: NgModule

Os componentes eram declarados em um arquivo central (geralmente app.module.ts). Se você quisesse usar o FormsModule em um componente, precisava importar o FormsModule no arquivo do módulo.

2. A Nova Era: Standalone Components

A partir do Angular 14 (e padrão no 17+), os componentes podem ser independentes! Eles não precisam de um módulo. Cada componente diz o que ele mesmo precisa importar.

• Vantagens: Menos arquivos, código mais limpo e carregamento mais rápido (lazy loading mais fácil).
• Sintaxe: No decorador @Component, adicionamos standalone: true e a lista de imports.

---

📖 Exemplo Guiado: Criando um Componente Standalone

Vamos ver como fica a estrutura de um componente moderno e independente.

🛠️ Passo a Passo (Criando via CLI)

Para criar um componente standalone, a CLI moderna já faz isso por padrão. Mas se precisar forçar, use:

ng g c painel-novo --standalone

🛠️ Passo a Passo (Estrutura do Código)

Abra o arquivo painel-novo.component.ts. Ele se parecerá com isto:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // Importa diretivas básicas como *ngIf e *ngFor
import { FormsModule } from '@angular/forms'; // Se precisar de formulários
 
@Component({
  selector: 'app-painel-novo',
  standalone: true, // AQUI ESTÁ A MÁGICA!
  imports: [CommonModule, FormsModule], // O componente importa suas próprias dependências
  templateUrl: './painel-novo.component.html',
  styleUrls: ['./painel-novo.component.css']
})
export class PainelNovoComponent {
  // Lógica do componente
}

🕹️ Como Executar e Testar no VS Code

1. Se você estiver usando um projeto puramente standalone (gerado no Angular 17+), você não terá o arquivo app.module.ts.
2. Para usar esse novo componente em outro lugar (ex: no app.component.ts), você deve importá-lo diretamente no array de imports do componente onde vai usá-lo!

// app.component.ts
import { PainelNovoComponent } from './painel-novo/painel-novo.component';
 
@Component({
  // ...
  imports: [PainelNovoComponent], // Importa o componente standalone aqui
})

---

🛠️ Prática Obrigatória 1

Crie um componente standalone chamado escudo-avancado. No HTML dele, use a diretiva *ngIf para mostrar a mensagem “Escudo Ativo”. Lembre-se de verificar se o CommonModule está no array de imports do arquivo .ts do componente, senão o *ngIf não funcionará!

---

🛠️ Prática Obrigatória 2

Tente importar o MiniCacaComponent (que criamos no Capítulo 7) dentro do seu novo componente painel-novo. Lembre-se que para um componente standalone importar outro, o outro também precisa ser standalone (ou exportado por um módulo).

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No escudo-avancado.component.ts:

import { CommonModule } from '@angular/common';
 
@Component({
  selector: 'app-escudo-avancado',
  standalone: true,
  imports: [CommonModule], // Obrigatório para usar *ngIf
  templateUrl: './escudo-avancado.component.html'
})

---

← Capitulo Anterior | Proximo Capitulo →