Issues with nested named, multiple routes

Question

I am trying to get the basic structure and tab navigation of an app set up, and I ran into a problem with nested routing (at least apparently that is the source of the problem).

I have been following this official guide.

I have isolated the problem, and you can find the files on this Playground to reproduce the error.

I've activated tracing in the app, and the error thrown is:

NavigationError(id: 2, url: '/home/(newTaskTab:create//browseTasksTab:browse//accountsTab:account)', error: Error: Cannot match any routes. URL Segment: 'home')

I am confused by the fact that it's complaining about URL Segment: 'home', even though /home loads, as I can see the bottom tab navigation. But none of the modules that are supposed to get loaded within these tabs show up (they are just very simple placeholder modules with one component, each with a single label)

I have spent a considerable amount of time comparing my code to the guide's code.

Any pointers would be immensely welcome.

EDIT: I have also tried removing modules / lazy loading. I stripped them out, doing all the routing in app-routing.module.ts, tying the paths directly to individual components. One thing I found out was that if I had the root route defined as { path: '', redirectTo: '/home/(newTaskTab:create//browseTasksTab:browse//accountsTab:account)', pathMatch: 'full' }, the same NavigationError from above gets thrown immediately on app load, and HomeComponent does not load at all. If I define it as { path: '', redirectTo: '/home', pathMatch: 'full' }, then HomeComponent loads, but none of the children do, even though I have this in HomeComponent.ts:

ngOnInit() {
        this.routerExtension.navigate(
            [{ outlets: { newTaskTab: ["create"], browseTasksTab: ["browse"], accountsTab: ["account"] } }],
            { relativeTo: this.activeRoute }
        )
}

And I get the same NavigationError as a result of the .navigate method call.

Answer 1

A kind soul (thank you again, Frank, if you ever stumble upon this) on the NativeScript Community Slack workspace helped me solved the issue. Besides a small typo in one of the outlet names (which was only present in the stripped down version of my code, which I provided to illustrate the problem), the issue boiled down to two things:

1. Wrapping each <page-router-outlet> in a <StackLayout> in the template that holds the tabs
2. In the same component, it seems you need to have a named route that holds the children routes. Initially I had defined the children under the root route. The solution was to redirect from the root route to this other route (called it "tabs"), which in turns defines the children routes for each tab's outlet.
3. (probably not essential) Changed tsconfig.json to correctly define the application's root folder, and then changed the modules' import statements to absolute, rather than relative, paths (e.g. "~/app/browse/browse.module")

The code can be found in this repo on my GitHub. Master branch has two commits: the initial one shows the problem, second commit provides the solution.