How to route to a Module as a child of a Module - Angular 2 RC 5

Okay, after fiddling around with this for the better part of the weekend I got it running on my end. What worked for me in the end was to do the following:

• Export all Routes for every module you want to route. Do not import any of the RouterModule.forChild() in the child modules.
• Export every component that is visible from the childs route definitions in the childs module definition.
• Import (meaning the Typescript import keyword) all child routes as usual and use the ... operator to incorporate these under the correct path. I couldn't get it to work with the child-module defining the path, but having it on the parent works fine (and is compatible to lazy loading).

In my case I had three levels in a hierarchy like this:

• Root (/)
  • Editor (editor/:projectId)
    • Query (query/:queryId)
    • Page (page/:pageId)
  • Front (about)

The following definitions work for me for the /editor/:projectId/query/:queryId path:

// app.routes.tsimport {editorRoutes}                   from './editor/editor.routes'// Relevant excerpt how to load those routes, notice that the "editor/:projectId"// part is defined on the parent{    path: '',    children: [        {            path: 'editor/:projectId',            children: [...editorRoutes]            //loadChildren: '/app/editor/editor.module'        },    ]}

The editor routes look like this:

// app/editor/editor.routes.tsimport {queryEditorRoutes}              from './query/query-editor.routes'import {pageEditorRoutes}               from './page/page-editor.routes'{    path: "", // Path is defined in parent    component : EditorComponent,    children : [        {            path: 'query',            children: [...queryEditorRoutes]            //loadChildren: '/app/editor/query/query-editor.module'        },        {            path: 'page',            children: [...pageEditorRoutes]            //loadChildren: '/app/editor/page/page-editor.module'        }    ]}

And the final part for the QueryEditor looks like this:

// app/editor/query/query-editor.routes.ts{    path: "",    component : QueryEditorHostComponent,    children : [        { path: 'create', component : QueryCreateComponent },        { path: ':queryId', component : QueryEditorComponent }    ]}

However, to make this work, the general Editor needs to import and export the QueryEditor and the QueryEditor needs to export QueryCreateComponent and QueryEditorComponent as these are visible with the import. Failing to do this will get you errors along the lines of Component XYZ is defined in multiple modules.

Notice that lazy loading also works fine with this setup, in that case the child-routes shouldn't be imported of course.

I had the same problem.

The answer here is pretty good using loadChildren :

          {             path: 'mypath',             loadChildren : () => myModule          }

https://github.com/angular/angular/issues/10958

I think 2.0.0 rc5 isn't interested now. But is is worked in Angular 4, may be early too.

@NgModule({    imports: [        RouterModule.forRoot([                {path: "", redirectTo: "test-sample", pathMatch: "full"},                {                    path: "test-sample",                    loadChildren: () => TestSampleModule                }        ])    ],    exports: [RouterModule],    declarations: [] }) export class AppRoutingModule{}@NgModule({    imports: [        RouterModule.forChild([{                    path: "",                    component: TestSampleComponent,                    children: [                        {path: "", redirectTo: "home", pathMatch: "full"},                        {                            path: "home",                            loadChildren: () => HomeModule                        },                        {                            path: "about",                            loadChildren: () => AboutModule                        }                    ]                }        ])    ],    exports: [RouterModule],    declarations: []})export class TestSampleRoutingModule {}@NgModule({    imports: [RouterModule.forChild([{                    path: "",                    component: AboutComponent                }    ])],    exports: [RouterModule]})export class AboutRoutingModule {}

Take in account on loadChildren: () => {...}. It is not the lazy loading.

See for details feat: Support NgModules hierarchy sans Lazy Loading