Loading a child module in another child module

[SURENDARREDDY]

I am trying to load a child module in another child module as described in the following image.

When I tried to load the child module "Material Module" which has it's own routes in "Home Module" it is throwing following error:

browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'import' of undefined

I want to reuse the same "Material Module" in another Parent module in future.

Here is my app.routing.ts:

{
        path: '',
        redirectTo: '/gologin',
        pathMatch: 'full'
      },
       {
        path: 'gologin',
        loadChildren: 'app/login/login.module'
      },
       {
        path: 'goHome',
        loadChildren: 'app/home/home.module'
    }

My Home.route.ts looks as follows:

{
        path: '',
        component: 'HomeComponent',
        children:[
       {
        path: '',
        loadChildren: 'app/Material/Material.module'
    }]}

How to resolve these kind of modules loading issue in Angular 2 RC5.

[mrkosima]

Could you please provide code of Material.module?

[SURENDARREDDY]

Material.route.ts:

import { Routes, RouterModule } from '@angular/router';

import { OrderComponent }   from './Order/OrderComponent.component';
import { InventoryComponent }   from './Inventory/InventoryComponent.component';
import { POComponent }   from './PO/POComponent.component';

export const appRoutes1: Routes = [
  {
    path: '',
    component: OrderComponent 
  },
{
    path: '/inventory',
    component: InventoryComponent 
  },
{
    path: '/PO',
    component: POComponent 
  },

];

export const routing = RouterModule.forChild(appRoutes1);

Material.Module.ts

@NgModule({
  declarations: [
    // Components / Directives/ Pipes
    OrderComponent ,InventoryComponent ,POComponent 
  ],
  imports: [
        routing //Material.routing
  ],
})
export class MaterialModule {
}

[mrkosima]

Looks like module loader cannot recognise what should it to be imported. I see two ways to fix it:

1. Export module class as default in MaterialModule: export default class MaterialModule...
2. Add class name to path: loadChildren: 'app/Material/Material.module#MaterialModule'

[SURENDARREDDY]

Thank you. Tried both ways already. None has worked. "load children" is only working on "app.routing.ts" level. Any child level if you try to use "load children" , it is throwing an error.

[mrkosima]

Ok, understand the issue. I'll try to add nested lazy loaded modules at the example tomorrow.

[mrkosima]

Hi, Thanks for your case! Tried to load module in already lazy loaded module. Not successful( I'm getting NoMatcherror during recognising url tree. Also met some other issued with lazy routes and modules - noted them in readme. And just added code with these cases.
Maybe you met and resolved some of them?

[mrkosima]

@SURENDARREDDY , added lazy modules cases in repo: https://github.com/mrkosima/angular-rc5-router-lazy-in-lazy

Loading child module in another child module works great, when you using primary outlets. Errors begin throwing when loadChildren configured with named outlet. Created issue with example: https://github.com/angular/angular/issues/11208

[SURENDARREDDY]

Thank you mrkosima. I thought to raise defect at @angular. You did already. Thanks again.