angular-tooling

Generates, builds, tests, and configures Angular v20+ projects using Angular CLI commands.

Updated Aug 10, 2025
One-click install
npx skills add https://github.com/afonsoft/ai-studio-workspace --skill angular-tooling-afonsoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-tooling
Source: https://github.com/afonsoft/ai-studio-workspace/tree/main/agents/skills/angular-tooling
Command: npx skills add https://github.com/afonsoft/ai-studio-workspace --skill angular-tooling-afonsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Angular developers often struggle to remember the correct CLI commands, flags, and configuration options for scaffolding, building, testing, and optimizing Angular v20+ projects, leading to inconsistent setups and misconfigured builds. ## Core Features & Use Cases - Project Scaffolding: Create new projects and generate components, services, directives, pipes, guards, and interceptors with the correct v20+ defaults. - Build & Test Workflows: Run development servers, production builds with budgets, unit tests with coverage, and linting with proper flags. - Configuration Guidance: Set up angular.json, environment file replacements, path aliases, proxies, caching, and CI/CD pipelines. - Use Case: When starting a new feature, ask for a standalone component with OnPush change detection and skipped tests, and receive the exact ng generate command plus configuration guidance. ## Quick Start Generate a new Angular component named user-profile inside the features folder with OnPush change detection and show me the command.

Frequently Asked Questions about angular-tooling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a component in Angular v20?▼

Run ng generate component features/user-profile or the short form ng g c features/user-profile. Add flags like --skip-tests, --change-detection=OnPush, or --inline-template to customize the generated output.

How to create a production build with Angular CLI?▼

Run ng build --configuration=production or ng build -c production. The output goes to dist/my-app/browser with hashed filenames, and you can enforce bundle budgets configured in angular.json.

Does Angular v20 use standalone components by default?▼

Yes, Angular v20 generates standalone projects and components by default, with app.config.ts and app.routes.ts replacing NgModule-based setup. Functional guards and interceptors are also generated by default.

How do I run Angular tests in CI without a browser window?▼

Run ng test --watch=false --browsers=ChromeHeadless for a single headless run suitable for CI pipelines. Add --code-coverage to generate coverage reports for tools like Codecov.

How to set up a proxy for Angular development server?▼

Create a proxy.conf.json mapping paths like /api to your backend target, then reference it in angular.json under serve options or pass it via ng serve --proxy-config proxy.conf.json.

Why is my Angular production bundle too large?▼

Oversized bundles usually come from missing lazy-loaded routes, non-tree-shakeable imports, or absent budgets. Use loadChildren for code splitting, import specific RxJS operators, and run ng build -c production --stats-json to analyze the bundle.