🐞[BUG]: HMR Ivy fails

[splincode]

Relative: angular/angular#35265

[splincode]

After investigation we know that HMR works only with AOT true for Angular 9.

@markwhitfeld @arturovt how detect aot is enabled for Angular 8, Angular 9 (ivy/view engine)?

[arturovt]

Can't check if it's working, unfortunately, but you could check if the static property is defined on the module:

const isJIT = Array.isArray(NgxsModule['__annotations__']);
const isAOT = isJIT === false;

[gtamas]

@markwhitfeld @arturovt @splincode splincode

I'm using Angular 9.0.7

I've implemented everything using your hmr-plugin, but HMR doesn't seem to work...
There are no errors and this what I see in the console:

[HMR] Waiting for update signal from WDS...
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
Hot Module Replacement enabled.
Live Reloading enabled.
App updated. Recompiling...
App hot update...
App updated. Recompiling...
[WDS] App hot update...
...

Whenever I edit the code, a hot update gets generated but somehow it doesn't get applied to the view. Nothing changes. No reload, no updated injected, nothing.

Is this supposed to work? How do I enable AOT in A9? Isn't it enabled by default?

[splincode]

It looks like the Angular team is not going to support HMR
angular/angular#35265

[gtamas]

@splincode
Just tried turning AOT on (although it should be enable by default in A9). No change,.
But I don't see any errors.

[gtamas]

The HMR works like a charm with Vue and you don't even have to install or configure anything, it's built-in.
Angular, on the other hand, has been struggling with this for a while now. Looks like no implementation is perfect... :(

[gtamas]

Anyway, so if understand this correctly, this should work even with Ivy when AOT is enabled. Something must be wrong with my local setup. I'll investigate, but any help would be appreciated :). I followed the @ngxs/hmr-plugin tutorial and it's not working.

[splincode]

if you find a bug and send us a PR we will be grateful

[splincode]

angular/angular-cli#17324
angular/angular#35143
angular/angular#29452
angular/angular#35265

[markwhitfeld]

Good news, NGXS v3.7 was released last week.
Bad news, we had to remove support for HMR due to lack of official Angular support for the HMR workflow, and no more options existed within our control to be able to address the issues.
( see https://dev.to/ngxs/announcing-ngxs-3-7-1kbk for release notes )

PS. There is an alternative to use the storage plugin to get a similar experience.