Lazy loading not working in Angular 6

Question

I'm getting this error when try to navigate to 'http://localhost:4200/dashboard' lazy loading route in angualr, angualr-cli 6.0.0

ERROR Error: Uncaught (in promise): Error: Cannot find module "app/dashboard/dashboard.module". Error: Cannot find module "app/dashboard/dashboard.module". at $_lazy_route_resource lazy namespace object:5

const routes: Routes = [
    {
        path: 'login',
        loadChildren: 'app/login/login.module#LoginModule',

    },
    {
        path: '',
        component: MasterComponent,
        children: [
            {
                path: 'dashboard',
                loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
            }
        ],
    },
    {
        path: '**',
        redirectTo: 'login
    }
];


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

Answer 1

In previous versions loadChildren path support with 'app/path/to/module#Module' but it's not working anymore, instead of that use relative path './path/to/module#Module'

angular/aio/content/examples/lazy-loading-ngmodules example also has been changed 3 days ago with Angular 6 release

https://github.com/angular/angular/commit/f44a2c730a84cd86695d1851395ad28423704bd0

Angular community has been responding to the issue which I raised, Please find the responses below.

https://github.com/angular/angular-cli/issues/10673#issuecomment-391786453

According to responses of angular community they will update document.

usage need to change from

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: 'app/customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: 'app/orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

to

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

One other tip:

Module import order matters https://angular.io/guide/router#module-import-order-matters

Answer 2

I've got the same problem, but in angular 6 it seems that every module loaded with "lazy loaded" has to be removed from the imports declaration in the root module (app.module.ts). At least for me that works.

Answer 3

using angular 7

this works for me

loadChildren = 'src/app/layout/waay/lazy.module.ts#LazyModule';

and in

angular.json

...
"lazyModules": [
            "src/app/layout/waay/lazy.module.ts",
]

---

maybe this helps someone debugging the lazy load paths -->

(this might be subject to change in upcoming angular versions)

in chrome

• open the dev tools F12

• press ctrl+O (letter O)

• (a search prompt opens)

• on the keyboard, type "lazyroute"

• (it should list $_lazy_route_resource lazy namespace object)

• press Enter

now it should show you the contents of the map that angular/webpack uses to look up the lazy routes

$_lazy_route_resource lazy namespace object (beginning of file)

var map = {
    "src/app/layout/waay/lazy.module.ts": [
        "./src/app/layout/waay/lazy.module.ts"
    ],
    "src/app/pages/even/more-lazy.module.ts": [
        "./src/app/pages/even/more-lazy.module.ts",
        "default~src-app-pages-even-more-lazy-module-ts~src-app-pages-some-page-module-ts~sr~2cb20cb3",
        "default~src-app-pages-even-more-lazy-module-ts~src-app-pages-counter-page-module~7852bff4",
        "common",
        "src-app-pages-even-more-lazy-module-ts"
    ],
    "src/app/pages/too/lazy-to-be-true.module.ts": [
        "./src/app/pages/too/lazy-to-be-true.module.ts",
        "default~src-app-pages-too-lazy-to-be-true-module-ts~src-app-pages-some-page-modu~c179459d",
        "default~src-app-pages-too-lazy-to-be-true-module-ts~src-app-pages-home-home-page-module-ts~src-app-~50ff7d88",
        "default~src-app-pages-too-lazy-to-be-true-module-ts~src-app-pages-home-home-page-module-ts",
        "common",
        "src-app-pages-too-lazy-to-be-true-module-ts"
    ],
    ...
};

the map gives you the relation between module path and modules to be loaded for the given module path.

by looking at this map it might help you to find out why some paths couldn't be resolved.

you can also put a breakpoint in the following line to step through it via debugger and get a clear understanding of where it might fail in the lookup.

$_lazy_route_resource lazy namespace object (further down the file)

function webpackAsyncContext(req) {
    var ids = map[req];           // <-- put a breakpoint there, lookup in the map happens here
    if(!ids) {
        return Promise.resolve().then(function() {
            var e = new Error("Cannot find module '" + req + "'");
            e.code = 'MODULE_NOT_FOUND';
            throw e;
        });
    }
    ...
}

hope this helps someone, it did the trick for me