🚀 Rotas Simplificadas: O Fim do AppModule no Angular Standalone

A introdução dos Standalone Components no Angular (a partir da versão 14 e totalmente adotada na v17+) trouxe uma transformação não apenas na estrutura dos componentes, mas também na maneira como configuramos o roteamento da aplicação.

Se antes éramos obrigados a gerenciar múltiplos arquivos de módulo (AppModule, AppRoutingModule, Feature Modules), hoje, podemos configurar todo o routing diretamente no ponto de bootstrap da aplicação.

🧐 O Modelo de Roteamento Tradicional (Com NgModules) Link para o cabeçalho

Historicamente, o roteamento no Angular exigia, no mínimo, três arquivos para funcionar corretamente:

1. O Componente: Precisava ser declarado no seu respectivo módulo.

2. O Módulo de Rotas (AppRoutingModule): Onde o array de rotas era definido e o RouterModule.forRoot() era chamado.

3. O Módulo Principal (AppModule): Que importava o AppRoutingModule para que as rotas se tornassem ativas.

Esta abordagem era robusta, mas gerava uma quantidade considerável de boilerplate (código repetitivo), especialmente em aplicações menores ou ao configurar feature modules que continham apenas alguns componentes.

🌟 O Roteamento Standalone: Uma Configuração Plana Link para o cabeçalho

Com os componentes standalone, eliminamos a necessidade do AppModule e do AppRoutingModule para a configuração inicial. O roteamento é configurado através da função provideRouter no arquivo de bootstrap da aplicação (main.ts).

1. Preparação dos Componentes

A base de tudo são os componentes autônomos. Eles declaram ser standalone e importam suas próprias dependências, incluindo diretivas como RouterLink e o próprio <router-outlet>.

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  template: '<h2>Página Inicial do App</h2>'
})
export class HomeComponent { }

2. Configuração Centralizada no main.ts Em vez de importar um módulo de rotas, passamos o array de rotas diretamente para o provideRouter durante a inicialização da aplicação.

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter, Routes } from '@angular/router';

import { HomeComponent } from './app/home.component';
import { ProfileComponent } from './app/profile.component';

// 1. Definição do Array de Rotas
const APP_ROUTES: Routes = [
  {
    path: 'home',
    component: HomeComponent // Componente Standalone importado diretamente
  },
  {
    path: 'profile',
    component: ProfileComponent // Componente Standalone importado diretamente
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

// 2. Bootstrap com o Roteador como Provider
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(APP_ROUTES) // <--- Onde a mágica acontece
  ]
})
.catch(err => console.error(err));

3. O Componente Raiz (AppComponent)

O componente raiz agora é standalone e precisa apenas importar o RouterOutlet e o RouterLink (ou RouterLinkActive) diretamente do pacote @angular/router para funcionar.

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink], // Importação direta das diretivas
  template: `
    <h1>Meu App Standalone</h1>
    <nav>
      <a routerLink="/home">Home</a> | 
      <a routerLink="/profile">Profile</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent { }

⚡ Carregamento Preguiçoso (Lazy Loading) Aprimorado Link para o cabeçalho

A maior simplificação é vista no Lazy Loading (carregamento preguiçoso). Na abordagem tradicional, era necessário carregar um módulo inteiro (loadChildren). Com standalone, podemos carregar o componente diretamente usando a função loadComponent.

const APP_ROUTES: Routes = [
  // ... rotas normais ...
  {
    path: 'admin',
    // Carrega o componente (e todas as suas dependências) sob demanda
    loadComponent: () =>
      import('./admin/admin.component').then(m => m.AdminComponent)
  }
];

🔑 Benefícios da Nova Abordagem Link para o cabeçalho

A adoção do roteamento standalone não é apenas uma mudança de sintaxe; é um passo em direção a uma arquitetura Angular mais moderna, leve e eficiente.