ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined

Bug Report

Lazy Loading is not working with Angular 8 while using the new behavior of loadChildren parameter. But it works with the old approach.

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule),
    //loadChildren: './home/home.module#HomeModule',
  }
];

What is the expected behavior?

Should lazy load routes.

What is the current behavior?

Getting error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (/my-app/fronttest/dist/server.js:137764:30)
    at Function.requireEnsure [as e] (/my-app/fronttest/dist/server.js:137783:25)
    at ɵ0 (/my-app/fronttest/dist/server.js:137913:38)
    at RouterConfigLoader.loadModuleFactory (/my-app/fronttest/dist/server.js:150015:39)
    at RouterConfigLoader.load (/my-app/fronttest/dist/server.js:150000:35)
    at MergeMapSubscriber.project (/my-app/fronttest/dist/server.js:149003:47)
    at MergeMapSubscriber._tryNext (/my-app/fronttest/dist/server.js:37063:27)
    at MergeMapSubscriber._next (/my-app/fronttest/dist/server.js:37053:18)
    at MergeMapSubscriber.Subscriber.next (/my-app/fronttest/dist/server.js:33575:18)
    at Observable._subscribe (/my-app/fronttest/dist/server.js:35645:20)
    at resolvePromise (/my-app/fronttest/dist/server.js:1000:31)
    at resolvePromise (/my-app/fronttest/dist/server.js:957:17)
    at /my-app/fronttest/dist/server.js:1061:17
    at ZoneDelegate.invokeTask (/my-app/fronttest/dist/server.js:571:31)
    at Object.onInvokeTask (/my-app/fronttest/dist/server.js:28531:33)
    at ZoneDelegate.invokeTask (/my-app/fronttest/dist/server.js:570:60)
    at Zone.runTask (/my-app/fronttest/dist/server.js:343:47)
    at drainMicroTaskQueue (/my-app/fronttest/dist/server.js:749:35)
    at ZoneTask.invokeTask (/my-app/fronttest/dist/server.js:650:21)
    at Server.ZoneTask.invoke (/my-app/fronttest/dist/server.js:635:48) {
  rejection: TypeError: Cannot read property 'call' of undefined
      at __webpack_require__ (/my-app/fronttest/dist/server.js:137764:30)
      at Function.requireEnsure [as e] (/my-app/fronttest/dist/server.js:137783:25)
      at ɵ0 (/my-app/fronttest/dist/server.js:137913:38)
      at RouterConfigLoader.loadModuleFactory (/my-app/fronttest/dist/server.js:150015:39)
      at RouterConfigLoader.load (/my-app/fronttest/dist/server.js:150000:35)
      at MergeMapSubscriber.project (/my-app/fronttest/dist/server.js:149003:47)
      at MergeMapSubscriber._tryNext (/my-app/fronttest/dist/server.js:37063:27)
      at MergeMapSubscriber._next (/my-app/fronttest/dist/server.js:37053:18)
      at MergeMapSubscriber.Subscriber.next (/my-app/fronttest/dist/server.js:33575:18)
      at Observable._subscribe (/my-app/fronttest/dist/server.js:35645:20),
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: TypeError: Cannot read property 'call' of undefined
        at __webpack_require__ (/my-app/fronttest/dist/server.js:137764:30)
        at Function.requireEnsure [as e] (/my-app/fronttest/dist/server.js:137783:25)
        at ɵ0 (/my-app/fronttest/dist/server.js:137913:38)
        at RouterConfigLoader.loadModuleFactory (/my-app/fronttest/dist/server.js:150015:39)
        at RouterConfigLoader.load (/my-app/fronttest/dist/server.js:150000:35)
        at MergeMapSubscriber.project (/my-app/fronttest/dist/server.js:149003:47)
        at MergeMapSubscriber._tryNext (/my-app/fronttest/dist/server.js:37063:27)
        at MergeMapSubscriber._next (/my-app/fronttest/dist/server.js:37053:18)
        at MergeMapSubscriber.Subscriber.next (/my-app/fronttest/dist/server.js:33575:18)
        at Observable._subscribe (/my-app/fronttest/dist/server.js:35645:20)
  },
  zone: Zone {
    _parent: Zone {
      _parent: null,
      _name: '<root>',
      _properties: {},
      _zoneDelegate: [ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true },
    _zoneDelegate: ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular],
      _parentDelegate: [ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: [Zone],
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: [Zone],
      _invokeZS: [Object],
      _invokeDlgt: [ZoneDelegate],
      _invokeCurrZone: [Circular],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [ZoneDelegate],
      _handleErrorCurrZone: [Circular],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [ZoneDelegate],
      _scheduleTaskCurrZone: [Circular],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [ZoneDelegate],
      _invokeTaskCurrZone: [Circular],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [ZoneDelegate],
      _cancelTaskCurrZone: [Circular],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [ZoneDelegate],
      _hasTaskDlgtOwner: [Circular],
      _hasTaskCurrZone: [Circular]
    }
  },
  task: ZoneTask {
    _zone: Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: TypeError: Cannot read property 'call' of undefined
          at __webpack_require__ (/my-app/fronttest/dist/server.js:137764:30)
          at Function.requireEnsure [as e] (/my-app/fronttest/dist/server.js:137783:25)
          at ɵ0 (/my-app/fronttest/dist/server.js:137913:38)
          at RouterConfigLoader.loadModuleFactory (/my-app/fronttest/dist/server.js:150015:39)
          at RouterConfigLoader.load (/my-app/fronttest/dist/server.js:150000:35)
          at MergeMapSubscriber.project (/my-app/fronttest/dist/server.js:149003:47)
          at MergeMapSubscriber._tryNext (/my-app/fronttest/dist/server.js:37063:27)
          at MergeMapSubscriber._next (/my-app/fronttest/dist/server.js:37053:18)
          at MergeMapSubscriber.Subscriber.next (/my-app/fronttest/dist/server.js:33575:18)
          at Observable._subscribe (/my-app/fronttest/dist/server.js:35645:20)
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function],
    invoke: [Function]
  }
}

What modules are related to this issue?

- [ ] aspnetcore-engine
- [ ] common
- [ ] express-engine
- [ ] hapi-engine
- [+] module-map-ngfactory-loader

Minimal reproduction with instructions:

In a new project, follow the steps from https://angular.io/guide/universal and generate a simple lazy loading module.

What is the use-case or motivation for changing an existing behavior?

Following the new behavior of Version 8.

Environment:

@nguniversal versions

• aspnetcore-engine:
• common:
• express-engine:
• hapi-engine:
• module-map-ngfactory-loader:

Angular CLI: 8.0.1
Node: 12.3.1
OS: darwin x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.800.1
@angular-devkit/build-angular              0.800.1
@angular-devkit/build-optimizer            0.800.1
@angular-devkit/build-webpack              0.800.1
@angular-devkit/core                       8.0.1
@angular-devkit/schematics                 8.0.1
@angular/cli                               8.0.1
@ngtools/webpack                           8.0.1
@nguniversal/express-engine                7.0.2
@nguniversal/module-map-ngfactory-loader   7.0.2
@schematics/angular                        8.0.1
@schematics/update                         0.800.1
rxjs                                       6.4.0
typescript                                 3.4.5
webpack                                    4.30.0

Is there anything else we should know?

[vikerman]

Hi - This is a known issue we are fixing in the next RC - https://github.com/angular/universal/commit/d8be7af200f067a9f65c4f5ab48d8468a4b7ca33

The problem is that there are two copies of Angular in the older way of setting up Universal and it confuses the lazy loading system.

Please refer to this commit on a sample project on how you can fix this for your existing project - https://github.com/vikerman/v8-lazy/commit/515239be1b233946e4a1d15a8712a0bc9f5490cc

Essentially we move all dependency on Angular bits from server.ts to main.server.ts. You can fix this manually for now. We are working on a ng update script to automatically fix up existing projects. Thanks!

[jupapios]

@vikerman I created a project that reproduces the issue https://github.com/gotik/cannot-find-module-issue, it has the changes described in the Angular 8 migration guide https://github.com/angular/universal/blob/master/docs/v8-upgrade-guide.md#fix but the issue is still present, please keep in mind the issue happens when libraryTarget is set to commonjs or umd