Lazy loading in Angular libraries not working - Cannot find module

Question

I have the following structure for one of my application

.
└── MyAngularProject/
    ├── projects/
    │   └── my-project-name-here/
    │       └── src/
    │           ├── modules/
    │           │   ├── module1/
    │           │   │   ├── components1/
    │           │   │   ├── components2/
    │           │   │   ├── components3/
    │           │   │   ├── module1.module.ts
    │           │   │   └── module1-routing.module.ts
    │           │   └── module2/
    │           │       ├── components1/
    │           │       ├── components2/
    │           │       ├── components3/
    │           │       ├── module2.module.ts
    │           │       └── module2-routing.module.ts
    │           ├── my-project.module.ts
    │           ├── my-project-routing.module.ts
    │           └── my-project.component.ts
    ├── src/
    │   ├── app/
    │   │   ├── app.component.html
    │   │   ├── app.module.ts
    │   │   └── app-routing.module.ts
    │   ├── index.html
    │   ├── environments/
    │   └── pollyfills.ts
    ├── angular.json
    ├── tsconfig.json
    └── tsconfig.app.json

The host application doesn't contain any other codes other than the app.module and corresponding routes. The complete application is in the library. Here, I am lazy loading the routes in the library as follows:

const routes: Routes = [
  {
    path: 'my-path',
    component: MainLayoutComponent,
    children: [
      {
        path: 'list',
        loadChildren: './modules/module1/module1.module#ModuleNameModule'
      }
    ]
  }
];

As the code is in the library, I am first building the library using the following command.

ng build --project my-project-name-here  --watch

and then I use npm start for running the application.

The issue here is I am getting the error that says

ERROR Error: Uncaught (in promise): Error: Cannot find module './modules/module1/module1.module'
Error: Cannot find module './modules/module1/module1.module'

The dist folder is created when I build the library but still, the routes are failing with the error mentioned. When I try to use the dynamic imports instead of the string-based, it is showing an error that Lambda function is not allowed .

My project is using Angular 8. it will be helpful if someone can point me in the correct direction.

Answer 1

You should use this approch for this version I bleave

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