So you want to develop Angular 2 apps in Visual Studio 2015.
If you begin with the 5 Minute Quickstart over at angular.io, you will quickly realize that the documentation was not written with Visual Studio in mind. It includes some unnecessary configurations and misses crucial steps to getting up and running with Angular 2 in Visual Studio 2015.
The purpose of this blog is to get you running with Angular 2 in Visual Studio 2015. We’ll cover some of the same ground as the previously mentioned 5 Minute Quickstart. You will be able to use the base you create here to add the actual logic from that tutorial. From there you should be able to pick up the more advanced tutorials like the excellent Tour of Heroes project, also from angular.io.
- Visual Studio 2015, I’ll be using Community Edition.
- Update 1 for Visual Studio 2015, if you don’t already have it.
- The latest Typescript tools for Visual Studio 2015.
1. Create the project in Visual Studio 2015
Open Visual Studio 2015 and select File / New / Project. Under TypeScript, select HTML Application with TypeScript. Don’t see this template? Make sure you have the prerequisites installed!
This is just going to be a regular HTML website. We won’t be needing ASP.NET MVC, Web API, or Web Forms.
Give the project a name and create it. I’m going to call mine HelloAngular2.
This creates an empty web project with an index.html, app.ts, app.css, and web.config. Go ahead and delete the .ts and .css file. Open index.html and delete all script and and stylesheet references.
2. Configure Node Package Manager
First thing’s first, let’s get Node Package Manager (NPM) set up. NPM, not to be confused with NuGet which is a different product, is what we will use to load our client-side packages.
Right click your project in the Solution Explorer, and select Add / New Item. Select NPM configuration file and add it to your project. Keep the default file name, package.json.
Without going too deep into NPM theory, this file is used to to tell NPM what client packages we need. Copy and paste the following lines into this file:
The dependencies listed in this file contain most of what we need to get started developing in Angular 2. We will not use all of these packages explicitly, but they will be needed if you move on to the Tour of Heroes project mentioned earlier. For brevity’s sake, I will not explain what each of these packages does in detail, but I encourage you to do some research on them before you use them in a production application.
Save this file, and watch your output window. You will notice that NPM starts downloading all of the dependencies. Saving this file in Visual Studio is the equivalent of running an npm install command at the project’s root level. For better or for worse, Visual Studio likes to keep you from having to use the command line as much as possible.
You might be wondering where your files are being downloaded to. If you right click the project and select Open Folder in File Explorer, you will find your libraries nested inside the node_modules folder. Do not include this folder in your Visual Studio project or check it into source control. The idea is that NPM will manage these files for you without your involvement.
3. Configure TypeScript
TypeScript has numerous config options that determine how it is compiled and interpreted. Visual Studio exposes some, but not all, of these options in the project properties. Unfortunately, we’re going to need access to some of the options that Visual Studio does not expose. There are two ways we can go about setting these.
- Editing the .csproj file manually (yuck).
- Adding and editing a tsconfig JSON file.
Let’s do that second option. Right click on your project select Add / New Item. Select and add the TypeScript JSON Configuration File. Keep the default name of tsconfig.json.
Open the file and add the following lines:
As with the our package.json file, I’m not going to go into what each of these options does. If you’re curious, I would suggest reading Microsoft’s excellent documentation on the subject.
4. Add the necessary TypeScript typings.
TypeScript gives us the benefit of having a strongly typed front end with Intellisense and compile-time errors. In order to use these features with the various libraries we’re including, we’re going to need some type definitions, which tell TypeScript how to use these libraries. Since we’re using Visual Studio, we can easily grab these files with NuGet.
Right click your project and select Manage NuGet Packages. Search for and install the following libraries:
The Angular JS definitions will include the jQuery definitions as well. Once they are installed, go to the NuGet Updates tab and make sure everything is up to date.
5. Set up the app folder
As you can see, the root directory of our project is starting to get pretty crowded. Before we create our actual application logic, let’s give it a clean place to live somewhere away from all of this json and config nonsense.
Right click the project and select Add / New Folder and call it app. This will be where all of our main Angular logic, templates, and styling, will live. The root level of our project will be reserved for our libraries, configurations, and the index.html which will serve as the “front door” of our application.
6. Write some Angular 2!
You now have a working environment to write Angular 2 applications. I would recommend finishing the 5 Minute Quickstart on angular.io using the base project you created here. At the time of this writing, Angular 2 is still in beta and undergoing changes. Angular.io will always have the latest version of the documentation, so there is little value in me providing a similar Hello World tutorial here. Skip past the initial configuration steps and start right after the creation of the app folder. From there, I highly recommend following the excellent Tour of Heroes tutorial.
Please check back here as I will be adding more advanced Angular 2 tutorials soon!