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
This command initializes a new Angular project with a default structure, including configuration files and necessary dependencies.
Example:
ng new my-angular-app
2. Serve Your Application
ng serve
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
3. Generate a New Component
ng generate component component-name
Shortcut: ng g c component-name
Creates a new component with HTML, CSS, TypeScript, and test files.
Example:
ng g c user-profile
4. Generate a Service
ng generate service service-name
Shortcut: ng g s service-name
Creates an injectable service for business logic or API calls.
Example:
ng g s auth
5. Build Your Application for Production
ng build
Compiles the app into the dist/
folder for deployment.
Flags:
- --prod (Optimizes for production)
- --aot (Ahead-of-Time compilation)
Example:
ng build --prod
6. Run Unit Tests
ng test
Executes unit tests using Karma **and **Jasmine.
Flags:
- --watch (Reruns tests on file changes)
Example:
ng test --watch
7. Run End-to-End (E2E) Tests
ng e2e
Runs end-to-end tests using Protractor.
Example:
ng e2e
8. Add a Third-Party Library
ng add package-name
Installs and configures a library (e.g., Angular Material, PWA, etc.).
Example:
ng add @angular/material
9. Generate a Module
ng generate module module-name
Shortcut: ng g m module-name
Creates a new NgModule for better code organization.
Example:
ng g m admin
10. Update Angular CLI & Core
ng update
Checks for outdated packages and updates them.
Example:
ng update @angular/core @angular/cli
Bonus: Check Angular CLI Version
ng version
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!