Angular CLI Basics

The Angular Command Line Interface (CLI) is a powerful tool that helps developers create, build, and manage Angular applications efficiently. This tutorial covers the basics of Angular CLI, including installation, common commands, and how to use it to streamline your development workflow.

Installing Angular CLI

To install Angular CLI globally on your machine, open your terminal or command prompt and run the following command:

npm install -g @angular/cli

Creating a New Angular Project

With Angular CLI installed, you can create a new Angular project using the following command:

ng new my-angular-app

Replace my-angular-app with your desired project name. The CLI will prompt you to select some configuration options. Follow the prompts and choose your preferences.

Serving the Application

To run your Angular application locally, navigate to the project directory and use the following command:

cd my-angular-app
ng serve

Angular CLI will build the application and start a development server. By default, the application will be accessible at http://localhost:4200.

Generating Components, Services, and More

Angular CLI provides commands to generate various building blocks of an Angular application, such as components, services, modules, and more. Here are some common commands:

Generate a Component: ng generate component my-component or ng g c my-component
Generate a Service: ng generate service my-service or ng g s my-service
Generate a Module: ng generate module my-module or ng g m my-module
Generate a Directive: ng generate directive my-directive or ng g d my-directive
Generate a Pipe: ng generate pipe my-pipe or ng g p my-pipe

Building the Application

To build your Angular application for production, use the following command:

ng build

This command compiles the application into an output directory named dist/. You can specify additional options, such as optimization and output hashing, to customize the build process.

Running Unit Tests

Angular CLI includes built-in support for unit testing using Jasmine and Karma. To run the unit tests, use the following command:

ng test

This command executes the unit tests and provides a detailed report of the test results.

Running End-to-End Tests

Angular CLI also supports end-to-end testing using Protractor. To run the end-to-end tests, use the following command:

ng e2e

This command runs the end-to-end tests and provides a detailed report of the test results.

Linting the Code

To ensure code quality and consistency, Angular CLI includes a linting tool. To lint your code, use the following command:

ng lint

This command checks your code for style and programming errors and provides suggestions for improvement.

Conclusion

Angular CLI is an essential tool for Angular developers, offering a wide range of commands to streamline the development process. By mastering the basics of Angular CLI, you can efficiently create, build, and manage your Angular applications. Happy coding!