Angular - NaNbut they point to different modules

TD;LR

Navigate back one level when you LoadChildren

Detail reading

I had two submodules with the same path ./app/apps.module#AppsModule in two different modules.

|- Storage
|   |- storage.module.ts
|   |- apps
|       |- apps.module.ts
|- Cuckoo
|   |- cuckoo.module.ts
|   |- apps
|       |- apps.module.ts

In cuckoo.module.ts & storage.module.ts I had the following routes

const routes: Routes = [
    { path: 'apps', loadChildren: "./apps/apps.module#AppsModule" },
];

Due to a known issue in angular angular/angular-cli#10128, I couldn’t get this dynamically loaded using LoadChildren.

I tried to use LoadChildrenCallback as a work around. It worked.

const routes: Routes = [
    { path: 'apps', loadChildren: () => import('./apps/apps.module').then(m => m.AppsModule) },
];

But as I use AOT in production, I couldn’t get it done as well. angular/angular-cli#12885

Fustrated with this dead locked situation, after along trial I ended up with this simple workaround.

Workaround

The workaround i did was to load the SubModules by navigating to the parent folder. ie in my module storage I added the submodule apps as below

In storage.module.ts I had the following routes

const routes: Routes = [
    { path: 'apps', loadChildren: "../storage/apps/apps.module#AppsModule" },
];

In cuckoo.module.ts I had the following routes

const routes: Routes = [
    { path: 'apps', loadChildren: "../cuckoo/apps/apps.module#AppsModule" },
];