Angular Debug with Source Map active within Intellij IDEA

Question

I'm trying to enable debug mode in my angular project using Intellij, so after start my project (npm start) i created a JavaScript Debug Configuration:

Debuggin in Google Chrome the breakpoint get exactly in place as i expected (my typescript file), but in Intellij IDEA the breakpoint get in a totally different place, look in Intellij:

I already installed the JetBrains plugin for Google Chrome and check if sourceMap is enabled in my tsconfig.json but the problem persist:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
      "sourceMap": true,
...

I tried to solve my problem with this post how to run angular application in IntelliJ but didn't work, the problem continue. Note that in this post the subject is about run angular project, i'm already running my project very well, i just want to debug it correctly.

Have you tried turning on the "Ensure breakpoints are detected when loading scripts" (visible on the first screen)? — kasptom, Jan 26 '19 at 19:24
On the second screen on the list of remote urls of local files you have an entry with no remote url specified. Does it differ from the File/Directory value of the second entry? — kasptom, Jan 26 '19 at 19:37
Yes, this file/directory without remote url is my API (Spring Boot), this is in same workspace my angular project. — Ronaldo Lanhellas, Jan 26 '19 at 19:41
debugging angular works just fine here... unfortunately we can hardly help unless you provide a project that can be used to recreate the issue — lena, Jan 27 '19 at 14:11
I believe source maps are generated by Angular CLI not correctly, check https://stackoverflow.com/a/54883663/706012 — Liebster Kamerad, Feb 26 '19 at 12:55
Possible duplicate of [Angular CLI 1.7.0 and Visual Studio Code - can't set breakpoints](https://stackoverflow.com/questions/48892311/angular-cli-1-7-0-and-visual-studio-code-cant-set-breakpoints) — Liebster Kamerad, Feb 26 '19 at 12:56

score 0 · Answer 1 · answered Jul 29 '20 at 12:12

The two important things that you need to do in your Javascript D are:

Set the Remote URL for your root folder: webpack:///.
Set the Remote URL for your src folder: webpack:///.src/

https://itnext.io/debugging-your-angular-application-in-intellij-idea-411a9b08759f

Angular Debug with Source Map active within Intellij IDEA

1 Answers1