Styles don't appear when I debug my Angular application

Hi,

I have a problem with debugging an Angular application. When I debug an Angular application through Web Strom, the styles don't appear, however when I view the website on a different port (the one that is given when I do "npm run start") the styles appear. I would like to use Live Edit Debugger in order to see the highlight of the elements when I change them, but I'm not able to since there are no styles when I debug it.

This is how the website looks like when I do "npm run start" and view the website on the localhost:4401/home:


This is how the website looks like when I view it on the url and port that is being generated through "right click > debug 'home.component.html'.
 

I would also like to add that I've created a following debug configuration which works, however when I make changes to the website's CSS, and save them, the Live Edit stops working.

2 comments
Comment actions Permalink

The built-in web server is not supposed to be used for hosting Angular applications, it's a simple web server that doesn't support routing, pre-processing, etc., plus it always serves apps from localhost:63342/project_name so that URLs relative to the web server root will result in 404 errors

But you don't need using the built-in web server for debugging. Why not using your dev server instead? See Help for instructions

0
Comment actions Permalink

>I would also like to add that I've created a following debug configuration which works, however when I make changes to the website's CSS, and save them, the Live Edit stops working.

Must be an issue with Angular hot reloading. Live Edit doesn't currently work for custom web components (Angular, React, Vue, etc) - they require providing special support. But for Angular apps served by Angular CLI the hot reloading is implemented on the dev server end, so normally the changes are uploaded to the server once you save the modified files

0

Please sign in to leave a comment.