Learn Angular CLI in 5 minutes


Make sure you have node and npm installed and that they are available via the PATH variable on Windows.

npm install -g @angular/cli

Create a new application

This following command will create a new application called collegestash in your current directory.
This does npm install too by default. Here the –routing flag tells it to create a router and add it to the project. The –style scss also specifies that this project will be using scss (Saas) instead of css for styling.

ng new collegestash --routing --style scss
 cd collegestash

If you would like to be careful before you execute a command you can supply the -d flag which indicates a dry-run flag. The changes will not be written to disk, but you will be able to see the changes it will make in case the dry-run flag isn’t supplied.

ng new cs -d

installing ng You specified the dry-run flag, so no changes will be written. create .editorconfig create create src\app\app.component.css create src\app\app.component.html create src\app\app.component.spec.ts create src\app\app.component.ts create src\app\app.module.ts create src\assets\.gitkeep create src\environments\ create src\environments\environment.ts create src\favicon.ico create src\index.html create src\main.ts create src\polyfills.ts create src\styles.css create src\test.ts create src\ create src\tsconfig.spec.json create src\typings.d.ts create .angular-cli.json create e2e\app.e2e-spec.ts create e2e\app.po.ts create e2e\tsconfig.e2e.json create karma.conf.js create package.json create protractor.conf.js create tsconfig.json create tslint.json Project 'cs' successfully created.


ng g c login


ng generate component login

This generates a component called login in a separate folder.


ng g s login


ng generate service login

This generates a service called login but doesn’t add the provider, and generates it in the main folder. You need to specify --flat false to generate this in it's own folder. You can also the module in which you would like to include this by using the -m flag.

ng g s login -m app.module --flat false

If you know the folder where you would like to place the service. Then you could do the following to put it in a specific folder.

ng g s login/login -m app.module

Classes, Interfaces & enums

Generate typescript classes, interfaces and enums.

ng g cl models/classname
ng g i models/interfacename
ng g e models/enumname


Generate a pipe.

ng g p pipes/pipename


The following command generates a module called login in it’s own folder by default. No spec file is generated by default, hence we need to specify explicitly. You need to manually add this to your app.module to make sure they are linked together. Extra routing module gets created along with the required module.

ng g m login –spec true --routing 


Generate a guard for routing.

ng -g guard auth 


This should build the application and output the files in build bundles with webpack runtime, app code, polyfills, styles, angular and other vendor files. You can supply the --prod flag to make sure the app is ready for production.

ng build

To be able to view sources, install the following and run the next command.

npm i source-map-explorer –save-dev
node_modules/ .bin/source-map-explorer dist/main.bundle.js

ng build

Build Environment vs Build Target

Build Environment - Choosing an Environment
Build Target - Refers to choosing whether or not to optimize.


This serves the app and opens it in your default browser.

ng serve -o

Add External Libraries

You can use the angular-cli.json file and add them to styles and scripts arrays.


You can get away from the angular-cli dependency in the project.

ng eject

Unit Tests

Runs all unit tests in the project, namely *.spec.ts files. Watches for changes and re runs them. So if you open this in a new terminal then this will, automatically detect the changes you make in the other terminal to the files in the project.

ng test
ng test -sr

Setting the single run flag, can be best for use in Continuous Integration.

ng test -w false

Setting watch to false gets the same result as above.

ng test -cc

The above command is for code coverage which is in the coverage folder by default unless something different is specified in the angular-cli.json file.

End to end Testing

This runs the end to end tests.

ng e2e