Debug & Run Angular2 Typescript with Visual Studio Code?

Question

Debug & Run Angular2 Typescript with Visual Studio Code?

I am trying to debug Angular2 typescript application with VS code https://angular.io/gu

Answer 1

Here is an official visual studio code documentation on how to debug Angular in VSCode https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

To debug the client side Angular code, we'll need to install the Debugger for Chrome extension. Open the Extensions view (Ctrl+Shift+X) and type 'chrome` in the search box. You'll see several extensions which reference Chrome. Press the Install button for Debugger for Chrome. The button will change to Installing then, after completing the installation, it will change to Reload. Press Reload to restart VS Code and activate the extension.

We need to initially configure the debugger. To do so, go to the Debug view (Ctrl+Shift+D) and click on gear button to create a launch.json debugger configuration file. Choose Chrome from the Select Environment dropdown. This will create a launch.json file in a new .vscode folder in your project which includes configuration to both launch the website or attach to a running instance. We need to make one change for our example: change the port from 8080 to 4200.