Aula 09: Roteamento Standalone 🗺️

Navegação no Angular Moderno

---

📍 Adeus, RouterModule.forRoot()

No modelo standalone, configuramos as rotas no bootstrap da aplicação.

Usamos a função provideRouter().

---

🛠️ Configuração no main.ts

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});

• Tudo centralizado no bootstrap!

---

📁 app.routes.ts

O arquivo onde as rotas vivem agora.

export const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  ...
];

---

🚀 loadComponent

O Lazy Loading ficou mais simples e poderoso.

{
  path: 'admin',
  loadComponent: () => import('./admin.comp')
    .then(m => m.AdminComponent)
}

• Carrega apenas o componente necessário!

---

🧱 Imports no Standalone

O componente standalone que usa roteamento deve importar explicitamente:

• RouterOutlet
• RouterLink

---

💡 Por que mudar?

1. Menos boilerplate
2. Melhor separação de interesses
3. Performance superior

---

🎯 Prática

Vamos refatorar o site institucional para remover todos os vestígios de NgModule no sistema de rotas!

---

❓ Dúvidas?

Vamos navegar no futuro! 🚀