DEV Community

Cover image for 🔟 Top 10 Angular CLI Commands You Should Know
Shreyash Sitapara
Shreyash Sitapara

Posted on

🔟 Top 10 Angular CLI Commands You Should Know

#angular #cli #webdev #productivity

The Angular CLI (Command Line Interface) is a powerful tool that helps developers scaffold, build, and maintain Angular applications efficiently. Whether you're a beginner or an experienced Angular developer, mastering these CLI commands can significantly boost your productivity.

🛠️ Boost your Angular dev speed

📦 Clean. Efficient. Productive.

Angular CLI is your best friend when it comes to scaffolding, serving, building, and testing Angular applications.

Benefits:

  • Scaffolds files with correct structure
  • Serves, builds, and tests your app quickly
  • Integrates third-party libraries with ease
  • Improves code consistency and efficiency

Here are the top 10 Angular CLI commands you should know:

1. Create a New Angular Project 

ng new my-app
Enter fullscreen mode Exit fullscreen mode

This command initializes a new Angular project with a default structure, including configuration files and necessary dependencies.
Example:

ng new my-angular-app
Enter fullscreen mode Exit fullscreen mode

2. Serve Your Application 

ng serve
Enter fullscreen mode Exit fullscreen mode

Runs your Angular app in development mode with live reload. By default, it starts on
http://localhost:4200.

Flags:

  • --open (Auto-opens the browser)
  • --port 5000 (Runs on a custom port)

Example:

ng serve --open --port 5000
Enter fullscreen mode Exit fullscreen mode

3. Generate a New Component 

ng generate component component-name
Enter fullscreen mode Exit fullscreen mode

Shortcut: ng g c component-name
Creates a new component with HTML, CSS, TypeScript, and test files.
Example:

ng g c user-profile
Enter fullscreen mode Exit fullscreen mode

4. Generate a Service 

ng generate service service-name
Enter fullscreen mode Exit fullscreen mode

Shortcut: ng g s service-name
Creates an injectable service for business logic or API calls.
Example:

ng g s auth
Enter fullscreen mode Exit fullscreen mode

5. Build Your Application for Production 

ng build
Enter fullscreen mode Exit fullscreen mode

Compiles the app into the dist/ folder for deployment.

Flags:

  • --prod (Optimizes for production)
  • --aot (Ahead-of-Time compilation)

Example:

ng build --prod
Enter fullscreen mode Exit fullscreen mode

6. Run Unit Tests 

ng test
Enter fullscreen mode Exit fullscreen mode

Executes unit tests using Karma **and **Jasmine.

Flags:

  • --watch (Reruns tests on file changes)

Example:

ng test --watch
Enter fullscreen mode Exit fullscreen mode

7. Run End-to-End (E2E) Tests 

ng e2e
Enter fullscreen mode Exit fullscreen mode

Runs end-to-end tests using Protractor.

Example:

ng e2e
Enter fullscreen mode Exit fullscreen mode

8. Add a Third-Party Library 

ng add package-name
Enter fullscreen mode Exit fullscreen mode

Installs and configures a library (e.g., Angular Material, PWA, etc.).

Example:

ng add @angular/material
Enter fullscreen mode Exit fullscreen mode

9. Generate a Module 

ng generate module module-name
Enter fullscreen mode Exit fullscreen mode

Shortcut: ng g m module-name

Creates a new NgModule for better code organization.

Example:

ng g m admin
Enter fullscreen mode Exit fullscreen mode

10. Update Angular CLI & Core 

ng update
Enter fullscreen mode Exit fullscreen mode

Checks for outdated packages and updates them.

Example:

ng update @angular/core @angular/cli
Enter fullscreen mode Exit fullscreen mode

Bonus: Check Angular CLI Version 

ng version
Enter fullscreen mode Exit fullscreen mode

Displays the installed Angular CLI version.

Final Thoughts
Mastering these Angular CLI commands will streamline your development workflow and help you build Angular apps faster.

  • Which Angular CLI command do you use the most? Let’s discuss in the comments!

Top comments (0)