Angular2 how to go to lazy loaded module?

Question

I got the following structure:

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

To load the OverviewModule, I use lazy loading. This is my AppModule route configuration:

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

When the path is up 'overview', it displays my overview module. When the way is '', I want him to move on to the "overview". Unfortunately this will not work.

Routing Overview:

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 go to the lazy loaded module?

Answer 1

So, I found the cause of my problem. I imported OtherModules in my AppModule, which resulted in loading OtherModule for the path ''.

Answer 2

Try it, it should work:

export const overviewRoutes: = []

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'
            }
        ]
    }
];

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

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

Answer 3

Your configuration seems correct ...

I created for you Plnkr: Plnkr

Try checking the paths to the module <router-outlet>in your templates (you need <router-outlet>in the AppComponent template, and the other in the OverviewComponent)