Angular-cli: 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.

[alan-agius4]

Hi, I looked at this and the problem is that in the compilerOptions of your tsconfig.server.json you don't have "module": "commonjs", which is fall backing to esnext modules which don't work on the server.

[sebastiannm]

I had the same problem and I was watching this issue.

Creating a new project using ng new and adding ssr using ng add, doesn't add "module": "commonjs" to tsconfig.server.json

But yes, that solved my issue btw

[mazlano27]

@alan-agius4 Thank you for finding the fix - the issue is solved! With the updated syntax of how children routes are loaded, there is more consistency in how code is written which makes it more fulfilling to use Angular to develop apps.

[angular-automatic-lock-bot[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._}