Debug Angular 2 with Visual Studio 2017

Question

Now I use Webstorm to code and debug Angular, but I don't like this IDE. Is there a way to debug Angular with VS 2017?

Answer 1

Although I am a fan of Visual Studio , I suggest you try Visual Studio code (or similar, for example, sublime or atomic) for front-end. This IDE is great for its extensibility and provides better control over the terminal. Plus, it's easy to manage your Gulp tasks.

• The Chrome debugger extension allows you to debug JS inside the editor. Check out this section on how to debug angular2 typescript in VSCode.

In VSCode, you can configure the visual theme and icons, which are the same as in Visual Studio

Answer 2

You can debug Angular inside VS2017. In addition to issues that have not yet been resolved. One of them is that currently you need to set your breakpoints after starting debugging. (I have VS Pro v15.4.1). To see an example of debugging, follow these steps:

• Create the project as the main Asp.Net web application and select the project template <Angular.

• Click the down arrow next to "IIS Express" and install the web browser in Google Chrome.

• Start debugging. Chrome will display a script error message. In the end, your application will supersede this message.

• Set a breakpoint to "this.currentCount ++;" at counter.component.ts.

• Go to the "Counter" screen and click "Increment". Your breakpoint will be deleted.

Make sure that Chrome Developer Tools (F12 Tools) is not working at the same time