Angular ToolingSAFE

A collection of Agent Skills Standard and Best Practice for Programming Languages, Frameworks that help our AI Agent follow best practies on frameworks and programming laguages

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
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**.

```bash
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

```bash
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.

## References

- [CLI Commands & Build Examples](references/REFERENCE.md)

- [Angular CLI Docs](https://angular.dev/tools/cli)

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- Never use --force
- angular.json
- angular.json budgets
- never create files manually

- Additional task-grounded exact anchors: @angular/ssr

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

What the source does

Filesystem

none-observed

Network

none-observed

Shell

none-observed

Dependencies

pinned

Secrets in source

none-found

Findings (0)

No findings outside the package's declared scope.

Gates applied: no_behavioural_pass.