[question] How to use HMR for typescript

[shahabganji]

For hot module replacement(reload) in asp.net core, we face some difficulties, in which typescript files do not reload on the change save process. while it is working with angular which seems to be owing to the following code snippet in their boot-client.ts

if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => {
        // Before restarting the app, we create a new root element and dispose the old one
        const oldRootElem = document.querySelector('app');
        const newRootElem = document.createElement('app');
        oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);
        modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

I was wondering whether there is any solution to enable such capability for Aurelia projects or not?

[niieani]

This package provides the module.hot.accept functionality. It is experimental though, so it might not work in some cases. You'd have to provide a full repo to reproduce, although unfortunately right now our resources are limited and we are focusing on SSR and other important features more than on HMR.

[HamedFathi]

@niieani ,

I have @shahabganji `s problem too, The main problem comes from where we need HMR for .ts files in Aurelia like Angular. When you use the default standard aurelia-asp.net Core template via latest dotnet new --install "Microsoft.AspNetCore.SpaTemplates::*" and dotnet new aurelia commands you can see HMR works very well with HTML,CSS,SCSS (if you add the loader) without refreshing browser but for .ts files does not

so I want to know for this problem means HMR for .ts with Aurelia-webpack-plugin is there any solution or not ? We did not have this problem in Angular`s template (dotnet new angular), I checked the angular template in that templates and found above codes as main different for .ts HMR. (module['hot'].accept(); ... )

now the main question is , Does Aurelia-Webpack-Plugin (as HMR feature or anything else) work with .ts files without refreshing browser or not ? (we dont like to use browserSync for auto refreshing browsers !!!)

[niieani]

Yes, it works with TypeScript the same way as it does with JavaScript. The skeleton-navigation-webpack-typescript has an example included.

[HamedFathi]

@niieani ,

Nope, I checked the example you said, I did not see HMR, when I changed any .ts files, the browser refreshed !!! but in angular examples HMR works with .ts files without refreshing browsers.

I believe the browser refreshing is not a part of HMR !.

The main problem is browser refreshing for .ts files as I said above I can using browsersync for "Microsoft.AspNetCore.SpaTemplates::*" for refreshing after .ts files changes but I dont. (of course I think there is a bug !)

Can you update or test the SpaTemplates for this purpose specially because the sample uses pure wepack not easy-webpack or ... ? I think this is the same project as SpaTemplates.

[shahabganji]

@niieani ,

The main point is that when the HMR module understands about the changes in .ts files, it does not refresh even the whole page and browser, and even it refreshes it will lead to losing the state of the application that is not suitable.

The module.hot.accept functionality is not what I accept from Aurelia to support or not, instead I expect there'll be some replacement for it in order for us to be able to use HMR with ASP.NET MVC Core projects, just like angular that provides such functionality.

As @HamedFathi said, both spa templates provided by Steve Sanderson in dotnet new and @EisenbergEffect are the same, and surprisingly while they understand the change of .ts files but they don't replace the new module with the old one, while they do for other files, .html, .css, .scss, and etc for instance.

I would be grateful if you could come up with any suggestion or alternative to the problem.

Had we any hint of how to implement such functionality, we could also assist providing such capability for the framework.

[niieani]

@HamedFathi did you run with the HMR enabled? See: https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-webpack#running-with-hot-module-reload

[HamedFathi]

@niieani ,

yes, I did

please see these pictures

for changing TypeScript

for changing Html

If I changed .ts file then changed .html file both changes perform successfully but for .ts files need refreshing the browser

[niieani]

OK, so that looks like a bug in this module (HMR support in general). It's not related to TypeScript support though, I'm pretty sure you could reproduce the same problem in the JavaScript skeleton. I could be wrong though.

[HamedFathi]

@EisenbergEffect , @niieani

so, What is the next step ?! What should we do ? Who will fix it?

[niieani]

@HamedFathi Currently SSR is a higher priority for the team than HMR.

HMR is nice-to-have, but very hard to do both right and bug-free. As you can read from the issues in this repository, I believe we need to make some changes to how Aurelia works for HMR to work reliably.

I'm sorry, but I don't think this is going to be completely fixed until Aurelia 2.0, unless somebody has time (or money) to contribute to the issue of HMR specifically.