Angular2 how to direct to a lazy loaded module?

Question

I got the following structure:

+--AppModule
|  +--OverviewModule
|  |  +--OtherModule1
|  |  +--OtherModule2
|  |  +--OtherModule3

To load OverviewModule I use lazy-loading. This is my AppModule route config:

const appRoutes: Routes = [
    {
        path: 'overview',
        loadChildren: 'app/injus/views/overview.module#OverviewModule'
    },
    {
        path: '',
        redirectTo: 'overview',
        pathMatch: 'full'
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

When the path is 'overview' it displays my overview module. When the path is '' I want it to go to 'overview'. Unfortunately this won't work.

Overview routing:

export const overviewRoutes: Routes = [
    {
        path: '',
        component: OverviewComponent,
        children: [
            {
                path: '',
                redirectTo: 'othermodule1',
                pathMatch: 'full'
            },
            {
                path: 'othermodule1',
                loadChildren: 'app/injus/views/othermodule1/othermodule1.module#otherModule1'
            },
            {
                path: 'othermodule2',
                loadChildren: 'app/injus/views/othermodule2/othermodule2.module#2otherModule1'
            },
            {
                path: 'othermodule3',
                loadChildren: 'app/injus/views/othermodule2/othermodule3.module#3otherModule1'
            }
        ]
    }
];

How can I direct to a lazy loaded module?

Answer 1

Please try it it should work:

Main problem in export const overviewRoutes : Routes = []

export const overviewRoutes: Routes = [
     {
        path: '',
        component: OverviewComponent,
    },
    {
        path: '',
        component: OverviewComponent,
        children: [
            {
                path: 'othermodule1',
                loadChildren: 'app/injus/views/othermodule1/othermodule1.module#otherModule1'
            },
            {
                path: 'othermodule2',
                loadChildren: 'app/injus/views/othermodule2/othermodule2.module#2otherModule1'
            },
            {
                path: 'othermodule3',
                loadChildren: 'app/injus/views/othermodule2/othermodule3.module#3otherModule1'
            }
        ]
    }
];

Add

Routes = [ 
     {
        path: '',
        component: OverviewComponent,
      }
    ....
   ]

Remove

children: [{
       path: '',
       redirectTo: 'othermodule1',
       pathMatch: 'full'
    },
    ....
   ]

Answer 2

Your configuration seems to be correct...

I created a Plnkr for you: Plnkr

Try to check paths to modules and the <router-outlet> position in your templates (You need a <router-outlet> in the AppComponent template and another in OverviewComponent)

Answer 3

So I found the cause of my problem. I was importing the OtherModules in my AppModule which resulted in the OtherModule being loaded for the path '' .