Angular · Node · Visual Studio

Angular 2 in Visual Studio 2015

If you are like me and have been a little stuck in running projects with angular 1 in Visual Studio getting stuff you need from nuget, and have questions around Node, Npm, Grunt, Gulp, Bower, and how/why you should move forward using the new stack for web development. I will show you a simple way to get starting with a simple Angular 2  project in Visual Studio 2015 .

You can download the sample project here

First thing first. I will not go deep into any of the topics, but provide you with a small guide to get your project started in some small simple steps. In my opinion, digging deeper into all new technologies is easier when you have a Hello World sample actually working.

Here are the steps:

If you don’t have Node installed on your developer computer, you can install it here.
This will install Node and Npm for you. After installing Node you can check if it is up and running by opening a cmd: typing “node -v” and “npm -v”

ang1

The first step is to create a new project in Visual Studio 2015. I am running VS2015 Update 3. The project template you should use is “HTML Application with TypeScript”. (If you don’t have this template in Visual Studio you have to download this extension)

ang2

Next, remove the 3 following files. “app.css”, “app.ts” and “index.html”, and create a new clean “index.html” file in your project.

ang3

Next we need to get Node, TypeScript, Typings and the bootstrapper for angular 2 up and running. For this you need to create 4 files. All this is explained perfectly here  if you want the latest versions of Angular 2, or you can copy it from this project.

1. A npm Configuration File: “package.json”
2. A TypeScript Configuration File: “tsconfig.json”
3. A json File: “typings.json”
4. A Javascript File: “systemjs.config.js”

Now your project structure should look like this:

ang4

If you notice that npm is fetching dependencies when you save you “package.json” file in the project you are on the right track. If you open your projects folder in explorer, you will see that you have a new folder called “node_modules”

ang5

If for some reason npm is not reacting with fetch when you save your “package.json” in Visual Studio you are probably missing the environment settings for node and npm. You can find this going to “Debug -> Options -> Projects and Solutions -> External Web Tools”. Make sure you have a path to your nodejs folder.

ang6

You can also open a cmd and navigate to your project folder to get all your dependencies with npm.
Type “npm install” in your project folder:

ang7

Next step is to create a “app” folder in your project and add 2 files. You have already mapped this in your systemjs.config.js file and it expects an “app” folder with a “main.js” file.

I have added 2 TypeScript files in my “app” folder: “main.ts” and “first.component.ts”.

ang8

In first.component.ts I have the following code:

import { Component } from ‘@angular/core’;

@Component({
selector: ‘my-firstcomponent’,
template: `
<h2>{{first.content}}</h2>
<h2 [innerText]=”first.content”></h2>
<h1 [style.color]=”color”>{{first.content}}</h1>
`
})
export class FirstComponent {
first = { content: ‘Hello World’ };
color = ‘green’;
}

Unlike Angular 1, where we had a Controller bound to our html page and some functions inside. In Angular 2 we are using a Component. What we do is define a class (in this sample FirstComponent) and then we have our decorator (or the class metadata if you will) called @Component that defines our template we want to show on our html page. The selector is to tell where we want to show our template in our html. Make sure you import Component from angular’s core that will allow us to use the @Component decorator.

In main.ts I have the following code:

import { bootstrap } from ‘@angular/platform-browser-dynamic’;
import { FirstComponent } from ‘./first.component’;

bootstrap(FirstComponent)
.then(success => console.log(`Bootstrap success`))
.catch(error => console.log(error));

In Angular 1 we bootstrapped our application by adding ng-app=”app” on our top level html code or by code. In Angular 2 we also need to bootstrap our application. We do this by code, and since we know from systemsj.config.js that we are starting our application on app/main.js the first thing we need to do is import the angular 2 bootstrapper. You will find the bootstrapper in this module “@angular/platform-browser-dynamic”. Since we have and Export class FirstComponent we can import that component here in our main.ts.

The last thing you need to do is to add a few lines of code on your index.html file for dependencies and to get everything bootstrapped.

<!DOCTYPE html>
<html>
<head>
<title>Hello World – Visual Studio – Angular 2</title>
<meta charset=”utf-8″ />
<!–Change this if you are not running your application on the root–>
<base href=”/” />
<!– Polyfill for older browsers –>
http://node_modules/core-js/client/shim.min.js
http://node_modules/zone.js/dist/zone.js
http://node_modules/reflect-metadata/Reflect.js
http://node_modules/systemjs/dist/system.src.js
<!– Configure SystemJS –>
http://systemjs.config.js

System.import(‘app’).catch(function (err) { console.error(err); });

</head>
<body>
<my-firstcomponent>Loading My First Compnent …</my-firstcomponent>
</body>
</html>

To debug your application, you could run it from Visual Studio with F5, our you could start it from cmd by navigation to your projects folder and type “npm start”. I prefer starting it from cmd, then I will get live update on each change I do in code running BrowserSync.

ang9

Being stuck in “old” ways, I figured out I had to get a simple project running to be able to understand and get familiar with the new stack. In this post I am not digging deep into anything, other than just showing some simple steps to start working with Angular 2 in Visual Studio.

If you want to know more in depth what the files “package.json”, “tsconfig.json” and “typings.json” are doing you can read this post.

Thank you for reading.