universal: Lazy Loading - System is not defined.

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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 13
Comments: 31 (6 by maintainers)

Most upvoted comments

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

Toxicable on Sep 27, 2017

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

Toxicable on Aug 18, 2017

Hey. the error “ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined” keep happening to me after i added ModuleMapLoaderModule. the reason was that i added the ModuleMapLoaderModule as import before my routing module. after i moved the import to the end (after the routing module) it started to work fine. i guess there is importance to the order of the references since the ModuleMapLoaderModule scans the routes from the routing module.

yosigolan on Oct 9, 2017

@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

PatrickJS on Aug 22, 2017

I had this same issue. In my case, any of above solutions not works. I found the cause from angular.json file. To lazy loading in SSR with this module-map-ngfactory-loader, sourceMap must be true in angular.json file’s configuration section.

Also, directly import RouterModule in AppModule seems not properly work even if it have no error message in ssr request. Here is my implementation case.

@NgModule({
   imports: [
     ..., 
     RouterModule.forRoot(routes) 
   ]
})
export class AppModule

You must re-export RouterModule like this.

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {
}

@NgModule({
   imports: [
     ~, 
     AppRoutingModule
   ]
})
export class AppModule

leo6104 on Jul 22, 2018

I had this same error, but it was because I was importing the same provider in my app.browser.module and app.module (oops). Maybe that will help someone else not waste as much time as I did

dockleryxk on Oct 20, 2017

I had this problem when using 5.0.0-beta.1 with Angular 4.x. So I changed both @nguniversal/express-engine and @nguniversal/module-map-ngfactory-loader back to 1.0.0-beta.3 and it worked. Hope this helps.

nicky-lenaers on Oct 5, 2017

@vlad-ovsyannikov it works fine for me, did you also import ModuleMapLoaderModule into your server module?

Toxicable on Oct 4, 2017

@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

patrickmichalina on Aug 5, 2017

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…

StojanovicM on Jun 26, 2017