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 -dinstalling 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.
Componentng g c login
orng generate component login
This generates a component called login in a separate folder.
Serviceng g s login
orng 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
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
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 testng 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