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.
Detected risks:
The angular-routing skill helps developers implement routing in Angular v20+ applications by providing tools for navigation, protected routes, route-based data loading, and nested routing. It addresses the complexity of configuring routes, lazy loading of feature modules, and handling dynamic route parameters in modern Angular applications. By offering robust solutions like lazy loading, functional guards, and signal-based route parameters, it simplifies application setup and ensures an efficient routing experience.
You can configure routing by defining routes in a `routes` array and providing the `Router` using `provideRouter`. Then, use `router-outlet` to display components based on the active route.
Yes, you can lazy load entire feature modules or individual components using the `loadChildren` or `loadComponent` properties in your route configuration.
The recommended approach is to use signal inputs with route parameters, utilizing `input.required()` and `computed()` to manage the parameters and their derived values efficiently.
Yes, this skill is designed for Angular v20+ applications. It leverages features introduced in Angular v20 such as signals for route parameters and functional guards.
You need to implement custom guards, such as authentication guards, which can be used to protect certain routes based on conditions like user authentication status.
Quick Setup:
.claude/skills/Repository
analogjs/angular-skills