@tsonevn Navigation state is also not maintained after HMR.

do you want me to create a new issue to track it?

@shiv19, 10x for the feedback! You don't need to log an issue. I will add Research ways to persist nav history to the list of possible improvements.

TLDR;
This is the expected behavior of the reloadPage function that's used for applying the changes.

Is HMR supposed to tear down the entire angular app when reloading? Thought it was supposed to maintain the state? We're seeing ngOnDestroy getting called for everything on reloads, and it's causing problems.

Can anyone clarify?

(I'll create an issue if it's not supposed to do that)

EDIT: So module['hot'] is always undefined, even with tns run android --hmr, which seems to be the culprit? Solution: Outdated webpack.config.js (still seeing the above behavior though)

EDIT2 Found our particular issue:
NativeScript/nativescript-dev-webpack#708

Typically when trying to do HMR like this, you might need to check for module['hot'] and dispose the previous one.

(As an example I do for aspnetcore & angular integration with HMR)

// // Enable either Hot Module Reloading or production mode
if (module['hot']) {
  module['hot'].accept();
  module['hot'].dispose(() => {
    modulePromise.then(appModule => appModule.destroy());
  });
} else {
  enableProdMode();
}

Updated for 5.2 release.

[ ] {N}-modules Improve the reload strategy when the root view is not Page, but TabView, SideDrawer, etc.

Are there any workarounds? When can we expect this to work out of the box?

Hey @hettiger,

This has been implemented for NativeScript applications with JavaScript and TypeScript:

• related issue: [HMR] Preserve application navigation history #7145
• available with tns-core-modules@next
• official release with NativeScript 5.4.0

I tried it today and it works like a dream! Love it <3

Hey guys. When I close the app and open it again, every changes with --hmr is gone. But this doesn't happen without --hmr. Any idea?

Hey @vahidvdn,

There was a regression in some of the next versions of nativescript-dev-webpack and that could be the reason. Could you please make sure you use the most recent latest or next version?

Let me know if still experience this problem.

I understand that {N} + Angular + HMR means that the application will bootstrap on change.

Does this imply that objects created by Angular's DI / bootstrap mechanisms will get recreated from scratch? Or will a @Injectable object be "the same" before and after HMR executes?

Right now I see lots of (non-UI) objects getting re-created after HMR.

Hi @vchimev
This still happens in nativescript 6.1. I just update my cli and created a project with Angular tab template.
Now hmr is enabled by default. I save some changes, close the app, then I open it, I don't see the changes. And due to closing the app, I can't save new changes anymore.

@vahidvdn mine used to do the same until I removed the come on maint.ns.ts that used to listen for hmr module flag.

@Jonatthu Thanks, but I'm afraid I didn't catch on you. You just turned off the hrm?

If you have a code like this just comment it out

@Jonatthu You are just falling back to the legacy one. Actually that is not a solution. The legacy reloader dropped in version 6.0

It's a bug with hmr and by deleting it we miss the advantages of it.

@vahidvdn I was having problems with my hmr until I commented out this piece of code.
After I removed this legacy code, my start working with 6.1

Would using mettro instead of webpack make things easlier since they seem to have solved the situation with Expo

Would using mettro instead of webpack make things easlier since they seem to have solved the situation with Expo

@trajano It's not realistic to port our very Webpack-reliant ecosystem over to Metro, which in any case has far worse documentation and is a far less open ecosystem. Callstack are in fact building solutions to move away from Metro to Webpack, which I believe Expo are interested in (as it would allow a common and well-understood bundler for both React Native and React Native Web, and super-fast builds with esbuild).

The bundler itself is a relatively minor factor in how good the HMR experience is.

Thanks @shirakaba I am just trying to see how to get all of this working to the same level as we have with Expo and React-Native where we can make changes and it updates the app automatically. I see announcements for HMR with Nativescript but I could never get it working and a few StackOverflow questions lead to issues that lead here.

@trajano what specifically is not working, and which flavour of NativeScript are you using (Angular, Vue, etc.), and could you share your package.json?

@shirakaba I created #9507 so I don't make this go too long.