Angular 2 typescript configuration and debugging for Visual Studio 2015

Introduction

In this arctile i'm going to focus on Visual Studio 2015 configuration without going too deep in Angular 2. Article Angular code is based on http://angular.io tutorial with few changes. Article contains instructions to define Visual Studio 2015 configuration and Angular 2 default application in ASP.NET 4.5.2 and ASP.NET 5 project templates.

Background

I wrote this article because i spend many hours to figure out working Visual Studio 2015 configuration for Angular 2 typescript development and debugging. I did read tons of articles and community discussions without getting clear answer for working configuration. During the time when written this article i'm using Visual Studio 2015 Community edition with Update 1 and Typescript version 1.7.

ASP.NET 4.5.2 Template

1. Create ASP.NET Web Application project and set name for application e.g. WebApplication1.

2. Select Web API project template from ASP.NET 4.5.2 Template list.

 

 

 

 

 

 

 

 

 

 

 

3. Add package.json to project root folder and set following content.

 

 

 

 

 

 

 

 

 

 

 

4. Add gulpfile.js to project root folder and define folloving script.

 

 

 

 

 

 

 

 

 

 

 

5. Right mouse click gulpfile.js and select Task Runner Explorer. Right mouse click moveToLibs and select Run. After execution you can find copied files under Scripts/libs and Content/libs folders.

 

 

 

6. Create app folder to project root folder.

7. Add app.component.ts typescript file to add folder. You can also set breakpoint to line var test = null;.

 

 

 

 

8. Visual Studio will ask question to add typescript support for application.

 

 

 

 

 

9. Add main.ts typescript file to add folder. Note! you have to add ///<reference path="../node_modules/angular2/typings/browser.d.ts"/> top of the main.ts file otherwise you will get compile errors.

 

 

 

10. Open /Views/Shared/_Layout.cshtml and set following code. Note! you have to define meta in System.config or otherwise Visual Studio breakpoints will not work.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

11. Open /Views/Home/Index.cshtml and set following code.

 

12. Right mouse click WebApplication1 project and select Unload Project and after that Edit WebApplication1.csproj. Note! you have to define TypeScriptModuleKind and TypeScriptModuleResolution project file or otherwise Visual Studio breakpoints will not work.

 

 

 

 

 

 

 

 

13. Compile and debug application.

 

 

ASP.NET 5 Template

1. Create ASP.NET Web Application project and set name for application e.g. WebApplication2.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Select Web API project template from ASP.NET 5 Template list.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. Add tsconfig.json file (Typescript JSON Configuration File) to project root folder . Note! you have to define module and moduleResolution project file or otherwise Visual Studio breakpoints will not work.

 

 

 

 

 

 

 

 

 

 

4. Add package.json to project root folder and set following content.

 

 

 

 

 

 

 

 

 

5. Create gulpfile.js to project root folder and define folloving copy script.

 

 

 

 

 

 

 

 

 

 

6. Right mouse click gulpfile.js and select Task Runner Explorer. Right mouse click moveToLibs and select Run. After execution you can find copied files under Scripts/libs and Content/libs folders.

 

 

 

7. Create app folder under wwwroot folder.

8. Add app.component.ts typescript file to wwwroot folder. You can also set break point to line var test = null;.

 

 

 

 

9. Add main.ts typescript file to wwwroot folder. Remember to add ///<reference path="../../node_modules/angular2/typings/browser.d.ts"/> top of the main.ts file otherwise you will get compile errors.

 

 

10. Add index.html file to wwwroot folder.

 

 

 

 

 

 

 

 

 

 

 

 

 

11. Set index.html as startup page

12. Compile and run application. Also set some breakpoints to typescript files and try to debug.

 

Debugging

There is two similar configurations in both project types to enable debugging. Actual problem is not Angular. It's more like that Visual Studio does not work well with SystemJS module loader which is used to launch Angular application. It's not big issue because we can solve issue with Visual Studio project file configuration and SystemJS configuration.

In ASP.NET 4.5.2 project template you have to define meta for System.config. Also you need to define TypeScriptModuleKind and TypeScriptModuleResolution in Visual Studio WebApplication1.csproj project file.

In ASP.NET 5 project template you have to define meta for System.config. Also you need to define module and moduleResolution in Visual Studio tsconfig.json project file.

 

Source code

https://bitbucket.org/spylkkanen/angular2_visual_studio_debug