Quick Preview Of Angular CLI Commands

Introduction

CLI stands for Command Line Interface for creating and manipulating Angular apps. Angular CLI provides the best practices to create an Angular application.

 
What Is Angular CLI?

Angular CLI stands for Angular Command Line Interface that is used for creating and manipulating Angular apps. By using CLI, we can download configurations and dependencies easily. Angular CLI assists developers by generating code which follows the best practices. It also helps in creating a unit and end-to-end tests for the application.

Prerequisites

 

You have to install node.js.

 

Installing Angular CLI

The first step is to install the Angular CLI by using the following command.

npm install -g @angular/cli

Here -g stand for globe

Update Angular CLI

 

The following command installs the latest version of Angular CLI in your machine,

 

npm install -g @angular/cli@latest

Here @latest keyword will update the latest version of Angular CLI.

Angular CLI Versions

We can check the current installed Angular CLI version by using the following command.

You can keep track of the latest Angular CLI release from this link.

ng --version

 

Angular CLI Commands

 

Command	Alias	Description
ng --help		Displays help for the Angular CLI
ng --version	ng --v	Outputs Angular CLI version
ng --new	ng --n	Creates a new directory and a new Angular app
ng --add		Add support for a library to your project
ng --build	ng --b	Builds your app and places it into the output path (dist/ by default)
ng --config		Get/set configuration values
ng --doc	ng --g	Opens the official Angular API documentation for a given keyword
ng --e2e	ng --e	Builds and serves an Angular app, then runs end-to-end tests using Protractor
ng --generate	ng --g	Generates and/or modifies files based on a schematic
ng --lint	ng --l	Lints code in an existing project
ng --run		Runs Architect targets
ng --serve	ng --s	Builds and serves your app, rebuilding on file changes
ng --test	ng --t	Run unit tests in the existing project
ng --update		Updates your application and its dependencies
ng --xi18n		Extracts i18n messages from source code

 

Start Node Package manager using npm start

 

We can start the node package manager using the following syntax.

 

npm start

 

Creating the Application with ng new

 

We can create a new project using the following syntax.

 

ng new

This command will ask following.

1. ? What name would you like to use for the new workspace and initial project? [project name]
2. ? Would you like to add Angular routing? Yes
3. ? Which stylesheet format would you like to use? (Use arrow keys)
4. > CSS
5. SCSS [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
6. Sass [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html ]
7. Less [ http://lesscss.org ]
8. Stylus [ http://stylus-lang.com

ng new options

 

OPTIONS	ALIAS	DESCRIPTION
ng new <name> --collection	c	Schematics collection to use
ng new <name> --directory		The directory name to create the workspace in
ng new <name> --dryRun	d	Run through without making any changes.
ng new <name> --experimental-ivy		EXPERIMENTAL: Specifies whether to create a new application which uses the Ivy rendering engine.
ng new <name> --force	f	Forces overwriting of files.
ng new <name> --inline-style	s	Specifies if the style will be in the ts file
ng new <name> --inline-template	t	Specifies if the template will be in the ts file.
ng new <name> --new-project-root		The path where new projects will be created.
ng new <name> --prefix	p	The prefix to apply to generated selectors.
ng new <name> --routing		Generates a routing module.
ng new <name> --skip-git	g	Skip initializing a git repository.
ng new <name> --skip-install		Skip installing dependency packages.
ng new <name> --skip-tests	s	Skip creating spec files.
ng new <name> --style		The file extension to be used for style files.
ng new <name> --verbose	v	Adds more details to output logging.
ng new <name> --view-encapsulation		Specifies the view encapsulation strategy.

 

Getting Help

For getting help on individual commands use the syntax,

ng [command name] --help

For Example,

1. ng new --help
2. ng generate --help
3. ng add --help

Running the Application

ng serve

 

ng generate

ng generate (ng g) is used to generate component, module, class, pipes & directives, etc. The following tables show the list that can be generated,

SCHEMATIC	SYNTAX	DESCRIPTION
serviceWorker	ng g serviceWorker	Generates a Service worker
application	ng g application	Generates an application
class	ng g class	Generates Class
component	ng g component	Generates a component
directive	ng g directive	Generates a Directive
enum	ng g enum	Generates a enum
guard	ng g guard	Generates a Guard Component
interface	ng g interface	Generates a Interface
module	ng g module	Generates a Module
pipe	ng g pipe	Generates a Pipe
service	ng g service	Generates a Service class
universal	ng g universal	Generates an Universal
appShell	ng g appShell	Generates an App shell
library	ng g library	Generates a Library

 

Common option with ng g

Following are the common options of the ng g command - All options have a false default value.

OPTION	DESCRIPTION
--defaults=true|false	When true, disables interactive input prompts for options with a default
--interactive=true|false	When false, disables interactive input prompts.
--force=true|false	When true, force overwriting of existing files
--dryRun=true|false	When true, run through and report activity without writing out results.

 

Generate Component

We can generate a new component using the following command.

ng g component <name> [options]

Following are the common options of the ng g component command: All options have a false default value

OPTION	DESCRIPTION
--entryComponent= true|false	Specifies if the component is an entry component of the declaring module.
--export=true|false	Specifies if declaring module exports the component.
--styleext= styleext	The file extension to be used for style files
--spec= true|false	Specifies if a spec file is generated.
--flat= true|false	Flag to indicate if a directory is created.
--skipImport= true|false	Flag to skip the module import.
--selector= selector	The selector to use for the component.
--project= project	The name of the project.
--prefix= prefix	The prefix to apply to generated selectors.
--module= module	Allows specification of the declaring module.
--lintFix= true|false	Specifies whether to apply lint fixes after generating the component.
--inlineTemplate=true|false	Specifies if the template will be in the ts file.
--inlineStyle= true|false	Specifies if the style will be in the ts file.

 

Generate Module

We can generate a new module using the following command.

ng g module <name>

 

Generate Class

 

We can generate a new class using the following command.

 

ng g class <name>

 

Summary

In this article, I have discussed Angular CLI commands. Angular CLI stand for Angular Command Line Interface. It makes Angular easy for developers.