---
name: "angular-standalone-components"
description: "Build lightweight, modular Angular applications without legacy NgModules."
metadata:
  author: "Google"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create standalone component angular"
  - "bootstrapapplication angular"
  - "functional router guard angular"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Angular Standalone Components & Modern Bootstrap

Constructs Angular applications: authoring standalone components with imports array, bootstrapApplication, functional router configuration (provideRouter), environment providers (provideHttpClient), and functional route guards.

## When to Invoke
Invoke this skill whenever you need to:
- create standalone component angular
- bootstrapapplication angular
- functional router guard angular

## Execution SOP & Rules
1. Define component: @Component({ standalone: true, imports: [CommonModule, RouterModule], ... }).
2. Bootstrap app in main.ts: bootstrapApplication(AppComponent, { providers: [provideRouter(routes)] }).
3. Write route guards: export const authGuard: CanActivateFn = () => inject(AuthService).isLoggedIn();.
4. Lazy load routes with loadComponent: () => import('./detail.component').then(m => m.DetailComponent).

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.