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.

Steps:

1.      Download Node JS

Go to https://nodejs.org/en/

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

Run the installer.

nodejs
Node JS Homepage

2.      Download Visual Studio Code

Go to https://code.visualstudio.com/

Download the stable build.

Run the installer.

vs-code
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>

new-project
Creating a new Angular 2 Project

 

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

SCSS:

ng new <project name> –style=scss

SASS:

ng new <project name> –style=sass

LESS:

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-sample-project
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”: [
“../node_modules/jquery/dist/jquery.js”,
“../node_modules/tether/dist/js/tether.js”,
“../node_modules/bootstrap/dist/js/bootstrap.js”
],

Finally, add the bootstrap CSS to the styles array.

“styles”: [
“../node_modules/bootstrap/dist/css/bootstrap.css”,
“styles.css”
],

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

project

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!

app-works

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s