Configurazione del Router Angular: Route, Lazy Loading e Guardie

Navigazione nelle applicazioni a pagina singola

In Angular, il Router (da @angular/router) abilita la navigazione SPA tramite URL. Il termine "bootstrap router" si riferisce alla configurazione del router durante l'avvio dell'app tramite RouterModule.forRoot().

Configurazione di base

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Funzionalità chiave

• Route denominate: basate sul percorso (es. /home), non su hash. Richiede riscrittura lato server per link profondi.
• Lazy Loading: carica i moduli di funzionalità su richiesta:
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
• Route Guards: CanActivate, CanActivateChild, CanDeactivate, CanLoad, Resolve — per autenticazione, permessi, prefetch dati, modifiche non salvate.
• Route figlie: <router-outlet> annidati per layout.
• Parametri di route e query: /user/:id (parametri), /search?q=term (query). Accesso tramite ActivatedRoute.

Integrazione Bootstrap

Importare AppRoutingModule in AppModule; il router si inizializza durante il bootstrap dell'app, ascoltando le modifiche dell'URL del browser tramite la strategia Location (PathLocationStrategy predefinita).