A
angular-routing
Implement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards,
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Implement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes, route-based data loading, and nested routing. Triggers on route configuration, adding authentication guards, implementing lazy loading, or reading route parameters with signals.
How to use
- Zdefiniuj tablicę tras w pliku app.routes.ts, importując Routes z @angular/router. Dodaj ścieżki dla komponentów (np. home, about) oraz ścieżkę catch-all dla nieznanych tras.
- Skonfiguruj aplikację w app.config.ts, dodając provideRouter(routes) do tablicy providers w ApplicationConfig.
- W głównym komponencie (app.component.ts) zaimportuj RouterOutlet, RouterLink i RouterLinkActive z @angular/router, a następnie umieść je w szablonie — RouterOutlet wyświetla aktualny komponent, RouterLink tworzy linki nawigacyjne.
- Dla lazy loadingu dodaj w tablicy tras wpisy z loadChildren, wskazując dynamiczny import modułu feature'u — trasa załaduje się tylko gdy użytkownik ją odwiedzi.
- Aby chronić trasy, dodaj functional guards (np. canActivate) sprawdzające stan autentykacji przed wejściem na trasę.
- Odczytuj parametry trasy w komponentach za pomocą ActivatedRoute lub sygnałów — parametry dostępne są w queryParams lub params w zależności od konfiguracji trasy.