Setting Up Your Angular 2 Workspace + CSS Preprocessor + Bootstrap

So you want to start your Angular 2 project, well you’re in luck! Follow these steps and you’ll be ready to create your first Ng-2 application.

For this setup, we will be using Visual Studio Code as the development environment. If you’re not familiar with it, Visual Studio Code is a light-weight IDE from Microsoft.


1.      Download Node JS

Go to

Download the most stable version. As of writing, the most stable is v6.9.5.

Run the installer.

Node JS Homepage

2.      Download Visual Studio Code

Go to

Download the stable build.

Run the installer.

Visual Studio Code Home Page

3.      Install Angular-CLI

This is not actually required in setting up your Angular 2 development environment but it is of great help in automating most of the tasks, like generating a new project.

This is a step you only need to do once since the command below will install angular-cli globally.

Open a command prompt.

Type the command below:

npm install -g angular-cli

4.      Create the Project

We will use the newly installed Angular-CLI to create a project.

Open the command prompt and go to the folder you want to create a project in.

Run the command below:

ng new <project name>

Creating a new Angular 2 Project


If you want to use a CSS preprocessor, run the command below:


ng new <project name> –style=scss


ng new <project name> –style=sass


ng new <project name> –style=less

After this, you now have your Angular 2 project. Open Visual Studio Code and select the project folder created. Once opened, it should look like this.

Angular-CLI Generated Project

5.      Let’s add Bootstrap

On Visual Studio Code, open the integrated terminal: Ctrl + `

Run the command below:

npm install bootstrap@next –save

This should install all the dependencies needed for bootstrap.

Next, let’s make sure that the scripts and styles from bootstrap will be used by the project.

Open angular-cli.json

Add the following references in the scripts array.

“scripts”: [

Finally, add the bootstrap CSS to the styles array.

“styles”: [

Your angular-cli.json file should look something like this.


6.      Let’s run the project.

On the integrated terminal (Ctrl + `), run the following command.

npm install

This will install all the needed package dependencies of the project.

npm start

This will start script in your package.json.

On your browser, open http://localhost:4200

There you have it! You now have your first Angular 2 App!


If you liked this tutorial, please give it a like, comment, or share!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s