debug Angular 2.0 with Visual Studio 2015 ?


  • Not sure if this is the right place to ask.

    The problem is how to debug an Angular 2.0 app with Visual Studio 2015. It seems VS is not aware of the lazy loaded files in the angular app, and therefore is unable to break and debug the code.

    I haven't tried since early december, pre beta, but now when angular is getting closer to release I would like to move back to VS for development.

    Tuesday, January 26, 2016 2:34 PM

All replies

  • Hi jkristia,

    I download a Angular 2.0 app sample and try working with Visual Studio 2015.

    First, please open your Angular 2.0 app with Visual Studio 2015 from menu File -> Open -> Web site. Because the Angular 2.0 app doesn't have solution file.

    I find that there just some js files and html files in Angular 2.0 app. So our purpose is debugging these files in this app.

    For html files, we often debug them through browser with below steps.

    1. Open one html file that you want to debug in Visual Studio 2015.
    2. Right-click on this html file to choose View in Browser (Internet Explorer). This html file opened in browser.
    3. Press F12 in browser to open the Developer tools to debug your html file.

    For js files, please using the same steps as above. You also can add breakpoint in js file. which will be break at runtime.

    If any other questions, please feel free to let me know.

    Best Regards,

    Wednesday, January 27, 2016 6:59 AM
  • Sorry for not checking in sooner.

    I appreciate the help, but I will have to unmark this as answer. I know I can debug this in the browser, but I specifically asked how to debugging this within Visual Studio.

    I do all my angular1/TypeScript directly from within the solution, and would ike to do the same for Angular 2.

    In WebStorm this is possible (only with Chrome ans WS has a Chrome plugin), but since VS is my preferred IDE I really would like to have this option.


    Wednesday, February 10, 2016 3:35 PM
  • Hi jkristia,

    As far as I know, above steps is debugging the Angular in Visual Studio. Please open your project with Visual Studio and then open the file you want to debug.

    In the line of code, which you want to debug, please add breakpoints on these lines of code. After you run your project, the breakpoints will be hit when running on these lines of code.

    If you think above steps is unsuitable for you. I suggest you submit your idea to Visual Studio User Voice and then share your feedback here. It is benefit to other communities who has the same idea to vote and add comments for your feedback.

    Best Regards,

    Thursday, February 11, 2016 6:08 AM
  • I have developed AngularJs / TypeScripts apps using Visual Studio 2015, and have no problems debugging these.

    I'm asking about Angular 2. This is the new Angular currently in beta and soon to be release. This version of angular (Angular 2) loads the files using SystemJS / Require (something like that) so the files are not loaded in VS (as with AngularJs ), and therefore not available for debugging.

    Any one knows if there will be support for this (Angular 2) in VS 2015, or anyone has a link to a project which can be loaded and debugged with VS 2015? (Note, this works in WebStorm / Chrome with WS plugins)

    If this is not available, then I will submit a request as suggested.


    Saturday, February 13, 2016 12:02 AM
  • Hi jkristia,

    There has other communities who has the similar problem about how to use Angular 2 in Visual Studio 2015, please refer to below link.

    In addition, following blog introduce how to work with Angular 2 in Visual Studio. Hope it can help you.

    Best Regards,

    Monday, February 15, 2016 2:14 AM
  • I have posted two working samples to Github: angular2-systemjs-dotnet-core and angular2-webpack-dotnet-core.
    Monday, September 26, 2016 9:09 PM