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,
- Create a new Angular application
- Run a development server which updates automatically when the code changes
- Add Components, modules etc to your Angular 2 application.
- 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!!