Angular CLI

Angular:-

Angular is an open-source framework that is TypeScript based and used to build applications for desktops and websites. The Angular project was directed by the Angular Team at Google and built with the aid of a large community of businesses and individuals. Angular is also known as “Angular 2+” or “Angular v2 and above” because it is a complete rebuild of AngularJS (Angular 1). It was released in 2016 under an MIT license and is mainly used for front-end web development. Angular is component-based, and this internet framework can help you to build scalable website applications efficiently. It also offers several built-in libraries that cover various important features such as document control, client-server communication, routing, and more.

Introduction to Angular CLI

Angular CLI is 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).

Angular CLI works

In the very 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 assist you to set up your software from scratch in preference to growing each aspect, service, modules, and HTML and constructing the entire utility manually which turns into a chunk of tedious and time-consuming paintings when we do it manually. Growing projects from scratch, producing components, services, skipping the test, jogging the software on the browser, and lots of greater such features can be done from the angular command-line interface (CLI).

Angular CLI Commands

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

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 next 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.

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

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

To host your application on the browser window, once the application is created using the 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 easily test your application locally while developing. The ng serve command lets you build, rebuild after changes are done, and serve your application.

Generating New Components/ Services/ Module with Angular Application

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

• Generate a new component.

ng generate component component-name

• Generate a new basic application.

ng generate application application-name

• Generate a new directive.

ng generate directive directive-name

• Generate a new interface.

ng generate interface interface-name

• Adding a new library to the project.

ng generate library library-name

• Create a new module inside the Angular application.

ng generate module module-name

• Create an enum inside the Angular application.

ng generate enumenum-name

• Create an app shell inside the Angular application.

ng generate appShellappShell-name

• Create a pipe inside the Angular application.

ng generate pipe pipe-name

Creating or adding any new construct like components, service, modules within angular application gets too tedious process if you need to do that manually and to overcome this work Angular CLI has another CLI command which helps you to generate new service, directive, 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 or not, overwrites existing files, etc. The options tag should be used with – a prefix.