Lazy Loading - System is not defined.

[seklyza]

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports. Also, Preboot has moved to https://github.com/angular/preboot - please make preboot-related issues there.

• I'm submitting a ...

- [ * ] bug report
- [ ] feature request
- [ ] support request => Please do not submit support request here, see note at the top of this template.

• What modules are related to this Issue?

- [ ] aspnetcore-engine
- [ * ] express-engine
- [ ] hapi-engine

• Do you want to request a feature or report a bug?

Report a bug

• What is the current behavior?

I have a Universal Angular server, with lazy routes. Whenever I go to a lazy route and refresh, I get an error on the server "System is not defined". (The lazy route is seen in the browser, however it is not universally loaded)

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

Set up a Universal Server, have a lazy route, enter the route, reload and see the errror on the server.

GitHub repo

• What is the expected behavior?

To "universally" lazy-load the route without having console errors.

• What is the motivation / use case for changing the behavior?

I need to support server-side rendering with lazy routes.

• Please tell us about your environment:

• Angular version: 4.2.2
• Browser: [Chrome 58.0.3029.110 (64 bit)]
• Language: [TypeScript 2.3.4]
• OS: [Windows 10]
• Platform: [NodeJS]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Error:

ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined
	at SystemJsNgModuleLoader.loadFactory (C:\Users\shachar\Desktop\universal\packages\core\src\linker\system_js_ng_module_factory_loader.ts:67:1)
	at SystemJsNgModuleLoader.load (C:\Users\shachar\Desktop\universal\node_modules\@angular\core\bundles\core.umd.js:5724:35)
	at RouterConfigLoader.loadModuleFactory (C:\Users\shachar\Desktop\universal\packages\router\src\router_config_loader.ts:71:1)
	at RouterConfigLoader.load (C:\Users\shachar\Desktop\universal\node_modules\@angular\router\bundles\router.umd.js:3402:52)
	at MergeMapSubscriber.project (C:\Users\shachar\Desktop\universal\node_modules\@angular\router\bundles\router.umd.js:1570:74)
	at MergeMapSubscriber._tryNext (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\operator\mergeMap.ts:125:21)
	at MergeMapSubscriber._next (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\operator\mergeMap.ts:115:12)
	at MergeMapSubscriber.Subscriber.next (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\Subscriber.ts:95:12)
	at ScalarObservable._subscribe (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\observable\ScalarObservable.ts:51:18)
	at ScalarObservable.Observable._trySubscribe (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\Observable.ts:113:19)
	at resolvePromise (C:\Users\shachar\Desktop\universal\node_modules\zone.js\dist\zone-node.js:770:31)
	at resolvePromise (C:\Users\shachar\Desktop\universal\node_modules\zone.js\dist\zone-node.js:741:17)
	at C:\Users\shachar\Desktop\universal\node_modules\zone.js\dist\zone-node.js:818:17
	at ZoneDelegate.invokeTask (C:\Users\shachar\Desktop\universal\node_modules\zone.js\dist\zone-node.js:424:31)
	at Object.onInvokeTask (C:\Users\shachar\Desktop\universal\packages\core\src\zone\ng_zone.ts:257:1)
	at ZoneDelegate.invokeTask (C:\Users\shachar\Desktop\universal\node_modules\zone.js\dist\zone-node.js:423:36)
	at Zone.runTask (C:\Users\shachar\Desktop\universal\node_modules\zone.js\dist\zone-node.js:191:47)
	at drainMicroTaskQueue (C:\Users\shachar\Desktop\universal\node_modules\zone.js\dist\zone-node.js:584:35)
	at Server.ZoneTask.invoke (C:\Users\shachar\Desktop\universal\node_modules\zone.js\dist\zone-node.js:490:25)
	at emitTwo (events.js:106:13)
  rejection:
   { ReferenceError: System is not defined
	   at SystemJsNgModuleLoader.loadFactory (C:\Users\shachar\Desktop\universal\packages\core\src\linker\system_js_ng_module_factory_loader.ts:67:1)
	   at SystemJsNgModuleLoader.load (C:\Users\shachar\Desktop\universal\node_modules\@angular\core\bundles\core.umd.js:5724:35)
	   at RouterConfigLoader.loadModuleFactory (C:\Users\shachar\Desktop\universal\packages\router\src\router_config_loader.ts:71:1)
	   at RouterConfigLoader.load (C:\Users\shachar\Desktop\universal\node_modules\@angular\router\bundles\router.umd.js:3402:52)
	   at MergeMapSubscriber.project (C:\Users\shachar\Desktop\universal\node_modules\@angular\router\bundles\router.umd.js:1570:74)
	   at MergeMapSubscriber._tryNext (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\operator\mergeMap.ts:125:21)
	   at MergeMapSubscriber._next (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\operator\mergeMap.ts:115:12)
	   at MergeMapSubscriber.Subscriber.next (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\Subscriber.ts:95:12)
	   at ScalarObservable._subscribe (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\observable\ScalarObservable.ts:51:18)
	   at ScalarObservable.Observable._trySubscribe (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\Observable.ts:113:19)
	 __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:
	  { ReferenceError: System is not defined
		  at SystemJsNgModuleLoader.loadFactory (C:\Users\shachar\Desktop\universal\packages\core\src\linker\system_js_ng_module_factory_loader.ts:67:1)
		  at SystemJsNgModuleLoader.load (C:\Users\shachar\Desktop\universal\node_modules\@angular\core\bundles\core.umd.js:5724:35)
		  at RouterConfigLoader.loadModuleFactory (C:\Users\shachar\Desktop\universal\packages\router\src\router_config_loader.ts:71:1)
		  at RouterConfigLoader.load (C:\Users\shachar\Desktop\universal\node_modules\@angular\router\bundles\router.umd.js:3402:52)
		  at MergeMapSubscriber.project (C:\Users\shachar\Desktop\universal\node_modules\@angular\router\bundles\router.umd.js:1570:74)
		  at MergeMapSubscriber._tryNext (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\operator\mergeMap.ts:125:21)
		  at MergeMapSubscriber._next (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\operator\mergeMap.ts:115:12)
		  at MergeMapSubscriber.Subscriber.next (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\Subscriber.ts:95:12)
		  at ScalarObservable._subscribe (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\observable\ScalarObservable.ts:51:18)
		  at ScalarObservable.Observable._trySubscribe (C:\Users\shachar\Desktop\universal\node_modules\rxjs\src\Observable.ts:113:19) __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] } }

Stackoverflow issue

NOTE: I am not using SystemJS at all.

[glebmachine]

+1

[StojanovicM]

I am having exactly the same issue. I tried using different webpack loaders, eg. angular-router-loader, but no help. Module is loaded in to the browser, but is not rendered with universal and error in the console is same as @seklyza 's. Only difference is Linux OS....

[not-only-code]

+1

[dottodot]

Same issue when using angular-cli and the content is not rendered on the server so I assume that's because of this error.

[dottodot]

But I have just found on the angular-cli pages that

Lazy loading is not yet supported, but coming very soon. Currently lazy loaded routes aren't available for prerendering, and you will get a System is not defined error.

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/universal-rendering.md

[patrickmichalina]

I got it to work in my starter repo here:

https://github.com/patrickmichalina/fusebox-angular-universal-starter

[dottodot]

@patrickmichalina Any idea what you did to make it work?

[patrickmichalina]

@dottodot a small and naive plugin that replaces the route during bundling.

source: https://github.com/patrickmichalina/fusebox-angular-universal-starter/blob/master/tools/plugins/ng-lazy.ts

[Toxicable]

Will be solved by using https://github.com/angular/universal/tree/master/modules/ng-module-map-ngfactory-loader when it's published

[CaerusKaru]

@Toxicable Is there a timeline for publishing? Also is this the planned patch for CLI integration, or do they have their own fix in mind? cc @gdi2290 @hansl

[PatrickJS]

@CaerusKaru there are many ways to solve this. One as you mentioned is replacing NgModuleFactoryLoader but if you're using webpack you can simply include angular into your webpack bundle which allows webpack to replace the System.import symbol.

for publishing ng-module-map-ngfactory-loader thats up to @vikerman and the fix I suggetsed is up to @hansl who can make the change in the CLI

[seklyza]

Let's hope it will get to the CLI as fast as possible. SSR and Lazy Loading are both great features of Angular but they don't work "natively" together.

[Toxicable]

@seklyza I don't know what you're talking about when you say "natively" none of this stuff is native at all.
I've been using Lazy Loading with Universal for the last few weeks without any problems

[Toxicable]

can be closed since module-map-ngfactory-loader is now published on npm via
3090533

[o-tkach]

@gdi2290 , you said "if you're using webpack you can simply include angular into your webpack bundle".
You mean to do like this?

webpack.server.js

externals: [nodeExternals({
    whitelist: [
      /^@angular/
    ]
  })],