Angular CLI Cheat-Sheet

The Angular team has brought in a really handy tool to bootstrap Angular application and also to add a new feature to the app. The tool is known as angular-cli.

To install angular-cli to the system we need to install nodeJS. One we have installed it we need to install npm dependency angular-cli globally. To install it open terminal/ command prompt and run a command:

npm install -g @angular/cli

This will install an angular-cli package globally and now we can create a new application. To create new application we need to type the command:

ng new <project name> 

One we have project ready, go to the project directory and serve the application:

cd <project name>
ng serve

This will serve the application on 4200 port. That’s it.

Below is the cheatsheet file that can help you to quickly refer and run the commands. If any point in time you need more clarity on angular cli commands please refer document.

Angular CLI Cheat Sheet

ng new <project name>  # To create a new project

ng serve  # To host the project on 4200 port

ng serve --port <port no> --host <host name> # To host application specific host/port
 

We can use a short alias as well:
ng s --p <port no> --h <hostname>

Some other helpful commands

ng lint # To lint and look for JavaScript errors

ng lint --format stylish # Linting and formatting the output

ng lint --fix # Lint and attempt to fix all the problems
 
ng build # to build a project in the dist folder
 
ng build ---target  # Target for which we want to build
 
ng build --prod # To build in production mode

ng test # To run spec files

ng e2e # To run e2e test cases

ng doc # To look for angular documentation

ng help # To get help on angular cli commands

To change the .angular-cli.json config

ng set # to change properties

# For e.g. ng set default.styleExt scss

# ng set default.styleExt scss -g -- To set in global angular-cli file

Components

ng generate component  # To generate new component

ng g c  # Short notation to generate component

ng g c  --flat # Want to generate folder name as well?

ng g c  --inline-template # Want to generate HTML file?

ng g c  -it # Short notation

ng g c  --inline-style # Want to generate css file?

ng g c  -is # Short notation

ng g c  --view-encapsulation # View encapsulation stratergy

ng g c  -ve # Short notation

ng g c  --change-detection # Change detection strategy

ng g c  --dry-run # To only report files and don't write them

ng g c  -d # Short notation

ng g c  -m  -d 

# Name of module where we need to add component as dependency

Directives and services

ng generate directive  # To generate directive

ng g d  # short notation

ng g d  -d # To only report files and don't write them

ng generate service  # To generate service

ng g s  # short notation

ng g s  -d # To only report files and don't write them

ng g s  -m 

# Name of module where we need to add service as dependency

Classes, Interface, pipe, and enums

ng generate class  # To generate class

ng g cl  # short notation

ng generate interface  # To generate interface

ng g i  # short notation

ng generate pipe  # To generate pipe

ng g p  # short notation

ng generate enum  # To generate enum

ng g e  # short notation

Module and Routing

ng generate module  # To generate module

ng g m  # To short notation

ng g m  --spec true -d # To generate spec file for the module

ng g m  --routing # To generate module with routing file

ng g guard  # To generate guard to route

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here