Angular CLI Commands

All CLI commands of Angular

Angular CLI is a command-line interface which is used to initialize, develop, and maintain Angular applications. We can use these Command on command prompt or consequentially by an associated UI.  i.e., Angular Console.

Command	Alias	Description
add		It used to add support for an external library to the Project.
build	b	It compiles an Angular app in an output directory "dist" at the given output path. Must be executed within a workspace directory.
config		It retrieves Angular configuration values in the angular.json file for the workspace directory.
doc	d	It opens the official Angular site (angular.io) in the browser and also searches for any given keywords.
e2e	e	It builds and serves an Angular app, and then runs the end-to-end test using a protractor.
generate	g	It generates or modifies files based on a schedule.
help		It provides a list of possible commands and short descriptions.
lint	l	It runs linting tools on the Angular app in a given project folder.
new	n	It creates a workspace and a first Angular app.
run		It runs an architecture target with an optional custom builder configuration in our descriptions.
serve	s	It builds and helps our app, rebuilding on files changes.
test	t	It runs unit tests in a project.
update		It updates our application and its dependencies.
version	v	It updates the Angular CLI version.
Xi18n		It extracts i18n messages from source code.

1. ng add Command

The ng add Command add support of an external library in our Project. It combines the npm package for a published library to your workspace and makes your default app project to use that library.

The default app project is the primary value of the default project in angular.json.

Syntax:

ng add 
 [options] 

Parameter Explanation:

Options

--default=true|false: Whentrue, it disables interactive input prompts for option with a default.

--help=true|false|json|JSON: It generates a help message in the console. Default:false.

--interactive= true|false:  it disables interactive input prompts,when false.

2.ng build Command

The ng build command is used to compile an angular app into an output directory file "dist" at the following output path. It may be executed from within a workspace directory.

Syntax:

ng build < Project>
 [options]

Parameter Explanation:

< Project>:It describes the name of the Project, which builds. It can be an app or library.

Options

--aot=true|false: It builds ahead of Time compilation.

Default: false

--baseHref=baseHref: It specifies the base URL for the application being built.

--buildEventLog=buildEventLog:  It is an output file path for build event protocol event.

--buildOptimizer=true|false: It enables "@angular-devkit/build-optimizer"  for optimization when using the "aot" option.

Default: false

--commonChunk=true|false: It has used a separate bundle contains code used across multiple packages. Default: true

--configuration=configuration: It is a named build target, which specified in the "configurations" section of angular.json and each designated target is accompanied by a configuration of options default for the goal.

Aliases: -c

--deleteOutputPath= true|false: It was used to delete the output path before it is building. Default: true

--deployUrl=deployUrl:  The URL where files will be deployed.

--es5BrowserSupport= true|false: Enables dependency loaded ES2015 polyfills.

Default: false

--extractCss=true|false: It has used to extract CSS from the global styles into CSS files instead of js ones.

Default: false

--forkTypeChecker=true|false: It has been used to run the Typescript typechecker in a forked process. Default: true

--help= true|false|json|JSON:It is mainly used to show a help message for this Command in the console. Default: false

--i18nFile= i18nFile: i18n is used to locale.

--i18nMissingTranslation=i18nMissingTranslation: How to handle missing translation for i18n.

--index=index: The name of index HTML file.

--lazyModules: List of additional ngModules files will be lazy loaded. Lazy router modules have been discovered unwittingly.

--main=main: The full path in the main entry point to the app is completely relative to the current workspace.

--namedChunks=true|false: Use filename for lazy loaded chunk Default: true

--ngswConfigPath=ngswConfigPath: Path to ngsw-config.json.

--outputHashing=none|all|media|bundles: Define the outputs of filename cache-busting and hashing mode.

Default: none

--outputPath=outputPath:The full path of the new output directory directly relative to the current workspaces.

By default, write output to a folder named "dist \" in the current Project.

--poll:Enables and define the file watching poll time in milliseconds.

--polyfills=polyfills: The full path for the polyfill files is relative to current workspaces.

--preserveSymlinks=true|false: It do not use the real way when resolving modules.

Default: false

--prod=true|false: Sets the build configuration in the production target. All builds make use of packaging and little tree-shaking. A production build runs limited dead code elimination, when true.

--profile=true|false: Output profile events is used in Chrome profiler.

Default: false

--progress=true|false: it progress to the console during building.

--resourcesOutputPath= resourcesOutputPath:The path where style resources would place is combined to outputPath.

--serviceWorker=true|false: It generates a service worker config in the production build. Default: false.

--showCircularDependencies=true|false: Show circular dependency warning on the build. Default: true

--sourceMap=true|false: It is showed Output source maps.

--statsJson=true|false: It generates a "stats.json" file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or http://webpack.github.io/analyse.

--subresourceIntegrity=true|false: It qualifies the use of subresource integrity and validation.

--tsConfig=tsConfig: The full path of the Typescript configuration file is comparative to the current workspaces.

--vendorChunk=true|false: It mostly uses a separate bundle which contains the vendor libraries.

Default: true

--verbose=true|false: It adds more details of output logging.

Default: false

--watch= true|false: It builds when a file changes.

Default: false

3. ng config Command

The ng command is used to retrieve and set Angular configuration values in the angular.json file of the workspaces.

Syntax:

ng config \
 [options] 

Parameter Explanation:

<jsonPath>: The configuration key is used to set or query, in JSON path format. For example: "a[3].foo.bar[2]". If there is no new value is provided, results the current value of that key.

<value>:  A new value for the given configuration key, if provided.

Options

--global=true|false: It accesses the global configuration in the caller's home directory.

Default: false

Aliases: -g

--help= true|false|json|JSON: It has used to show a help message for this Command in the console.

Default: false

4. ng doc Command

The ng doc command is used to open Angular documentation site "angular.io" in a browser and searches for a given keyword.

Syntax:

ng doc 
 [options]

Parameter Explanation:

<keyword>: It is used to identify the keyword to search for, as provided in the search bar in angular.io.

Options

--help= true|false|json|JSON:It generates a helping message for this Command in the console.

Default: false

5.ng e2e Command

It has used to build and serve an Angular application, that runs end-to-end tests using Protractor.

Syntax:

ng e2e 
 [options] 

It must be executed form within a workspace directory. When we don’t specify the project name, it executes for all projects.

Parameter Explanation:

< Project>: It identifies the name of the Project we want to build. It can be any app or library.

Options:

--baseUrl=baseUrl: It specifies the base URL of the Protractor to connect.

--configuration=configuration: It is used to determine build target, as is specified in the <configurations> section of angular.json. An arrangement of option defaults accompanies each named target for the goal.

Aliases: -c

--devServerTarget=devServerTarget: It specifies dev server  which target to run tests.

--elementExplorer=true|false: It start Protractor's Element  used to explorer for debugging process.

Default: false

--help= true|false|json|JSON: It has seen a help message for this Command in the console line.

Default: false

--host=host: it is used to listen on the host.

Default: localhost

--port: It modifies the port to serve the application.

--prod=true|false:  it sets the build configuration to the production target when it is true. All build uses bundling and limited tree-shaking techniques. A production build runs limited dead code elimination.

--protractorConfig= protractorConfig: It implies the name of the Protractor configuration file.

--specs: It overrides spec in protractor config.

--suite=suite: It overrides suite on the protractor configuration.

--webdriverUpdate=true|false: It is worn to update the web driver.

Default: true

6. ng generate Command

Syntax:

ng generate

Parameter Explanation:

It specifies the schematic or collection: which we want to generate, and it can take one of the following sub-commands.

• appShell
• application
• class
• component
• directive
• enum
• guard
• interface
• library
• module
• pipe
• service
• service Worker
• universal

Schematic Command

appShell:

It was used to generate an app shell for creating a server-side version of an app.

Syntax:

Ng generate appShell
[options]or
Ng g appshell
[options] 

application

It is used to create a basic app definition in the "projects" subfolder of the workspace.

Syntax:

ng generate application
or
ng g application
 [options]  

class

It creates a new generic class in the given or default project.

Syntax:

ng generate class

[options]or
ng g class 
[options]  

component

It can create a new generic component definition in the given or default project.

Syntax:

ng generate
component or
ng g component
 [options] 

directive

It is mainly used to create a new generic directive definition in the given or default project.

Syntax:

ng generate directive 
[options]or
ng g directive
 [options] 

enum

It create a new, generic enum definition for the given or default project.

Syntax:

ng generate enum 
[options]or
ng g enum  
[options]

guard

It is used to generate a new and generic route definition in the given or default project.

Syntax:

ng generate enum
 [options]or
ng g enum 
[options] 

interface

It create a new generic interface definition in the given or default project.

Syntax:

ng generate interface 
 [options] or
ng g interface

[Options] 

Library

It can used to create a new generic library project in the current workspace.

Syntax:

 ng generate library
 [options] or
 ng g library 
 [options] 

Module

It creates a new generic NgModule definition in the given or default project.

Syntax:

 ng generate module
  [options] or
 ng g module 
 [options] 

Pipe

It creates a new generic pipe definition in the given or default project.

Syntax:

 ng generate pipe
  [options] 

Service

It is used to create a new and generic service definition in the given or default project.

Syntax:

 ng generate service
 [options] 

serviceWorker

It is used to pass this to "run" Command to create a service worker.

Syntax:

ng generate
serviceWorker 

universal

This Command is used to pass this simplified to the "run" command to set up server-side rendering for an app.

Syntax:

ng generate
 universal  [options] 

Options

--default=true|false:When true, it disables interactive input prompts for options with a default.

-dryRun=true|false: When true, it runs through and reports activity without writing out results.

Default: false

Aliases: -d

--force=true|false: It forces overwriting of existing files, when true

Default: false

Aliases: -f

--help=true|false|json|JSON:  Used to show a help message in the console.

Default: false

--interactive=true|false: When it is false, it disables interactive input prompts.