NativeScript: router-outlet doesn't work

Question

I follow this official example in my app that shows how a <router-outlet> is implemented in {N}. The only difference in my app is that I want to use it within a modal page. But instead of the <router-outlet> element within the modal, it loads the content as new pages.

ModalComponent

...
@Component({
    selector: "modal",
    template: `
        <StackLayout>
            <StackLayout>
                <Button text="First" [nsRouterLink]="['/first']"></Button>
                <Button text="Second" [nsRouterLink]="['/second']"></Button>
            </StackLayout>

            <router-outlet></router-outlet>
        </StackLayout>
    `
})
export class ModalComponent {
    constructor(private page:Page, public params:ModalDialogParams) {
        // ..
    }
}

app.routing.ts

...
export const routes:Routes = [
    { path: "", redirectTo: "home", pathMatch: "full" },
    { path: "home", component: HomeComponent },
    { path: "modal", component: ModalComponent },
    { path: "first", component: FirstComponent },
    { path: "second", component: SecondComponent }
];

export const dynamicComponents = [
    ModalComponent,
    FirstComponent,
    SecondComponent
];
...

app.module.ts

...
@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(routes)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        ...dynamicComponents
    ],
    entryComponents: [
        ...dynamicComponents
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Any idea why /first and /second navigates to a new page instead of loading the into router-outlet of the modal?

UPDATE:

This seems to be a bug. See my answer below.

Answer 1

I created clean {N} + Angular projects and made tests. Turns out if the app is bootstrapped with a component that has a <page-router-outlet>; it ignores any <router-outlet> within a (sub) page/component and nsRouteLink will navigate to a new page instead of loading the target component in the router-outlet.

Tests without <page-router-outlet> (in the root component) worked as expected.

I think this is a bug since I don't see any notice about having to use either one of <page-router-outlet> or <router-outlet> in the documentation (wouldn't make any sense anyway).

UPDATE: Opened an issue here.

UPDATE 2: Nested routers (<router-outlet> with <page-router-outlet> in the root) should define children to work. But if the <router-outlet> is in a modal, it won't work (throws Error: No provider for ModalDialogParams!). This is definitely a bug, confirmed here.

Answer 2

{
    path: 'modal',
    component: ModalComponent,
    children: [
        { path: "first", component: FirstComponent },
        { path: "second", component: SecondComponent }
    ]
}

Answer 3

In your app.module.ts file make following changes to do it without NativeScriptRouterModule:

  import { RouterModule } from '@angular/router';  

@NgModule({
imports: [...,RouterModule.forRoot(routes)],
declarations: [
        AppComponent,
        HomeComponent,
        ...dynamicComponents
    ],
    entryComponents: [
        ...dynamicComponents
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

When you close the modal you should also navigate back to the modal route because the activated route will be /first or /second and you want the activated route to be /modal after the modal has disappeared.