Categories
Uncategorized

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.

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.

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.

or

This generates a component called login in a separate folder.

Service

or

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.

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.

Classes, Interfaces & enums

Generate typescript classes, interfaces and enums.

Pipes

Generate a pipe.

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.

Guard

Generate a guard for routing.

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.

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

ng build

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.

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.

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.

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

Setting watch to false gets the same result as above.

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.