Angular CLI cheatsheet

npm install -g @angular/cli

To create new application we need to type the command:

ng new 

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

cd 
ng serve -o

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

Angular CLI Cheat Sheet

ng new   # To create a new project

ng serve  # To host the project on 4200 port

ng serve --port no

> --host # To host application specific host/portWe 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  --spec # Want to generate spec file?

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  -cd # Short notation

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

Bonus Topic

Source Map Explorer

Source Map Explorer is a tool to view the treemap visualization to know where the code(from which file or module) is coming from. We can better understand it by using it.
To download the tool run the command as shown below:

npm install -g source-map-explorer

Now we have source map explorer installed globally.
To see the visualization firstly we need to build our angular app and then see the visualization. Please refer the command shown below:

ng build # To build the solution
source-map-explorer dist/main.bundle.js # Open a treemap visualization