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 {
}

it should be './dashboard/dashboard.module#DashboardModule' no? — Fateh Mohamed
– Fateh Mohamed, Commented May 6, 2018 at 15:19
Thanks it works, github.com/angular/angular/commit/… (@samalexander committed 3 days ago) — Chanuka Asanka
– Chanuka Asanka, Commented May 7, 2018 at 4:38

5 revs · Accepted Answer · 2018-05-25 03:57:52Z

12

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

edited May 25, 2018 at 3:57

community wiki

5 revs
Chanuka Asanka

Sign up to request clarification or add additional context in comments.

3 Comments

Chanuka Asanka Over a year ago

Another solution: angular.io/guide/router#module-import-order-matters * The order of imports around. (Move the *RoutingModule to the bottom of the list of imports) * Also removed the lazy-loaded modules from the NgModule.imports property list

Chanuka Asanka Over a year ago

The community has been opened in another issue regarding document changes github.com/angular/angular-cli/issues/…

seankonig Over a year ago

Nice job pointing out the 'order matters'! Hours of swearing before I got to this.

Alejandro Silva · Accepted Answer · 2018-06-09 01:03:10Z

5

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.

answered Jun 9, 2018 at 1:03

Alejandro Silva

9,1581 gold badge38 silver badges29 bronze badges

1 Comment

mccainz Over a year ago

Exactly my issue. If you think about it why, should you import that lazy module into root? Defeats the purpose of lazy loading the chunk all-together.

lolcatzftw · Accepted Answer · 2019-05-01 08:33:07Z

4

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

edited May 1, 2019 at 8:33

answered May 1, 2019 at 6:32

lolcatzftw

5763 silver badges16 bronze badges

3 Comments

Debadatta Over a year ago

This was a great explanation, Thanks a lot mate. Easier to debug now.

lolcatzftw Over a year ago

thank you Debadatta, really glad it helped you! :))

MindRoasterMir Over a year ago

should it not be a : rather than a = ?

Naveen Motwani - AIS · Accepted Answer · 2019-01-27 07:38:25Z

3

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!

answered Jan 27, 2019 at 7:38

Naveen Motwani - AIS

6294 silver badges17 bronze badges

4 Comments

Glenn Bullock Over a year ago

True, but that's eager loading.

Naveen Motwani - AIS Over a year ago

Where are you deploying? I did deploy on Azure App service and its working for me.

dprophecyguy Over a year ago

It requires JIT to compile the resources because that's dynamic loading. It won't work with AOT enabled production builds, but you can work with it in your local.

MindRoasterMir Over a year ago

This worked but you have to import the module too. thaks

phhu · Accepted Answer · 2020-07-27 18:42:56Z

2

For me it worked when I replaced loadchildren with component

edited Jul 27, 2020 at 18:42

phhu

2,0341 gold badge22 silver badges38 bronze badges

answered Jul 27, 2020 at 15:16

elqldk

1012 silver badges9 bronze badges

Comments

Ricard Castelló Rocamora · Accepted Answer · 2020-11-11 12:27:18Z

2

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

edited Nov 11, 2020 at 12:27

answered May 23, 2018 at 14:54

Ricard Castelló Rocamora

775 bronze badges

3 Comments

Chanuka Asanka Over a year ago

Absolute path but starting from /src: loadChildren: 'src/app/dashboard... it should be start from 'app/exampleroute' angular.io/guide/router#lazy-loading-route-configuration

Ricard Castelló Rocamora Over a year ago

Yeap, baseUrl has changed to root of angular project because of it would contain multiple applications. They opened an issue for updating documentation and making use of relative paths.

markelc Over a year ago

The only thing that worked for me was changing the tsconfig.json to set the BaseUrl to "./src".

V.Tur · Accepted Answer · 2020-03-04 14:31:27Z

0

I have the same issue when started use Angular Cli 9. For resolve, need to rewrite loadChildren next way

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

answered Mar 4, 2020 at 14:31

V.Tur

1,44715 silver badges22 bronze badges

Comments

sudhee_bsp · Accepted Answer · 2020-03-28 13:04:55Z

0

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.

answered Mar 28, 2020 at 13:04

sudhee_bsp

581 silver badge11 bronze badges

Comments

Ricard Castelló Rocamora · Accepted Answer · 2020-11-11 12:18:22Z

0

thankfully this changed on latest versions with arrow functions lazy loading

answered Nov 11, 2020 at 12:18

Ricard Castelló Rocamora

775 bronze badges

1 Comment

MoxxiManagarm Over a year ago

Please provide quality answers until you can write comments. This commentary like answer is not enough.

Collectives™ on Stack Overflow

Lazy loading not working in Angular 6

9 Answers 9

3 Comments

1 Comment

3 Comments

4 Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

1 Comment

3 Comments

4 Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related