Root with <page-router-outlet> disables <router-outlet>

From @onury on December 29, 2016 1:56

Please, provide the details below:

Did you verify this is a real problem by searching [Stack Overflow]

Yes. Couldn’t find a solution, created a new thread here. Answered here.

Tell us about the problem

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.

Which platform(s) does your issue occur on?

iOS Android not tested.

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

• CLI: 2.4.2
• Cross-platform modules: 2.4.4
• Runtime(s): tns-ios: 2.4.0
• Plugin(s): 2.4.3

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

• Create/configure the simplest app via tns with --ng support.
• Modify the bootstrapped app.component.ts and include a <page-router-outlet>.
• Use the official example to create other components such as FirstComponent, SecondComponent… and configure.
• Add a HomeComponent to include a <router-outlet> and link buttons to /first and /second (like in the example).
• Run.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

app.component

@Component({
    selector: "main",
    template: "<page-router-outlet></page-router-outlet>"
})
export class AppComponent {}

home.html (of HomeComponent)

    <StackLayout>
        <StackLayout>
            <Button text="First" [nsRouterLink]="['/first']"></Button>
            <Button text="Second" [nsRouterLink]="['/second']"></Button>
        </StackLayout>
        <router-outlet></router-outlet>
    </StackLayout>

first.html (of FirstComponent)

        <StackLayout>
            <Button text="This is FIRST. Load SECOND" [nsRouterLink]="['/second']"></Button>
        </StackLayout>

second.html (of SecondComponent)

        <StackLayout>
            <Button text="This is SECOND. Load FIRST" [nsRouterLink]="['/first']"></Button>
        </StackLayout>

app.routing

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

Copied from original issue: NativeScript/NativeScript#3378

[drewcovi]

Has anything changed here?

Following this example exactly simply doesn’t work: https://docs.nativescript.org/ui/modal-view-ng#modal-view-navigation

As @onury mentions in his use case, the following error is thrown at first Error: No provider for ModalDialogParams!

After adding it to app.module.tns.ts JS ERROR Error: Can't resolve all parameters for ModalDialogParams: (?, ?).

Seems odd that this example in the documentation doesn’t work.

[onury]

Sorry it was still building the old sample app somehow. Cleared everything, re-built. I confirm it works on iOS with children paths.

Thanks for your help @NickIliev. (This should clearly be indicated in the docs, though)