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

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!

If you enjoyed this article and want to learn more about Angular, check out our compendium of tutorials and articles from JS to 8.

angular, angular tutorial, web application development, web dev

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}