In this article, we will see what Angular CLI is, why it was created, what you can do with it, how to install and how to use it for app development.

What is Angular CLI?

Angular CLI is a Command-Line-Interface that can be used to scaffold and create an application that follows best practices out of the box.

Why Angular CLI was created?

Creating an Angular app from scratch is a difficult and time-consuming task. If you are not using a code-generator tool, every time you create a new Angular app, you have to create a folder structure and add some files, most of which is boiler-plate code. When working in a team, how do you make sure everyone is following the Angular conventions and style guide? How do you create a build optimized for production? How to configure unit and end-to-end tests? To answer all these questions, the Angular team came up with Angular CLI which can help create projects, follow their style-guide, generate code, test, and create optimized builds.

What you can do with Angular CLI:

Create a new Angular application
Generate code(components, modules etc.)
Lint the code
Host the code in development server to preview your app while development.
Run unit tests
Run end-to-end(E2E) tests
Build your code for deployment to production

Prerequisites

NodeJS 6.9.0 or higher version is required to use Angular CLI. You can download it from NodeJS website.

To check the version of node, run command following command:

node -v

 

Installing Angular CLI

npm install -g @angular/cli

This will install Angular CLI globally on your machine.

After it is installed, you can check the version of the angular CLI:

ng -version

Depending upon the The result should be something like this:

Generate a New Angular Application

You can create a new Angular app using the following command:

ng new my-app

This command creates an Angular app in its folder named my-app. It also runs npm install to get all the packages it needs, generates unit tests and one end-to-end test.

Common ng new options:

Aliases are specified in parentheses wherever available, you might want to use them to shorten the command.

--routing: default false, configures routing

--prefix (-p) //Set prefix to apply to generated selectors.

--style: default 'css', can be 'less', 'scss' //Define your styles

--dry-run (-d): default false,  //Verify the file names, remove when ready to generate the app

--skip-install: skips npm install

--skip-tests (-S): default is true, skips creating tests

Go to angular-cli-new page to see all options for the new command.

 Example:

ng new test-app --routing --style scss --dry-run

This command, the app name is test-app, so project files will be created under folder test-app. Routing is configured for you and style file generated will be scss instead of css.

Since --dry-run is mentioned, it won't create any files yet, it just lists the files that will be generated for this command.

dry-run comes very handily if you want to see what files will be generated and where those files will be generated, so you can update the command before actually generating the files.

 If you run this command without --dry-run, the files will be actually generated. So, let's run the command:

ng new test-app --routing --style scss

Running the app

To run the application, go into the project folder:

cd test-app

and run:

ng serve

 It will start the Angular Live Development server on localhost:4200

 Now open any browser and go to localhost:4200, the app should be running:

 

 Apart from app, you can generate common angular features like Components, Services, NgModules using ng generate command. Let's see them all.

Generate Components

To generate a component with name navbar, run:

ng generate component navbar

 Instead of typing the full command, you may use aliases which make the command shorter:

ng g c navbar car // with aliases, g = generate, c = component

Other options:

 

Generate Directives

Let say we want to generate a directive my-ad-rotator:

ng g d my-ad-rotator

by default, a directive is not generated in a folder, if you like to generate it in a folder, run this instead:

ng g d my-ad-rotator --flat false

Other options:

Generating Services

To generate a service with name weather-info:

ng g s weather-info

Generating Classes, Interfaces, Enum

Class cat:

ng g cl cat

Interface animal:

ng g i animal

Enum gender:

ng g e gender

Generating Pipes

ng g p short-date

Generating NgModules

ng g m dashboard

 

Building the code

We can use build to compile the app to an output directory. All builds use bundling and production build adds uglification and tree-shaking.

Development Build

ng build command without any other parameters is for development, it generates code in the output folder specified in angular.json file, which is dist\test-app in our case.

ng build

You can see in the output it generated various js files and corresponding source maps.

Production Build

Production build is different from development build in many ways, overall development build is targeted to help faster development and production build is generally targeted to be secure and run faster. So, output file sizes in development are larger than in production.

ng build --prod

In production build:
Source maps are not generated.
Uglification is done.
Tree-Shaking is done.
AOT is performed.
Bundling is done.

 

Common ng build options

--sourcemap(-sm) //If you like to generate source-map in prod. It is on for development by default.

--aot //If you like to do AOT in the development build. It is on for prod by default.

--watch(-w) // Watch and rebuild.

--environment(-e) //Build environment

--target(-t) //Build target

--dev //Shortcut for dev environment and target

--prod //Shortcut for prod environment and target

Serving Angular

ng serve compiles the code and starts listening on port 4200 by default. It serves the compiled output from memory, which makes it faster and efficient for live reloads.

ng serve

By default ng serve does not open a browser, use -o switch to serve and open the app in default browser:

ng serve -o

Common options:

All build options are available with ng serve along with some extra options:
--open(-o) //Opens in the default browser, by default ng serve does not open the browser
--port(-p) //Port to listen when serving
--live-reload(-lr) //Reload when changes occur
--ssl //Serve using https
--proxy-config(-pc) //Proxy configuration file

Execute unit tests and end-to-end tests

Unit Tests

Angular CLI can run the unit tests you have written in spec files. It will execute tests on all *.spec.ts files.

ng test

I will run the unit tests and watch for any changes and run again if any change detected.

 

Common ng test options

--code-coverage (-cc) //Generate code coverage report, false by default
--colors //Enable/disable output colors, true by default
--single-run(-sr) //Executes test one time, no watching
--progress //Log progress to console, true by default
--sourcemaps(-sm) //Generate source-maps, true by default
--watch(-w) //Run test once, and watch, true by default

End to End Tests

To compile, serve and run e2e tests, run command:

ng e2e

Common ng e2e options

--config(-c), //Specify config file, default is protractor.conf.js
--element-explorer(-ee) //Open protractor element explorer
--serve(-s) // Serve on a random port, default true
--specs(-sp) // Override spect to test, by default tests all specs
--webdriver-update(-wu) // Try to update webdriver(default true)

 

To read more about Angular CLI, go to the official website and GitHub repo.