Nested Lazy Loading in Angular Routes

Question

I created a facsimile of a project I am having issues in:

https://stackblitz.com/edit/angular-frlpmk

In this project, I have two lazy loaded modules:

Customers
Orders

The customers module in turn lazy loads the Address module:

const routes: Routes = [
  {
    path: '',
    component: CustomerListComponent,
    children: [
            {
                path: 'addresses',
                loadChildren: './address/address.module'
            },
        ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CustomersRoutingModule { }

The error I get from this JIT program (through stackblitz) is:

errors.js:55 ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 'undefined'.
Error: No NgModule metadata found for 'undefined'.

When I run this project with aot, I get:

ERROR Error: Uncaught (in promise): Error: Cannot find module './address/address.module'.
Error: Cannot find module './address/address.module'.
    at webpackAsyncContext (eval at ../../../../../src/$$_lazy_route_resource lazy recursive (main.bundle.js:6), <anonymous>:14:25)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4589)
    at RouterConfigLoader.load (router.js:4569)
    at MergeMapSubscriber.eval [as project] (router.js:2061)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at ScalarObservable._subscribe (ScalarObservable.js:51)
    at webpackAsyncContext (eval at ../../../../../src/$$_lazy_route_resource lazy recursive (main.bundle.js:6), <anonymous>:14:25)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4589)
    at RouterConfigLoader.load (router.js:4569)
    at MergeMapSubscriber.eval [as project] (router.js:2061)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at ScalarObservable._subscribe (ScalarObservable.js:51)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1517)

It is not able to find the Address module, and when I look at the webpack output, Custmers.module is there but not address:

 ** NG Live Development Server is listening on localhost:1234, open your browser on http://localhost:1234/ **
Date: 2018-03-15T17:08:51.053Z                                                          
Hash: 9a854b91e6ee905379c5
Time: 7314ms
chunk {customers.module} customers.module.chunk.js () 22.1 kB  [rendered]
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 25.6 kB [initial] [rendered]
chunk {orders.module} orders.module.chunk.js () 14.8 kB  [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 553 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 37.8 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 9.5 MB [initial] [rendered]

I think webpack is not able to find this module. Is there a proper way to nest a lazy loaded module in another? Alternatively, is there a way to manually tell webpack about this module?

Added this repo: https://github.com/jdell64/ngNestedLazyLoads

If this is off-topic, please let me know how I can improve the question. — Jeff
– Jeff, Commented Mar 15, 2018 at 17:02

Daniel W Strimpel · Accepted Answer · 2018-03-15 17:59:32Z

4

I think your routes should be like this:

const routes: Routes = [
    {
        path: '',
        component: CustomerListComponent
    },
    {
        path: 'addresses',
        loadChildren: 'app/customers/address/address.module#AddressModule'
    }
];

answered Mar 15, 2018 at 17:59

Daniel W Strimpel

8,5002 gold badges31 silver badges39 bronze badges

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

2 Comments

Jeff Over a year ago

I managed to get it working using this and removing the default.

Jeff Over a year ago

Not to be ungrateful, but do you think you might elaborate on why this works over what I did?

Collectives™ on Stack Overflow

Nested Lazy Loading in Angular Routes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related