Setup Angular 2 Application Within Minutes Using Angular CLI

Setting up an Angular 2 application requires a lot of time. It's time consuming to create proper folder structure, config files, system.js file , environment file etc.

However we can quickly create an Angular 2 application using Angular 2 CLI.

What is Angular 2 CLI ?

Angular2 CLI is a Command Line Interface (CLI) which can automate your development.

It allows us to,
  1. Create a new Angular application
  2. Run a development server which updates automatically when the code changes
  3. Add Components, modules etc to your Angular 2 application. 
  4. Runs your application’s unit tests
This article demonstrates how we can do this. I assume you already know Angular 2. So lets get started. 

Step 1

First of course you should have node.js installed. If it's not already installed you can download and install it using this link,
Once installed open the command prompt and enter the below commands to check installation,
npm --version

Step 2

Now let's install Angular 2 CLI.

Open the command prompt and enter the below commands,

npm install -g angular-cli

This will install angular-cli NG commang globally. ( -g means install the component globally so that you can access the command across folders).

The installation will take couple of minutes After installation check it with the below command,
ng version

You should get the output as below,

Step 3

If the above installation went well we are now ready to create our Angular 2 application in no time. Open the command prompt, CD to the directory where you want to create your Angular 2 application and enter the below command 

ng new my-app 

So NG is the angular CLI command and my-app is the name of the application that you want to create. You can name your application whatever you want.

In a moment your new readymade angular 2 application will be created and now all you need is to customize it without worrying about the long setups.

You can open the newly created my app folder and see all files required by angular 2 were created like the package.json, tslint.json etc.  Under src folder you'll  get app folder where all the components will be, including  index.html, tsconfig.json etc.

Step 4

Let's check the new application that Angular 2 CLI created for us.

First CD to your newly created my-app folder. Then run the below NG command.

cd my-app
ng serve

This will start the local development server at port 4200.

Step 5

Open the web browser and enter http://localhost:4200

You will get the output:

app works!

Please go to the below link for angular2-cli command list,Angular 2 CLI Commands

Hope this article will help you in creating Angular 2 startup application in minutes.

Thanks for reading!!

Recommended Free Ebook
Similar Articles