Mastering Your Angular Workflow: Essential CLI Commands for Efficient Development

Mastering Your Angular Workflow: Essential CLI Commands for Efficient Development

The Angular CLI (Command Line Interface) is a cornerstone of modern Angular development. It streamlines project setup, code generation, testing, and deployment, empowering developers to focus on building maintainable and scalable applications.

This guide covers the most essential Angular CLI commands to help you optimize your workflow from project creation to deployment and beyond.

 

1. Creating a New Angular Project

Use the ng new command to initialize a new Angular workspace.

Example: Create a standalone app with SCSS and routing (without Server-Side Rendering):

ng new PracticeAngular --routing --standalone --style=scss --no-ssr

Flag Breakdown:

• --routing: Sets up Angular Router.
• --standalone: Uses standalone components (no NgModules).
• --style=scss: Uses SCSS for styling.
• --no-ssr: Skips Server-Side Rendering setup.

 

2. Accessing CLI Help

The CLI includes built-in help for every command.

ng new --help

ng generate --help

Displays all available flags, usage details, and descriptions for the specified command.

 

3. Checking Your Environment

Use the following to display Angular, Node.js, and OS version details:

ng version

 

4. Code Generation Commands

Use ng generate or its shorthand ng g to scaffold Angular features using best practices.

Artifact	Full Command	Shorthand
Component	ng generate component my-component	ng g c
Service	ng generate service my-service	ng g s
Directive	ng generate directive my-directive	ng g d
Pipe	ng generate pipe my-pipe	ng g p
Guard	ng generate guard my-guard	ng g g
Class	ng generate class my-class	ng g cl
Interface	ng generate interface my-interface	ng g i
Enum	ng generate enum my-enum	ng g e
Module	ng generate module my-module	ng g m

Example:

ng g c user-profile

This generates .ts, .html, .scss, and .spec.ts files inside src/app/user-profile.

 

5. Opening the Project in Visual Studio Code

cd PracticeAngular

code .

Ensure the code command is added to your system’s PATH.

 

6. Project Lifecycle Commands

a. Serve the Application

ng serve

ng serve my-project

Starts the development server with auto-rebuild on file changes.

b. Build the Application

ng build

ng build --configuration production

Generates an optimized build in the dist/ folder.

c. Run Unit Tests

ng test

ng test --watch=false

Executes tests using Karma and Jasmine.

d. Lint the Code

ng lint

Runs linting checks using ESLint or your configured linter.

 

7. Enhancing and Managing Projects

a. Add External Libraries

ng add <collection>

Examples:

ng add @angular/material

ng add @ng-bootstrap/ng-bootstrap

Installs and configures third-party libraries using schematics.

b. Update Angular Packages

ng update

ng update @angular/core @angular/cli

Updates Angular dependencies and applies required migrations.

c. Deploy the Application

ng deploy

Example (GitHub Pages):

ng add angular-cli-ghpages

ng deploy --base-href=/my-repo/

 

8. Search Angular Documentation from the CLI

ng doc HttpClient

Opens official Angular documentation in your browser for the provided topic.

 

9. Summary Table of Common Angular CLI Commands

Task	Full Command	Shorthand
Create Project	ng new PracticeAngular	–
Generate Component	ng generate component my-component	ng g c
Generate Service	ng generate service my-service	ng g s
Generate Module	ng generate module my-module	ng g m
Generate Directive	ng generate directive my-directive	ng g d
Generate Pipe	ng generate pipe my-pipe	ng g p
Generate Class	ng generate class my-class	ng g cl
Generate Interface	ng generate interface my-interface	ng g i
Generate Enum	ng generate enum my-enum	ng g e
Generate Guard	ng generate guard my-guard	ng g g
Serve App	ng serve	–
Build App	ng build	–
Run Unit Tests	ng test	–
Lint Code	ng lint	–
Add Library	ng add @angular/material	–
Update Packages	ng update	–
Deploy App	ng deploy	–
Angular Docs Search	ng doc HttpClient	–
Skip Test Files	--skip-tests (during generation)	–
Code Coverage Report	ng test --code-coverage → /coverage/	–

 

10. Creating Custom Schematics

Angular Schematics allow you to automate code generation and enforce standards across teams.

a. Create a Custom Schematic Project

npm install -g @angular-devkit/schematics-cli

schematics blank --name=my-schematic

This initializes a schematic project.

b. Project Structure

my-schematic/

├── src/

│   └── my-schematic/

│       ├── index.ts         ← Schematic logic

│       ├── schema.json      ← User input schema

│       └── files/           ← Template files

├── collection.json          ← Schematic map

├── package.json

c. Run Your Custom Schematic Locally

schematics .:my-schematic

This command executes the schematic from your local directory.

To publish your schematic and reuse it:

ng add my-schematic

 

11. Common Angular CLI Errors and Fixes

Error Message	Cause	Solution
Port 4200 is already in use	Another process is using the port	Run ng serve --port 4300 or stop the process
Cannot find module '@angular/core'	Missing dependencies	Run npm install
Path not found when generating component	Incorrect or missing directory	Ensure correct path or use relative paths
ng command not found	Angular CLI not installed globally	Run npm install -g @angular/cli
You must specify a component name	No name provided	Run ng g c my-component
Missing script: ng in monorepo	CLI not installed locally	Use npx ng or navigate to correct directory
Unknown option: --prod (Angular 15+)	Deprecated flag	Use --configuration production instead

 

12. Bonus Tip: Angular CLI Doctor

Run this to automatically diagnose and suggest fixes:

ng doctor

 

Final Thoughts

By mastering:

• Standard Angular CLI commands
• Project lifecycle management
• Code scaffolding techniques
• Custom schematics
• Error diagnostics

You can significantly accelerate your development workflow and build robust Angular applications with consistency and confidence.

For further learning, don’t forget to explore:

ng help