Learn Angular CLI in 5 minutes

Install

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 README.md
 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\environment.prod.ts
 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\tsconfig.app.json
 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.

Component
ng g c login
or
ng generate component login
This generates a component called login in a separate folder.
Service
ng g s login
or
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
Pipes
Generate a pipe.
ng g p pipes/pipename
Modules
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 
Guard
Generate a guard for routing.
ng -g guard auth 
Build
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
Build Environment vs Build Target
Build Environment - Choosing an Environment
 Build Target - Refers to choosing whether or not to optimize.
Serve
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.
Eject
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.
 (or)
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
Related