O que são componentes standalone?

Question

Accepted Answer

**Componentes standalone** (Angular 14+, padrão em versões mais recentes) permitem que um componente **declare suas próprias dependências diretamente**, sem a necessidade de pertencer a um `NgModule`. Eles reduzem drasticamente o boilerplate e são agora a forma recomendada de construir aplicativos Angular. ## Um componente standalone ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` O componente importa exatamente o que seu template usa (`CommonModule` para `*ngFor`, `RouterLink` para links) — suas dependências são explícitas e colocalizadas, em vez de serem declaradas em um `NgModule` separado. ## O contraste com NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## Inicializando um app standalone (sem AppModule) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // configure router functionally provideHttpClient(), // HttpClient without HttpClientModule ], }); ``` Aplicativos standalone substituem o root `AppModule` por funções `bootstrapApplication` e **`provideX`** — uma configuração mais limpa e baseada em funções. ## Benefícios ```text ✓ Less boilerplate — no NgModule files to maintain ✓ Explicit dependencies — see exactly what a component uses ✓ Easier lazy loading — loadComponent() directly ✓ Simpler mental model — components are self-contained units ✓ Better tree-shaking potential ``` ## Por que isso importa Componentes standalone são a **direção moderna do Angular** — o framework agora faz scaffold de standalone por padrão e fornece funções `provideX` para configurar recursos sem módulos. Eles removem a sobrecarga histórica do NgModule, tornam as dependências explícitas e locais, e simplificam o lazy loading e o modelo mental geral. Compreender standalone (e a configuração `bootstrapApplication`/`provideRouter`/`provideHttpClient`) é essencial para trabalhar com o Angular atual, enquanto o conhecimento de NgModule ainda é necessário para código legado.