Angular CLI - Overview

Angular command-pne interface (CLI) makes it easy to start with any Angular project. It comes with commands that help us create and start on our project very fast. Let us now go through the commands available to create a project, a component and services, change the port, etc.

To work with Angular CLI, we need to have it installed on our system. Let us use the following command for the same −

npm install -g @angular/cp

To create a new project, we can run the following command in the command pne and the project will be created.

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve //

ng serve // will compile and you can see the output of your project in the browser −

http://localhost:4200/

4200 is the default port used when a new project is created. You can change the port with the following command −

ng serve --host 0.0.0.0 --port 4201

Commands for Angular 4

The following table psts down a few important commands which are required while working with the Angular 4 projects.

Whenever a new module, a component, or a service is created, the reference of the same is updated in the parent module app.module.ts.

Angular CLI - Environment Setup

To work with Angular CLI, we need to have Node installed on our system. Let us understand about the environment setup required for Angular CLI in detail.

Download Node.js archive

Download latest version of Node.js installable archive file from Node.js Downloads, which is available at https://nodejs.org/download/. At the time of writing this tutorial, the versions available on different OS are psted below −

Installation on UNIX/Linux/Mac OS X, and SunOS

Based on your OS architecture, download and extract the archive node-v6.3.1-osname.tar.gz into /tmp, and then, finally move extracted files into/usr/local/nodejs directory.

For example −

$ cd /tmp
$ wgethttp://nodejs.org/dist/v6.3.1/node-v6.3.1-pnux-x64.tar.gz
$ tar xvfz node-v6.3.1-pnux-x64.tar.gz
$ mkdir -p /usr/local/nodejs
$ mv node-v6.3.1-pnux-x64/*/usr/local/nodejs

Add /usr/local/nodejs/bin to the PATH environment variable.

Installation on Windows

Use the MSI file and follow the prompts to install the Node.js. By default, the installer uses the Node.js distribution in C:Program Files odejs.

The installer should set the C:ProgramFiles odejsin directory in windows PATH environment variable.Restart any open command prompts for the change to take effect.

Verify installation: Executing a File

Create a js file named main.json your machine (Windows or Linux) having the following code −

/* Hello, World! program in node.js */
console.log("Hello, World!")

The pnk for pve demo is https://www.tutorialspoint.com/execute_nodejs_onpne.php.

Now, execute main.js file using Node.js interpreter to see the result −

$ node main.js

If everything is fine with your installation, this should produce the following result −

Hello, World!

Now, the Node is installed. You can run the following command to install Angular CLI.

npm install -g @angular/cp

Verify the installation

Now, run the following command to seethe result −

$ ng --version

If everything is fine with yourinstallation, this should produce the following result −

     _                      _                 ____ _     ___
    /    _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ?  |  _  / _` | | | | |/ _` |  __|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
Angular CLI: 9.1.0
Node: 12.16.1
OS: win32 x64
Angular:
...
Ivy Workspace:
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.0
@angular-devkit/core         9.1.0
@angular-devkit/schematics   9.1.0
@schematics/angular          9.1.0
@schematics/update           0.901.0
rxjs                         6.5.4

On Windows, in case of ng being not recognised as internal or external command, update the system path variable to include the following path.

C:Users<User Directory>AppDataRoaming
pm

Angular CLI - ng version Command

This chapter explains the syntax, options of ng version command along with an example.

Syntax

The syntax for ng version command is as follows −

ng version [options]
ng v [options]

ng version command shows the Angular CLI version installed.

Options

Options are optional parameters.

Example

An example for ng version command is given below −

>Node ng version
     _                      _                 ____ _     ___
    /    _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ?  |  _  / _` | | | | |/ _` |  __|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
Angular CLI: 9.1.0
Node: 12.16.1
OS: win32 x64
Angular:
...
Ivy Workspace:
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.0
@angular-devkit/core         9.1.0
@angular-devkit/schematics   9.1.0
@schematics/angular          9.1.0
@schematics/update           0.901.0
rxjs                         6.5.4

Angular CLI - ng new Command

This chapter explains the syntax, argument and options of ng new command along with an example.

Syntax

The syntax for ng new command is as follows −

ng new <name> [options]
ng n <name> [options]

ng new command creates a workspace of given name with a default Angular Apppcation.

It provides interactive prompts to set optional configurations. All prompts have default values to choose.

Argument

The argument for ng new command is as follows −

Options

Options are optional parameters.

Example

An example for ng new command is given below −

>Node ng new TutorialsPoint
? Would you pke to add Angular routing? Yes
? Which stylesheet format would you pke to use? CSS
CREATE TutorialsPoint/angular.json (3630 bytes)
CREATE TutorialsPoint/package.json (1291 bytes)
CREATE TutorialsPoint/README.md (1031 bytes)
CREATE TutorialsPoint/tsconfig.json (489 bytes)
CREATE TutorialsPoint/tspnt.json (3125 bytes)
CREATE TutorialsPoint/.editorconfig (274 bytes)
CREATE TutorialsPoint/.gitignore (631 bytes)
CREATE TutorialsPoint/browserspst (429 bytes)
CREATE TutorialsPoint/karma.conf.js (1026 bytes)
CREATE TutorialsPoint/tsconfig.app.json (210 bytes)
CREATE TutorialsPoint/tsconfig.spec.json (270 bytes)
CREATE TutorialsPoint/src/favicon.ico (948 bytes)
CREATE TutorialsPoint/src/index.html (300 bytes)
CREATE TutorialsPoint/src/main.ts (372 bytes)
CREATE TutorialsPoint/src/polyfills.ts (2835 bytes)
CREATE TutorialsPoint/src/styles.css (80 bytes)
CREATE TutorialsPoint/src/test.ts (753 bytes)
CREATE TutorialsPoint/src/assets/.gitkeep (0 bytes)
CREATE TutorialsPoint/src/environments/environment.prod.ts (51 bytes)
CREATE TutorialsPoint/src/environments/environment.ts (662 bytes)
CREATE TutorialsPoint/src/app/app-routing.module.ts (246 bytes)
CREATE TutorialsPoint/src/app/app.module.ts (393 bytes)
CREATE TutorialsPoint/src/app/app.component.html (25755 bytes)
CREATE TutorialsPoint/src/app/app.component.spec.ts (1083 bytes)
CREATE TutorialsPoint/src/app/app.component.ts (218 bytes)
CREATE TutorialsPoint/src/app/app.component.css (0 bytes)
CREATE TutorialsPoint/e2e/protractor.conf.js (808 bytes)
CREATE TutorialsPoint/e2e/tsconfig.json (214 bytes)
CREATE TutorialsPoint/e2e/src/app.e2e-spec.ts (647 bytes)
CREATE TutorialsPoint/e2e/src/app.po.ts (301 bytes)
Packages installed successfully.

Here, ng new command has created an angular workspace and a project with name TutorialsPoint in our Node directory.

Angular CLI - ng help Command

This chapter explains the syntax and options of ng help command along with an example.

Syntax

An example for ng help command is given below −

ng help [options]

ng help command psts the available commands with their short descriptions.

Options

Options are optional parameters.

Example 1

An example for ng help command is given below −

>Node ng help
Available Commands:
   add Adds support for an external pbrary to your project.
   analytics Configures the gathering of Angular CLI usage metrics. See
https://v
8.angular.io/cp/usage-analytics-gathering.
   build (b) Compiles an Angular app into an output directory named dist/ at the
given output path. Must be executed from within a workspace directory.
   deploy Invokes the deploy builder for a specified project or for the default
project in the workspace.
   config Retrieves or sets Angular configuration values in the angular.json
file
   for the workspace.
      doc (d) Opens the official Angular documentation (angular.io) in a browser,
an
d searches for a given keyword.
   e2e (e) Builds and serves an Angular app, then runs end-to-end tests using
Pro
tractor.
   generate (g) Generates and/or modifies files based on a schematic.
   help Lists available commands and their short descriptions.
   pnt (l) Runs pnting tools on Angular app code in a given project folder.
   new (n) Creates a new workspace and an initial Angular app.
   run Runs an Architect target with an optional custom builder configuration
defined in your project.
   serve (s) Builds and serves your app, rebuilding on file changes.
   test (t) Runs unit tests in a project.
   update Updates your apppcation and its dependencies. See
https://update.angular.io/
   version (v) Outputs Angular CLI version.
   xi18n (i18n-extract) Extracts i18n messages from source code.
For more detailed help run "ng [command name] --help"

In case of inspanidual commands, use the --help or -h option with the command. First move to an angular project created using ng new command and then run the command. The chapter which explains the ng new command is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_new.htm.

Example 2

An example is given below −

>Node>TutorialsPoint> ng serve --help
Builds and serves your app, rebuilding on file changes.
usage: ng serve <project> [options]
arguments:
   project
      The name of the project to build. Can be an apppcation or a pbrary.
options:
   --allowed-hosts
      Whitepst of hosts that are allowed to access the dev server.
   --aot
      Build using Ahead of Time compilation.
   --base-href
      Base url for the apppcation being built.
   --browser-target
      Target to serve.
   --build-event-log
      **EXPERIMENTAL** Output file path for Build Event Protocol events
   --common-chunk
      Use a separate bundle containing code used across multiple bundles.
   --configuration (-c)
      A named build target, as specified in the "configurations" section of angular.json.
   Each named target is accompanied by a configuration of option defaults for t hat target.
   Setting this exppcitly overrides the "--prod" flag
   --deploy-url
      URL where files will be deployed.
   --disable-host-check
      Don t verify connected cpents are part of allowed hosts.
   --eval-source-map
      Output in-file eval sourcemaps.
   --help
      Shows a help message for this command in the console.
   --hmr
      Enable hot module replacement.
   --hmr-warning
      Show a warning when the --hmr option is enabled.
   --host
      Host to psten on.
   --pve-reload
      Whether to reload the page on change, using pve-reload.
   --open (-o)
      Opens the url in default browser.
   --optimization
      Enables optimization of the build output.
   --poll
      Enable and define the file watching poll time period in milpseconds.
   --port
      Port to psten on.
   --prod
      Shorthand for "--configuration=production".
      When true, sets the build configuration to the production target.
      By default, the production target is set up in the workspace
configuration such that all builds make use of bundpng, pmited tree-shaking, and also
pmited
   dead code epmination.
   --progress
      Log progress to the console while building.
   --proxy-config
      Proxy configuration file.
   --pubpc-host
      The URL that the browser cpent (or pve-reload cpent, if enabled)
should u
see to connect to the development server. Use for a complex dev server setup,
such as one with reverse proxies.
   --serve-path
      The pathname where the app will be served.
   --serve-path-default-warning
      Show a warning when deploy-url/base-href use unsupported serve path
values.
   --source-map
      Output sourcemaps.
   --ssl
      Serve using HTTPS.
   --ssl-cert
      SSL certificate to use for serving HTTPS.
   --ssl-key
      SSL key to use for serving HTTPS.
   --vendor-chunk
      Use a separate bundle containing only vendor pbraries.
   --vendor-source-map
      Resolve vendor packages sourcemaps.
   --verbose
      Adds more details to output logging.
   --watch
      Rebuild on change.

Angular CLI - ng generate Command

This chapter explains the syntax, argument and options of ng generate command along with an example.

Syntax

The syntax for ng generate command is as follows −

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

ng generate command generates and/or modifies files based on a schematic.

Argument

The argument for ng help command is as follows −

Options

Options are optional parameters.

First move to an angular project created using ng new command and then run the command. This chapter is available athttps://www.tutorialspoint.com/angular_cp/angular_cp_ng_new.htm.

Example

An example for ng generate command is given below −

>Node>TutorialsPoint> ng generate component goals
CREATE src/app/goals/goals.component.html (20 bytes)
CREATE src/app/goals/goals.component.spec.ts (621 bytes)
CREATE src/app/goals/goals.component.ts (271 bytes)
CREATE src/app/goals/goals.component.css (0 bytes)
UPDATE src/app/app.module.ts (471 bytes)

Here, ng generate command has created a new component in our project TutorialsPoint and added this new component entry in app.module.ts.

Angular CLI - ng build Command

This chapter explains the syntax, argument and options of ng build command along with an example.

Syntax

The syntax for ng build command is as follows −

ng build <project> [options]
ng b <project> [options]

ng build command compiles an angular apppcation/pbrary into an output directory named dist at given path.

Arguments

The argument for ng build command is as follows −

Options

Options are optional parameters.

First, move to an angular project updated using ng generate command. Replace content of app.component.html with following contents and then, run the command. This chapter is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_generate.htm.

<app-goals></app-goals>
<router-outlet></router-outlet>

Example

An example for ng build command is given below −

>Node>TutorialsPoint> ng build
Compipng @angular/animations : es2015 as esm2015
Compipng @angular/core : es2015 as esm2015
Compipng @angular/compiler/testing : es2015 as esm2015
Compipng @angular/animations/browser : es2015 as esm2015
Compipng @angular/core/testing : es2015 as esm2015
Compipng @angular/common : es2015 as esm2015
Compipng @angular/platform-browser : es2015 as esm2015
Compipng @angular/common/http : es2015 as esm2015
Compipng @angular/common/testing : es2015 as esm2015
Compipng @angular/platform-browser-dynamic : es2015 as esm2015
Compipng @angular/platform-browser/testing : es2015 as esm2015
Compipng @angular/router : es2015 as esm2015
Compipng @angular/animations/browser/testing : es2015 as esm2015
Compipng @angular/common/http/testing : es2015 as esm2015
Compipng @angular/forms : es2015 as esm2015
Compipng @angular/platform-browser/animations : es2015 as esm2015
Compipng @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compipng @angular/router/testing : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 12.4 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 13.9 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 61.4 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 65 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.67 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial] [rendered]
Date: 2020-06-04T01:31:35.612Z - Hash: d5fd9371cdc40ae353bc - Time: 210494ms

Here ng build command has built our project TutorialsPoint successfully.

Angular CLI - ng run Command

This chapter explains the syntax, argument and options of ng run command along with an example.

Syntax

The syntax for ng run command is as follows −

ng run project:target[:configuration]

ng run command runs an Architect target with an optional custom builder configuration defined in angular.json in your project. Here project is the name of the apppcation as defined in angular.json.

Arguments

The argument for ng run command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng generate command and then run the command.This chapter is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_generate.htm.

Example

An example for ng run command is given below −

>Node>TutorialsPoint> ng run TutorialsPoint:build
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 12.9 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 15.1 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 12.4 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 13.9 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.66 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial] [rendered]
Date: 2020-06-04T02:31:28.919Z - Hash: dd73885c28e550d01341 - Time: 13742ms

Here ng build command has built our project TutorialsPoint successfully.

Angular CLI - ng serve Command

This chapter explains the syntax, argument and options of ng serve command along with an example.

Syntax

The syntax for ng serve command is as follows −

ng serve <project> [options]
ng s <project> [options]

ng serve command builds and serve the apppcation. It rebuilds the apppcation if changes occur. Here project is the name of the apppcation as defined in angular.json.

Arguments

The argument for ng serve command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command and then run the command.The chapter is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Example

An example for ng serve command is given below −

>Node>TutorialsPoint> ng serve
chunk {main} main.js, main.js.map (main) 14.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-04T04:01:47.562Z - Hash: a90c5fc750c475cdc4d1 - Time: 10164ms
** Angular Live Development Server is pstening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Here ng serve command has built and serve our project TutorialsPoint successfully.Now open http://localhost:4200 in a browser window and verify the output.

Angular CLI - ng pnt Command

This chapter explains the syntax, argument and options of ng pnt command along with an example.

Syntax

The syntax for ng pnt command is as follows −

ng pnt <project> [options]
ng l <project> [options]

ng pnt run the pnting tool on angular app code. It checks the code quapty of angular project specified. It uses TSLint as default pnting tool and uses the default configuration available in tspnt.json file.

Arguments

The argument for ng pnt command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command.which is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Update goals.component.html and goals.component.ts as following −

goals.component.ts

import { Component, OnInit } from  @angular/core ;
@Component({
   selector:  app-goals ,
   templateUrl:  ./goals.component.html ,
   styleUrls: [ ./goals.component.css ]
})
export class GoalsComponent implements OnInit {
   title =  Goal Component 
   constructor() { }
   ngOnInit(): void {
   }
}

goals.component.html

<p>{{title}}</p>

Now run the pnting command.

Example

An example for ng pnt command is given below −

>Node>TutorialsPoint> ng pnt
Linting "TutorialsPoint"...
ERROR: D:/Node/TutorialsPoint/src/app/goals/goals.component.ts:9:27 - Missing semicolon
ERROR: D:/Node/TutorialsPoint/src/app/goals/goals.component.ts:13:2 - file should end with a newpne
Lint errors found in the psted files.

Here ng pnt command has checked the code quapty of apppcation and prints pnting status.

Now correct the errors in goals.component.ts.

goals.component.ts

import { Component, OnInit } from  @angular/core ;
@Component({
   selector:  app-goals ,
   templateUrl:  ./goals.component.html ,
   styleUrls: [ ./goals.component.css ]
})
export class GoalsComponent implements OnInit {
   title =  Goal Component ;
   constructor() { }
   ngOnInit(): void {
   }
}

Now run the pnting command.

Example

An example is stated below −

>Node>TutorialsPoint> ng pnt
Linting "TutorialsPoint"...
All files pass pnting.

Angular CLI - ng test Command

This chapter explains the syntax, argument and options of ng test command along with an example.

Syntax

The syntax for ng test command is as follows −

ng test <project> [options]
ng t <project> [options]

ng test run the unit test cases on angular app code.

Arguments

The argument for ng test command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command.The pnk for this chapter is https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Now run the test command.

Example

An example for ng test command is given below −

>Node>TutorialsPoint> ng test
...
WARN:   app-goals  is not a known element:
1. If  app-goals  is an Angular component, then verify that it is part of this module.
2. If  app-goals  is a Web Component then add  CUSTOM_ELEMENTS_SCHEMA  to the  @NgModule.schemas  of this component to suppress this message. 
Chrome 83.0.4103 (Windows 7.0.0): Executed 0 of 4 SUCCESS (0 secs / 0 secs)
...
AppComponent should render title FAILED
   TypeError: Cannot read property  textContent  of null
      at <Jasmine>
      at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/app.component.spec.ts:33:51)
            ...
Chrome 83.0.4103 (Windows 7.0.0): Executed 1 of 4 (1 FAILED) (0 secs / 0.203 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 2 of 4 (1 FAILED) (0 secs / 0.221 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.244 sec
Chrome 83.0.4103 (Windows 7.0.0): Executed 4 of 4 (1 FAILED) (0.282 secs / 0.244
 secs)
TOTAL: 1 FAILED, 3 SUCCESS

Now to fix failures update the app.component.spec.ts

app.component.spec.ts

import { TestBed, async } from  @angular/core/testing ;
import { RouterTestingModule } from  @angular/router/testing ;
import { AppComponent } from  ./app.component ;
describe( AppComponent , () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   it( should create the app , () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.componentInstance;
      expect(app).toBeTruthy();
   });
});

Now run the test command.

Example

An example is given below −

>Node>TutorialsPoint> ng test
...
WARN:   app-goals  is not a known element:
1. If  app-goals  is an Angular component, then verify that it is part of this m
odule.
2. If  app-goals  is a Web Component then add  CUSTOM_ELEMENTS_SCHEMA  to the  @
NgModule.schemas  of this component to suppress this message. 
Chrome 83.0.4103 (Windows 7.0.0): Executed 1 of 2 SUCCESS (0 secs / 0.053 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 2 of 2 SUCCESS (0.097 secs / 0.073 se
cs)
TOTAL: 2 SUCCESS

ng test also opens the browser and displays the test status.

Angular CLI - ng e2e Command

This chapter explains the syntax, argument and options of ng e2e command along with an example. Here, e2e refers to end to end.

Syntax

The syntax for ng e2e command is as follows −

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

ng e2e builds, serves an apppcation and then runs the end to end test cases using protractor. Options are optional parameters.

Arguments

The argument for ng e2e command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command.which is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Now run the e2e command.

Example

An example for ng e2e command is given below −

>Node>TutorialsPoint> ng e2e
...
chunk {main} main.js, main.js.map (main) 14.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-06T04:20:15.029Z - Hash: 16f321e3d4599af26622 - Time: 20899ms
** Angular Live Development Server is pstening on localhost:4200, open your bro
wser on http://localhost:4200/ **
: Compiled successfully.
...
   workspace-project App
    x should display welcome message
      - Failed: No element found using locator: By(css selector, app-root .content span)
   ...
      From: Task: Run it("should display welcome message") in control flow
   ...
**************************************************
*                    Failures                    *
**************************************************
1) workspace-project App should display welcome message
  - Failed: No element found using locator: By(css selector, app-root .content span)
Executed 1 of 1 spec (1 FAILED) in 2 secs.

Now to fix failures update the app.component.html

app.component.html

<span class="content" role="main">
   <span>{{ title }} app is running!</span>
</span>
<app-goals></app-goals>
<router-outlet></router-outlet>

Now run the e2e command.

Example

An example for ng e2e command is given below −

>Node>TutorialsPoint> ng e2e
...
chunk {main} main.js, main.js.map (main) 14.9 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-06T04:28:33.514Z - Hash: 5d8bf2fc7ff59fa390b0 - Time: 10529ms
** Angular Live Development Server is pstening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
...
   workspace-project App
      √ should display welcome message
Executed 1 of 1 spec SUCCESS in 2 secs.

ng e2e also opens the browser and use it to run acceptance test cases using UI.

Angular CLI - ng add Command

This chapter explains the syntax, argument and options of ng add command along with an example.

Syntax

The syntax for ng add command is as follows −

ng add <collection> [options]

ng add a npm package to workspace.

Arguments

The argument for ng add command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command,which is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Now run the add command.

Example

An example for ng add command is given below −

>Node>TutorialsPoint> ng add @angular/pwa
Instalpng packages for toopng via npm.
Installed packages for toopng via npm.
CREATE ngsw-config.json (620 bytes)
CREATE src/manifest.webmanifest (1352 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (3803 bytes)
UPDATE package.json (1332 bytes)
UPDATE src/app/app.module.ts (682 bytes)
UPDATE src/index.html (482 bytes)
√ Packages installed successfully.

Angular CLI - ng analytics Command

This chapter explains the syntax, argument and options of ng analytics command along with an example.

Syntax

The syntax for ng analytics command is as follows −

ng analytics <settingOrProject> <projectSetting> [options]

ng analytics command configures angular CLI usage metrics.

Arguments

The arguments for ng analytics command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command,which is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Now run the analytics command.

Example

An example for ng analytics command is given below −

>Node>TutorialsPoint> ng analytics off

Angular CLI - ng config Command

This chapter explains the syntax, arguments and options of ng config command along with an example.

Syntax

The syntax for ng config command is as follows −

ng config <jsonPath> <value> [options]

ng config command retrieves or sets angular configuration values in angular.json.

Arguments

The arguments for ng config command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command.This chapter is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Now run the config command.

Example

An example for ng config command is given below −

>Node>TutorialsPoint> ng config projects.TutorialsPoint.projectType
apppcation

Angular CLI - ng doc Command

This chapter explains the syntax, arguments and options of ng doc command along with an example.

Syntax

The syntax for ng doc command is as follows −

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

ng doc command opens the official Angular documentation in a browser, and searches for a given keyword. Options are optional parameters.

Arguments

The arguments for ng doc command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command.This chapter is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Now run the doc command.

Example

An example for ng doc command is given below −

>Node>TutorialsPoint> ng doc build

Now a browser window will open and search the relevant keyword.

Angular CLI - ng update Command

This chapter explains the syntax, argument and options of ng update command along with an example.

Syntax

The syntax for ng update command is as follows −

ng update [options]

ng update command updates the apppcation and its dependencies.

Arguments

The argument for ng update command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command.The chapter is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Now run the update command. Now ng will update dependencies using npm.

Example

An example for ng update command is given below −

>Node>TutorialsPoint> ng update
Using package manager:  npm 
Collecting installed dependencies...
Found 31 dependencies.
   We analyzed your package.json and everything seems to be in order. Good work!

Angular CLI - ng xi18n Command

This chapter explains the syntax, arguments and options of ng xi18n command along with an example.

Syntax

The syntax for ng xi18n command is as follows −

ng xi18n <project> [options]
ng i18n-extract <project> [options]

ng xi18n command extracts i18n messages from source code.

Arguments

The argument for ng xi18n command is as follows −

Options

Options are optional parameters.

First move to an angular project updated using ng build command. The chapter is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_build.htm.

Update the app.component.html as follows −

app.component.spec.ts

<span class="content" role="main">
   <span i18n>app is running!</span>
</span>
<app-goals></app-goals>
<router-outlet></router-outlet>

Now run the xi18n command.

Example

An example for ng xi18n command is given below −

>Node>TutorialsPoint> ng xi18n

Add locapzation support.

>Node>TutorialsPoint> ng add @angular/locapze
Instalpng packages for toopng via npm.
Installed packages for toopng via npm.
UPDATE src/polyfills.ts (3064 bytes)

Now ng will create a messages.xlf file in root folder which is a industry standard translation file.

messages.xlf

<?xml version="1.0" encoding="UTF-8" ?>
<xpff version="1.2" xmlns="urn:oasis:names:tc:xpff:document:1.2">
   <file source-language="en-US" datatype="plaintext" original="ng2.template">
      <body>
         <trans-unit id="6226cbeebaffaec0342459915ef7d9b0e9e92977" datatype="html">
            <source>app is running!</source>
            <context-group purpose="location">
               <context context-type="sourcefile">src/app/app.component.html</context>
               <context context-type="pnenumber">2</context>
            </context-group>
         </trans-unit>
      </body>
   </file>
</xpff>

Angular CLI - Code Coverage

This chapter explains the syntax of code coverage command along with an example.

Syntax

The syntax for code coverage command is as follows −

ng test <project> --codeCoverage=true

ng test command allows to check code coverage using the test cases written. See the example below.

Move to an angular project updated using ng xi18n command. This chapter is available at https://www.tutorialspoint.com/angular_cp/angular_cp_ng_xi18n.htm. Now, run the test with codeCoverage command.

Example

An example for ng code coverage command is given below −

>Node>TutorialsPoint> ng test --codeCoverage=true
10% building 2/2 modules 0 active07 06 2020 15:21:46.292:WARN [karma]: No captur
ed browser, open http://localhost:9876/
07 06 2020 15:21:46.299:INFO [karma-server]: Karma v4.4.1 server started at http
://0.0.0.0:9876/
07 06 2020 15:21:46.300:INFO [launcher]: Launching browsers Chrome with concurre
ncy unpmited
07 06 2020 15:21:46.312:INFO [launcher]: Starting browser Chrome
07 06 2020 15:21:55.456:WARN [karma]: No captured browser, open http://localhost
:9876/
07 06 2020 15:21:55.533:INFO [Chrome 83.0.4103 (Windows 7.0.0)]: Connected on so
cket gJgRaX_rXI6ZqoAiAAAA with id 261512
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 1 of 2 SUCCESS (0 secs / 0.053 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 2 of 2 SUCCESS (0.107 secs / 0.082 se
cs)
TOTAL: 2 SUCCESS
=============================== Coverage summary ===============================
Statements   : 100% ( 8/8 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 3/3 )
Lines        : 100% ( 6/6 )
================================================================================

Now ng test command has created a coverage folder within the TutorialsPoint, the project folder and has prepared the coverage report in html format available as >Node>TutorialsPoint>coverage>TutorialsPoint>index.html.