ngu-app-shell --module ReferenceError: document is not defined

[interngalactik]

Hello, guys :)

I am experiencing the next error when I run ./node_modules/.bin/ngu-app-shell --module src/app/app.module.ts:

ReferenceError: document is not defined
    at prepareQueryCSS (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:834:34)
    at MatchMedia.exports.MatchMedia.MatchMedia._buildMQL (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:802:9)
    at MatchMedia.exports.MatchMedia.MatchMedia.registerQuery (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:788:28)
    at <path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1063:31
    at Array.forEach (native)
    at MediaMonitor.exports.MediaMonitor.MediaMonitor._registerBreakpoints (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1062:33)
    at new MediaMonitor (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:995:14)
    at MEDIA_MONITOR_PROVIDER_FACTORY (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1525:29)
    at _callFactory (<path>/packages/core/src/view/ng_module.ts:192:1)
    at _createProviderInstance$1 (<path>/packages/core/src/view/ng_module.ts:124:1)
ERROR { ReferenceError: window is not defined
    at MatchMedia.exports.MatchMedia.MatchMedia._buildMQL (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:803:27)
    at MatchMedia.exports.MatchMedia.MatchMedia.registerQuery (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:788:28)
    at <path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1063:31
    at Array.forEach (native)
    at MediaMonitor.exports.MediaMonitor.MediaMonitor._registerBreakpoints (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1062:33)
    at new MediaMonitor (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:995:14)
    at MEDIA_MONITOR_PROVIDER_FACTORY (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1525:29)
    at _callFactory (<path>/packages/core/src/view/ng_module.ts:192:1)
    at _createProviderInstance$1 (<path>/packages/core/src/view/ng_module.ts:124:1)
    at resolveNgModuleDep (<path>/node_modules/@angular/core/bundles/core.umd.js:9561:17)
  __zone_symbol__currentTask:
   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] } }
Unhandled Promise rejection: window is not defined ; Zone: <root> ; Task: Promise.then ; Value: { ReferenceError: window is not defined
    at MatchMedia.exports.MatchMedia.MatchMedia._buildMQL (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:803:27)
    at MatchMedia.exports.MatchMedia.MatchMedia.registerQuery (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:788:28)
    at <path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1063:31
    at Array.forEach (native)
    at MediaMonitor.exports.MediaMonitor.MediaMonitor._registerBreakpoints (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1062:33)
    at new MediaMonitor (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:995:14)
    at MEDIA_MONITOR_PROVIDER_FACTORY (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1525:29)
    at _callFactory (<path>/packages/core/src/view/ng_module.ts:192:1)
    at _createProviderInstance$1 (<path>/packages/core/src/view/ng_module.ts:124:1)
    at resolveNgModuleDep (<path>/node_modules/@angular/core/bundles/core.umd.js:9561:17)
  __zone_symbol__currentTask:
   ZoneTask {
     _zone:
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } } ReferenceError: window is not defined
    at MatchMedia.exports.MatchMedia.MatchMedia._buildMQL (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:803:27)
    at MatchMedia.exports.MatchMedia.MatchMedia.registerQuery (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:788:28)
    at <path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1063:31
    at Array.forEach (native)
    at MediaMonitor.exports.MediaMonitor.MediaMonitor._registerBreakpoints (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1062:33)
    at new MediaMonitor (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:995:14)
    at MEDIA_MONITOR_PROVIDER_FACTORY (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1525:29)
    at _callFactory (<path>/packages/core/src/view/ng_module.ts:192:1)
    at _createProviderInstance$1 (<path>/packages/core/src/view/ng_module.ts:124:1)
    at resolveNgModuleDep (<path>/node_modules/@angular/core/bundles/core.umd.js:9561:17)
{ Error: Uncaught (in promise): ReferenceError: window is not defined
ReferenceError: window is not defined
    at MatchMedia.exports.MatchMedia.MatchMedia._buildMQL (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:803:27)
    at MatchMedia.exports.MatchMedia.MatchMedia.registerQuery (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:788:28)
    at <path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1063:31
    at Array.forEach (native)
    at MediaMonitor.exports.MediaMonitor.MediaMonitor._registerBreakpoints (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1062:33)
    at new MediaMonitor (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:995:14)
    at MEDIA_MONITOR_PROVIDER_FACTORY (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1525:29)
    at _callFactory (<path>/packages/core/src/view/ng_module.ts:192:1)
    at _createProviderInstance$1 (<path>/packages/core/src/view/ng_module.ts:124:1)
    at resolveNgModuleDep (<path>/node_modules/@angular/core/bundles/core.umd.js:9561:17)
    at resolvePromise (<path>/node_modules/zone.js/dist/zone-node.js:770:31)
    at resolvePromise (<path>/node_modules/zone.js/dist/zone-node.js:741:17)
    at <path>/node_modules/zone.js/dist/zone-node.js:818:17
    at ZoneDelegate.invokeTask (<path>/node_modules/zone.js/dist/zone-node.js:424:31)
    at Zone.runTask (<path>/node_modules/zone.js/dist/zone-node.js:191:47)
    at drainMicroTaskQueue (<path>/node_modules/zone.js/dist/zone-node.js:584:35)
    at process._tickDomainCallback (internal/process/next_tick.js:129:7)
    at Function.Module.runMain (module.js:606:11)
    at Object.<anonymous> (<path>/node_modules/ts-node/src/_bin.ts:177:12)
    at Module._compile (module.js:570:32)
  rejection:
   { ReferenceError: window is not defined
       at MatchMedia.exports.MatchMedia.MatchMedia._buildMQL (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:803:27)
       at MatchMedia.exports.MatchMedia.MatchMedia.registerQuery (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:788:28)
       at <path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1063:31
       at Array.forEach (native)
       at MediaMonitor.exports.MediaMonitor.MediaMonitor._registerBreakpoints (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1062:33)
       at new MediaMonitor (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:995:14)
       at MEDIA_MONITOR_PROVIDER_FACTORY (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1525:29)
       at _callFactory (<path>/packages/core/src/view/ng_module.ts:192:1)
       at _createProviderInstance$1 (<path>/packages/core/src/view/ng_module.ts:124:1)
       at resolveNgModuleDep (<path>/node_modules/@angular/core/bundles/core.umd.js:9561:17)
     __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: window is not defined
          at MatchMedia.exports.MatchMedia.MatchMedia._buildMQL (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:803:27)
          at MatchMedia.exports.MatchMedia.MatchMedia.registerQuery (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:788:28)
          at <path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1063:31
          at Array.forEach (native)
          at MediaMonitor.exports.MediaMonitor.MediaMonitor._registerBreakpoints (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1062:33)
          at new MediaMonitor (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:995:14)
          at MEDIA_MONITOR_PROVIDER_FACTORY (<path>/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:1525:29)
          at _callFactory (<path>/packages/core/src/view/ng_module.ts:192:1)
          at _createProviderInstance$1 (<path>/packages/core/src/view/ng_module.ts:124:1)
          at resolveNgModuleDep (<path>/node_modules/@angular/core/bundles/core.umd.js:9561:17) __zone_symbol__currentTask: [Object] } },
  zone:
   Zone {
     _properties: {},
     _parent: null,
     _name: '<root>',
     _zoneDelegate:
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: null,
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: null,
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: null,
        _invokeZS: null,
        _invokeDlgt: null,
        _invokeCurrZone: null,
        _handleErrorZS: null,
        _handleErrorDlgt: null,
        _handleErrorCurrZone: null,
        _scheduleTaskZS: null,
        _scheduleTaskDlgt: null,
        _scheduleTaskCurrZone: null,
        _invokeTaskZS: null,
        _invokeTaskDlgt: null,
        _invokeTaskCurrZone: null,
        _cancelTaskZS: null,
        _cancelTaskDlgt: null,
        _cancelTaskCurrZone: null,
        _hasTaskZS: null,
        _hasTaskDlgt: null,
        _hasTaskDlgtOwner: null,
        _hasTaskCurrZone: null } },
  task:
   ZoneTask {
     _zone:
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

Environment: macOS 10.12.5, node 7.7.4

Thank you for these tools!

[stephaneeybert]

Isn't this issue a duplicate of this one ? https://github.com/alxhub/io17/issues/8

[Rosseyn]

@stephaneeybert If it does have anything to do with #8, it also occurs separately from it, so I would say this is unrelated.

I'm also finding that ngu-app-shell is dying when it encounters a reference to window in the open. However, it doesn't seem to be dying when the reference is wrapped in a Subscription. Observable.subscribe(() => window.document) seems to be fine but public doc: any = window.document; inside of a class or even function() { return window.document } outside of a class declaration will cause ngu-app-shell to spit out an error similar to the above.

I've tried a variety of workarounds such as using declare var window; or importing from a service, but it doesn't seem to make a difference. (see here: https://stackoverflow.com/a/37176929/1284088)