hoangnguyen0403/angular-routing
skills/angular/angular-routing/SKILL.md
Configure Angular Router with lazy-loaded routes, functional guards, and component input binding. Use when defining routes, lazy-loading features, creating route guards, or setting up resolvers.
$ install --global
skillsauthnpx skillsauth add hoangnguyen0403/agent-skills-standard angular-routingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 10, 2026, 2:34 AM136.4s3 files scanned
SKILL.md
- name:
- angular-routing
- description:
- Configure Angular Router with lazy-loaded routes, functional guards, and component input binding. Use when defining routes, lazy-loading features, creating route guards, or setting up resolvers.
Routing
Priority: P0 (CRITICAL)
1. Lazy Load All Feature Routes
- Use
loadComponent(standalone) orloadChildren(route file) for every feature route.
See routing patterns for lazy loading and guard examples.
2. Use Functional Guards
- Create function-based guards (
CanActivateFn) instead of deprecated class-based guards.
See routing patterns for functional guard implementation.
3. Enable Component Input Binding
- Configure
withComponentInputBinding()inprovideRouter(routes, withComponentInputBinding()). - Define
input.required<string>()in components — Angular auto-maps route params, query params, and resolve data.
4. Configure Resolvers and Titles
- Create
ResolveFn<T>to pre-fetch critical data before navigation. - Provide custom
TitleStrategyor usetitle: 'Dashboard'in route data.
Anti-Patterns
- No logic in route config: Move access control and data fetching to dedicated Guards and Resolvers.
- No eager feature imports: Use
loadComponentorloadChildrenfor all feature routes.
References
- Routing Patterns
Related Skills
hoangnguyen0403/specialist-pr-reviewer
development
VerifiedTrustedCommunity
Summarizes GitHub PR, GitLab MR, or Azure DevOps PR metadata, review threads, changed files, and template completeness. Use during review-ticket or code-review workflows when PR/MR context exists.
498SKILL.mdUpdated May 23, 2026
hoangnguyen0403/typescript-tooling
tools
VerifiedTrustedCommunity
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling.
498SKILL.mdUpdated May 21, 2026
hoangnguyen0403/typescript-security
development
VerifiedTrustedCommunity
Validate input, secure auth tokens, and prevent injection attacks in TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration.
498SKILL.mdUpdated May 21, 2026
hoangnguyen0403/typescript-language
development
VerifiedTrustedCommunity
Apply modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings.
498SKILL.mdUpdated May 21, 2026