Angular Tooling

Angular Tooling

Priority: P2 (OPTIONAL)

CLI Essentials

• Command: ng generate component (or ng g c)
• Flags: Use --dry-run to preview output first. Add --change-detection=OnPush to set CD strategy at generation time. Use --skip-tests if spec is not needed.
• Workflow: Always use 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: Check angular.json budgets — do not hand-edit angular.json budgets values; analyze the bundle first to understand what's large.

Update Angular

• Command: ng update to check available updates.
• Apply: ng update @angular/core @angular/cli — this runs official codemods to migrate your code.
• Rule: Never use --force; fix peer dependency conflicts properly instead.

Anti-Patterns

• No manual file creation: Always use ng generate for consistency and proper registration.
• No ng update --force: Fix peer dependency conflicts instead of skipping checks.
• No hand-editing angular.json budgets: Lower budgets cause CI failures; analyze bundles first.

References

• Angular CLI Docs