Quick Preview Of Angular CLI Commands

In this article, we will discuss how to use Angular CLI commands in the Angular app. We are going to discuss some common 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.

Angular CLI Commands

 
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.