Angular CLI tutorial - TekTutorialsHub

The Angular CLI is a command line interface for Angular developed by Angular Team. This tool helps us quickly get started with the creating the Angular Application. In this tutorial, we will learn how to create & Manage the Angular app using the Angular CLI commands. We will be covering the commands like ng new, ng generate component, ng generate directive & ng generate pipe etc.

Applies to : Angular 2, Angular 4, Angular 5, Angular 6, Angular 7

Why Angular CLI

Angular is easy to learn Front End Framework. But setting development environment is pretty complicated. There are many decisions, you have when you choose Angular as your JavaScript Framework.

You have an option of choosing Javascript, Typescript or dart. You have to choose a module loader among SystemJs & Webpack etc. You need to pickup your testing Framework. We discussed all this in our tutorial Installing and Setting Up an Angular Development Environment

Once you make a choice, then you have set up a lot of libraries and packages. Each of these libraries comes with their own configuration files. For instance, you need to create Package.Json file and add all the required libraries. Create Webpack or SystemJS configuration files. Configuration files are also required for Typescript & Typings etc. You need to configure the Testing Framework also.

Instead, you can install Angular CLI and get started right away.

Recommended Books:

The Best Books On Angular.

The 8 Best Angular Books, which helps you to get started with Angular.

What is Angular CLI

The Angular CLI help you to quickly create an Angular application with all the configuration files and packages in one single command. It also helps us to add features (components, directives, services etc) to existing Angular applications.It helps us to test , build & distribute our application

The Angular CLI creates the Angular Application and uses Typescript, Webpack ( for Module bundling), Karma ( for unit testing), Protractor ( for an end to end testing).

Installing Angular CLI

The first step is to install the Angular CLI. This can be done by using the following command.


npm install -g @angular/cli@latest

npm install -g @angular/cli@latest

The above command installs the latest version of Angular CLI in your machine. Note that we have used the -g flag, (which stands for global) installs the Angular CLI system-wide so that you can use it in your all projects.

Angular CLI Versions

Since, the Angular Version 6, the Angular CLI follows the same Version No as the Angular. Hence for Angular 7, the corresponding version of the Angular CLI is 7.

The Angular CLI version 1.7 was for Angular 5 and Angular CLI 1.4 was for Angular 4

You can keep track of the latest Angular CLI release from this link https://github.com/angular/angular-cli/releases

Angular CLI Version Check

You can find out the Current Installed Angular CLI Version by Using the Command


ng --version

ng --version

The latest version as of writing this article is 7.0.6. The command above also gives the version of node installed in your system.

Angular CLI Commands

Commad	Alias	Description
`help`		Help message shows the List of available commands and their short descriptions.
`version`	`v`	Find out the version of the Angular CLI Installed
`new`	`n`	Creates a new folder (Workspace) and ads the initial Angular app. Note that you can create multiple apps in a single folder (Workspace)
`add`		Adds the npm package to the workspace and configure the default app project to use that library.
`generate`	`g`	Generates and/or modifies files based on a schematic.
`update`		Updates your application and its dependencies
`serve`	`s`	Builds and serves your app, rebuilding on file changes.
`run`		Runs a custom target defined in your project.
`build`	`b`	The Compiles the Angular app into an output directory ( Default is dist)
`test`	`t`	Runs unit tests in a project.
`e2e`	`e`	Builds and serves an Angular app, then runs end-to-end tests using Protractor.
`config`		Retrieves or sets Angular configuration values.
`doc`	`d`	Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
`lint`	`l`	Runs linting tools on Angular app code in a given project folder.
`xi18n`		Extracts i18n messages from source code.

Getting Help


ng help

ng help

Getting help on individual commands us the syntax ng [command name] --help. For Example


ng add --help       //help on add command
ng new --help       //help on new command

ng add --help //help on add command

ng new --help //help on new command

Creating the Application with ng new

The ng new command is used to create new folder and creates an App with the provided name.


ng new

ng new

The command will ask you

What name would you like to use for the project?
Enter the name of the project here. “GettingStarted”
Would you like to add Angular Routing?
Answer this as Yes unless you do not want to add Angular Routing.
Which stylesheet format would you like to use?
You arrow keys to select the available options from CSS, SCSS, SASS, LESS, and Stylus

The above command will create a folder GettingStarted and copies all the required dependencies and configuration settings. The Angular CLI does the following

Creates a new directory GettingStarted is created
Downloads and installs Angular libraries and any other dependencies
Installs and configures TypeScript.
Installs and configures Karma & Protractor for testing
Initialises the Git.

Running the Application

To run the application cd into the folder and run either ng server or use npm start (which runs the ng serve behind the scene)


cd gettingStarted
ng serve         // or npm start

cd gettingStarted

ng serve // or npm start

Now open the browser and enter the URL http://localhost:4200/ and you should be able to see Welcome to GettingStarted! Message

ng new options

Options	Alias	DESCRIPTION
`--dry-run`	`-d`	Run through without making any changes.
`--force`	`-f`	Forces overwriting of any existing files in the project folder
`--verbose`	`-v`	Displays the out of the command
`--collection`	`-c`	Schematics to use. For more info on Schematics click here.
`--inline-style`	`-s`	Use inline style rather than the external StyleSheet file. does not create external Stylesheets
`--inline-template`	`-t`	Does not create an external template file for the component. Specifies if the template will be in the ts file.
`--view-encapsulation`		Specifies the view encapsulation strategy. Three Options are available here `Emulated`, `Native` &. `None` Default is `Emulated`
`--routing`		Generates a routing module. If the option is not specified, it will ask for the confirmation
`--prefix`	`-p`	The file extension to be used for style files. The values available are `CSS`, `SCSS`, `SASS`,`LESS`,and `Stylus`. If the options are not specified, it will ask to select the appropriate style when running the command
`--skip-tests`	`-S`	Skip creating test spec files. This option does not seem to remove the test related files. Check the bug report here. Use the `--minimal` option instead
`--skip-package-json`		Do not add dependencies to `package.json`
`--minimal`		Installs the minimal set of features. Does not create test files. Creates inline style & templates

ng new example


//creates with new project with Style CSS
ng new gettingStarted --routing  --style CSS

//creates the new project with HelloWorld_root as the selector
ng new HelloWorld --routing  --style CSS -p HelloWorld

//creates with new project with Style CSS

ng new gettingStarted --routing --style CSS

//creates the new project with HelloWorld_root as the selector

ng new HelloWorld --routing --style CSS -p HelloWorld

ng generate


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

ng generate <schematic> [options]

ng g <schematic> [options]

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

schematic	Syntax	DESCRIPTION
`appShell`	`ng g appShell [options]`	Generate an App shell. Read about App Shell from here
`application`	`ng g application [options]`	Generates an application
`class`	`ng g class [options]`	Generates Class file
`component`	`ng g component [options]`	Generates a component
`directive`	`ng g directive [options]`	Generates a Directive
`enum`	`ng g enum [options]`	Generates an enum
`guard`	`ng g guard [options]`	Generates a Guard Component
`interface`	`ng g interface [options]`	Generates an Interface
`library`	`ng g library [options]`	Generates a Library
`module`	`ng g module [options]`	Generates a Module
`pipe`	`ng g pipe [options]`	Generates a Pipe
`service`	`ng g service [options]`	Generates a Service class
`serviceWorker`	`ng g serviceWorker [options]`	Generates a Service worker
`universal`	`ng g universal [options]`	Generates a Universal

Common options

The following are the common options of the ng g command

OPTION	Alias	Default	DESCRIPTION
`--defaults=true\|false`		false	When true, disables interactive input prompts for options with a default
`--dryRun=true\|false`	`-d`	false	When true, run through and report activity without writing out results.
`--force=true\|false`	`-f`	false	When true, force overwriting of existing files
`--help= true\|false\|json\|JSON`		false	Shows a help message for this command in the console.
`--interactive=true\|false`		false	When false, disables interactive input prompts.

Component

The following command generates the component.

ng g component <name> [options]

Examples

ng g component Hello

The above command does the following

Creates the Hello folder under the src/app folder
Create the HelloComponent along with CSS, Spec & Template file under the Hello folder
Imports the HelloComponent in the root module and adds it to the declarations array
The CSS selector use the format app-<name>. i.e app-hello

Run these commands from the root folder of the application.

ng g component --flat Hello does not create the hello folder. The component is created in the src/app folder.

ng g component --flat hello/hello creates the component under src/app/hello folder

ng g component --export hello adds the component to the exports metadata array of the module.

ng g component --prefix=myapp hello uses the CSS selector as myapp-hello.

ng g component --selector=hi --force hello uses the selector as hi

generate component inside module

ng g module account generates the code for account module

ng g component --module=account account/hello adds the component to the account module

ng g component --module=account hello this works provided the current directory is module directory i.e src/app/account

The following is the list of all available options

OPTION	Alias	Default	DESCRIPTION
`--changeDetection= Default\|OnPush`	`-c`	Default	Specifies the change detection strategy.
`--entryComponent= true\|false`		false	Specifies if the component is an entry component of declaring module.
`--export=true\|false`		false	Specifies if declaring module exports the component.
`--flat= true\|false`		false	Flag to indicate if a directory is created.
`--inlineStyle= true\|false`	`-s`	false	Specifies if the style will be in the ts file.
`--inlineTemplate=true\|false`	`-t`	false	Specifies if the template will be in the ts file.
`--lintFix= true\|false`		false	Specifies whether to apply lint fixes after generating the component.
`--module= module`	`-m`	root module	Allows specification of the declaring module.
`--prefix= prefix`	`-p`		The prefix to apply to generated selectors.
`--project= project`			The name of the project.
`--selector= selector`			The selector to use for the component.
`--skipImport= true\|false`		false	Flag to skip the module import.
`--spec= true\|false`		true	Specifies if a spec file is generated.
`--styleext= styleext`		css	The file extension to be used for style files
`--viewEncapsulation= Emulated\| Native\| None\| ShadowDom`	`-v`	Emulated	Specifies the view encapsulation strategy.

Directive

ng g directive <name> [options] is used to generate the directive. For Example ng g directive Some generates the Some.Directive.ts. The following code is generated. It also generates the some.directive.spec.ts


import { Directive } from '@angular/core';

@Directive({
  selector: '[appSome]'
})
export class SomeDirective {

  constructor() { }

}

import { Directive } from '@angular/core';

@Directive({

selector: '[appSome]'

})

export class SomeDirective {

constructor() { }

}

The above command does not create the folder. You can use the ng g directive directive/Some, which will create the directive under the folder directive.

You can use the command ng g directive --flat=false Some, which will create the directive under the folder Some (folder name is same as the directive name)

You can use the --force flag to force overwriting of the files, if the files already exists

Use the--module flag to add the directive to a module other than the root module.

Use the --prefix or --selector flag to change the CSS Selctor.

You can use the --export & --skipImport to add the directive to exports and imports metadata of the module

The following is the complete list of available options

OPTION	Alias	Default	DESCRIPTION
`--export=true\|false`		false	Specifies if declaring module exports the component.
`--flat= true\|false`		true	Flag to indicate if a directory is created.
`--lintFix= true\|false`		false	Specifies whether to apply lint fixes after generating the component.
`--module= module`	`-m`	root module	Allows specification of the declaring module.
`--prefix= prefix`	`-p`		The prefix to apply to generated selectors.
`--project= project`			The name of the project.
`--selector= selector`			The selector to use for the component.
`--skipImport= true\|false`		false	Flag to skip the module import.
`--spec= true\|false`		true	Specifies if a spec file is generated.

Pipe

ng generate pipe <name> [options] is used to generate the pipe. For Example ng g pipe Date generates the date.pipe.ts. The following code is generated. It also generates the date.pipe.ts.spec.ts


import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'date'
})
export class DatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

name: 'date'

})

export class DatePipe implements PipeTransform {

transform(value: any, args?: any): any {

return null;

}

The above command does not create the folder. You can use the ng g pipe pipes/Date, which will create the pipe under the folderpipes.

You can use the command ng g pipe --flat=false Date, which will create the pipe under the folder Date (folder name is same as the pipe name)

You can use the --force flag to force overwriting of the files, if the files already exists

Use the--module flag to add the pipe to a module other than the root module.

You can use the --export & --skipImport to add the directive to exports and imports metadata of the module

The following is the complete list of available options

OPTION	Alias	Default	DESCRIPTION
`--export=true\|false`		true	Specifies if declaring module exports the component.
`--flat= true\|false`		true	Flag to indicate if a directory is created.
`--lintFix= true\|false`		false	Specifies whether to apply lint fixes after generating the component.
`--module= module`	`-m`	root module	Allows specification of the declaring module.
`--project= project`			The name of the project.
`--skipImport= true\|false`		false	Flag to skip the module import.
`--spec= true\|false`		true	Specifies if a spec file is generated.

Service

ng generate service <name> [options] is used to generate the service. For Example ng g service Data generates the data.service.ts &data.service.ts.spec.ts. The following is the sample code generated by the command


import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }
}

import { Injectable } from '@angular/core';

@Injectable({

providedIn: 'root'

})

export class DataService {

constructor() { }

}

The above command does not create the folder. You can use the ng g service services/Data, which will create the service under the folderservices.

You can use the command ng g service --flat=false Data, which will create the service under the folder Data (folder name is same as the service name)

OPTION	Default	DESCRIPTION
`--flat= true\|false`	true	Flag to indicate if a directory is created.
`--lintFix= true\|false`	false	Specifies whether to apply lint fixes after generating the component.
`--project= project`		The name of the project.
`--spec= true\|false`	true	Specifies if a spec file is generated.

class

ng generate class <name> [options] is used to generate the class. For Example ng g class customer generates the customer.ts in the current folder. The following is the sample code generated by the command


export class Customer {
}

export class Customer {

}

Use the command ng g class class/customer to create the class under the class folder.

OPTION	Default	DESCRIPTION
`--project= project`		The name of the project.
`--spec= true\|false`	true	Specifies if a spec file is generated.
`--type=type`	default	Specifies the type of class

Module

use the ng g module <name> [options] command to generate the module. For Example ng g module account generates the account module under the folder src/app/account. The following code is generated


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class AccountModule { }

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

@NgModule({

declarations: [],

imports: [

CommonModule

]

})

export class AccountModule { }

ng g module account --module=app generates the account module and adds it to the imports metadata array of AppModule

ng g module account --routing=true --force. The --force flag overwrites the previously generated files. The --routing=true also creates the account-routing.module. The routes are registered with the forChild(routes)

ng g module account --force --routing=true --routingScope=Root registers the routes with the forRoot(routes)

Adding Components, Pipes, Directives to module

You can add component, directive, pipe & services to module by using the flag --module=[ModuleName] and naming the component as [ModuleName]/[ComponentnNme].

For Example, The following commands creats the account module and adds the HelloComponent, SomeDirective, DataSerivce & DatePipe to the module


ng g module account
ng g component --module=account account/hello
ng g directive --module=account --flat=false account/Some
ng g service --module=account --flat=false account/Data
ng g pipe --module=account --flat=false account/Date

ng g module account

ng g component --module=account account/hello

ng g directive --module=account --flat=false account/Some

ng g service --module=account --flat=false account/Data

ng g pipe --module=account --flat=false account/Date

The following is the list of all the available options

OPTION	Alias	Default	DESCRIPTION
`--flat= true\|false`		false	Flag to indicate if a directory is created.
`--module=module`	-m		Allows specification of the declaring module.
`--project= project`			The name of the project.
`--routing=true\|false`		false	Generates a routing module.
`--routingScope=Child\|Root`		child	The scope for the generated routing.

ng update

The ng update command updates or upgrades the angular application and its dependencies to the latest version. Click on how to upgrade Angular to latest version for more information

Resources

The Angular CLI Command Reference

Summary

The Angular CLI helps to increase productivity by helping us to quickly create the app and add the component, pipes, services & directives etc to the module. The Angular CLI has lot more commands like serve, build, test, lint, e2e etc, which help us to build and distribute the applications. We will cover those in one of the future tutorial.

Angular Folder Strcture

Updating Angular