Debug angular cli project with intellij ultimate

Question

How to debug angular project from Intellij utlimate? I've followed this tutorial but with no results. What am I missing? I use:
- Angular CLI: 1.6.8 - Node: 6.10.0 - OS: win32 x64 - Angular: 5.2.4 - typescript: 2.4.2 - webpack: 3.10.0 and Intellij 2017.3.4.

My configuration. Also tried with: specific mapping.

I run angular project with ng serve (tried also ng serve --sourcemaps=true). Also in tsconfig.json set sourceMap to true. File structure from chrome debugger: structure

Answer 1

I'm running IntelliJ Ultimate. Assuming that your Angular application is already able to run on your system and you have the required plugins in place it is rather easy as I just got mine working this morning.

Add the JavaScript Debugging feature. Run -> Edit Configurations... Click the + Select JavaScript Debugging Give it a name JS Dbug Set the path to where your application runs e.g. http://localhost:4200/

Save it

Set a break-point in your code that you know will hit when the app starts

Start your application with the 'npm start' Once the application is running Click run your JS Dbug in debug mode

Load your app in the browser and it should hit the point.

*** Clarifying 2022/02/23 *** Starting your application you have 2 options.

1. From within IntelliJ, using your package.json file, click the green arrow to run the 'script that executes "ng serve"'
2. From a command line within your project folder execute the command "ng serve"

Once the process is complete and you see that the app has deployed to your localhost.

Put a breakpoint somewhere you know you can trigger. e.g. within a method that your navigation button will call.

From within IntelliJ...

• Click on Run -> Debug... from the top menu bar.
• Click on the menu item "JS Dbug ->"

This will start the debugger.

This will also launch your application in a browser from localhost.

Click on the button that will trigger the method call.

When the breakpoint hits then IntelliJ will come to the front of the screen.