Setting up your first Angular(2) Project Using Angular CLI

by
Angular CLI

Angular CLI is a command line tool which makes it easy for creating and scaffolding an application that works and follows solid practices.

Installation

Note: Before you install angular-cli make sure you have
1. Node 6.9.0 or higher (node -v)
2. NPM 3 or higher (npm -v)


 To Install the Angular CLI

npm install -g angular/cli

That’s it!, Now we can start using Angular CLI

Creating a New Project

ng new [project-name]

This will take a time becaue it will generate a project and also it will install all npm packages

You can also add options:

ng new [project-name] [--option]


Options (ng new)

There are multiple options availbale for ng new command:

routing
--routing
It generates routing module which is app.module.ts 

ng new jslovely --routing

prefix
–prefix
It will generate component selector with specified prefix name.
Default prefix value is app.
-To change the default prefix value:

 ng new jslovely --prefix myapp

Now it will generate all component selector with myapp prefix

style
–style
The style file default extension. Default extension is:css
Possible values are:

  • css
  • scss
  • less
  • sass
  • styl
ng new jslovely style scss

skip-install
–skip-install
It will skip installing npm packges.

ng new jslovely --skip-install

skip-tests
–skip-tests
It will skip creating .spec files and e2e functionality

ng new jslovely --skip-tests

There are many more options available,I just mentioned some of those which are more often used.
You can find more options here: https://github.com/angular/angular-cli/wiki

 Also there is a nice video for Angular CLI by John Papa: https://www.youtube.com/watch?v=h7eVZg3j_Lk

2 thoughts on “Setting up your first Angular(2) Project Using Angular CLI”

  2. Currently Angular CLI doesn't support an option to remove the component,
    you need to do it manually.
    1)You need to remove the component directory(assuming you didn't use –flat at the time of creation of component, if so remove the related files)
    2)Remove import and declaration sentence from the NgModule file(from app.module.ts).

    Reply

Leave a Comment