Nativescript-angular: 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

[jogboms]

@sis0k0 @Buuhuu sorry to drag this out again but using nativescript-angular (latest) and tns-core-modules (latest), This white screen still pops up after clearHistory.

[Buuhuu]

Can you check if ngDestroy() is called before or after the navigation happened? Might be a regression with the latest changes and if so, it would probably make sense to open a new issue.

[vakrilov]

@jogboms I think this is a regression after the 4.2. There is a PR(#977) that might solve the issue again - can you check if it will work in your case.

[jogboms]

@vakrilov I just install the branch.

JS: ERROR Error: Uncaught (in promise): Error: Outlet is not activated
JS: Error: Outlet is not activated
JS:     at PageRouterOutlet.detach (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/nativescript-angular/router/page-router-outlet.js:152:19) [angular]
JS:     at ActivateRoutes.detachAndStoreRouteSubtree (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4525:64) [angular]
JS:     at ActivateRoutes.deactivateRouteAndItsChildren (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4511:18) [angular]
JS:     at file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4541:55 [angular]
JS:     at forEach (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:498:13) [angular]
JS:     at ActivateRoutes.deactivateRouteAndOutlet (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4541:13) [angular]
JS:     at ActivateRoutes.deactivateRouteAndItsChildren (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4514:18) [angular]
JS:     at ActivateRoutes.deactivateRoutes (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4500:22) [angular]
JS:     at file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4466:19 [angular]
JS:     at Array.forEach (native) [angular]
JS:     at ActivateRoutes.deactivateChildRoutes (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4464:29) [angular]
JS:     at ActivateRoutes.activate (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4450:14) [angular]
JS:     at file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/@angular/router/bundles/router.umd.js:4064:22 [angular]
JS:     at SafeSubscriber._next (file:///data/data/com.rfnl.fixershubclient/files/app/tns_modules/rxjs/Observable.js:224:21) [angular]

[jogboms]

@Buuhuu The incoming components ngOnit is triggered first then the navigatedFrom's component gets destroyed. All these happens before the navigatedTo component is displayed.

[vakrilov]

@jogboms Do you have project I can test with?

[jogboms]

@vakrilov I'd make one up before the end of today and share it here.

[jogboms]

@vakrilov created a sample app here

[jogboms]

nativescript-angular@next

Fixed #977.

[NickIliev]

+1 from t.1129772

Navigating from one page to another causes the client application to flicker with a white screen.
Note; The application is also using lazily loaded modules

[vakrilov]

This one is already resolved using nativescript-angular@next with [email protected].
Will be included in the official [email protected] release.

[farfromrefug]

@vakrilov sorry to bump that very old issue but i am seeing this in my app using 5.4.0 inside a Vue project. Could you explain (recall) what you changed in Angular to fix it?
Might have to apply the same fix to Vue $navigateTo
Thanks

[alexrainman]

This issue still there in current version :(

[farfromrefug]

@alexrainman indeed still see this. But it is NOT related to angular!
The original issue need to be unlocked / reopen
And i think it might come from the iOS page implementation. I think it might come from some mix-up calls between viewWillAppear and viewDidAppear

[alexrainman]

@farfromrefug it is not just iOS, i happens in Android too.

[farfromrefug]

@alexrainman ok then it might be an angular issue for you.
Will open a new issue for my white screen :D