PaperclipOrg
Claude Agent Skill · by Analogjs

Angular Tooling

Covers the essential Angular CLI commands and configurations for Angular v20+ projects, from ng new and component generation to production builds and performanc

Install
Terminal · npx
$npx skills add https://github.com/analogjs/angular-skills --skill angular-tooling
Works with Paperclip

How Angular Tooling fits into a Paperclip company.

Angular Tooling drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md352 lines
Expand
---name: angular-toolingdescription: Use Angular CLI and development tools effectively in Angular v20+ projects. Use for project setup, code generation, building, testing, and configuration. Triggers on creating new projects, generating components/services/modules, configuring builds, running tests, or optimizing production builds. Don't use for Nx workspace commands, custom Webpack configurations, or non-Angular CLI build systems like Vite standalone or esbuild direct usage.--- # Angular Tooling Use Angular CLI and development tools for efficient Angular v20+ development. ## Project Setup ### Create New Project ```bash# Create new standalone project (default in v20+)ng new my-app # With specific optionsng new my-app --style=scss --routing --ssr=false # Skip testsng new my-app --skip-tests # Minimal setupng new my-app --minimal --inline-style --inline-template``` ### Project Structure ```my-app/├── src/│   ├── app/│   │   ├── app.component.ts│   │   ├── app.config.ts│   │   └── app.routes.ts│   ├── index.html│   ├── main.ts│   └── styles.scss├── public/                  # Static assets├── angular.json             # CLI configuration├── package.json├── tsconfig.json└── tsconfig.app.json``` ## Code Generation ### Components ```bash# Generate componentng generate component features/user-profileng g c features/user-profile  # Short form # With optionsng g c shared/button --inline-template --inline-styleng g c features/dashboard --skip-testsng g c features/settings --change-detection=OnPush # Flat (no folder)ng g c shared/icon --flat # Dry run (preview)ng g c features/checkout --dry-run``` ### Services ```bash# Generate service (providedIn: 'root' by default)ng g service services/authng g s services/user # Skip testsng g s services/api --skip-tests``` ### Other Schematics ```bash# Directiveng g directive directives/highlightng g d directives/tooltip # Pipeng g pipe pipes/truncateng g p pipes/date-format # Guard (functional by default)ng g guard guards/auth # Interceptor (functional by default)ng g interceptor interceptors/auth # Interfaceng g interface models/user # Enumng g enum models/status # Classng g class models/product``` ### Generate with Path Alias ```bash# Components in feature foldersng g c @features/products/product-listng g c @shared/ui/button``` ## Development Server ```bash# Start dev serverng serveng s  # Short form # With optionsng serve --port 4201ng serve --open  # Open browserng serve --host 0.0.0.0  # Expose to network # Production mode locallyng serve --configuration=production # With SSLng serve --ssl --ssl-key ./ssl/key.pem --ssl-cert ./ssl/cert.pem``` ## Building ### Development Build ```bashng build``` ### Production Build ```bashng build --configuration=productionng build -c production  # Short form # With specific optionsng build -c production --source-map=falseng build -c production --named-chunks``` ### Build Output ```dist/my-app/├── browser/│   ├── index.html│   ├── main-[hash].js│   ├── polyfills-[hash].js│   └── styles-[hash].css└── server/              # If SSR enabled    └── main.js``` ## Testing ### Unit Tests ```bash# Run testsng testng t  # Short form # Single run (CI)ng test --watch=false --browsers=ChromeHeadless # With coverageng test --code-coverage # Specific fileng test --include=**/user.service.spec.ts``` ### E2E Tests ```bash# Run e2e (if configured)ng e2e``` ## Linting ```bash# Run linterng lint # Fix auto-fixable issuesng lint --fix``` ## Configuration ### angular.json Key Sections ```json{  "projects": {    "my-app": {      "architect": {        "build": {          "builder": "@angular-devkit/build-angular:application",          "options": {            "outputPath": "dist/my-app",            "index": "src/index.html",            "browser": "src/main.ts",            "polyfills": ["zone.js"],            "tsConfig": "tsconfig.app.json",            "assets": ["{ \"glob\": \"**/*\", \"input\": \"public\" }"],            "styles": ["src/styles.scss"],            "scripts": []          },          "configurations": {            "production": {              "budgets": [                {                  "type": "initial",                  "maximumWarning": "500kB",                  "maximumError": "1MB"                }              ],              "outputHashing": "all"            },            "development": {              "optimization": false,              "extractLicenses": false,              "sourceMap": true            }          }        }      }    }  }}``` ### Environment Configuration ```typescript// src/environments/environment.tsexport const environment = {  production: false,  apiUrl: 'http://localhost:3000/api',}; // src/environments/environment.prod.tsexport const environment = {  production: true,  apiUrl: 'https://api.example.com',};``` Configure in angular.json: ```json{  "configurations": {    "production": {      "fileReplacements": [        {          "replace": "src/environments/environment.ts",          "with": "src/environments/environment.prod.ts"        }      ]    }  }}``` ## Adding Libraries ### Angular Libraries ```bash# Add Angular Materialng add @angular/material # Add Angular PWAng add @angular/pwa # Add Angular SSRng add @angular/ssr # Add Angular Localizeng add @angular/localize``` ### Third-Party Libraries ```bash# Install and configurenpm install @ngrx/signals # Some libraries have schematicsng add @ngrx/store``` ## Update Angular ```bash# Check for updatesng update # Update Angular core and CLIng update @angular/core @angular/cli # Update all packagesng update --all # Force update (skip peer dependency checks)ng update @angular/core @angular/cli --force``` ## Performance Analysis ```bash# Build with statsng build -c production --stats-json # Analyze bundle (install esbuild-visualizer)npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open``` ## Caching ```bash# Enable persistent build cache (default in v20+)# Configured in angular.json:{  "cli": {    "cache": {      "enabled": true,      "path": ".angular/cache",      "environment": "all"    }  }} # Clear cacherm -rf .angular/cache``` For advanced configuration, see [references/tooling-patterns.md](references/tooling-patterns.md).