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

Answer 4

For me modifying this

loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule',

To

loadChildren: () => AdminLayoutModule,

Worked and don't forget to import the module file.

Hope it help!

Answer 5

Efectively, there are three posible workarounds :

• Make use of relative path loadChildren: './dashboard...
• Absolute path but starting from /src: loadChildren: 'src/app/dashboard...
• On tsconfig.json , set BaseUrl: "./src"

You can follow the progress of this issue in Angular's repo

(*) Edited, thankfully this changed on latest versions with arrow functions lazy loading

Answer 6

对我来说，当我用component替换loadchildren时它loadchildren了

Answer 7

我在开始使用 Angular Cli 9 时遇到了同样的问题。为了解决，需要在下一个方式重写 loadChildren

{path: 'admin', canLoad: [AuthGuard], loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)},

Answer 8

For me, it worked like :-

{path: 'Customer', loadChildren: () => import('../Customer/CustomerModule').then(mod => mod.CustoModule)},

This is separate file for routing, I didnt made my routing in app.routing, so if you too have done like me, then please remove "AppRoutingModule" in imports, in module file. Then only it works fine.

Answer 9

谢天谢地，这在最新版本的箭头函数延迟加载中发生了变化