Angular 8 - CLI Commands

Angular CLI helps developers to create projects easily and quickly. As we know already, Angular CLI tool is used for development and built on top of Node.js, installed from NPM.This chapter explains about Angular 8 CLI commands in detail.
Before moving to Angular CLI commands, we have to ensure that Angular CLI is installed on your machine. If it is installed, you can verify it by using the below command −
ng version
You could see the below response −
If CLI is not installed, then use the below command to install it.
npm install -g @angular/cli@^8.0.0
Let’s understand the commands one by one in brief.
To create an application in Angular, use the below syntax −
ng new <project-name>
If you want to create CustomerApp then, use the below code −
ng new CustomerApp
It is used to generate or modify files based on a schematic. Type the below command inside your angular project −
ng generate
Or, you can simply type generate as g. You can also use the below syntax −
ng g
It will list out the available schematics −
Let’s understand some of the repeatedly used ng generate schematics in next section.
Components are building block of Angular. To create a component in angular use the below syntax −
ng g c <component-name>
For example, if user wants to create a Details component then use the below code −
ng g c Details
After using this command, you could see the below response −
CREATE src/app/details/details.component.scss (0 bytes)
CREATE src/app/details/details.component.html (22 bytes)
CREATE src/app/details/details.component.spec.ts (635 bytes)
CREATE src/app/details/details.component.ts (274 bytes)
UPDATE src/app/app.module.ts (1201 bytes)
It is used to create a new class in Angular. It is defined below−
ng g class <class-name>
If you want to create a customer class, then type the below command −
ng g class Customer
After using this command, you could see the below response −
CREATE src/app/customer.spec.ts (162 bytes)
CREATE src/app/customer.ts (26 bytes)
Pipes are used for filtering the data. It is used to create a custom pipe in Angular. It is defined below −
ng g pipe <pipe-name>
If you want to create a custom digit counts in a pipe, then type the below command −
ng g pipe DigitCount
After using this command, you could see the below response −
CREATE src/app/digit-count.pipe.spec.ts (204 bytes)
CREATE src/app/digit-count.pipe.ts (213 bytes)
UPDATE src/app/app.module.ts (1274 bytes)
It is used to create a new directive in Angular. It is defined below −
ng g directive <directive-name>
If you want to create a UnderlineText directive, then type the below command −
ng g directive UnderlineText
After using this command, you could see the below response −
CREATE src/app/underline-text.directive.spec.ts (253 bytes)
CREATE src/app/underline-text.directive.ts (155 bytes)
UPDATE src/app/app.module.ts (1371 bytes)
It is used to create a new module in Angular. It is defined below −
ng g module <module-name>
If you want to create a user information module, then type the below command −
ng g module Userinfo
After using this command, you could see the below response −
CREATE src/app/userinfo/userinfo.module.ts (194 bytes)
It is used to create an interface in Angular. It is given below −
ng g interface <interface-name>
If you want to create a customer class, then type the below command −
ng g interface CustomerData
After using this command, you could see the below response −
CREATE src/app/customer-data.ts (34 bytes)
It is used to create a new web worker in Angular. It is stated below −
ng g webWorker <webWorker-name>
If you want to create a customer class, then type the below command −
ng g webWorker CustomerWebWorker
After using this command, you could see the below response −
CREATE tsconfig.worker.json (212 bytes)
CREATE src/app/customer-web-worker.worker.ts (157 bytes)
UPDATE tsconfig.app.json (296 bytes)
UPDATE angular.json (3863 bytes)
It is used to create a service in Angular. It is given below −
ng g service <service-name>
If you want to create a customer class, then type the below command −
ng g service CustomerService
After using this command, you could see the below response −
CREATE src/app/customer-service.service.spec.ts (379 bytes)
CREATE src/app/customer-service.service.ts (144 bytes)
It is used to create an enum in Angular. It is given below −
ng g enum <enum-name>
If you want to create a customer class, then type the below command −
ng g enum CustomerRecords
After using this command, you could see the below response −
CREATE src/app/customer-records.enum.ts (32 bytes)
It is used to add support for an external library to your project. It is specified by the below command −
ng add [name]
It is used to compile or build your angular app. It is defined below −
ng build
After using this command, you could see the below response −
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
It is used to retrieve or set Angular configuration values in the angular.json file for the workspace. It is defined below −
ng config
After using this command, you could see the below response −
{
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
      "MyApp": {
         "projectType": "application",
         "schematics": {
            "@schematics/angular:component": {
               "style": "scss"
            }
         },
 .............................
 .............................
It is used to open the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
ng doc <keyword>
For example, if you search with component as ng g component then, it will open the documentation.
It is used to build and serves an Angular app, then runs end-to-end tests using Protractor. It is stated below −
ng e2e <project> [options]
It lists out available commands and their short descriptions. It is stated below −
ng help
It is used to build and serves your app, rebuilding on file changes. It is given below: −
ng serve
Runs unit tests in a project. It is mentioned below −
ng test
Updates your application and its dependencies. It is given below −
ng update
Shows Angular CLI version. It is stated below −
ng version

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    28 Lectures 
     2.5 hours 

 Anadi Sharma

    11 Lectures 
     7.5 hours 

 SHIVPRASAD KOIRALA

    16 Lectures 
     2.5 hours 

 Frahaan Hussain

    69 Lectures 
     5 hours 

 Senol Atac

    53 Lectures 
     3.5 hours 

 Senol Atac
 Print
 Add Notes
 Bookmark this page