White screen on navigate with clear history parameter

[NickIliev]

From @mayureshjadhav on May 26, 2017 3:47

I am using NativeSctipt 2.5 and nativescript-angular 1.2.0 in my app.

Scenario is I am navigating from page 1 to page 2 while navigating I am clearing the history but I can see a white screen while moving from page 1 to page 2 .

What is the issue?

Copied from original issue: NativeScript/NativeScript#4269

[NickIliev]

@mayureshjadhav there might be multiple reasons for your issue so please post more detailed information on how to reproduce your case. As the latest version is 3.x.x we will need both the content of your package.json file and the code used to create your application - the best case would be to create a sample application that demonstrates the issue and what you have achieved so far.

[NickIliev]

From @mayureshjadhav on May 31, 2017 4:21

Actually, I created project from hello word template and added two more pages and when I try to navigate from one page to another by using following code

this.routerExtensions.navigate(["about"], {
                            clearHistory: true
                        });

I can see a white screen and then it moves to about (another) page.

Actually, you will not see the difference in a small application but when your app becomes complicated you will observe this issue.

[NickIliev]

@mayureshjadhav I was able to fully reproduce this issue using Angular application and ClearHistory set to true with some PageTransition (the default one as well). The issue is not reproducible with core NativeScript project. Marking this one as a bug - keep track of this issue for further updates.

Reproducible with both iOS and Android but only in Angular based applications.

Sample application to reproduce the issue can be found here.

Steps to reproduce:

• load the app
• navigate with clearHistory set to true+ page transition (use some of the provided options in the app)

Actual result: the current page is replaced with a white screen and then the navigation proceeds.

Expected result : the current page to stay during the navigation transition as in this NativeScript core application

[buuhuu]

A guess: This is caused because when clearHistory is set the Angular component tree gets destroyed in clearRefCache before the navigation begins causing views to be removed for the surface and resulting in a white page. Working on a PR to get that resolved.

Update: My approach is, to instead of directly destroying the cached items I queue them into an array and destroy any queued items within the navigatedFrom event asynchronously. This also improves navigation performance as destroying the component tree (including freeing memory) seems to be a bit expensive