Description
Command
serve
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
18.2.11
Description
When using the application builder to serve on localhost, but with the main website loaded from a remote dev server, stylesheets are not loading properly for us as of Angular CLI 19.
For our development environment, we are loading our main website (including index.html) from a remote dev server (say, dev.example.com), but running ng serve from localhost. To do this, we have been serving a copy of index.html when appropriate (not all pages of the application use Angular) from the remote dev server, and rewriting all the src attributes in index.html to point //localhost:4200/main.js, etc so that vite, the js, and the main css load correctly.
In Angular 18, the result of this is that all the js chunk files are requested from localhost, and all of the other requests go to our dev server--this is the intended behavior. In particular, the js chunks for components had all of the styles inlined in the js file.
In Angular 19, we are seeing new requests, for css files, requests we never saw in Angular 18, presumably because these stylesheets are no longer inlined in the js. Unfortunately, these requests for css files are going to our remote dev server, but are, of course, being served by localhost, so we are getting 404s for all of these.
I'm calling this a regression, because styles worked properly in dev for Angular 18 but not Angular 19, but I recognize that our use case is unusual. I'd like to find some solution that allows us to run a dev environment for Angular 19, probably by getting the CSS files to load from the localhost, but if there is some other solution (perhaps returning to inlining stylesheets in the js files?), I'm open to that as well.
(I initially thought this was related to the deployUrl feature (see #26411) which we use in production to serve js and stylesheets from a CDN, and am still a little concerned about whether this will be a problem for us in production.)
EDIT: As noted below in the comments, this is happening because HMR has been turned on by default in Angular 19. I suspect that the sort of configuration I'm using has never worked with HMR.
Minimal Reproduction
Serve index.html (with the srcs rewritten to load from localhost) from a server different from localhost.
run ng serve on localhost.
Try to load the site on from the remove server.
Exception or Error
Your Environment
Angular CLI: 19.0.6
Node: 18.20.5
Package Manager: yarn 1.22.22
OS: darwin arm64
Angular: 19.0.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1900.6
@angular-devkit/build-angular 19.0.6
@angular-devkit/core 19.0.6
@angular-devkit/schematics 19.0.6
@angular/cdk 19.0.4
@angular/cli 19.0.6
@schematics/angular 19.0.6
rxjs 7.8.1
typescript 5.5.4
zone.js 0.15.0
Anything else relevant?
No response