AngularJS 2 and Visual Studio 2015

I’m a fan of AngularJS, and I’m also a fan of Typescript. So AngularJS 2 is like the Hepburn and Tracy of SPA frameworks, or to younger readers, Batman vs Superman. It’s still in beta, but that’s good enough for me for my own website.

There’s a pretty good 5 minute tutorial from the Angular team about setting it up. It’s orientated towards non-IDE developers. Personally, I like Visual Studio as a developer tool. I mostly do c# work on the server side and having it all together suits me. So, that’s where I’m going to work.

The tutorial is, however the basis for this. Here’s the steps I followed:

1. Make sure VS2015 is installed and run any updates. I then exited VS2015 (not sure if I needed to, but I prefer to if I’m going to install things that it’s going to work with out of habit).
2. Install NPM. If you’re not aware of NPM, it’s like Nuget for open source. Or Nuget is NPM for Visual Studio. I don’t know. Anyway, you need it because that’s the package management for Angular.
3. I then created a Typescript project under VS2015.
4. Follow the 5 minute tutorial mentioned above, but skip the part about Typescript.json. You already have typescript and VS2015 will ignore this file anyway. If you need to change the settings like ECMA version, that’s part of Tools/Options. When you create package.json in the editor, Bower automagically run NPM and go and fetch all the dependencies for Angular.
5. You won’t see what’s’s been fetched. It’s in a folder node_modules that isn’t in the solution. Trust me. Or if you don’t, take a look on the file system. But it’s not in the solution. And in the same way that you don’t check in Nuget code, you don’t want to check this in, either. Whenever you need it, you can pull your code and get NPM to pull it.
6. If you take a look at the typescript files now, you’ll see the first line highlighted, because it doesn’t know about angular2/core. So there’s one last step: we have to tell Visual Studio about that, and that means telling it to use commonjs which knows you want angular2/core under node_modules. At this point, that means doing some csproj editing, but this is pretty straightforward. Unload the project, edit it and follow step 6 of this article for each build type. Reload the project, and the error goes away and now when you run the solution, you get this glorious goodness

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }
import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

It’s the Hello World of Angular 2. It’s running and ready. You’ve dug out the foundations, now go and build your glorious creation.