Angular hot reloading / replacement

[enchev]

From @mardo on April 22, 2016 16:29

Hello!

I'd like to know if hot reloading is coming for nativescript-angular apps. I know livesync is working, but it refreshes the whole app and doesn’t keep the state; I just want to know if we can go even further.

Let's say we make a change on the editor and the whole angular component gets replaced without refreshing the app, and you will be able to test that component with the app's current state (i.e. you are on a subpage where you already navigated, I'd love not to login/navigate/etc again just to test the component).

Copied from original issue: NativeScript/nativescript-cli#1713

[matt4446]

I would love this too (so many page navigations to see the tiniest of changes)
Im not sure how angular could be told to re-load an individual component. If someone could prove me wrong that would be awesome ;-)

As an alternative ...

I would not mind the whole application restart providing that the application could rebuild the state. Could that problem be solved closer to now?

Angular2 browser app is able to refresh the application and the url will drag the user back to the right context providing the developer has supported that idea with route params.
Mobile - obviously no url, but we are interpreting a route. That route could be stashed in application settings so when it is refreshed it navigates to that route.
Application start - set route as "/"
Application restart - set route from cache (application settings) if present.

Given the route the app could continue to interpret the route parts to get the route specific data and continue on its merry way. The application would have to be written to expect a cold start at any location. Ie caching auth tokens and revalidating, loading the domain data based on the route etc. But far less effort than navigating again and again.

[matt4446]

I've now had some success with application refresh and loading from a cached route:
I don't recommend using my implementation, or not yet at least. ;)

this is my third page in (start->regions->region):

JS: NSRememberLocationStrategy.pushState state: null, title: , url: /region/1, queryParams:
JS: NSRememberLocationStrategy.storeCurrentStateForRefresh(): {"state":null,"title":"","url":"/region/1","queryParams":"","isPageNavigation":false}

After editing the page and let livesync restart it now starts on the region page. Now if only all my pages knew enough to load the previous data on the previous pages that provide their context.
A very buggy version so far: matt4446/WhatsMyScore2-NativeScript@1f8aa91

very few modifications really. A new location strategy and telling angular to load that instead:
https://github.com/matt4446/WhatsMyScore2-NativeScript/blob/1f8aa910ff6b38c446570d7fdf0881be5af9bffa/app/router/remember-location-strategy.ts
and then override the location strategy when setting up.

Presumptions: don't care about the navigation stack of the previous pages (busy with this one). ie the cached route is the only page on the history stack. The back button for example will exit the application.

Bugs included: Hardware back button doesn't work. Location provider needs poking as well I think. (Nope, just had to override one more thing)
Clean start - I have not taught it to clear the route cache (so it will always begin at the last page loaded)

While developing (designing) ... this strategy could save quite a bit of time.

Live edit would still be nice ;-)

Any recommendations for this? Not reimplementing the location strategy would be nice. Is there an event for application start, which is not fired during the restart and only startup?

Any better ideas?

[hdeshev]

The web world seems to like solutions based on webpack's hot reloading feature. The angular2-hmr project seems promising -- we should definitely look into ways to support its reloading mechanism in a mobile app.

Another project using webpack HMR: Angular2 WebPack Starter

[bnussey]

What is the status of this? I've noticed React Native now have a hot reload feature.. I think this feature is a must!

[NickIliev]

@bnussey HMR is now officially supported via the --hmr flag

e.g.

tns run android --bundle --hmr