HMR not working?

[Gaulomatic]

I have problems with the updated version since splitting the monolithic webpack.config into multiple files. HMR seems to be broken. I say "seem" because I am clearly no expert on WebPack, but I had to revert my project back to the last version I pulled a few days ago. Here is what I get:

I am working on Windows (damn) and use Visual Studio 2017 but I can replicate this result on my Mac. The image taken is after pulling the repo and just run it from VS or dotnet run.

I tried my best to get down to the cause but my knowledge of WebPack .. de facto does not exist. Too much has changed in the config file(s) and I get lost digging into the new ones :(

Anyone else having this issue?

[MarkPieszak]

Apologies for that, webpack can definitely be a bit much sometimes but it gets easier with time no worries!
Do you have the env variable set?

If you're running the project from command line with dotnet run make sure you set your environment variables to Development (otherwise things like HMR won't work).

# on Windows:
set ASPNETCORE_ENVIRONMENT=Development
# on Mac/Linux
export ASPNETCORE_ENVIRONMENT=Development 

That's strange though, you're saying this is happening when just hitting F5 from even VS2017?
When you go to the project properties under I think debug is the environment variable in there as well?

[Gaulomatic]

Yes, I have exported the variable before running dotnet run and it happens after F5'ing as well. If I plug in the old WebPack config / application structure it replaces the modified modules fine. I would like to investigate it further on my own, if I could, but I just switched from SystemJS to WebPack, so yeah.. It get's better over time. But I am still to noobish to solve this behavior by myself.

[aaronmarisi]

I haven't tested it but I noticed this was commented out - might want to try uncommenting: https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/Client/main.browser.ts

[MarkPieszak]

That might be a part of it 🙈
So many moving parts and upgrades to this, we were lacking many SEO and AoT benefits in the previous version, but we're almost at the finish line 🚦👌
Let me know if that does the trick @aaronmarisi !

[Gaulomatic]

Uncommenting the lines works, with a modification. Instead of:

modulePromise.then(appModule => appModule.destroy());

I looked at the old file and changed this back to:

platformBrowserDynamic().destroy();

I don't know if this has implications, if not I will create a PR.

[hheexx]

I also commented out HMR for AOT compilation because of that.

I have not done it like you because as I thought platformBrowserDynamic() would create new instance of that class. Or it returns same reference?

[hheexx]

I don't see why ngtools does not support providing it with 2 boot files - for aot and jit.
This file rewriting thing is not working great for now.

[heqiao]

I uncommented those lines and it worked. But the bundle rebuild is very slow. 8s-10s. The previous version took 100-200ms.
Below is saving one small change in home.component.ts

[Gaulomatic]

I think this is because the vendor stuff is now included as part of the normal bundle. In previous versions this was separated, but more complicated as well (from the configuration point of view). May be this could be considered to be re-implemented, at development time this saves "hours" - feels kinda :-)

[MarkPieszak]

Oh definitely, vendor chunking will definitely be added back in! I'm hoping to have some free time Friday to spend a few hours finishing all the remaining issues/upgrades here. If anyone wants to take a stab at the vendor chunking feel free until then! Just make sure it works for AoT etc as well.
It's rebuilding everything yes, why it's a bit slow HMR right now 😓

[hheexx]

Can it be defined just as separate entry point or it must be in separate config file with dll plugin?
tree shaking should also be considered. I don't think it could be possible with dll plugin?

[mcm-ham]

@heqiao Changing devtool in webpack.client.js to cheap-eval-source-map should speed the rebuild up a lot. It's currently set to source-map when I think the old version had it set to inline-source-map, in webpack.prod.js it'd be a good idea to set it back to source-map for publishing as eval is insecure. Here's more details:
https://webpack.js.org/configuration/devtool/

I still seem to get a bit of a delay with just the devtool change. However I think the change I made to switch back to awesome-typescript-loader and angular2-template-loader instead of @ngtools/webpack removed that delay as it's now back to under a second for me.

I made the change not to use ngtools for dev builds at least because I wanted two build multiple angular apps within solution and have HMR working aspnet/JavaScriptServices#566. I can't use ngtools because of angular/angular-cli#5072.

[heqiao]

@mcm-ham Changing to cheap-eval-source-map does not gain me a faster rebuild. Still above 6 seconds. I haven't tried replacing @ngtools/webpack though.

[MarkPieszak]

We can set it up to do ATLoader and such for development and ng tools for prod, but it just ups the difficulty and maintability for most devs, as things now need to be added and maintained in more than one place.

Is that something we want though? Up to you guys.

[mcm-ham]

@heqiao Try changing webpack.server.js as well. Here are my numbers:

Change	Reload Time
Only HMR re-enabled	12 sec
Change client devtool to cheap-eval-source-map	9 sec
Change client and server devtool to cheap-eval-source-map	2 sec

Turns out it was fast with my changes before because I had disabled SSR, changing to awesome-typescript-loader instead of @ngtools/webpack with the client devtool change just brought it down to 6 sec with SSR enabled.

[heqiao]

@mcm-ham That does the trick! Down to 1 sec with a brand new copy of the repo. Thank you for the help! 😄

[consigliory]

Hi. for me hmr does not works. I did uncommented https://github.com/MarkPieszak/aspnetcore-angular2-universal/blob/master/Client/main.browser.ts
changed modulePromise.then(appModule => appModule.destroy());
to platformBrowserDynamic().destroy();
set env var as usual export ASPNETCORE_ENVIRONMENT=Development
and in console it writes [HMR] connected
but on file change it does not do anything

[heqiao]

@consigliory I uncommented but didn't change that line of code. When you run dotnet run, what is the Hosting environment? I had difficulty to set the environment correctly, ASPNETCORE_ENVIRONMENT=Development works for me without set or export key word on Win 10 with git bash.

[consigliory]

hmr is alive and have active event stream but on file change nothing happens.

[MarkPieszak]

Might be a multitude of different things, do you have some repo we can take a look at?

[MarkPieszak]

So I didn't realize I had that code uncommented, so I just pushed it back in :)

@mcm-ham Did you want to put in a PR to add those speed improvements? Would be greatly helpful for others! 🎁

[LiverpoolOwen]

@MarkPieszak Is there any way we can speed up the HMR? It is quite slow. I know there is a hell of a lot going on to be fair but it can sometimes take 20 seconds.

[MarkPieszak]

Mainly because Vendor isn't separated so it's recompiling everything, I'll add in the vendor chunking & polyfill chunking and maybe DDL support to really help speed things up!

I just stopped working on all that since there were bigger fish to fry for a bit :)

[LiverpoolOwen]

Thanks for the quick reply @MarkPieszak, that makes complete sense. I am going to have to have a mess around with webpack to get a better understanding of its workings.

[hheexx]

I would recommend disabling webpack recompilation for node during development.

[isaacrlevin]

Closing this as HMR is working with latest code base