Scribd
Upload
33 views

Angular Cli

This document provides a cheat sheet for common commands and workflows when using the Angular CLI. It lists CLI commands for generating components, modules, services and other code artifacts. It also describes flags for configuring generation options and outlines some examples of using the CLI to build out an Angular application structure.

Uploaded by

Hamdi Thabet
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Angular Cli

This document provides a cheat sheet for common commands and workflows when using the Angular CLI. It lists CLI commands for generating components, modules, services and other code artifacts. It also describes flags for configuring generation options and outlines some examples of using the CLI to build out an Angular application structure.

Uploaded by

Hamdi Thabet
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Angular CLI Cheat Sheet

by jakblak via cheatography.com/61771/cs/15929/

Setup Notes

npm i -g @angul​ar/cli  Install latest version Certain Bluep​rints (com​pon​ent​s/m​odu​les) 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. Serv​ice & Inte​rface do not create folders.
ng --help  show all commands in terminal

ng doc (compo​nent)  open Angular docume​ntation 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
accoun​t/login -m=acc​ount.
ng serve ng s -o compile and open

ng generate ng g create new compon​ent​/ro​ute​/se​rvice Yarn vs NPM


ng build ng b build for deployment in dist folder
Enable Yarn ng config -g cli.pa​cka​geM​anager yarn
ng test test spec files
Enable NPM ng config -g cli.pa​cka​geM​anager npm
ng e2e ng e end-to-end tests

ng lint ng l run linting ng update


ng update identify depend​encies to update
ng update @angul​ar/​core update core/r​xJS​/TS​cript
ng add add libraries like Material
ng update @angul​ar/​mat​erial update Material

Common Flags
ng add - Schematics
COMM​AND FLAG ALIAS DESC​RIP​TION
ng add @angul​ar/pwa app manifest +
All --help list flags (new/s/g) service worker
All --dry-run -d show potential file changes ng add @ng-bo​ots​tra​p/s​che​matics add ng-Bootstrap
New --skip​-tests -S no spec files
ng add @angul​ar/​mat​erial install Material
New --skip​-in​stall don't install depend​encies
ng add @clr/a​ngu​lar​@next install Clarity Design
New --prefix -p ng prefix for all selectors

New --skip-git -g don't add git


Material Schema​tics
New --style scss set up using SASS
ng g @angul​ar/​mat​eri​al:​mat​eri​al-nav - Nav Menu
New --routing generates routing module -name​=nav
Serve -prod run from production
ng g Cards
Serve -open -o opens in browser @angul​ar/​mat​eri​al:​mat​eri​al-​das​hboard
--name​=dash

ng g Table
@angul​ar/​mat​eri​al:​mat​eri​al-​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

--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 new login Component added to


account account module

ng g s accoun​t/login -m new login Service added to account


account module

ng g i models​/pe​rson 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

You might also like