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.

14 comments
Comment actions Permalink

What angular-cli version do you use?

1
Comment actions Permalink

@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

0
Comment actions Permalink

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:

  • in terminal, run ng eject in project root directory
  • open the generated webpack.config.js, in line 385 change "moduleFilenameTemplate" value to
    info =>`webpack:///${info.resourcePath}`
 new SourceMapDevToolPlugin({
      "filename": "[file].map[query]",
      "moduleFilenameTemplate": info =>`webpack:///${info.resourcePath}`,
      "fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
      "sourceRoot": "webpack:///"
    }),
  • run npm 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)
1
Comment actions Permalink

Thanks Elena, that was the solution.

0
Comment actions Permalink

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

1
Comment actions Permalink

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

0
Comment actions Permalink

ok, lets wait for the next cli version and see.

 

Yosi

0
Comment actions Permalink

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.

0
Comment actions Permalink

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.

0
Comment actions Permalink

Hmm, that's the version I'm using.

0
Comment actions Permalink

May be your issue is different then?:) Please recreate the issue and provide your idea.log

0
Comment actions Permalink

Just tried debugging ionic 3 app in 3017.2 - it works out of the box, no additional steps required

0
Comment actions Permalink

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 

1

Please sign in to leave a comment.