Bug: Named Outlet non responsive after `clearHistory` navigation

[wSedlacek]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 8.1.3
• Cross-platform modules: NA
• Android Runtime: 8.1.1
• iOS Runtime: Not Tested
• Plugin(s): @nativescript-community/ui-material-bottomnavigationbar
• NativeScript-Angular: 12.2.0
• Angular: 12.2.0

Describe the bug
When navigating to a nested route (one with a named outlet) after a clearHistory a navigation event would fire, but the outlet would not be updated

To Reproduce
Clone https://github.com/herefishyfish/named-router-navigation-bug
Start Android application
Press "Go to dashboard"
Press "Nested route in navbar"
Press Notifications tab
Press Todos tab
Press "Nested route in navbar"

Expected behavior
For the second press of Nested route in navbar to navigate to the nested route.

Sample project
https://github.com/herefishyfish/named-router-navigation-bug

Additional context
There was a few messages in Discord about this:
https://discord.com/channels/603595811204366337/606457628729671691/895530953068408894

[timdoege]

@wSedlacek:
I tried the test repo on iOS and (after wrapping the login.component content in a StackLayout to remove the More than one layout child inside a ContentView error) I get the same behaviour.
The routing seems to work again after switching tabs a few times (in an iOS Simulator, at least).

What puzzles me is that I don't get the same behaviour in this app
https://github.com/NativeScript/login-tab-navigation-ng
(using the PR with NS 8.1/Angular 12)
since it does the same (login -> nav with clearHistory).

I've got the above in (a more complex setting) in two apps, and in one of them I get the error, where the router just does not respond after doing a clearHistory navigation (from login to a tabs component directly) while my other app (navigating from login to a "welcome" component before hitting a tabs component) does not have this issue using practically the same package.json.

I did try the fix in PR #38 on my large project that has the issue, and that, unfortunately, does not change anything.

[wSedlacek]

I'll try to get this fired up on an iOS simulator and see what happens.

[timdoege]

Hm, I've tried rolling back to Angular 11 (11.2.14) + NS Angular 11.8.0 and do also get this issue in my "complex" app (all routing just stops - only .back() and tab changes work).

[timdoege]

Just a side note: Running with HMR on Android, I get this crash when doing code changes using PR 38

JS: TypeError: Cannot read property 'outlet' of null TypeError: Cannot read property 'outlet' of null
JS:     at PageRouterOutlet.ngOnDestroy (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:5836:0)
JS:     at executeOnDestroys (file: node_modules/@angular/core/fesm2015/core.js:7418:0)
JS:     at cleanUpView (file: node_modules/@angular/core/fesm2015/core.js:7321:0)
JS:     at destroyViewTree (file: node_modules/@angular/core/fesm2015/core.js:7147:0)
JS:     at destroyLView (file: node_modules/@angular/core/fesm2015/core.js:7299:0)
JS:     at RootViewRef.destroy (file: node_modules/@angular/core/fesm2015/core.js:22663:0)
JS:     at ComponentRef$1.destroy (file: node_modules/@angular/core/fesm2015/core.js:25197:0)
JS:     at file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:1783:0
JS:     at file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:1756:0

which is this line from the PR:

   5836         if (this.parentContexts.getContext(this.name).outlet === this) {
   5837             // Clear accumulated modal view page cache when page-router-outlet
   5838             // destroyed on modal view closing
   5840             this.parentContexts.onChildOutletDestroyed(this.name);
   5841         }

[wSedlacek]

@timdoege I have updated my PR to account for the response being null
Perhaps in a future update strict TypeScript mode can be enabled on this repo.

What puzzles me is that I don't get the same behaviour in this app
https://github.com/NativeScript/login-tab-navigation-ng

I attempted to get this repo running but I did not have any luck.
I am on an M1 Max now and this repo was setup for NS 6 from what I could tell.
There also was the issue of it using a non public registry in the package-lock.json

I did test the behavior on iOS now though, in the template app.
My changes do fix the behavior on that app.

Do you have an example app with NativeScript 8+ that doesn't work with these changes that I can debug against?

[timdoege]

@wSedlacek Great - I will give your update a spin this week, thanks.

Regarding repo the https://github.com/NativeScript/login-tab-navigation-ng
you should be able to run my PR

NativeScript/login-tab-navigation-ng#21

which moves it to NS 8.1 / Angular 12 (and MD bottom navigation).

[wSedlacek]

Thank you. I will give NativeScript/login-tab-navigation-ng#21 a shot.