Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Setting Up Your First Angular 2 Project

DZone's Guide to

Setting Up Your First Angular 2 Project

In this post, we cover the basics of setting up a project in Angular, from installing the CLI to running the ng serve command.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

Prerequisites for an Angular 2 Project 

1. Node 4.x.x or higher

2. Npm 3.x.x or higher

If you have already installed the above, verify that you are running at least node 4.x.x and npm 3.x.x or higher by running node -v and npm -v (check the version you are running) in a terminal/console window.

Setting Up a New Angular 2 Project 

Step 1. Set Up the Development Environment.

For building an Angular 2 project, you need to have the Angular CLI (command line interface).

The Angular 2 CLI makes it easy to create an application via the terminal.
Without the Angular CLI, you cannot create any component or service via the terminal.

Install the Angular-CLI globally.

npm install -g angular-cli 


Step 2. Create a New Project

Open a terminal window.

Generate a new project and skeleton application by running the following commands:

ng new my_first_angular_app

This will create a skeleton Angular 2 application. You can check the default folder structure.

By default, it will have a styles.css file in which you can write your styles.

But if you want to create an Angular project using SASS, you need to run the following command:

ng new my_first_angular_app --style=scss


Step 3: Serve the Application

Go to the project directory and install node modules in your project directory. Then launch the server using the ng serve command.

cd my_first_angular_app 

Once you are inside your project app folder, run the following code:

ng serve

The ng serve command launches the server, watches our files, and rebuilds the app as you make changes to the files.

Open a browser on http://localhost:4200/; the app greets us with a message:

Our app works!

I hope this helps!

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
web dev ,angular ,web application development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}