universal: 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?

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 8
  • Comments: 23 (4 by maintainers)

Commits related to this issue

Most upvoted comments

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!

+16
vikerman on May 31, 2019

@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

+5
jupapios on Jan 6, 2020

@vikerman Thanks for the informations! What can we do if we are using “libraryTarget: ‘umd’”? E.g. for Firebase hosting. The “externals” configuration of webpack.server.config.ts doesn’t seems to work then, because I get the following error: Error parsing triggers: Cannot find module ‘require(“./server/main”)’

Thank you very much!

+4
PierreChavaroche on Jul 12, 2019

image

Same Issue here

+2
chenlitchian on Aug 5, 2019

Thanks for reporting this issue. Luckily, it has already been fixed in one of the recent releases.

+1
alan-agius4 on Feb 9, 2023

Hey pierre, I had the same problem last year and I fixed it by changing some configuration in the tsconfig.server.json file. We can take a look at your specific problem together if you want. I can make some time as I was in your same situation a year ago and I know how it feels.

+1
ponkys on Apr 16, 2020

I just figured out , it just hit me during shower lol. For those whom are facing this problem : Since we are using Server side rendering, we doesn’t need to use lazy load module , ( it doesn’t make sense to use it ) every page of your is already sending by the server.

But it will be better to provide a smooth solution for this. ( In case that some project need to be use both on CSR and SSR )

+1
karocksjoelee on Dec 3, 2019

@vikerman removing --bundleDepencies all doesn’t fix the issue. We are exporting app (in the server.ts) file, hence the need for libraryTarget, the reason to do that is that we have several places importing it, one of them to create aws lambda functions. I created a project that shows the problem https://github.com/gotik/cannot-find-module-issue I also included a test.js file to validate that app can be imported from the outside.

@ponkys that didn’t work for us, could you please elaborate around your fix?

+1
jupapios on Aug 4, 2019

I had the same issue and it was solved when I added "module": “commonjs” in tsconfig.server.json.

+1
ponkys on Aug 1, 2019
Read more comments on GitHub
← universal: ECONNREFUSED 127.0.0.1:53233 when running "serve-ssr" from @nguniversal/builders
universal: Error: No NgModule metadata found for '[object Object]' →