angular-tooling

Manage Angular projects with Angular CLI commands and configurations.

2|Updated Jan 5, 2024

Search Tags:#typescript #web development #frontend #angular #cli #build #schematics

Ready to run

npx skills add https://github.com/wilfriedago/dotfiles --skill angular-tooling-wilfriedago

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-tooling
Source: https://github.com/wilfriedago/dotfiles/tree/main/agents/skills/angular-tooling
Command: npx skills add https://github.com/wilfriedago/dotfiles --skill angular-tooling-wilfriedago

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines Angular development by providing comprehensive guidance and commands for using the Angular CLI effectively, from project setup to advanced build configurations.

Core Features & Use Cases

Project Scaffolding: Quickly generate new Angular projects with customizable options.
Code Generation: Effortlessly create components, services, directives, and more using schematics.
Build & Test Automation: Configure and execute development servers, production builds, unit tests, and linting.
Configuration Management: Understand and modify angular.json for optimal build performance and environment settings.

Quick Start

Use the angular-tooling skill to generate a new Angular component named 'user-profile' within the 'features' directory.

Frequently Asked Questions about angular-tooling

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

FAQPage Schema

How do I generate an Angular component using schematics in a specific directory?▼

To generate an Angular component using schematics, use the Angular CLI to target a specific directory like 'features', creating the component with its associated files and automatically registering it within the project structure.

What is the best way to configure an Angular production build for optimal performance?▼

Configuring an Angular production build involves modifying the `angular.json` file and utilizing esbuild for efficient bundling, which optimizes the application's bundle size and ensures fast load times for production environments.

Does this Angular CLI guidance apply to version 20 and above?▼

Yes, this Angular CLI guidance explicitly addresses Angular versions v20 and above, ensuring that the commands, configurations, and schematics provided are compatible with the latest framework standards and features.

How do I set up unit and E2E testing in an Angular project?▼

Setting up unit and E2E testing in an Angular project involves using the Angular CLI to configure and execute test commands, allowing you to automate testing runs and validate application logic and end-to-end user flows.

Why do I need to modify angular.json for my local development server?▼

Modifying `angular.json` for your local development server allows you to customize environment settings and build configurations, ensuring the development server executes with the correct options and optimal performance for local testing.

Can I use esbuild for bundling instead of the default Angular CLI builder?▼

You can use esbuild for bundling in Angular projects to achieve more efficient builds. The Angular CLI utilizes esbuild to optimize the bundling process, significantly improving build speeds and reducing final bundle sizes.