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.

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

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

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

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

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

Building a basic application on Angular Framework using Angular CLI.

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.

Given below shows hosting the angular application on the browser:

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:

Create a new module inside the Angular application.

Create an enum inside the Angular application.

Create an app shell inside the Angular application.

Create a pipe inside the Angular application.

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.

Today in this blog, we will discuss Angular CLI

Angular CLI

Angular is a framework that is used to create an internet application. Angular makes use of typescript to write our commercial enterprise common sense and techniques however the browser does now not apprehend typescript. The browser is aware of javascript. So that’s why angular CLI comes into the picture that does all these items in some simple commands for us. Angular CLI makes use of a web percent to do all this manner.

Here we are going to learn Angular CLI commands with a detailed explanation.

Step 1: Create an angular application using angular CLI.

Install Angular CLI, for this first we need to install the CLI from the below command.

Step 2: Create a new angular project by using the below command.

If we want to add an extra library then we should go with this command. ng add command is used to add an extra or external library to our project. It adds the npm packages to our workspace and we can use this library in our project for development. Suppose we add any external library like angular material we want to use then we need to add this into our workspace.

<collection>: This specifies the package we want to add to our project.

It saves the configuration value for our angular project. it set and retrieves the angular configuration value into the angular.json file for our project.

<jsonPath>: It set or queries the key value from the JSON path format. If we do not set the new value for this key it will return the current value for this key.

<value>: It provides the value for the given configuration key. If we provide them new value it will show new value for the given key.

This ng doc command is used to open the angular documentation into the browser where we can search for a given keyword. It opens an angular.io file for us to search for.

ng doc <keyword> [options] ng d <keyword> [options]

<keyword>: We need to specify the keyword which we want to search as it is specified in the anular.io search bar.

–search=true|false: Its default value is false. when we make it true, it searches all the angular.io.

–help=true|false|json|JSON: It is used to show help messages for this command on the console.

This command is used to run and build our application. It runs all the test cases using a protector.

ng e2e <project> [options] ng e <project> [options]

<project>: Here we need to specify the project name that we want to build or serve. It may be a project or a library as well.

–prod=true|false: Its default value is false. when set to true it will bring all the build configurations to the projection target. A production build also runs limited dead code elimination.

–help= true|false|json|JSON: It will show a help message for this command on the console.

–host=host: Name of a host on which it listens.

–port: It will mention the port on which the application will serve.

ng generate command is used to modify or generate the file based on parameters.

ng generate <schematic> [options] ng g <schematic> [options]

It takes the collection or schematic which we want to generate. It contains various sun commands mentioned below.

application: This command is used for new basic app definitions in the “project” subfolder.

ng generate application <name> [options] ng g application <name> [options]

class: This command is used to generate a new class into the given or default folder of the project.

ng generate class <name> [options] ng g class <name> [options]

universal: This subcommand is used to pass the “run” command to set up the server-side rendering of the application.

ng generate universal [options] ng g universal [options]

directive: This subcommand is used to create a directive into the given or default folder of the project.

ng generate directive <name> [options] ng g directive <name> [options]

interface: This subcommand is used to create a new interface into the given or default folder of the project.

ng generate interface <name> <type> [options] ng g interface <name> <type> [options]

component: This sun command is used to create a new generic component in the given or default folder of the project.

ng generate component <name> [options] ng g component <name> [options]

app shell: This subcommand is used to generate an app shell that is required to run the server-side version of the application.

ng generate appShell [options] ng g appShell [options]

library: This subcommand is used to create a new generic library on the given or default folder of the project.

ng generate library <name> [options] ng g library <name> [options]

module: This subcommand is used to create new generic NgModule into the given or default project.

ng generate module <name> [options] ng g module <name> [options]

service: This subcommand is used to generate a new generic service into the given or default folder of the project

Today in this blog we will discuss Angular CLI Commands.

angular cli

Trending Blogposts on angular cli

Angular CLI

Angular CLI Commands

Popular Discussions on angular cli

PRODUCTS

QUICK LINKS

LEGAL

angular cli

Trending Blogposts on angular cli

Angular CLI

Angular CLI Commands

Popular Discussions on angular cli