A Beginner’s Guide to Angular CLI

10 May 2017 by Vignesh Selvaraj No comments
A Beginner's Guide to Angular CLI

What is Angular CLI?

For the uninitiated, Angular CLI is a Command Line Interface to build Angular apps quickly adhering to the best practices. Angular CLI has multiple advantages, some which are listed below for quick reference.
In this blog post, we’ll dwell on why we need Angular CLI, how to install it, how to use it i.e. the various commands that it offers to make our life easy. We’ll also look at how we can generate production ready builds using the angular CLI.

Why do we need Angular CLI?

  1. It creates and provides a scalable project structure
  2. It initializes a git repository and makes an initial commit.
  3. It handles all common tedious tasks out of the box.
  4. It generates initial HTML, typescript, CSS and unit test files.
  5. It creates a package.json with all the dependencies of Angular 2 and installs all the dependencies of node (npm install)
  6. It configures Karma to execute the unit tests with Jasmine
  7. It configures Protractor to execute the end-to-end tests.
  8. It creates all the files necessary to create a build of the application for production.

Let’s start with the basics

How to install Angular CLI ?

Please note that Angular CLI is a node package and it requires a node version > 4.

To check the node version on your machine. use the command – node -v

If you do not have node installed or you have node that is older than version 4. Then, you should consider updating the node. At the time of this blog post, the latest stable version of node is v7.9.0.

Once you have node installed, you also have the NPM (node package manager) installed. To check if you have npm installed, all you need to do is – npm -v

Now, we can install the Angular CLI using –

npm install -g angular-cli

Now we are ready to use Angular CLI

Using Angular CLI –

  1. ng new <<name_of_the_project>>

Creates an angular project with all the files, folders, packages, needed and npm install is executed.

Ex 1 – ng new hello-world (a project is created in the directory that you are currently on)

Ex 2 – ng new path/hello-world (Using a relative path)

Note –

Project name “01-test” is not valid. New project names must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter.

Project Structure – This is how an angular 4 project structure looks. 

  1. ng init

Creates an angular project in the current directory

mkdir name_of_the_project
// Creates a directory
cd name_of_the_project

ng init
  1. ng serve (also, ng server and ng s)

Serves an angular project via a development server. It’s very similar to “npm start”.

If the ng-serve is executed without any errors, then you should be able to check the result in localhost:4200/

Note – The default port used is 4200 and the live reload port used is 49512.

To use othert ports –

ng serve —port 4201 —live-reload-port 49153
  1. ng generate (also, ng g)

Creates Components, Services, Pipes, and other classes.

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

 

  1. Using pre-processors using Angular CLI

Using style flag during the creation of the angular project

ng new my-project —style=sass
ng new my-project —style=less
ng new my-project —style=stylus

Using ng set – To add or modify the preprocessor in an existing project-

ng set defaults.styleExt scss
ng set defaults.styleExt less
ng set defaults.styleExt styl
  1. ng lint

To perform the js lint. To check for errors like – unused imports, unexpected spaces, extra comma etc.

If we declare the variable in the below manner and run ng lint –

myVariable : String; ❌

Expected no space before colon in property-declaration.

myVariable: String;

  1. ng test

Executes the jasmine unit tests in the spec.ts files and returns the details of the total tests run and those that failed.

  1. ng e2e

Runs the end to end tests written using the Protractor framework in the e2e folder

  1. ng build

Generates a build (development build, production build).

The build is generated inside the dist folder, which is ignored by the version control.

Creating a Development build

ng build --target=development --environment=dev

OR

ng build --dev --e=dev

OR

ng build --dev

OR

ng build

Creating a Production build

ng build --target=production --environment=prod

OR

ng build --prod --env=prod

OR

ng build --prod

Note that the development build is neither obfuscated nor minified. Also, it doesn’t consider the browser caching which might lead to unexpected behaviour of the application.

  1. ng version

Returns the versions of angular-cli, node and the operating system.

  1. ng help

Outputs all the available angular cli commands.

Vignesh Selvaraj

Follow me on Twitter

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Blog

Get access to proven marketing ideas, latest trends and best practices.

Next up home

Contact

Lets build cool stuff

Share your contact information & we will get in touch!

I want (Tell us more about your dream project)