<router-outlet> as root element route to invisible component

[liuwei108]

Make sure to check the existing issues in this repository

Checked

If there is no issue for your problem, tell us about it

I decide to not using page-router-outlet and change to use angular's router-outlet due to the nav cache problem mentioned in #374

So I changed <page-router-outlet></page-router-outlet> to <router-outlet></router-outlet> in app.component.html, and I got an error.

By searching bugs here, I found #1384 match it and the solution is to add "{ createFrameOnBootstrap: true }" in main.ts. I did that, and my main.ts now look like this:
platformNativeScriptDynamic({ createFrameOnBootstrap: true }).bootstrapModule(AppModule);

Then no error appear and the app started. I have 2 component: Home and About
If I click a button in HOME to route to ABOUT component, the ABOUT page doesn't show any thing. by tracking the ngOnInit method, I can see the About Comp did imitated, just invisible.

I found a workaround, that is wrap the <router-outlet></router-outlet> in a stack layout, like this:

<StackLayout>
    <router-outlet>
    </router-outlet>
</StackLayout>

I believe this should be a bug, can any one like into this? Thanks!

Which platform(s) does your issue occur on?

Occurs in all platform

Please, provide the following version numbers that your issue occurs with:

tns --version
4.1.2

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Is there any code involved?

Please check code sample in
router-outlet-route-to-empty-page

[NickIliev]

@liuwei108 - thank you for your question - indeed the matter needs some clarification in the documentation.

What is happening here is that when we are using page-router-outlet then behind the scenes, NativeScript is creating a Frame (corresponding to the native navigation controller for Android or iOS). As this is a native component, you won't need to explicitly wrap the page-router-outlet in any native layout.

However, this is not the case for router-outlet. The router-outlet is an Angular element, and there is no mobile counter part to wrap ti. So we can't have a router-outlet on root level - the Angular component needs to be wrapped in a NativeScript one as you have found yourself in your workaround.

<GridLayout>
    <router-outlet></router-outlet>
</GridLayout>

As the solution is in fact, the expected behavour I am going to explicitly add a note in the related documentation section

Side notes about router-outlet, page-router-outlet and createFrameOnBootstrap

• When we are using page-router-outlet, we are creating a navigation controller ('Frame'), and we can have ActionBar on our pages.
• When we are using createFrameOnBootstrap set to true, we are again creating a navigation controller ('Frame') and we can ahve ActionBar (no matter if using page-router-outlet or not)
• When we don't have a page-router-outlet and the createFrameOnBootstrap is set to false (default is false) then we can't have an ActionBar! The reason is that the ActionBar in NativeScript is part of the native navigation controller and with this setup there is no Frame created.

[NickIliev]

Documentation note added via this PR

[liuwei108]

Hello Nick,

Thanks for explanation.

<GridLayout>
    <router-outlet></router-outlet>
</GridLayout>

works fine within normal page navigation, but has problems when put in modal page navigation.
By following the doc, and change the
<page-router-outlet></page-router-outlet>
to

<StackLayout>
    <router-outlet></router-outlet>
</StackLayout>

in page modal main component, it works first time I open the modal, but if I open modal second time and navigate from one modal comp to another, an error occur:

ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet
JS: Error: Cannot activate an already activated outlet
JS:     at RouterOutlet.activateWith 

Is this also expected behavior?

Thanks!
David

[NickIliev]

@liuwei108 this seems like a bug - if possible please provide a sample project or Playground that can reproduce the issue.

[liuwei108]

Hello Nick,

Please check https://play.nativescript.org/?template=play-ng&id=H6aK0A&v=4

If I change modal.component.html
from

<StackLayout>
    <router-outlet></router-outlet>
</StackLayout>

to

<page-router-outlet></page-router-outlet>

There are no problem.

[liuwei108]

Guess this should be in a separate issue, so I raised a new issue for it #1452

[NickIliev]

@liuwei108 closing this issue as it seems the main question is answered here - I will post my answer related to the modal navigation in the newly opened issue