page-router-outlet won't render if it's wrapped in an *ngIf that was initially false

[Burgov]

See this playground example:

https://play.nativescript.org/?template=play-ng&id=m8kxO1&v=2

The property a is initially false, then set to true in the next tick. The Label updates correctly to reflect this, but the page content never shows up.

If you change the code to make a say true initially, it renders as expected.

Both iOS and Android, all latest versions.

[daveware-nv]

To me it now looks like a page-router-outlet won't render at all if in an *ngIf (true or false), or even if declared raw in an ng-template and exposed via *ngTemplateOutlet.

Nativescript 5.2, NS-angular 7.2.3

[MartoYankov]

@daveware-nv The page-router-outlet component must always be wrapped in a layout and it must not have sibling components. This is a side effect of native navigation controllers and the way they are laid out. I think we missed to mention this in the docs, so I will add it.

[daveware-nv]

@daveware-nv The page-router-outlet component must always be wrapped in a layout and it must not have sibling components. This is a side effect of native navigation controllers and the way they are laid out. I think we missed to mention this in the docs, so I will add it.

The problem still presents itself if you do as follows:

<StackLayout *ngIf="true">
    <page-router-outlet></page-router-outlet>
</StackLayout>

The page router is wrapped in a layout and has no siblings, but it will never display.

[MartoYankov]

@daveware-nv Yes, it doesn't work with *ngIf at the moment, hence the issue. I was talking more about the ng-template scenario, but now I think it won't work there too.

[daveware-nv]

This issue mentions *ngIf that is initially false. What I was trying to say in my initial comment, is that appears to be misleading since *ngIf that is true also doesn't work, which appears to be a consequence of page-router-outlet not working when rendered from a ng-template. So this will presumably affect all *directive

[sanzhikee]

Hi, everyone.

I still can catch this problem on ios, on android this work correctly :(