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 theRouterModule.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
)
- Query (
- Front (
about
)
- Editor (
The following definitions work for me for the /editor/:projectId/query/:queryId
path:
// app.routes.ts
import {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.ts
import {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