I'm using angular to create an **ui library**.
In workspace, there is one project for **main app**, one project for **ui library**.

In the library which declares modules and routings, I have this code:

**parent-routing.module.ts**:

```
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {ParentComponent} from './parent.component';

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: [
      {
        path: '',
        loadChildren: '/child/child.module#ChildModule'
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class ParentRoutingModule {
}

```

In **app.module.ts**, I declare the **ParentModule** as below:

```
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('ui-lib').then(m => m.ParentModule)
  }
];

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

```

When I tried compiling my app, the console throws me an error:

**ERROR in ./src/app/app-routing.module.ts
Module not found: Error: Can't resolve './../../../../dist/ui-lib/modules/parent/parent.module.d.ngfactory' in '/Users/linhnguyen/nested-module-playground/projects/main-app/src/app'**

After searching on Google, I found [this comment](https://github.com/angular/angular-cli/issues/6373#issuecomment-453006158). The commenter mentioned about creating a module and import every component to the route. That can resolve the issue of loading module in library, but it is not lazy loaded.

Here is [my workspace on stackblitz](https://stackblitz.com/github/alakanzam/ui-lib-playground)

Does anyone have any solutions please ?

Thanks,

---

**UPDATE**

In my `main application`, I declared the wrapper modules for parent & child component as below:

* child-wrapper.module.ts

```

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

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ]
})
export class ChildWrapperModule {

}

```

* parent-wrapper.module.ts:

```
const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('./child-wrapper.module').then(m => m.ChildWrapperModule)
      }
    ]
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ]
})
export class ParentWrapperModule {

}

```

* app-routing.module.ts

```
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./lazy-module/parent-wrapper.module').then(m => m.ParentWrapperModule)
  }
];

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

```

This archieve my goal, but in my opinion, it seems to be **STUPID**, because when developers want to use `ui-library`, they have to re-declare the routing in the application. 

Any better ideas please ?