Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Angular CLI Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Setup

npm i -g @angul­ar/cli
Install latest version
ng -v
check your CLI version
ng --help
show all commands in terminal
ng doc (compo­nent)
open Angular docume­ntation

Main Commands

ng new
ng new myApp
create a new project
ng serve
ng s -o
compile and open
ng generate
ng g
create new compon­ent­/ro­ute­/se­rvice
ng build
ng b
build for deployment in dist folder
ng test
  
test spec files
ng e2e
ng e
end-to-end tests
ng lint
ng l
run linting
ng update
  
identify depend­encies to update
ng add
  
add libraries like Material

Common Flags

COMMAND
FLAG
ALIAS
DESCRI­PTION
All
--help
  
list flags (new/s/g)
All
--dry-run
-d
show potential file changes
New
--skip­-tests
-S
no spec files
New
--skip­-in­stall
  
don't install depend­encies
New
--prefix
-p ng
prefix for all selectors
New
--skip-git
-g
don't add git
New
--style scss
  
set up using SASS
New
--routing
  
generates routing module
Serve
-prod
  
run from production
Serve
-open
-o
opens in browser

Notes

Certain Blueprints (compon­ent­s/m­odules) create a folder - unless a folder has already been created. Use the --flat flag to prevent a folder from being created. Service & Interface do not create folders.
 
Remember to consider where components should reside. You may want to add a login component inside an account module. This would be done by first creating the module ng g m account --routing then adding the login component inside account and importing it the correct module ng g c accoun­t/login -m=account.

Yarn vs NPM

Enable Yarn
ng config -g cli.pa­cka­geM­anager yarn
Enable NPM
ng config -g cli.pa­cka­geM­anager npm
 

ng update

ng update @angul­ar/core
update core/r­xJS­/TS­cript
 
ng update @angul­ar/­mat­erial
update Material

ng add - Schematics

ng add @angul­ar/pwa
app manifest + service worker
 
ng add @ng-bo­ots­tra­p/s­che­matics
 
ng add @angul­ar/­mat­erial 
install Material
 
ng add @clr/a­ngu­lar­@next
 
Material Schematics
 
ng g @angul­ar/­mat­eri­al:­mat­eri­al-nav --name=nav
Nav Menu
 
ng g @angul­ar/­mat­eri­al:­mat­eri­al-­das­hboard --name­=dash
Cards
 
ng g @angul­ar/­mat­eri­al:­mat­eri­al-­table --name­=table
Table
Makes it easy to add and update 3rd party libraries.

Blueprints

component
c
service
s
pipe
p
interface
i
module
m
class
class
--flat
  
don't create a folder
--spec false
-S
no spec files
--inli­ne-­style
-s
no CSS files
--inli­ne-­tem­plate
-t
no HTML files
--skip­-import
  
don't add to module
--dry-run
-d
report files, don't write
-m
-m
specify which module to import into
Blueprints - The concept angular uses to generate code.

Blueprint Examples

ng g m account
create account Module along w/ folder
 
ng g c accoun­t/login -m account
new login Component added to account module
 
ng g s accoun­t/login -m account
new login Service added to account module
 
ng g i models­/person
new person Interface added to models
 
ng new myApp -S -g --routing
new project no spec or git w/ routing