[Tracking] 🔥 Hot Module Replacement with webpack

Overview

Hot Module Replacement (HMR) is a feature provided by webpack. It makes it possible to replace modules in a bundled application while the application is running.

Integrating HMR within NativeScript will improve the development experience by:

reducing the time to apply the updates when changing files;
preserving the application state between reloads.

Design

Implementation details and motivation of the feature can be found in its design document.

Tasks

NativeScript 5.0

After NativeScript 5.0

The possible improvements are explained in the design doc.

Known issues

{N}-modules Currently if you add a new -page.css, -page.xml or -page.ts/js file it won't be accepted as it will trigger an update in the ./ sync recursive... item in the bundle which is not being accepted, so this will make the CLI restart the app to apply the change
[5.2] nativescript-dev-sass Changes in app.scss are not applied in Angular applications
{N}-Angular Changes in plugin do NOT apply in angular projects:
[HMR] Changes in plugin do NOT apply in angular projects nativescript-dev-webpack#914

Contributing

HMR provides us with so many possibilities!
If you want to work on a task from the list, tell us and we will do our best to help you!
If you have another great idea on how to make HMR even cooler, share it in the comments!

Discussion

Please, don't report problems here. Instead, open a new issue and link it to this one.
Let's use this discussion for suggestions and improvement ideas. We would love to hear from you!

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

@tsonevn

@tsonevn Navigation state is also not maintained after HMR.

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

@shiv19

@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?

@hettiger

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?

@vahidvdn

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.

@Injectable

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.

@vchimev

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

@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

@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

@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

@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

@trajano

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.

@shirakaba

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

@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

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

Closing this tracking issue: Hot Module Replacement shipped and is the default dev workflow, with @nativescript/webpack and now @nativescript/vite across the Angular, Vue, Solid, Svelte, React and plain flavors. Please open focused issues for any HMR problems on current tooling.

Navigation Menu

Repository navigation

[Tracking] 🔥 Hot Module Replacement with webpack #6398

Overview

Design

Tasks

NativeScript 5.0

After NativeScript 5.0

Known issues

Contributing

Discussion

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Tracking] 🔥 Hot Module Replacement with webpack #6398

Description

Overview

Design

Tasks

NativeScript 5.0

After NativeScript 5.0

Known issues

Contributing

Discussion

Activity

shiv19 commented on Oct 21, 2018

sis0k0 commented on Oct 22, 2018

larssn commented on Nov 9, 2018

MarkPieszak commented on Nov 9, 2018

vchimev commented on Feb 10, 2019

hettiger commented on Apr 2, 2019

vchimev commented on Apr 25, 2019

shiv19 commented on Apr 25, 2019

vahidvdn commented on May 10, 2019

vchimev commented on May 14, 2019

lambourn commented on May 15, 2019

vahidvdn commented on Sep 5, 2019

Jonatthu commented on Oct 29, 2019

vahidvdn commented on Oct 29, 2019

Jonatthu commented on Oct 29, 2019

vahidvdn commented on Oct 29, 2019

Jonatthu commented on Oct 29, 2019

trajano commented on Aug 10, 2021

shirakaba commented on Aug 10, 2021

trajano commented on Aug 10, 2021

shirakaba commented on Aug 10, 2021

trajano commented on Aug 10, 2021

NathanWalker commented on Oct 23, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions