ContextQMD
Back to Angular

Angular CLI Guide for Agents

skills/dev-skills/angular-developer/references/cli.md

22.0.0-next.103.6 KB
Original Source

Angular CLI Guide for Agents

The Angular CLI (ng) is the primary tool for managing an Angular workspace. Always prefer CLI commands over manual file creation or generic npm commands when modifying project structure or adding Angular-specific dependencies.

1. Managing Dependencies

ALWAYS use ng add for Angular libraries instead of npm install. ng add installs the package AND runs initialization schematics (e.g., configuring angular.json, updating root providers).

bash
ng add @angular/material
ng add tailwindcss
ng add @angular/fire

To update the application and its dependencies (which automatically runs code migrations):

bash
ng update @angular/core@<latest or specific version> @angular/cli<latest or specific version>

2. Generating Code (ng generate or ng g)

Always use the CLI to generate code to ensure it adheres to Angular standards and updates necessary configuration files automatically.

TargetCommandNotes
Componentng g c path/to/nameGenerates a component. Use --inline-style (-s) or --inline-template (-t) if requested.
Serviceng g s path/to/nameGenerates an @Injectable({providedIn: 'root'}) service.
Directiveng g d path/to/nameGenerates a directive.
Pipeng g p path/to/nameGenerates a pipe.
Guardng g g path/to/nameGenerates a functional route guard.
Environmentsng g environmentsScaffolds src/environments/ and updates angular.json with file replacements.

Note: There is no command to generate a single route definition. Generate a component, then manually add it to the Routes array in app.routes.ts.

3. Development Server & Proxying

Start the local development server with hot-module replacement (HMR):

bash
ng serve

Backend API Proxying

To proxy API requests during development (e.g., rerouting /api to a local Node server):

  1. Create src/proxy.conf.json:
    json
    {
  "/api/**": {"target": "http://localhost:3000", "secure": false}
}
  2. Update angular.json under the serve target:
    json
    "serve": {
  "builder": "@angular/build:dev-server",
  "options": { "proxyConfig": "src/proxy.conf.json" }
}

4. Building the Application

Compile the application into an output directory (default: dist/<project-name>/browser). Modern Angular uses the @angular/build:application builder (esbuild-based).

bash
ng build
  • ng build defaults to the production configuration, which enables Ahead-of-Time (AOT) compilation, minification, and tree-shaking.
  • Target specific configurations defined in angular.json using --configuration: ng build --configuration=staging.

5. Testing

  • Unit Tests: Run ng test to execute unit tests via the configured test runner (e.g., Karma or Vitest).
  • End-to-End (E2E): Run ng e2e. If no E2E framework is configured, the CLI will prompt to install one (Cypress, Playwright, Puppeteer, etc.).

6. Deployment

To deploy an application, you must first add a deployment builder, then run the deploy command:

bash
# Example for Firebase
ng add @angular/fire
ng deploy