Angular Routing – Cheat Sheet Senior ■
1. Bases
export const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent }
];
Navigation
Template → <a routerLink="/home">Home</a>
TS → [Link](['/home'])
2. Params & Query
[Link](p => [Link]('id'));
[Link](p => p['id']);
3. Nested Routes
{ path: 'dashboard', children: [
{ path: 'stats', component: StatsComponent },
{ path: 'settings', component: SettingsComponent }
]}
4. Lazy Loading
// Module
{ path: 'admin', loadChildren: () => import('./admin/[Link]').then(m => [Link]) }
// Standalone (Angular 15+)
{ path: 'profile', loadComponent: () => import('./profile/[Link]').then(c => [Link]) }
5. Guards ■
export const authGuard: CanActivateFn = () => {
const auth = inject(AuthService);
const router = inject(Router);
return [Link]() ? true : [Link]('/login');
};
6. Resolvers ■
export const userResolver: ResolveFn<any> = (route) => {
const service = inject(UserService);
return [Link]([Link]('id')!);
};
7. Preloading
provideRouter(routes, withPreloading(PreloadAllModules));
8. Standalone Routing
bootstrapApplication(AppComponent, {
providers: [ provideRouter(routes), provideHttpClient() ]
});
9. Exemple Senior Angular 17
export const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadComponent: () => import('./home/[Link]').then(c => [Link]) },
{
path: 'users/:id',
loadComponent: () => import('./user/[Link]').then(c => [Link]),
resolve: { user: userResolver },
canActivate: [authGuard]
},
{ path: 'admin', loadChildren: () => import('./admin/[Link]').then(m => m.ADMIN_ROUTES), canMatch: [aut
{ path: '**', loadComponent: () => import('./not-found/[Link]').then(c => [Link]) }
];