Lazy Loading - System is not defined. #741

seklyza · 2017-06-16T09:31:55Z

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.

The text was updated successfully, but these errors were encountered:

glebmachine · 2017-06-19T15:58:27Z

+1

StojanovicM · 2017-06-26T09:09:03Z

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 · 2017-07-18T08:41:09Z

+1

dottodot · 2017-08-05T10:04:37Z

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 · 2017-08-05T10:07:29Z

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 · 2017-08-05T12:41:05Z

I got it to work in my starter repo here:

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

dottodot · 2017-08-05T13:37:09Z

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

patrickmichalina · 2017-08-05T13:59:56Z

@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 · 2017-08-18T11:06:23Z

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

CaerusKaru · 2017-08-22T19:26:25Z

@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 · 2017-08-22T21:45:54Z

@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 · 2017-08-23T06:32:42Z

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 · 2017-08-23T06:35:20Z

@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 · 2017-08-28T23:12:59Z

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

o-tkach · 2017-09-06T14:43:42Z

@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/
    ]
  })],

vikerman · 2017-09-21T21:12:37Z

Please use @nguniversal/module-map-ngfactory-loader for this - https://github.com/angular/universal/tree/master/modules/module-map-ngfactory-loader

SzymonPawlak · 2017-09-27T08:04:05Z

@vikerman after using this solution i have got
No provider for InjectionToken MODULE_MAP

can you help me?

Toxicable · 2017-09-27T08:06:20Z

@Sacred90 did you add in provideModuleMap(LAZY_MODULE_MAP)?

SzymonPawlak · 2017-09-27T08:32:02Z

@Toxicable i'm not sure where i have to add this. For adding universal via angular CLI i'm using this article -> Angular Server-side rendering by using Angular-CLI and i suppose I have to add it here

require('zone.js/dist/zone-node');
const express = require('express');
const fs = require('fs');
const { platformServer, renderModuleFactory } = require('@angular/platform-server');
const { ngExpressEngine } = require('@nguniversal/express-engine');
// Import the AOT compiled factory for your AppServerModule.
// This import will change with the hash of your built server bundle.
const { AppServerModuleNgFactory } = require(`./dist-server/main.bundle`);
const app = express();
const port = 8000;
const baseUrl = `http://localhost:${port}`;
// Set the engine
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory
}));
app.set('view engine', 'html');
app.set('views', './');
app.use('/', express.static('./', {index: false}));
app.get('*', (req, res) => {
  res.render('index', {
    req,
    res
  });
});
app.listen(port, () => {
  console.log(`Listening at ${baseUrl}`);
});

for any help i will be really appreciate

Toxicable · 2017-09-27T08:33:46Z

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

nicky-lenaers · 2017-09-28T16:55:27Z

@Toxicable Where do I import LAZY_MODULE_MAP from?

AnthonyNahas · 2017-10-03T13:14:18Z

@nicky-lenaers --> const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main.bundle');

vlad-ovsyannikov · 2017-10-04T11:51:55Z

@Toxicable Sorry for that - but using https://github.com/angular/universal/tree/master/modules/module-map-ngfactory-loader still rise the same system is not define d error - any ideas why it could be?

Angular version: 4.3.5
Language: [TypeScript 2.4.2]
OS: [MacOS]
Platform: [NodeJS] 7.10

"@nguniversal/express-engine": "^5.0.0-beta.1",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.1",

LAZY_MODULE_MAP - initialized with array of strings

but

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

seems not working

Toxicable · 2017-10-04T18:16:53Z

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

nicky-lenaers · 2017-10-05T06:49:08Z

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.

yosigolan · 2017-10-09T13:12:14Z

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.

dockleryxk · 2017-10-20T20:29:21Z

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

scott-wyatt · 2018-04-29T16:18:35Z

@yosigolan's answer worked for me as well. Cheers!

patrickmichalina · 2018-04-29T16:44:08Z

I see the disconnect. In my starter, I use Fusebox bundler, which I have configured such that server side code is all one single bundle. Only client side code is code-splitted. So this is actually not required for my setup, but I can see how it is needed.

leo6104 · 2018-07-22T09:07:20Z

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

angular-automatic-lock-bot · 2019-09-04T21:02:07Z

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.}

This was referenced Sep 15, 2017

Lazy Loading with Universal angular/angular-cli#7706

Closed

Publish/Deployment Doesnt work TrilonIO/aspnetcore-angular-universal#413

Closed

fix (AoT - Lazy load) : lazy modules chunks creation on Server bundle TrilonIO/aspnetcore-angular-universal#410

Merged

vikerman closed this as completed Sep 21, 2017

jperasmus mentioned this issue Apr 5, 2018

[appShell] ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined angular/angular-cli#9985

Closed

tomskip123 mentioned this issue Sep 12, 2018

Server side error. Promise uncaught? #1063

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lazy Loading - System is not defined. #741

Lazy Loading - System is not defined. #741

seklyza commented Jun 16, 2017

glebmachine commented Jun 19, 2017

StojanovicM commented Jun 26, 2017 •

edited

Loading

not-only-code commented Jul 18, 2017

dottodot commented Aug 5, 2017

dottodot commented Aug 5, 2017

patrickmichalina commented Aug 5, 2017

dottodot commented Aug 5, 2017

patrickmichalina commented Aug 5, 2017

Toxicable commented Aug 18, 2017

CaerusKaru commented Aug 22, 2017

PatrickJS commented Aug 22, 2017

seklyza commented Aug 23, 2017

Toxicable commented Aug 23, 2017

Toxicable commented Aug 28, 2017

o-tkach commented Sep 6, 2017 •

edited by PatrickJS

Loading

vikerman commented Sep 21, 2017

SzymonPawlak commented Sep 27, 2017

Toxicable commented Sep 27, 2017

SzymonPawlak commented Sep 27, 2017 •

edited

Loading

Toxicable commented Sep 27, 2017 •

edited

Loading

nicky-lenaers commented Sep 28, 2017

AnthonyNahas commented Oct 3, 2017

vlad-ovsyannikov commented Oct 4, 2017

Toxicable commented Oct 4, 2017

nicky-lenaers commented Oct 5, 2017

yosigolan commented Oct 9, 2017

dockleryxk commented Oct 20, 2017

scott-wyatt commented Apr 29, 2018

patrickmichalina commented Apr 29, 2018

leo6104 commented Jul 22, 2018 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 4, 2019

Lazy Loading - System is not defined. #741

Lazy Loading - System is not defined. #741

Comments

seklyza commented Jun 16, 2017

glebmachine commented Jun 19, 2017

StojanovicM commented Jun 26, 2017 • edited Loading

not-only-code commented Jul 18, 2017

dottodot commented Aug 5, 2017

dottodot commented Aug 5, 2017

patrickmichalina commented Aug 5, 2017

dottodot commented Aug 5, 2017

patrickmichalina commented Aug 5, 2017

Toxicable commented Aug 18, 2017

CaerusKaru commented Aug 22, 2017

PatrickJS commented Aug 22, 2017

seklyza commented Aug 23, 2017

Toxicable commented Aug 23, 2017

Toxicable commented Aug 28, 2017

o-tkach commented Sep 6, 2017 • edited by PatrickJS Loading

vikerman commented Sep 21, 2017

SzymonPawlak commented Sep 27, 2017

Toxicable commented Sep 27, 2017

SzymonPawlak commented Sep 27, 2017 • edited Loading

Toxicable commented Sep 27, 2017 • edited Loading

nicky-lenaers commented Sep 28, 2017

AnthonyNahas commented Oct 3, 2017

vlad-ovsyannikov commented Oct 4, 2017

Toxicable commented Oct 4, 2017

nicky-lenaers commented Oct 5, 2017

yosigolan commented Oct 9, 2017

dockleryxk commented Oct 20, 2017

scott-wyatt commented Apr 29, 2018

patrickmichalina commented Apr 29, 2018

leo6104 commented Jul 22, 2018 • edited Loading

angular-automatic-lock-bot bot commented Sep 4, 2019

StojanovicM commented Jun 26, 2017 •

edited

Loading

o-tkach commented Sep 6, 2017 •

edited by PatrickJS

Loading

SzymonPawlak commented Sep 27, 2017 •

edited

Loading

Toxicable commented Sep 27, 2017 •

edited

Loading

leo6104 commented Jul 22, 2018 •

edited

Loading