Aula 09: Roteamento no Modelo Standalone 🗺️

Nesta aula, vamos aprender como configurar a navegação da nossa aplicação Angular usando o modelo moderno, eliminando a dependência do AppRoutingModule.

---

📍 Roteamento sem Módulos

No modelo standalone, não usamos mais o RouterModule.forRoot(). Em vez disso, usamos a função provideRouter() durante o bootstrap da aplicação.

Configuração no main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes) // Configura as rotas aqui!
  ]
});

---

📁 Organização de Rotas (app.routes.ts)

As rotas continuam sendo um array de objetos, mas agora importamos os componentes diretamente.

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent }
];

---

🚀 Lazy Loading com loadComponent

No modelo clássico, o lazy loading era feito por módulos (loadChildren). No modelo standalone, podemos carregar componentes individuais sob demanda.

{
  path: 'dashboard',
  loadComponent: () => import('./features/dashboard.component')
    .then(m => m.DashboardComponent)
}

---

🛠️ O que mudou no HTML?

Absolutamente nada! As diretivas <router-outlet> e [routerLink] continuam funcionando da mesma forma.

Atenção

Como seu componente agora é Standalone, você deve importar explicitamente o RouterModule (ou as diretivas individuais como RouterOutlet) dentro do array imports do seu componente.

@Component({
  standalone: true,
  imports: [RouterOutlet, RouterLink], // Obrigatório importar!
  ...
})

---

🌟 Vantagens do Roteamento Standalone

1. Menos arquivos: Não precisa do app-routing.module.ts.
2. Performance: O Lazy Loading de componentes é mais granular que o de módulos.
3. Clareza: O main.ts mostra claramente quais serviços e configurações a app possui.

---

🚀 Prática: Refatoração de Rotas

Vamos pegar o projeto da Aula 07 e: 1. Remover o AppRoutingModule. 2. Mover a constante routes para um arquivo próprio. 3. Configurar o provideRouter no main.ts. 4. Transformar o lazy loading de módulos em lazy loading de componentes.

---

🏁 Mini-Projeto da Aula

Crie um sistema de abas (Tabs). Cada aba deve ser um componente independente. Configure o roteamento para que cada aba tenha sua própria URL e use o loadComponent para que o código de cada aba só seja baixado quando o usuário clicar nela.