Breakpoints aren't hit in Angular project.
Hello Folks,
I'm using Intellij 2017.1.4 and I am building an Angular project. Even though I set my breakpoints, they never seem to be hit during debugging.
I've tried everything but nothing seems to work.
The only thing I'm getting thatmight resemble an error is in my console, I see this message:
Error in event handler for (unknown): TypeError: Cannot read property 'trace' of undefined
at ext.backgroundPage.sendMessage.response (chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js:562:19)
Any help on getting my JS debugger working is greatly appreciated.
Please sign in to leave a comment.
What angular-cli version do you use?
@Elena Pogorelova
The output at the terminal says my angular-cli => 1.1.2
@angular/cli: 1.1.2
node: 7.10.0
os: win32 x64
@angular/animations: 4.2.2
@angular/common: 4.2.2
@angular/compiler: 4.2.2
@angular/core: 4.2.2
@angular/forms: 4.2.2
@angular/http: 4.2.2
@angular/platform-browser: 4.2.2
@angular/platform-browser-dynamic: 4.2.2
@angular/router: 4.2.2
@angular/cli: 1.1.2
@angular/compiler-cli: 4.2.2
@angular/language-service: 4.2.2
the issue is caused by recent cli changes: currently webpack generates absolute Windows paths in sourcemap that break the debugging (https://youtrack.jetbrains.com/issue/WEB-27381).
As a workaround, please, try the following:
ng eject
in project root directorynpm start
to start the application, then use your JavaScript debug configuration for debugging (no remote URL mappings needed, just specify the https://localhost:4200 url)Thanks Elena, that was the solution.
Hey Elena.
in my company we use web storm for more than a year now in order to debug angular 2 and in the recent cli update it braked.
we cant use the eject solution you suggested since it is irreversible and we want to use the CLI.
this is a major issue for us. please tell us in which release it will be solved?
Thanks Yosi
No idea, please follow https://youtrack.jetbrains.com/issue/WEB-27381 for updates.
I'd rather consider this a problem with angular-cli + SourceMapDevToolPlugin webpack plugin: absolute paths in sourcemaps not only break WebStorm debugger, but make the application not portable - as soon as you copy your application to a different location, sourcemaps will immediately stop working. So I believe that it has to be solved on webpack end
ok, lets wait for the next cli version and see.
Yosi
I tried the 1.3.0-beta.0 and had the same issue with break points not working. A good fix has to be found as I want to maintain the angular-cli as is and not resort to webpack.
I have created an Ionic 3 application and I'm having the same issue there. Please let us know when a fix is in place for this. It is built with angular version 4.1.3.
https://youtrack.jetbrains.com/issue/WEB-27381 is fixed in 2017.2
Hmm, that's the version I'm using.
May be your issue is different then?:) Please recreate the issue and provide your idea.log
Just tried debugging ionic 3 app in 3017.2 - it works out of the box, no additional steps required
Yes, problem is with source map generation in Webpack that Angular CLI uses. A way to make breakpoints work (Angular CLI 7.2.2 in my example) is in angular.json to set evalSourceMap to "false". See my complete answer here https://stackoverflow.com/a/54883663/706012