• Rahul Prabhune

Angular CLI

Updated: Dec 20, 2017


Angular CLI is a Command Line Interface (CLI) which will help you to automate your development workflow.


Prerequisites

Node.js 6.9.0 and npm 3.0.0 or higher version is needed to user Angular CLI in your system. You can download the latest version of Node.js for your operating system from the official Node.js website. If you need you can find installation instructions there.

You can check version of your installed Node.js and npm using

node –v # => for Node.js version
npm -v # => for npm version


Installing Angular CLI

npm install -g @angular/cli@latest

This command will install the latest version of Angular CLI.

-g will install ng command globally on your computer.


Updating Angular CLI

To update your Angular CLI run

npm uninstall -g angular-clinpm uninstall --save-dev angular-cli

Checking CLI version

To check your running Angular CLI version run:

ng –version


Generating a new Angular Project

ng new my-project

This command will generate a new Angular project in the current directory. It also installs all npm dependencies and environment file with default settings.

If you want to avoid installing npm dependencies run:

ng new my-project -–skip-install

This will create a project without installing npm dependencies.

If you want more description of project creation use –verbose

ng new my-project –verbose


Changing default style

If you don’t want to use default CSS for styling, you select LESS or SCSS during project creation

ng new my-project --style=scss

This will generate a project name “my-project”. Where default style file is the .scss type.

ng new my-project --style=less

This will generate a project name “my-project”. Where default style file is the .less type.


Generating Components

ng generate component my-component

This will generate my-component and insert it to the module. You can also write this command as,

ng g c my-component


Generating Services

ng generate service my-service

This will generate my-service, but it won’t add this service to providers array in the module. So you have to do that manually. You can also write this command as,

ng g s my-component


Generating Pipe

ng generate pipe my-pipe

This will generate my-pipe. You can also write this command as,

ng g pipe my-pipe


Generate a directive

ng generate directive my-directive

This will generate my-directive. You can also write this command as,

ng g directive my-directive


Generate an enum

ng generate enum my-enum

This will generate my-enum. You can also write this command as,

ng g enum my-enum


Generate a module

ng generate module my-module

This will generate my-module. You can also write this command as,

ng g module my-module


Generate a class

ng generate cl my-class

This will generate my-class. You can also write this command as,

ng g cl my-class


Generate an interface

ng generate interface my-interface

This will generate my-interface. You can also write this command as,

ng g interface my-interface


Generate a route guard

ng generate guard my-guard

This will generate my-guard. You can also write this command as,

ng g guard my-guard


Building Project

ng build

This will build and bundle your application for deployment. You can run

ng build –prod

This will build your application in production environment.


Serving Project

ng serve

This command will serve your project.

ng s –o

This command will serve your project and open in your default browser.

ng s -–port=1234

This will serve your project at port 1234. The default port is 4200.


Running Unit Tests

ng test

This command will start running all unit tests in your project.


Running End-to-end tests

ng e2e

This will serve the application and runs the end-to-end test.