title: Cannot build angular 8 application with nested lazy-loaded module in library
body: <p>I'm using angular to create an <strong>ui library</strong>.
  In workspace, there is one project for <strong>main app</strong>, one project for <strong>ui library</strong>.</p>
  
  <p>In the library which declares modules and routings, I have this code:</p>
  
  <p><strong>parent-routing.module.ts</strong>:</p>
  
  <pre><code>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 {
  }
  
  </code></pre>
  
  <p>In <strong>app.module.ts</strong>, I declare the <strong>ParentModule</strong> as below:</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      loadChildren: () =&gt; import('ui-lib').then(m =&gt; m.ParentModule)
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  
  </code></pre>
  
  <p>When I tried compiling my app, the console throws me an error:</p>
  
  <p><strong>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'</strong></p>
  
  <p>After searching on Google, I found <a href="https://github.com/angular/angular-cli/issues/6373#issuecomment-453006158" rel="nofollow noreferrer">this comment</a>. 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.</p>
  
  <p>Here is <a href="https://stackblitz.com/github/alakanzam/ui-lib-playground" rel="nofollow noreferrer">my workspace on stackblitz</a></p>
  
  <p>Does anyone have any solutions please ?</p>
  
  <p>Thanks,</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>In my <code>main application</code>, I declared the wrapper modules for parent &amp; child component as below:</p>
  
  <ul>
  <li>child-wrapper.module.ts</li>
  </ul>
  
  <pre><code>
  const routes: Routes = [
    {
      path: '',
      component: ChildComponent
    }
  ];
  
  @NgModule({
    imports: [
      RouterModule.forChild(routes)
    ]
  })
  export class ChildWrapperModule {
  
  }
  
  </code></pre>
  
  <ul>
  <li>parent-wrapper.module.ts:</li>
  </ul>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      component: ParentComponent,
      children: [
        {
          path: '',
          loadChildren: () =&gt; import('./child-wrapper.module').then(m =&gt; m.ChildWrapperModule)
        }
      ]
    }
  ]
  
  @NgModule({
    imports: [
      RouterModule.forChild(routes)
    ]
  })
  export class ParentWrapperModule {
  
  }
  
  </code></pre>
  
  <ul>
  <li>app-routing.module.ts</li>
  </ul>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      loadChildren: () =&gt; import('./lazy-module/parent-wrapper.module').then(m =&gt; m.ParentWrapperModule)
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  
  </code></pre>
  
  <p>This archieve my goal, but in my opinion, it seems to be <strong>STUPID</strong>, because when developers want to use <code>ui-library</code>, they have to re-declare the routing in the application. </p>
  
  <p>Any better ideas please ?</p>