Cannot build angular 8 application with nested lazy-loaded module in library

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. 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

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 ?