angular-routing
This tool provides configurations for Angular navigation, including lazy loading, route protection, and signal-based state management.
Install
mkdir -p .claude/skills/angular-routing && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/7048" && unzip -o skill.zip -d .claude/skills/angular-routing && rm skill.zipInstalls to .claude/skills/angular-routing
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Configure lazy loading for routes or individual components
- →Register application-level providers for router functionality
- →Setup route links with active state styling
- →Apply functional guards for navigation control
- →Define path redirects and wildcard catch-all routes
How it works
It updates the app.routes.ts file to bind components to paths and configures the provider in app.config.ts to bootstrap the Router engine.
Inputs & outputs
When to use angular-routing
- →Setup lazy loading for feature modules
- →Implement authentication guards for routes
- →Read route parameters using signals
- →Configure nested routing
About this skill
Angular Routing
⚠️ Deprecated. This skill is no longer maintained, and its guidance has been removed rather than left to go stale. The Angular team now publishes official skills at angular/skills — install those instead:
npx skills add https://github.com/angular/skillsTo remove these:
npx skills remove analogjs/angular-skills
The previous contents of this skill remain available in this repository's git history.
When not to use it
- →Standard server-side rendered routes without hydration
- →Angular applications below version 20
Prerequisites
Limitations
- →Requires explicit import statements for lazy-loaded modules
- →Path-to-component mapping must be manually updated in route definitions
How it compares
It strictly follows the v20+ signal-based and functional pattern rather than deprecated class-based guards or resolvers.
Compared to similar skills
angular-routing side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| angular-routing (this skill) | 1 | 6mo | No flags | Intermediate |
| angular | 100 | 4mo | Review | Advanced |
| angular-state-management | 8 | 4mo | No flags | Intermediate |
| angular-modernization | 4 | 8mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
angular
sickn33
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.
angular-state-management
sickn33
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
angular-modernization
bitwarden
Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.
igniteui-angular-grids
igniteui
Provides guidance on all Ignite UI for Angular data grid types (Flat Grid, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) including setup, column configuration, sorting, filtering, selection, editing, grouping, summaries, toolbar, export, paging, remote data, and state persistence. Use when users ask about grids, tables, data grids, tabular data display, cell editing, batch editing, row selection, column pinning, column hiding, grouping rows, pivot tables, tree-structured data, hierarchical data, master-detail views, or exporting grid data.
igniteui-angular-components
igniteui
Provides guidance on all non-grid Ignite UI for Angular UI components including application setup and architecture, form controls (Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider, reactive forms), layout (Tabs, Bottom Navigation, Stepper, Accordion, Splitter, Navigation Drawer, Layout Manager), data display (List, Tree, Card, Chips, Avatar, Badge, Icon, Carousel, Paginator, Progress Bar, Linear Progress Bar, Circular Progress Bar, Chat), feedback/overlays (Dialog, Snackbar, Toast, Banner), directives (Button, Ripple, Tooltip, Drag and Drop), Dock Manager, and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart, IgxCategoryChart, IgxFinancialChart, IgxDataChart, IgxPieChart). Use when users ask about any Ignite UI Angular component that is not a data grid, such as forms, inputs, dropdowns, date pickers, dialogs, navigation, lists, trees, cards, charts, or application scaffolding and setup.
test-automation
jimmykane
Generate and manage Vitest tests for Angular components, services, and Firebase integrations