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-appThis command initializes a new Angular project with a default structure, including configuration files and necessary dependencies.
Example:
ng new my-angular-app2. Serve Your Application
ng serveRuns 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 50003. Generate a New Component
ng generate component component-nameShortcut: ng g c component-name
Creates a new component with HTML, CSS, TypeScript, and test files.
Example:
ng g c user-profile4. Generate a Service
ng generate service service-nameShortcut: ng g s service-name
Creates an injectable service for business logic or API calls.
Example:
ng g s auth5. Build Your Application for Production
ng buildCompiles the app into the dist/ folder for deployment.
Flags:
- --prod (Optimizes for production)
- --aot (Ahead-of-Time compilation)
Example:
ng build --prod6. Run Unit Tests
ng testExecutes unit tests using Karma **and **Jasmine.
Flags:
- --watch (Reruns tests on file changes)
Example:
ng test --watch7. Run End-to-End (E2E) Tests
ng e2eRuns end-to-end tests using Protractor.
Example:
ng e2e8. Add a Third-Party Library
ng add package-nameInstalls and configures a library (e.g., Angular Material, PWA, etc.).
Example:
ng add @angular/material9. Generate a Module
ng generate module module-nameShortcut: ng g m module-name
Creates a new NgModule for better code organization.
Example:
ng g m admin10. Update Angular CLI & Core
ng updateChecks for outdated packages and updates them.
Example:
ng update @angular/core @angular/cliBonus: Check Angular CLI Version
ng versionDisplays 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!