I couldn’t debug TypeScript from my Angular 2 app files at first…
but then I got it working. Here’s how:
(Note: The environment used here was Windows 10 and a beginner Angular 2 app cloned from the Angular Quick Start repo from the Angular Github repo. If you’re on a Mac or Linux system, I can’t say whether the solution presented he will work for those environments.)
This post explains my trouble (and solution) of using the the Microsoft VS Code Debugger for Chrome extension to debug my first beginner Angular 2 app from within VS Code. I let VS Code create the default launch.json file that is required (details in this link: https://code.visualstudio.com/docs/editor/debugging) , but when I started the debugger from inside VS Code, and I put a breakpoint on a line of code in a TypeScript file (.ts), VS Code complained that it could not find the corresponding .js file (therefore it could debug from the .ts file), and it put a little gray circle beside the line of code, instead of the typical red dot, with a warning:
“Breakpoint ignored because generated code not found (source map problem).”
When searching the web about this issue, all of the suggested launch.json code examples from various posts I found all looked very similar in what they suggested was required to fix the issue, but I never could get any of them to work for my app / dev environment. But, I finally found one that did work for my beginner Angular 2 project, which I had begun by cloning the Angular 2 Quick Start repo.
The Angular 2 quick start walks you through setting up and running a very simple Angular 2 application. If you are trying to complete the quick start in Visual Studio Code (VS Code), there are a. In this video I am going to show, How to Set Up C++ Development With Visual Studio Code on Windows 10. We will use MinGW with VS code as our compiler and debugging tool. Using Visual Studio Code and Building and Debugging with C++ on Mac OS X Saturday, August 6th, 2016. By Michael Suodenjoki, August 2016. I wanted to play with and test Visual Studio Code's (VSCode) features for doing C++ development on the Mac platform. At work and in the past 20+ years I've mainly been using Windows, so this is somewhat different and new interesting territory for me.
I found the magic solution for me in one user’s example that he posted to an issue on the VSCode GitHub project: https://github.com/Microsoft/vscode-chrome-debug/issues/367 and again the issue of where the generated .js and .js.map files are located (in a Windows environment) is addressed in this issue: https://github.com/angular/angular-cli/issues/1223
Node.js
Before you can get started debugging C++ code in Visual Studio Code, you’ll need to set a few things up. Add the “coreDumpPath” property to the C++ Launch configuration in your launch.json file and set it to the path to your core dump. Our current thinking for bringing up debugging first on Linux and then Mac has been. Configuring launch.json for C/C++ debugging The launch.json file is used to configure the debugger in Visual Studio Code. Visual Studio Code generates a launch.json with almost all of the required information.
Now it works!
Here’s the part from his included code that worked for me:
launch.json
Visual Studio Code For Linux
2
4
6
8
10
12
14
16
18
'version':'0.2.0',
{
'name':'Launch Chrome against localhost, with sourcemaps',
'request':'launch',
'sourceMaps':true,
'webRoot':'${workspaceRoot}/src',
'sourceMapPathOverrides':{
}
]
IMPORTANT: Kill all current VS Code and Chome instances to start fresh.
After making this change to my launch.json, I made sure to kill all existing VS Code instances and all Chrome instances. Then I used npm start and then I started the debugger from inside VS Code. It then launched its own instance of Chrome to start my app, and finally, VS Code debugger was able to trace into the .ts code because it was finally able to find the generated .js code.
.gitignore changes
I also found that I needed to add two folders to my .gitignore file: