Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mazlano27 opened this issue May 31, 2019 · 7 comments

Comments

@mazlano27
Copy link

@mazlano27 mazlano27 commented May 31, 2019

馃悶 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 alan-agius4 transferred this issue from angular/angular May 31, 2019
@alan-agius4

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented May 31, 2019

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 comment has been minimized.

Copy link
Author

@mazlano27 mazlano27 commented May 31, 2019

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

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented Jun 3, 2019

Thanks @mazlano27, I can replicate the problem.

@alan-agius4

This comment has been minimized.

Copy link
Collaborator

@alan-agius4 alan-agius4 commented Jun 4, 2019

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.

@alan-agius4 alan-agius4 closed this Jun 4, 2019
@sebastiannm

This comment has been minimized.

Copy link

@sebastiannm sebastiannm commented Jun 4, 2019

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

This comment has been minimized.

Copy link
Author

@mazlano27 mazlano27 commented Jun 4, 2019

@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

This comment has been minimized.

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 9, 2019

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
3 participants
You can鈥檛 perform that action at this time.