Universal: 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
https://github.com/angular/universal/commit/309053364c282bf69342cfacf317ea7c7c54f0b4

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

[vikerman]

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

[SzymonPawlak]

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

can you help me?

[Toxicable]

@Sacred90 did you add in provideModuleMap(LAZY_MODULE_MAP)?

[SzymonPawlak]

@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
// GitHub source: server.js 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]

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

[nicky-lenaers]

@Toxicable Where do I import LAZY_MODULE_MAP from?

[AnthonyNahas]

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

[vlad-ovsyannikov]

@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]

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

[nicky-lenaers]

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]

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]

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]

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

[patrickmichalina]

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]

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