The Angular CLI (Command Line Interface) is a powerful tool that helps developers streamline their development workflow with Angular. It provides a variety of commands that make it easy to create, build, test, and maintain Angular applications. In this article, we will explore the essential Angular CLI commands and their usage.
Installation
Before using Angular CLI, you need to install it globally on your system.
npm install -g @angular/cli
Once installed, you can use the ng command to access the CLI.
Creating a New Angular Application
To create a new Angular application, use the ng new command.
ng new my-angular-app
This command generates a new Angular project with a default structure and configuration.
Serving the Application
To serve your application locally and start the development server, use the ng serve command.
ng serve
The application will be available at http://localhost:4200/ by default.
Generating Components, Services, and More
Angular CLI provides several commands to generate different parts of your application. Here are some common ones.
Component
To generate a new component.
ng generate component my-component
or
ng g c my-component
Service
To generate a new service.
ng generate service my-service
or
ng g s my-service
Module
To generate a new module.
ng generate module my-module
or
ng g m my-module
Directive
To generate a new directive.
ng generate directive my-directive
or
ng g d my-directive
Pipe
To generate a new pipe.
ng generate pipe my-pipe
or
ng g p my-pipe
Class
To generate a new class.
ng generate class my-class
or
ng g cl my-class
Building the Application
To build your application for production, use the ng build command.
ng build
This command compiles the application into an output directory (dist/ by default) and optimizes it for production.
You can also specify different build configurations.
ng build --configuration=production
Running Tests
Angular CLI makes it easy to run unit tests and end-to-end tests.
- Unit Tests: To run unit tests using Karma, use the ng test command.
ng test
- End-to-End Tests: To run end-to-end tests using Protractor, use the ng e2e command.
ng e2e
Linting
To analyze your code for potential errors and enforce coding standards, use the ng lint command.
ng lint
This command checks your code against the linting rules defined in your project.
Updating Angular
To update your Angular project and its dependencies, use the ng update command.
ng update
This command helps keep your project up-to-date with the latest Angular releases and packages.
Other Useful Commands
- Help: To get a list of available commands and options, use the ng help command.
ng help
- Version: To check the version of Angular CLI, use the ng version command.
ng version
- Configuration: To configure various settings of the Angular CLI, use the ng config command.
ng config
- Add: To add features to your Angular application, such as Angular Material or PWA support, use the ng add command.
ng add @angular/material
- Extract-i18n: To extract translation messages from your templates and code, use the ng extract-i18n command.
ng extract-i18n
Conclusion
The Angular CLI is an indispensable tool for Angular developers, offering a wide range of commands to simplify the development process. By mastering these commands, you can significantly enhance your productivity and maintain a clean and efficient workflow. Whether you're creating new components, building your application, running tests, or managing configurations, the Angular CLI provides the necessary tools to streamline your development tasks.