Click here to Skip to main content
13,596,708 members
Click here to Skip to main content
Add your own
alternative version

Stats

41.1K views
17 bookmarked
Posted 23 Mar 2016
Licenced CPOL

Angular 2 typescript configuration and debugging for Visual Studio 2015

, 7 Apr 2016
Rate this:
Please Sign up or sign in to vote.
Article shows how to setup ASP.NET 4.5.2 and ASP.NET 5 projects for Angular 2 application and how to enable Angular 2 typescript debugging in Visual Studio.

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sami Pylkkänen
Software Developer (Senior)
Finland Finland
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionGreat article, but code examples would be better as text rather as images Pin
dibley197328-Dec-16 0:40
memberdibley197328-Dec-16 0:40 
QuestionCan't see images Pin
Member 1056287115-Sep-16 20:35
memberMember 1056287115-Sep-16 20:35 
QuestionCant debug- runs fine Pin
Kunalce4u2-Jun-16 7:08
memberKunalce4u2-Jun-16 7:08 
AnswerRe: Cant debug- runs fine Pin
Sami Pylkkänen4-Jun-16 21:52
memberSami Pylkkänen4-Jun-16 21:52 
GeneralRe: Cant debug- runs fine Pin
Member 1270184724-Aug-16 9:43
memberMember 1270184724-Aug-16 9:43 
QuestionUsing your project code Pin
Member 362054510-Apr-16 1:03
memberMember 362054510-Apr-16 1:03 
AnswerRe: Using your project code Pin
Sami Pylkkänen15-Apr-16 19:40
memberSami Pylkkänen15-Apr-16 19:40 
Generalquit helpful Pin
Anupam Singh8-Apr-16 3:27
memberAnupam Singh8-Apr-16 3:27 
QuestionPlease attach the source Code to the article... Pin
Member 124388315-Apr-16 11:10
memberMember 124388315-Apr-16 11:10 
AnswerRe: Please attach the source Code to the article... Pin
Sami Pylkkänen15-Apr-16 19:41
memberSami Pylkkänen15-Apr-16 19:41 
GeneralMy vote of 5 Pin
Tokinabo29-Mar-16 3:02
professionalTokinabo29-Mar-16 3:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.180621.3 | Last Updated 7 Apr 2016
Article Copyright 2016 by Sami Pylkkänen
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid