Module Routing as Children

I’m submitting a … (check one with “x”)

[ ] bug report
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

If I define a module fully, with it’s own routes and components and then apply that module as a child of a module intended to be the parent module, the routes still act independently.

Example

AdminModule Admin Component (has router-outlet) SetupComponent UserModule UserComponent (has router-outlet) NewUserComponent

Setup URL is /admin/setup and outputs in the admin component router-outlet (good) New User URL is /user/new-user and it outputs in the User components router-outlet which ends up the main app-component router-outlet instead of the admin component. (bad)

Expected/desired behavior In the example above, the desire would be that my route would be /admin/user/new-user and that the user component would load in the router-outlet of the admin component, rather than on it’s own.

Basically, I want to be able to navigate to components of child modules as though they were defined as child routes of the parent modules routing configuration. Prior to moving my app to modules, I would just stack route definitions and import the child routes (with children of their own) in the higher level route configs. I realize I could expand my definition of modules, making the user components part of the admin module, but for separation I’d rather not do that.

Reproduction of the problem If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

What is the expected behavior? I’m not sure what the expected behavior is, I’m assuming that the way it acts is correct according to the current design of the routing and module systems.

What is the motivation / use case for changing the behavior?

My application is intended to be a composition of multiple modules. Each of those modules is intended to be able to stand on it’s own, as they are re-used in other sibling applications in different ways. That said, once composed, the routes and outlets should make reasonably good sense to both the end users and developers. I shouldn’t have to change the definitions of my modules to get them to stack appropriately.

Please tell us about your environment:

• Angular version: 2.0.0-rc.5 (Router 3.0.0-RC.1)
• Browser: [Chrome XX | Firefox XX | IE XX ]
• Language: [TypeScript 1.8.10]

[StefanRein]

Like @Tragetaschen said, defining the Sub-Feature Modules in the Routing worked really well. For someone searching like me, here is an example:

app.module.ts

@NgModule({
    imports: [
        AppRoutingModule
    ]
})
export class AppModule {}

app-routing.module.ts

@NgModule({
    imports: [
        RouterModule.forRoot([
            {
                path: '',
                redirectTo: '/registration',
                pathMatch: 'full'
            },
            {
                path: 'registration',
                loadChildren: () => RegistrationModule
            },
            {
                path: 'dashboard',
                loadChildren: () => DashboardModule
            },
            {
                path: '**',
                component: PageNotFoundComponent
            }
        ]),
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {}

dashboard.module.ts

@NgModule({
    imports: [
        DashboardRoutingModule
    ]
})
export class DashboardModule {}

dashboard-routing.module.ts

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: '',
                component: DashboardComponent,
                children: [
                    {
                        path: 'overview',
                        loadChildren: () => DashboardOverviewModule
                    },
                    {
                        path: '',
                        redirectTo: 'overview',
                        pathMatch: 'full'
                    }
                ]
            }
        ])
    ],
    exports: [RouterModule]
})
export class DashboardRoutingModule {}

dashboard-overview.module.ts

@NgModule({
    imports: [
        DashboardOverviewRoutingModule
    ]
})
export class DashboardOverviewModule {}

dashboard-overview-routing.module.ts

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: '',
                component: DashboardOverviewComponent
            }
        ])
    ],
    exports: [RouterModule]
})
export class DashboardOverviewRoutingModule {}

This scales really well and I can define the used route names in the parent module, which is great and eliminates collisions. Imagine the route is defined in the feature module and I am importing two: FooOverview BarOverview and for some reason the route path would be in both ‘overview’ => conflict Now I can define the paths in the parent module.

Beware: Do not import the module again in the parent module. It is enough to import it in the RouterModule (with loadchildren).

[MonasteryJohn]

Changing the route to start with admin will fix the path issue, but not the outlet issue. I could flatten my admin module by removing all of the child modules and putting all of their components into the admin module, but that doesn’t feel quite right to me. A lot of my modules are re-used in other parallel applications and prior to the module change, that worked very well. I like the concept of the modules, if only this part of it worked.

I’ll work around it if I have to, but I figured I’d try and get an official answer on support for child of child routing.