Posted under Angular
Permalink
Tags Angular, Bug, Debugging, Gotcha
Further to getting the Tour of Heroes tutorial (which is systemjs based) debugging correctly in vs code (see here), I moved on to creating a new app via angular-cli as a basis for moving forward.
The point about angular-cli is that it uses webpack as its packaging tool, which is better than existing packagers for breaking down enterprise level applications. It mandates a standard for project file structure which was lacking in the past in angular, and creates everything according to that standard. It also allows additions of components etc. which will also conform to the same structure.
Previously I had settled on using vs code, as I had issues with all the previous IDEs I had tried (eclipse with angular 2 eclipse, webclipse) as per here).
I tried the following steps:-
- create a new angular project via ng new
- build/start it via npm start
- run chrome in debug mode via the following shortcut "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" –remote-debugging-port=9222
- debug in vs code using a suitable (clearly not as in the end I could not get it to work) launch configuration
The problem is that vs code could not map the .ts source to the .js. via the sourcemap, which is provided to do the mapping.
When adding a breakpoint, the following error occurs:-
“Breakpoint ignored because generated code not found”.
As vs code is widely used, there were a number of posts about this issue as follows :-
https://github.com/angular/angular-cli/issues/2453
https://github.com/angular/angular-cli/issues/1223
https://github.com/angular/angular-cli/issues/4526
https://github.com/angular/angular-cli/issues/2491
Unfortunately I could not resolve the problem via any of these.
A key point that these posts do not clarify on is that when starting with npm start or ng serve, any generated js file bundles (e.g. main.bundle.js) which are bundled js files under <project>/dist/) are deleted along with the <project>/dist directory, and the generated js is entirely served from memory. The IDE therefore has to get this js via a url, so all the discussion about tweaking the sourceMapPathOverrides to things like:-
"webpack:///*": "/*"
"webpack:///C:*":"C:/*" (for windows – substitute correct drive letter is the theory)
…seem to miss the point if they are aiming at target directories for the js. Of course, they may refer to the need to derive map keys for the sourcemap which would make sense if the sourcemap contains urls as values to return the generated js, but this is not made clear.
Either way, I could not get any of this to work in vs code and could not get a working breakpoint on the initial line of code that assigns the "app works" string.
In the end I dumped using vs code and gave Webstorm a try. This was immediately successful with almost no configuration needed – details as per this post.