Angular CLI

Updated April 19, 2023

Introduction to Angular CLI

Angular CLI is basically a Command Line Interface that provides the capability to utilize the Command Window to execute and build the basic Angular application structure just by writing down the CLI Commands which Angular understands and interprets the action to be taken on each command. Angular CLI is compatible with all higher and major versions of Angular (NOT AngularJS).

How do Angular CLI works?

The first step to start working with Angular CLI is to install the CLI package from NPM (Node Package Manager).

npm install -g @angular/cli

This command works just like any other NPM command where for installing external dependency, we run.

Code:

npm install dependencyName

Once this is done successfully, we are good to use the Angular Command-line interface and start building Angular Applications using this interface.

This module of Angular CLI will let you set up your application from scratch instead of creating each component, service, module, and HTML and building the entire application manually. It becomes a bit tedious and time-consuming work when we do it manually. Creating projects from scratch, generating components, and services, skipping the test, Running the application on the browser, and many more such features can be achieved from Angular Command Line Interface (CLI).

Angular CLI Commands

Let’s see some examples and usage of Angular CLI commands.

All in One Software Development Bundle (600+ Courses, 50+ projects)Programming Languages Training (41 Courses, 13+ Projects, 4 Quizzes)

Building a basic application on Angular Framework using Angular CLI.

Code:

npm install -g @angular/cli

ng new basic-demo-application

The Angular CLI comes into the picture as soon as ng is read; it traverses to the following command, which is new, so now CLI knows that it has to create a new Angular Application and the 3rd parameter is the name of the application, it can be any lower case name of your application which will have all files and modules inside this basic-demo-application folder.

A few basic questions will prompt you while CLI is building a new application, like which style sheet should be used (CSS, SCSS), would you like to add Angular Routing and a few others.

This is not it; the ng new command has many more options that can be used to achieve additional project requirements.

Hosting Angular Application on Browser

Given below shows hosting the angular application on the browser:

Code:

npm install -g @angular/cli
ng new basic-demo-application
cd basic-demo-application
ng serve

Output:

To host your application on the browser window, once the application is created using ng new CLI command, go inside the basic-demo-application directory and run the ng serve CLI command. This will start listening to your application on port 4200, and you can quickly test your application locally while developing. The ng serve command lets you build, rebuild after changes, and serve your application.

Generating New Components/ Services/Modules with Angular Application

Given below shows generating of new components/ services/ modules with the angular application:

1. Generate a new component.

ng generate component component-name

2. Generate a new basic application.

ng generate application application-name

3. Generate a new directive.

ng generate directive directive-name

4. Generate a new interface.

ng generate interface interface-name

5. Adding a new library to the project.

ng generate library library-name

6. Create a new module inside the Angular application.

ng generate module module-name

7. Create an enum inside the Angular application.

ng generate enumenum-name

8. Create an appShell inside the Angular application.

ng generate appShellappShell-name

9. Create a pipe inside the Angular application.

ng generate pipepipe-name

Creating or adding any new construct like components, services, or modules within the angular application gets too tedious process if you need to do that manually to overcome this work; Angular CLI has another CLI command which helps you to generate new services, directives, component, application, library, class, interface, etc. All these constructs of ng generate come along with additional option tags such as defaults, dryRun, force, help, flat, interactive, etc. This lets the user decide on whether there is any need for an additional folder, overwrites existing files, etc. The options tag should be used with – as a prefix.

Skipping to Create Test Files in Angular Application

Given below shows the skipping to create test files in angular application:

ng new basic-demo-skip-test-application –skip-tests

This Command is very useful when you are just a Rookie in Angular programming and want to know and learn about the basic repo building and do not need the test files to be created in our demo projects as those are just for your understanding or, at times we want just to debug a piece of code in a new project and don’t need the test files to be created. This is exactly where –skip-tests come into the picture; this CLI command will not create the .spec files in your Angular application.

1. Without skipping test

ng new basic-demo-application

2. Use Skip Test while creating Angular Project

ng new basic-demo-skip-test-application –skip-tests

Search for Keywords on Browser using Angular Documentation

Given below shows a search for keywords on the browser using angular documentation:

Code:

ng doc keyword

ng doc ActivatedRoute

Output:

The ng doc command is used when you want to browser for any particular keyword from the angular.io documentation and get knowledge and understanding about any specific keyword of Angular. Once you execute the command, the default browser opens, displaying the angular.io documentation site’s details about that keyword.

Conclusion

Angular CLI is a compelling rule that can rule out all the worries, from starting with a basic angular application to developing the advanced one. CLI gives the ability to create, view, modify, host, and build applications from scratch. There is a huge set of commands which CLI supports, and not all can be memorized, so as and when it’s needed in your application, you can learn on each of those commands.

Recommended Articles

This is a guide to Angular CLI. Here we have discussed the introduction, working, commands, hosting the angular application on the browser, generating new components/ services/modules, skipping to create test files, and search for keywords on the browser using angular documentation. You may also have a look at the following articles to learn more-

1. Angular Time Picker
2. How Angular Works
3. Angular 7 Components
4. AngularJS Custom Filter