debug angular-cli project Follow vivek tiwary Created August 04, 2016 08:12 how to debug angular-cli project when i am running into live server by ng serve
1. make sure you have the most recent cli version (with previous ones, .ts files were not served, and debugging was not possible)
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.
can you try with this.
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.
how to share code... do you have any idea how to share code.
You can upload it to dropbox or any other file server and give me the link
here you go
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
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.
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....
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.
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
I'm on Angular 2.1.2 now and using firstname.lastname@example.org. 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)
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
then URL mappings for root would be
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
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.
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:
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?
Yes, exactly (see https://intellij-support.jetbrains.com/hc/en-us/community/posts/207283009/comments/204818170 above); you remoteURL for project root should be
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?