Remote Webpack debugging Angular-cli v6 / WebPack on Apache

I am using PhpStorm 2018.1.6 and need to debug and Angular-CLI v6 application running on a remote Apache server.  I am unable to get the breakpoints to fire although the debug console displays console.log messages.

I can run and debug when using the development server using the following command:

"ng serve --disable-host-check --host="

The he following build command will create a development build and put the .js and .map files in dist/test3/dist. 

"ng build --watch --base-href=/PHP/test3/dist/test3/"

The URL to access this build is

The app will run as expected but will not stop on set break points.

The source is in

How can I configure PhpStorm to use the local source and the remote map files to fire breakpoints.

Thanks for all your help.


Just checked this - debugging works out of the box:

my debug condiguration:


I have deployment mappings set up as follows (I'm deploying files located in C:\downloads\test3 to Apache server):


Build is started with

"ng build --watch --base-href=/PHP/test3/dist/test3/"




Thank you for your assistance.  Using your example, I was able to do the same with a windows based Apache server local to my work PC.  Debugging worked as you indicated.  When running you will notice a similar scripts configuration in the debug tool:


Note the mapping of the ng:// and webpack://. URLs

When the debug is configured to use a remote (Linux) Apache server connected using SSH, the webpack:// mapping is missing.:


I have tried following the suggestions found here by adding webpack://. with various numbers of slashes (/) to no effect.




I don't actually think that the server location makes any difference here... What do your deployment settings look like? Please provide screenshots of Settings | Build, Execution, Deployment | Deployment, Connection and Mappings tabs, and screenshot of your run configuration


Just checked - debugging works on remote Apache accessed through ssh (sftp). My deployment preferences:


Thank you for your post. I rebuild a clean angular-cli 6 project and now both local and remote debugging works as expected.


Now if I could only get the live reload feature to work when use ng build --watch like it does when doing ng serve.


Live reload functionality is something that the server provides. ng build -w only builds files and not serve them. And Apache, AFAIK, doesn't provide its own hot reload support, unlike webpack dev server that is used by ng serve


Please sign in to leave a comment.