Changing loadChildren syntax (From string to import(...)) breaks pre-rendering

[mazlano27]

🐞 bug report

Description

Hi,

• I recently updated my angular application from v7 to v8

• Upon review, i noticed the "module" and "target" fields in tscongif did not update to "esnext" and "es2015" respectively - so I manually updated these keys.

• I also noticed update did not automatically convert my lazy loading import syntax from string

(loadChildren: './home/home.module#HomeModule')

to functional

(loadChildren: () => import('./home/home.module').then(m => m.HomeModule)) , so I proceeded to update lazy loading import syntax my self.

When I served the app locally, everything was working. However, when I tried to SSR the application for testing, an error was thrown =>

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
at webpack_require (webpack:///./dist/myDayPwaApp-server/main.js?:26:30)
at Function.requireEnsure [as e] (webpack:///./dist/myDayPwaApp-server/main.js?:45:25)
at ɵ0 (webpack:///./dist/myDayPwaApp-server/main.js?:2517:38)
at RouterConfigLoader.loadModuleFactory (webpack:///./node_modules/@angular/router/fesm5/router.js?:3684:39)
at RouterConfigLoader.load (webpack:///./node_modules/@angular/router/fesm5/router.js?:3669:35)
at MergeMapSubscriber.eval [as project] (webpack:///./node_modules/@angular/router/fesm5/router.js?:2672:47)
at MergeMapSubscriber._tryNext (webpack:///./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:71:27)
at MergeMapSubscriber._next (webpack:///./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:61:18)
at MergeMapSubscriber.Subscriber.next (webpack:///./node_modules/rxjs/_esm5/internal/Subscriber.js?:63:18)
at Observable.eval [as _subscribe] (webpack:///./node_modules/rxjs/_esm5/internal/util/subscribeToArray.js?:7:24)
at resolvePromise (webpack:///./node_modules/zone.js/dist/zone-node.js?:851:31)
at resolvePromise (webpack:///./node_modules/zone.js/dist/zone-node.js?:808:17)
at eval (webpack:///./node_modules/zone.js/dist/zone-node.js?:912:17)
at ZoneDelegate.invokeTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:422:31)
at Object.onInvokeTask (webpack:///./node_modules/@angular/core/fesm5/core.js?:24730:33)
at ZoneDelegate.invokeTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:421:60)
at Zone.runTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:194:47)
at drainMicroTaskQueue (webpack:///./node_modules/zone.js/dist/zone-node.js?:600:35)
at ZoneTask.invokeTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:501:21)
at ZoneTask.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:486:48) {
rejection: TypeError: Cannot read property 'call' of undefined
at webpack_require (webpack:///./dist/myDayPwaApp-server/main.js?:26:30)
at Function.requireEnsure [as e] (webpack:///./dist/myDayPwaApp-server/main.js?:45:25)
at ɵ0 (webpack:///./dist/myDayPwaApp-server/main.js?:2517:38)
at RouterConfigLoader.loadModuleFactory (webpack:///./node_modules/@angular/router/fesm5/router.js?:3684:39)
at RouterConfigLoader.load (webpack:///./node_modules/@angular/router/fesm5/router.js?:3669:35)
at MergeMapSubscriber.eval [as project] (webpack:///./node_modules/@angular/router/fesm5/router.js?:2672:47)
at MergeMapSubscriber._tryNext (webpack:///./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:71:27)
at MergeMapSubscriber._next (webpack:///./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:61:18)
at MergeMapSubscriber.Subscriber.next (webpack:///./node_modules/rxjs/_esm5/internal/Subscriber.js?:63:18)
at Observable.eval [as _subscribe] (webpack:///./node_modules/rxjs/_esm5/internal/util/subscribeToArray.js?:7:24),
promise: ZoneAwarePromise [Promise] {
__zone_symbol__state: 0,
__zone_symbol__value: TypeError: Cannot read property 'call' of undefined
at webpack_require (webpack:///./dist/myDayPwaApp-server/main.js?:26:30)
at Function.requireEnsure [as e] (webpack:///./dist/myDayPwaApp-server/main.js?:45:25)
at ɵ0 (webpack:///./dist/myDayPwaApp-server/main.js?:2517:38)
at RouterConfigLoader.loadModuleFactory (webpack:///./node_modules/@angular/router/fesm5/router.js?:3684:39)
at RouterConfigLoader.load (webpack:///./node_modules/@angular/router/fesm5/router.js?:3669:35)
at MergeMapSubscriber.eval [as project] (webpack:///./node_modules/@angular/router/fesm5/router.js?:2672:47)
at MergeMapSubscriber._tryNext (webpack:///./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:71:27)
at MergeMapSubscriber._next (webpack:///./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:61:18)
at MergeMapSubscriber.Subscriber.next (webpack:///./node_modules/rxjs/_esm5/internal/Subscriber.js?:63:18)
at Observable.eval [as _subscribe] (webpack:///./node_modules/rxjs/_esm5/internal/util/subscribeToArray.js?:7:24)
},
zone: Zone {
_parent: Zone {
_parent: null,
_name: '',
_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 (webpack:///./dist/myDayPwaApp-server/main.js?:26:30)
at Function.requireEnsure [as e] (webpack:///./dist/myDayPwaApp-server/main.js?:45:25)
at ɵ0 (webpack:///./dist/myDayPwaApp-server/main.js?:2517:38)
at RouterConfigLoader.loadModuleFactory (webpack:///./node_modules/@angular/router/fesm5/router.js?:3684:39)
at RouterConfigLoader.load (webpack:///./node_modules/@angular/router/fesm5/router.js?:3669:35)
at MergeMapSubscriber.eval [as project] (webpack:///./node_modules/@angular/router/fesm5/router.js?:2672:47)
at MergeMapSubscriber._tryNext (webpack:///./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:71:27)
at MergeMapSubscriber._next (webpack:///./node_modules/rxjs/_esm5/internal/operators/mergeMap.js?:61:18)
at MergeMapSubscriber.Subscriber.next (webpack:///./node_modules/rxjs/_esm5/internal/Subscriber.js?:63:18)
at Observable.eval [as _subscribe] (webpack:///./node_modules/rxjs/_esm5/internal/util/subscribeToArray.js?:7:24)
},
scheduleFn: undefined,
cancelFn: undefined,
callback: [Function],
invoke: [Function]
}
}

I then reverted back to the string syntax for lazy loading children routes, and everything was working again.

I'd like to use the functional syntax for lazy loading children routes.

Thank you for any help.

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[mazlano27]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

Hi @alan-agius4 , I have set up a repro here =>

https://github.com/mazlano27/repro-app

To pre-render application for deployment -> please run 'npm run build:all'. Build will succeed.

However, when you change the way the routing is set up in 'app-routing.module.ts' (details commented in file lines 8 - 9 in src/app/app-routing.module.ts), build fails.

I hope this helps to diagnose the issue?

[alan-agius4]

Thanks @mazlano27, I can replicate the problem.