Angular CLI Cheat Sheet
by jakblak via cheatography.com/61771/cs/15929/
Setup Notes
npm i -g @angular/cli Install latest version Certain Blueprints (components/modules) create a folder - unless a
ng -v check your CLI version folder has already been created. Use the --flat flag to prevent a folder from
being created. Service & Interface do not create folders.
ng --help show all commands in terminal
ng doc (component) open Angular documentation Remember to consider where components should reside. You may
want to add a login component inside an account module. This would be
Main Commands 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
ng new ng new myApp create a new project
account/login -m=account.
ng serve ng s -o compile and open
ng generate ng g create new component/route/service Yarn vs NPM
ng build ng b build for deployment in dist folder
Enable Yarn ng config -g cli.packageManager yarn
ng test test spec files
Enable NPM ng config -g cli.packageManager npm
ng e2e ng e end-to-end tests
ng lint ng l run linting ng update
ng update identify dependencies to update
ng update @angular/core update core/rxJS/TScript
ng add add libraries like Material
ng update @angular/material update Material
Common Flags
ng add - Schematics
COMMAND FLAG ALIAS DESCRIPTION
ng add @angular/pwa app manifest +
All --help list flags (new/s/g) service worker
All --dry-run -d show potential file changes ng add @ng-bootstrap/schematics add ng-Bootstrap
New --skip-tests -S no spec files
ng add @angular/material install Material
New --skip-install don't install dependencies
ng add @clr/angular@next install Clarity Design
New --prefix -p ng prefix for all selectors
New --skip-git -g don't add git
Material Schematics
New --style scss set up using SASS
ng g @angular/material:material-nav - Nav Menu
New --routing generates routing module -name=nav
Serve -prod run from production
ng g Cards
Serve -open -o opens in browser @angular/material:material-dashboard
--name=dash
ng g Table
@angular/material:material-table --
name=table
Makes it easy to add and update 3rd party libraries.
By jakblak Not published yet. Sponsored by CrosswordCheats.com
cheatography.com/jakblak/ Last updated 13th July, 2018. Learn to solve cryptic crosswords!
Page 1 of 2. http://crosswordcheats.com
Angular CLI Cheat Sheet
by jakblak via cheatography.com/61771/cs/15929/
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
--inline-style -s no CSS files
--inline-template -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 account/login -m new login Component added to
account account module
ng g s account/login -m new login Service added to account
account module
ng g i models/person new person Interface added to
models
ng new myApp -S -g -- new project no spec or git w/ routing
routing
By jakblak Not published yet. Sponsored by CrosswordCheats.com
cheatography.com/jakblak/ Last updated 13th July, 2018. Learn to solve cryptic crosswords!
Page 2 of 2. http://crosswordcheats.com
