Lazy module not found in Angular version 11

Question

This app is trying to load the BookModule lazily with this configuration:

const routes: Routes = [
  { path: "", redirectTo: "/books", pathMatch: "full" },
  {
    path: "books",
    loadChildren: "./modules/book/book.module#BookModule",
    canActivate: [AuthGuard]
  },
  { path: "login", component: LoginComponent }
];

And it's producing the error:

Error: Cannot find 'BookModule' in './modules/book/book.module'

Thoughts?

Answer 1

Seems like your Angular version is 11.

The lazy loading syntax changed. It is something like this now

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

So your code should be like this

const routes: Routes = [
  { path: "", redirectTo: "/books", pathMatch: "full" },
  {
    path: "books",
    loadChildren: () => import('./modules/book/book.module').then(m => m.BookModule),
    canActivate: [AuthGuard]
  },
  { path: "login", component: LoginComponent }
];