debug angular-cli project

1. make sure you have the most recent cli version (with previous ones, .ts files were not served, and debugging was not possible)

2. set up JavaScript Debug run configuration with your setver URL and URL mappings set for 'dist folder:

3. run 'ng serve', start the debugger

I am using angular cli web pack version. I followed your step but my debug point is not heating. one thing i noticed my remote url not showing on local file area.

Please help.

can you try with this.

https://github.com/angular/angular-cli/commit/5ea4b03b6e47d8eef1ef0e64d6a37368b64f1672 

can't see any remote URL mappings in your screenshot. Did you set them?

how to do that

i did that

does it work now? If not, can you provide a project that shows up the issue? From your screenshots it seems that this is not a proprietary code...

NO IT DOESN'T

SENDING YOU CODE.. IT DOESN'T HAVE NODE MODULES AND HAVE TO DO NG INSTALL AS WELL AS YOU HAVE TO INSTALL ANGULAR CLI WEB PACK VERSION BY STEP MENTIONED HERE.

https://github.com/angular/angular-cli/commit/5ea4b03b6e47d8eef1ef0e64d6a37368b64f1672

how to share code... do you have any idea how to share code.

Thanks

You can upload it to dropbox or any other file server and give me the link

here you go 

https://www.dropbox.com/s/u6gtje1ejt7mv15/first_proj.zip?dl=0

you have to do ng install and install angular cli web pack as i mentioned in above comment 

Ok. Please try the following:

- do not use built-in compiler - files produced by it aren't used when running your application, so this additional comopilating makes no sence

- delete your dist folder

- map your project root to

webpack:///C:/full/path/to/your/project

Note that there is a problem: when using sourcemaps, breakpoints in code that is executed on page loading don't work, see https://youtrack.jetbrains.com/issue/WEB-19372. So you have to refresh browser page to get such breakpoints hit.

ahhh still not working

I removed dist folder and did the following setting

its created its own dist folder 

after that i started debug after ng serve in terminal.

as you mentioned in last comment the browser which its open and did refresh but still my breakpoint are not hitting.

am i doing something wrong.

Thanks

its worked but still something weird

inside function breakpoint hit when page is rendering and not when i am calling this function from frontend. any idea....

Hey guys,

I'm trying to debug the standard app.component.spec.ts file which will be generated by angular-cli, but no break point will be catched.

I start "ng serve" to get a live view of the application and "ng test" in parallel to run all tests. Both will be executed from WebStorm via Node.js configuration and start successfully. After this I start a JavaScript Debug configuration which points to "http://localhost:9876/debug.html".

WebStorm connects to Chrome but when I change a file the application will be rebuild and test will rerun.

I started the angular-cli commands from WebStorm Terminal Tool Window and separate terminal, too, but nothing helps here. I was able to set a breakpoint in app.component.ts on line 10 which will be catched every time.

How can I change the Remote URL for a folder as shown in the images above?

click in Remote URL field to start editing

Hi,

I'm on Angular 2.1.2 now and using angular-cli@1.0.0-beta.18. Due to the switch to WebPack I completely lost the possibility to debug my application now.

So I followed Elenas last advices on WebStorm 2016.3 EAP (#WS-163.6512.13)

• I do not use built-in compiler, I leave this to `ng server -dev`
• I do not have a dist directory as ng serve keeps everything in RAM
• In "run/debug configuration" I added to my root project: "webpack:///home/devuser/Develop/...../MyWebApp"

However, as (almost) everybody else here, I can't get any breakpoint to work. Reloading the browser page does not change this behavior.

@Elena: Could you provide some feedback what the state of this (Issue) is? Is there a best practice how to setup my IDE? Or do you have a working (debuggable) example project? So we could at least check settings of an working project.

Here is my run configuration for default Angular2 (2.1.0) project built with angular-cli (1.0.0-beta.18);

As you can see, it's very similar to yours (but I'm on Windows).

Some things to check:

- do you have checkmarks shown in your breakpoints once the debugger is started and application loaded?

1. if not, seems sourcemaps are not loaded for some reason. Check if the mappings are correct: open http://localhost:4200/main.map in browser, see what URLs in `"sources":` look like. If you see smth like

"webpack:///home/devuser/Develop/MyWebApp/src/app/index.ts"

then URL mappings for root would be

webpack:///home/devuser/Develop/MyWebApp

If you see that the relative paths are used, change URL mappings accordingly.

2. if yes, try refreshing browser page - are any of breakpoints hit?

If you manage to get sourcemaps loaded (you can see checkmarks, at least some breakpoints are hit on browser refresh) - you are done:) Your WebStorm configuration is now correct

Now bad news: even if everything is set up correctly, not all breakpoints are still hit, debugger stops in arbitrary places... Unfortunately I'm not sure this can be fixed on our side, as I can see the same behavior when using Chrome Dev Tools. Check this video: https://drive.google.com/file/d/0BxLtCMSdYqjQY2RXYURUeWs1VXM/view

Dev Tools stops on non-existing breakpoints in js code, only one of 3 breakpoints is correctly hit. Seems that something is wrong with sourcemaps generated by cli - or this is the issue with Chrome debugger protocol

@Elena: Thanks a lot: I owe you one!

Looking up http://localhost:4200/main.map showed me that I need four forward slashes after the protocol (at least this is true for Unices, tested on Linux and Mac OS)

So I changed the setting of Remote URL of my project root to

webpack:////home/devuser/Develop/MyWebApp

and my breakpoints finally trigger again!

The problem is/was the path.

You need 4 slashes "////". On windows a full path starts with a letter like "C" and on linux/unix it is a slash.

This has been fixed now with angular-cli beta19-3 https://github.com/angular/angular-cli/issues/1519

After updating angular-cli and setting the remote url in the launch setting (webpack:////...) everything is working fine.

Can someone please comment on the correct url structure for OS X being served using `ng serve` 

Please see my comment above (https://intellij-support.jetbrains.com/hc/en-us/community/posts/207283009/comments/204514050) for instructions. Nobody can advise on exact URL mappings for your system/project, you have to open http://localhost:4200/main.map in browser and see what URLs in `"sources":` look like there. 

Hi everyone,

After quite sometime trying to debug an angular-cli project inside WebStorm I came up with this post. I tried to follow the steps presented by Elena but I am only able to stop the debugger within the compiled javascript files.

After I set up any mappings not a single break point is being hit.

Can anyone confirm that WebStorm is able to Debug angular-cli projects?

I am using the following configuration:

• macOS El Captain
• npm: 3.10.9
• angular-cli: 1.0.0-beta.21
• node: 7.2.0

Works for me; same instructions as before - but now you have to open http://localhost:4200/main.bundle.map (and not main.map) to see what URLs look like

I think that something is wrong. My urls in main.bundle.map looks like the following. Should it really be 4 slashes?

webpack:////Users/tsabino/Desktop/angular-debug-test/~/@angular/core/index.js

Yes, exactly (see https://intellij-support.jetbrains.com/hc/en-us/community/posts/207283009/comments/204818170 above); you remoteURL for project root should be

webpack:////Users/tsabino/Desktop/angular-debug-test

I did try to follow your commentary but I cannot get the breakpoints to work. Here is my launch configuration.

When I configure in this way I can see the check marks in the breakpoints, but they never stop. Do you anything wrong?