Angular 2 lazy-loading modules from within a lazy-loaded module

Question

I'm developing a simple web page which has a Home Module wich contains two components, Homepage and Login which i load using Lazy-Loading...

This is my App-Routing Module

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: 'app/home/home.module#HomeModule' },
  { path: 'main', loadChildren: 'app/main/main.module#MainModule' }
];

@NgModule({
  imports: [
    HomeRoutingModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: []
})
export class GESFWRoutingModule { }

This is my Home Module...

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent }
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    ReactiveFormsModule
  ],
  declarations: [
    HomeComponent,
    LoginComponent
  ],
  providers: [
    AuthService
  ]
})
export class HomeModule { }

This part is working just fine, as expected. What i'm having a problem is when i go to the Main Module... I'm trying to lazy-load my cliente module

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full', children: [
    { path: 'clientes', loadChildren: 'app/clientes/clientes.module#ClientesModule' }
  ]},
];

@NgModule({
  imports: [
    CommonModule,
    MainRoutingModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    MainComponent,
    HeaderComponent,
  ],
})
export class MainModule { }

With the Cliente Module here...

const routes: Routes = [
  { path: '', component: ClientesComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    ClientesComponent,
    ClientesOperacoesComponent,
    SearchTableComponent
  ],
  providers: [
    MainService
  ]
})
export class ClientesModule { }

Everything works until i try to access '/main/clientes' . It says that it cannot match any routes : 'main/clientes'. Now i've tried multiple ways to solve this, but always this the same problem, if you can find any error in my logic i would really appreciate it.

Thanks!

Answer 1

Im looking at your main module routes here:

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full', children: [
    { path: 'clientes', loadChildren: 'app/clientes/clientes.module#ClientesModule' }
  ]},
];

which should probably be

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'clientes', loadChildren:'app/clientes/clientes.module#ClientesModule'}
];

Answer 2

Hello I think you should change the structure of Main routes as follow:

const routes: Routes = [
  { 
    path: '', 
    children [
       { 
         path: 'clientes',
         loadChildren:'app/clientes/clientes.module#ClientesModule'
       }
    ]
  }
];

I think you should not redirect into the same module when you are already loaded in it because you can get into a situation with circular routing.