Angular 6's dev server with HMR

[Guillaume Dube]

I have trouble setting up UseProxyToSpaDevelopmentServer with the angular dev server with HMR set up. It seemed to work before updating the Angular app to version 6.2.1. Before, it was version 5.x.x, I think.

I followed the instructions from the angular-cli's document, however I met some problems when trying it out.

Here's what I ran:

• ng serve --configuration hmr in one terminal, listening to http://localhost:4200.
• dotnet run in another terminal, listening to http://localhost:57084.

When visiting localhost:57084 in a browser, the Angular app wouldn't load, and I'd find the message HMR is not enabled for webpack-dev-server! in the console. However, when visiting localhost:4200, the Angular app would load and HMR would be enabled.

After a bit of searching, I found that ng serve builds and keeps its output in memory, while the dotnet app uses the files in /dist/ (the call to UseSpaStaticFiles in startup.cs is responsible for this, I think).

So my current workaround is to remove the call to UseSpaStaticFiles when I call UseProxyToSpaDevelopmentServer. The angular app's files seem to be correctly retrieved from the dev server, instead of being retrieved from the /dist/ folder. However, I'm wondering if this is the correct way to make it work, since it isn't instructed here.

Out of curiosity, I tried to build with ng build --configuration hmr before running the angular dev server, just to see if it worked. It didn't. In /dist/main.js, I found this:

...
if (_environments_environment__WEBPACK_IMPORTED_MODULE_3__["environment"].hmr) {
    if (false) {}
    else {
        console.error('HMR is not enabled for webpack-dev-server!');
        console.log('Are you using the --hmr flag for ng serve?');
    }
}
else {
    bootstrap();
}
...

So it seems that the hmr-related code is being removed on ng build --configuration hmr, but not on ng serve --configuration hmr.

One last note: I noticed that you could setup HMR using SpaServices, but this is to be used with UseAngularCliServer, correct?

[Artak]

Thanks for contacting us, @dubeg.
@SteveSandersonMS, can you please look into this? Thanks!

[Steve Sanderson]

If you're using UseProxyToSpaDevelopmentServer then you shouldn't also configure Angular CLI to write the dist directory to disk. This will mean it no longer matters if you also have UseSpaStaticFiles (since there wouldn't be any files for it to server, it would have no effect).

For a more complete Angular 6 integration, please have a look at our ASP.NET Core 2.2 template for Angular 6: https://github.com/aspnet/Templating/tree/master/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/Angular-CSharp. You might want to compare your implementation against this and align your code with it to avoid any quirks around HMR etc. Hope that helps!

Assigning back to @mkArtakMSFT so he can close it if he feels this is resolved.

[Guillaume Dube]

@SteveSandersonMS

If you're using UseProxyToSpaDevelopmentServer then you shouldn't also configure Angular CLI to write the dist directory to disk. This will mean it no longer matters if you also have UseSpaStaticFiles (since there wouldn't be any files for it to server, it would have no effect).

Oh, thank you. I have a last question then; it seems that ng serve stopped deleting the /dist/ folder by default (this is probably the change from v5 to v6 that broke my workflow). Also, the old flag delete-output-path doesn't work with ng serve anymore.

This is still a concern since you might do ng build once in a while for whatever reason, but still expect ng serve to work with HMR afterward.

So.. either I add the delete statement in package.json to run along with npm start, or maybe there's a way to do it in angular.json to too. But I'll probably keep my shitty workaround for now.

Thanks for the insight!

[Artak]

Thanks for contacting us. We believe that the question you've raised have been answered. If you still feel a need to continue the discussion, feel free to reopen it and add your comments.