Lazy Loading with SSR doesn't seem to work on server

[naveedahmed1]

Versions

Angular CLI: 1.5.5
Node: 8.9.1
OS: win32 x64
Angular: 5.1.0-rc.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cdk: 5.0.0-rc.3
@angular/cli: 1.5.5
@angular/flex-layout: 2.0.0-beta.11-b01c2d7
@angular/material: 5.0.0-rc.3
@angular-devkit/build-optimizer: 0.0.34
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.39
@ngtools/json-schema: 1.1.0
@schematics/angular: 0.1.9
typescript: 2.4.2
webpack: 3.8.1

I am following the steps described in https://github.com/angular/angular-cli/wiki/stories-universal-rendering

but lazy loaded routes doesn't seem to work on server, its showing below error in server log:

Microsoft.AspNetCore.NodeServices:Error: ERROR { Error: Uncaught (in promise): TypeError: Cannot read property './home/home.module#HomeModule' of undefined
TypeError: Cannot read property './home/home.module#HomeModule' of undefined
    at ModuleMapNgFactoryLoader.load (D:\MyProject\ClientApp\node_modules\@nguniversal\module-map-ngfactory-loader\src\module-map-ngfactory-loader.js:18:34)
    at RouterConfigLoader.loadModuleFactory (D:\MyProject\ClientApp\node_modules\@angular\router\bundles\router.umd.js:4544:72)
    at RouterConfigLoader.load (D:\MyProject\ClientApp\node_modules\@angular\router\bundles\router.umd.js:4524:52)
    at MergeMapSubscriber.project (D:\MyProject\ClientApp\node_modules\@angular\router\bundles\router.umd.js:2037:74)
    at MergeMapSubscriber._tryNext (D:\MyProject\ClientApp\node_modules\rxjs\operators\mergeMap.js:122:27)
    at MergeMapSubscriber._next (D:\MyProject\ClientApp\node_modules\rxjs\operators\mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (D:\MyProject\ClientApp\node_modules\rxjs\Subscriber.js:89:18)
    at ScalarObservable._subscribe (D:\MyProject\ClientApp\node_modules\rxjs\observable\ScalarObservable.js:49:24)
    at ScalarObservable.Observable._trySubscribe (D:\MyProject\ClientApp\node_modules\rxjs\Observable.js:172:25)
    at ScalarObservable.Observable.subscribe (D:\MyProject\ClientApp\node_modules\rxjs\Observable.js:160:65)
    at resolvePromise (D:\MyProject\ClientApp\node_modules\zone.js\dist\zone-node.js:824:31)
    at resolvePromise (D:\MyProject\ClientApp\node_modules\zone.js\dist\zone-node.js:795:17)
    at D:\MyProject\ClientApp\node_modules\zone.js\dist\zone-node.js:873:17
    at ZoneDelegate.invokeTask (D:\MyProject\ClientApp\node_modules\zone.js\dist\zone-node.js:425:31)
    at Object.onInvokeTask (D:\MyProject\ClientApp\node_modules\@angular\core\bundles\core.umd.js:4786:33)
    at ZoneDelegate.invokeTask (D:\MyProject\ClientApp\node_modules\zone.js\dist\zone-node.js:424:36)
    at Zone.runTask (D:\MyProject\ClientApp\node_modules\zone.js\dist\zone-node.js:192:47)
    at drainMicroTaskQueue (D:\MyProject\ClientApp\node_modules\zone.js\dist\zone-node.js:602:35)
    at ZoneTask.invokeTask (D:\MyProject\ClientApp\node_modules\zone.js\dist\zone-node.js:503:21)
    at ZoneTask.invoke (D:\MyProject\ClientApp\node_modules\zone.js\dist\zone-node.js:488:48)
  rejection: 
   { TypeError: Cannot read property './home/home.module#HomeModule' of undefined
    at ModuleMapNgFactoryLoader.load (D:\MyProject\ClientApp\node_modules\@nguniversal\module-map-ngfactory-loader\src\module-map-ngfactory-loader.js:18:34)
    at RouterConfigLoader.loadModuleFactory (D:\MyProject\ClientApp\node_modules\@angular\router\bundles\router.umd.js:4544:72)
    at RouterConfigLoader.load (D:\MyProject\ClientApp\node_modules\@angular\router\bundles\router.umd.js:4524:52)
    at MergeMapSubscriber.project (D:\MyProject\ClientApp\node_modules\@angular\router\bundles\router.umd.js:2037:74)
    at MergeMapSubscriber._tryNext (D:\MyProject\ClientApp\node_modules\rxjs\operators\mergeMap.js:122:27)
    at MergeMapSubscriber._next (D:\MyProject\ClientApp\node_modules\rxjs\operators\mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (D:\MyProject\ClientApp\node_modules\rxjs\Subscriber.js:89:18)
    at ScalarObservable._subscribe (D:\MyProject\ClientApp\node_modules\rxjs\observable\ScalarObservable.js:49:24)
    at ScalarObservable.Observable._trySubscribe (D:\MyProject\ClientApp\node_modules\rxjs\Observable.js:172:25)
    at ScalarObservable.Observable.subscribe (D:\MyProject\ClientApp\node_modules\rxjs\Observable.js:160:65)
     __zone_symbol__currentTask: 
      ZoneTask {
        _zone: [Object],
        runCount: 0,
        _zoneDelegates: null,
        _state: 'notScheduled',
        type: 'microTask',
        source: 'Promise.then',
        data: undefined,
        scheduleFn: undefined,
        cancelFn: null,
        callback: [Function],
        invoke: [Function] } },
  promise: 
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value: { TypeError: Cannot read property './home/home.module#HomeModule' of undefined
    at ModuleMapNgFactoryLoader.load (D:\MyProject\ClientApp\node_modules\@nguniversal\module-map-ngfactory-loader\src\module-map-ngfactory-loader.js:18:34)
    at RouterConfigLoader.loadModuleFactory (D:\MyProject\ClientApp\node_modules\@angular\router\bundles\router.umd.js:4544:72)
    at RouterConfigLoader.load (D:\MyProject\ClientApp\node_modules\@angular\router\bundles\router.umd.js:4524:52)
    at MergeMapSubscriber.project (D:\MyProject\ClientApp\node_modules\@angular\router\bundles\router.umd.js:2037:74)
    at MergeMapSubscriber._tryNext (D:\MyProject\ClientApp\node_modules\rxjs\operators\mergeMap.js:122:27)
    at MergeMapSubscriber._next (D:\MyProject\ClientApp\node_modules\rxjs\operators\mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (D:\MyProject\ClientApp\node_modules\rxjs\Subscriber.js:89:18)
    at ScalarObservable._subscribe (D:\MyProject\ClientApp\node_modules\rxjs\observable\ScalarObservable.js:49:24)
    at ScalarObservable.Observable._trySubscribe (D:\MyProject\ClientApp\node_modules\rxjs\Observable.js:172:25)
    at ScalarObservable.Observable.subscribe (D:\MyProject\ClientApp\node_modules\rxjs\Observable.js:160:65) __zone_symbol__currentTask: [Object] } },
  zone: 
   Zone {
     _properties: { isAngularZone: true },
     _parent: 
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     _name: 'angular',
     _zoneDelegate: 
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: [Object],
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: [Object],
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: [Object],
        _invokeZS: [Object],
        _invokeDlgt: [Object],
        _invokeCurrZone: [Circular],
        _handleErrorZS: [Object],
        _handleErrorDlgt: [Object],
        _handleErrorCurrZone: [Circular],
        _scheduleTaskZS: [Object],
        _scheduleTaskDlgt: [Object],
        _scheduleTaskCurrZone: [Circular],
        _invokeTaskZS: [Object],
        _invokeTaskDlgt: [Object],
        _invokeTaskCurrZone: [Circular],
        _cancelTaskZS: [Object],
        _cancelTaskDlgt: [Object],
        _cancelTaskCurrZone: [Circular],
        _hasTaskZS: [Object],
        _hasTaskDlgt: [Object],
        _hasTaskDlgtOwner: [Circular],
        _hasTaskCurrZone: [Circular] } },
  task: 
   ZoneTask {
     _zone: 
      Zone {
        _properties: [Object],
        _parent: [Object],
        _name: 'angular',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

[clydin]

Would you be able to put together a minimal reproduction of the issue and put it up on GitHub? Without further information there is not much more that can be done to diagnose the issue.

[naveedahmed1]

Thank you @clydin I tested it with .Net Core Angular CLI based template (aspnet/JavaScriptServices#1288 (comment)) , after enabling SSR everything works fine, but when we convert any module to Lazy Loading module it works fine in browser but on server shows above error.

[naveedahmed1]

Sorry this was due to a configuration issue of asp.net renderer in template. Should be fixed in next version of the template.

[asadsahi]

@naveedahmed1 did the fix for this issue made into preview of .net core angular cli template? I am having same error for lazy loading modules.

[naveedahmed1]

Yes it was fixed, for me its working fine.

[naveedahmed1]

@asadsahi the issue was with main.server file generated through template.

[asadsahi]

Ahh I see, It was this line:

    const { AppServerModule, AppServerModuleNgFactory, LAZY_MODULE_MAP } = (module as any).exports;

moved inside createServerRenderer function. Previously it was outside.

Its working fine now. Thanks @naveedahmed1

[naveedahmed1]

Glad to know :)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}