Componentes Standalone

Introdução

Durante muitos anos, toda aplicação Angular precisava de pelo menos um NgModule para organizar componentes, diretivas, pipes e dependências.

A partir do Angular 14, o framework introduziu os Standalone Components, permitindo criar aplicações sem a necessidade de módulos tradicionais.

Essa mudança simplifica a arquitetura, melhora o Lazy Loading e reduz a complexidade da aplicação.

O que é um Componente Standalone?

Exemplo:

import { Component } from "@angular/core";
 
@Component({
  selector: "app-home",
  standalone: true,
  template: `<h1>Home</h1>`,
})
export class HomeComponent {}

O atributo:

standalone: true;

indica ao Angular que o componente não depende de nenhum módulo para ser utilizado.

Importando Dependências

Com Standalone Components, as dependências são declaradas diretamente no componente.

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
 
@Component({
  standalone: true,
  imports: [CommonModule],
  template: ` <div *ngIf="true">Angular Standalone</div> `,
})
export class ExampleComponent {}

Isso elimina a necessidade de criar módulos apenas para compartilhar dependências.

Diferença para NgModules

Principais Vantagens

Menos Boilerplate

Não é necessário criar módulos apenas para registrar componentes.

Melhor organização

Cada componente declara explicitamente suas dependências.

Lazy Loading simplificado

Rotas podem carregar componentes diretamente.

Melhor experiência para novos desenvolvedores

Reduz a quantidade de conceitos necessários para começar no Angular.

Arquitetura mais moderna

Alinha o Angular com abordagens utilizadas por outros frameworks modernos.

Bootstrap sem AppModule

Antes:

platformBrowserDynamic().bootstrapModule(AppModule);

Agora:

import { bootstrapApplication } from "@angular/platform-browser";
 
bootstrapApplication(AppComponent);

Essa é a forma recomendada para aplicações modernas.

Lazy Loading com Standalone

Uma das maiores vantagens dos Standalone Components é simplificar o carregamento sob demanda.

Antes:

{
  path: 'users',
  loadChildren: () =>
    import('./users/users.module')
      .then(m => m.UsersModule)
}

Agora:

{
  path: 'users',
  loadComponent: () =>
    import('./users/users.component')
      .then(c => c.UsersComponent)
}

Observe que carregamos diretamente o componente.

Isso reduz complexidade e facilita a divisão da aplicação em partes menores.

Standalone e Arquitetura Moderna

Hoje é comum encontrar aplicações Angular modernas utilizando:

• Standalone Components
• Signals
• Lazy Loading por componente
• SSR
• Hydration
• Aplicações Zoneless

Esses recursos representam a direção atual do framework.

Casos de Uso

Perguntas de Entrevista