Angular CLI - Overview

Quiz

As the name suggests, Angular CLI is a text-based user interface tool that helps developers create and maintain Angular applications directly from the command line. It comes with a set of commands that creates and starts on our angular project very fast.

CLI is a short form of Command Line Interface. When you start a CLI on your system, it will open a blank screen where it accepts input entered by the keyboard in text format. The entered input is called a command.

NOTE! This angular CLI tool is used by developers who develop Angular applications, not by the users of the application.

Usage of Angular CLI

Angular CLI is used for the following purposes:

Building Angular Applications

The term building is used to describe the process of converting source code into an executable bundle of programs. The different steps in this process are:

In the first step, the source code is converted into machine readable code.
Then, multiple related pieces of code from different files are combined together to form a single executable file.
In the final step, all necessary external resources, such as configuration files, images, and documentation for proper execution, are packaged.

To build an angular application, we use the ng build command. It will convert the TypeScript code of the application into JavaScript, as well as optimize, bundle, and minify the output as appropriate.

Serving Angular Applications

On serving an angular application, it starts running on the localhost server. The command that is used to start or serve an angular application is ng serve. This command will compile your application, skip unnecessary optimizations and start a development server. When any changes in the code happen, it automatically rebuilds the application and live reloads any subsequent changes. Press Ctrl+C buttons on the keyboard to stop the server.

Deploying Angular Applications

Deployment is the process of running software or applications on a server for intended users. If you want to deploy your Angular application on a remote server, simply use the ng deploy command of Angular CLI. This command is used for automatic deployment.

E2E Testing of Angular Applications

End-to-end, in short E2E, testing is a Software testing methodology used to verify the working order of software is the same as expected from start to finish and hence, called as end-to-end. When you install Angular CLI on your system, it automatically downloads and installs everything necessary for E2E testing. Use ng e2e command to start End-to-End testing.

Angular CLI Schematics

A schematic is a tool used to generate or modify code in a software project automatically. It acts like a set of instructions that tells a program how to create or change parts of the code. Angular CLI Schematics are special types of schematics used within the Angular CLI to create or update parts of an Angular project.

The Angular CLI comes with built-in schematics in a collection called @schematics/angular. When you run commands like ng generate component or ng generate service, you are using these schematics to create new components or services.

Angular CLI Command Reference

The following table lists down Angular CLI commands that are required while working with the Angular projects −

SNo.	Commands & Descriptions
1.	ng new To create an Angular application.
2.	ng generate component To create a component in Angular.
3.	ng generate class To create a new class in Angular.
4.	ng generate pipe It creates a custom pipe in Angular.
5.	ng generate directive It creates a new directive in Angular.
6.	ng generate module To create a new module in Angular.
7.	ng generate interface It is used to create an interface in Angular.
8.	ng generate webWorker It creates a new web worker.
9.	ng generate service It creates a new service.
10.	ng generate enum It generates a new enum.
11.	ng add [name] It is used to add support for an external library to your project.
12.	ng build It is used to compile or build your angular app.
13.	ng config It is used to retrieve or set Angular configuration values in the angular.json file for the workspace.
14.	ng doc This command opens the official Angular documentation in a browser, and searches for a given keyword.
15.	ng version Shows the Angular CLI version.
16.	ng update Updates your application and its dependencies.
17.	ng test Runs unit tests in a project.
18.	ng serve It is used to build and serve your app. Also, rebuilds on file changes.
19.	ng help It lists out available commands and their short descriptions.
20.	ng e2e [options] It build and serves an Angular app, and then runs end-to-end tests using Protractor.
21.	ng deploy Deploy your Angular application to a specific hosting service, such as Firebase or GitHub Pages.
22.	ng cache clean Deletes the disk cache.
23.	ng cache info Displays the disk cache configuration and statistics.
24.	ng analytics disable It will disable the analytics gathering and reporting for the user.
25.	ng analytics info Displays the collected analytics.

Print Page