/angular-tooling

Angular CLI usage, code generation, build configuration, and bundle optimization. Use for Angular CLI/build tasks; defer standalone webpack configuration and generic test-runner setup.

hoangnguyen0403@hoangnguyen0403

GitHub

From plugin

agent-skills-standard

538200 skills1 MCP

Install

$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill angular-tooling --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/angular-tooling

Context preview

The summary Claude sees to decide when to auto-load this skill.

Angular CLI usage, code generation, build configuration, and bundle optimization. Use for Angular CLI/build tasks; defer standalone webpack configuration and generic test-runner setup.

SKILL.md

angular-tooling.SKILL.md

name: angular-tooling
description: Angular CLI usage, code generation, build configuration, and bundle optimization. Use for Angular CLI/build tasks; defer standalone webpack configuration and generic test-runner setup.
metadata:
  triggers:
    files:
    - 'angular.json'
    keywords:
    - ng generate
    - ng build
    - ng serve
    - ng test
    - ng add
    - angular cli
    - bundle analysis

Angular Tooling

Priority: P2 (MEDIUM)

CLI Essentials

**Command**: `ng generate component` (or `ng g c`)
**Flags**: `--dry-run` previews before write. `--change-detection=OnPush` sets CD at generation. `skip-tests` skips spec.
**Workflow**: Always `ng generate` — **never create files manually**.

ng new my-app --style=scss --routing  # Create project
ng g c features/user-profile          # Generate component
ng g s services/auth                  # Generate service (providedIn: root)
ng g guard guards/auth                # Generate functional guard
ng g interceptor interceptors/auth    # Generate functional interceptor
ng g pipe pipes/truncate              # Generate standalone pipe

Code Generation Flags

`--dry-run` — Preview output without writing files. Always use `--dry-run` first for unfamiliar generators.
`skip-tests` — Skips spec file generation.
`--flat` — Skips subfolder creation.
`--change-detection=OnPush` — Sets CD strategy on generation.
`--style=scss` — Sets stylesheet format.

Build Configuration

**Dev**: `ng serve --open`
**Prod**: `ng build -c production`. Output goes to `dist/my-app/browser/`.
**SSR**: `ng add @angular/ssr` then `ng build` (adds `server/` output).
**Coverage**: `ng test --code-coverage --watch=false`. Coverage output goes to `coverage/` directory.

Bundle Analysis

ng build -c production --stats-json
npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open

**Note**: Analyze bundle before editing `angular.json` budgets — don't lower without understanding what's large.

Update Angular

**Check**: `ng update` — lists available updates.
**Apply**: `ng update @angular/core @angular/cli` — runs official **codemods**.
**Rule**: **Never use --force**; fix peer dependency conflicts instead.

Anti-Patterns

**No manual file creation**: Use `ng generate` for consistency and proper registration.
**No `ng update --force`**: Fix peer dependency conflicts instead of skipping.
**No hand-editing angular.json budgets**: Analyze bundles first — lower budgets break CI.