scaleflex / ng-cloudimage-responsive

Cloudimage responsive plugin will make your website load the exact image size you need depending on your user's screen size. Multiple pixel ratios are supported. Any questions or issues, please report to https://github.com/scaleflex/ng-cloudimage-responsive/issues
MIT License
16 stars 6 forks source link

Problems with Angular 11 and SSR #20

Closed christianjung87 closed 3 years ago

christianjung87 commented 3 years ago

Hi, I have a pretty simple implementation going on. I'm using an up-to-date Angular 11 (11.0.0). Everything works fine with the client bundle, but it seems like the CIService is trying to utilize the window-object which crashes the Universal server bundle. So I think it has nothing to do with my Angular Core version, as the call of the window object should cause a problem in every version, right? I tried to use the emptyOnSsr-attribute, but with no difference. My config object includes only the baseUrl and my token.

<ci-img [src]="image.src" [alt]="image.alt" ratio="0.73" [emptyOnSsr]="true"></ci-img>

ReferenceError: window is not defined
    at new CIService (___lorem___/dist/server/main.js:1:2372254)
    at Object.CIService_Factory [as factory] (___lorem___/dist/server/main.js:1:2376123)
    at R3Injector.hydrate (___lorem___/dist/server/main.js:1:1422934)
    at R3Injector.get (___lorem___/dist/server/main.js:1:1419953)
    at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
    at R3Injector.get (___lorem___/dist/server/main.js:1:1420163)
    at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
    at Object.get (___lorem___/dist/server/main.js:1:1592056)
    at lookupTokenUsingModuleInjector (___lorem___/dist/server/main.js:1:1331698)
    at getOrCreateInjectable (___lorem___/dist/server/main.js:1:1333937)
    at resolvePromise (___lorem___/dist/server/main.js:1:1138911)
    at resolvePromise (___lorem___/dist/server/main.js:1:1137852)
    at ___lorem___/dist/server/main.js:1:1140502
    at ZoneDelegate.invokeTask (___lorem___/dist/server/main.js:1:1129530)
    at Object.onInvokeTask (___lorem___/dist/server/main.js:1:1647103)
    at ZoneDelegate.invokeTask (___lorem___/dist/server/main.js:1:1129420)
    at Zone.runTask (___lorem___/dist/server/main.js:1:1122095)
    at drainMicroTaskQueue (___lorem___/dist/server/main.js:1:1133138) {
  rejection: ReferenceError: window is not defined
      at new CIService (___lorem___/dist/server/main.js:1:2372254)
      at Object.CIService_Factory [as factory] (___lorem___/dist/server/main.js:1:2376123)
      at R3Injector.hydrate (___lorem___/dist/server/main.js:1:1422934)
      at R3Injector.get (___lorem___/dist/server/main.js:1:1419953)
      at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
      at R3Injector.get (___lorem___/dist/server/main.js:1:1420163)
      at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
      at Object.get (___lorem___/dist/server/main.js:1:1592056)
      at lookupTokenUsingModuleInjector (___lorem___/dist/server/main.js:1:1331698)
      at getOrCreateInjectable (___lorem___/dist/server/main.js:1:1333937),
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: ReferenceError: window is not defined
        at new CIService (___lorem___/dist/server/main.js:1:2372254)
        at Object.CIService_Factory [as factory] (___lorem___/dist/server/main.js:1:2376123)
        at R3Injector.hydrate (___lorem___/dist/server/main.js:1:1422934)
        at R3Injector.get (___lorem___/dist/server/main.js:1:1419953)
        at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
        at R3Injector.get (___lorem___/dist/server/main.js:1:1420163)
        at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
        at Object.get (___lorem___/dist/server/main.js:1:1592056)
        at lookupTokenUsingModuleInjector (___lorem___/dist/server/main.js:1:1331698)
        at getOrCreateInjectable (___lorem___/dist/server/main.js:1:1333937)
  },
  zone: Zone {
    _parent: Zone {
      _parent: null,
      _name: '<root>',
      _properties: {},
      _zoneDelegate: [ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true, maybeDelayChangeDetection: false },
    _zoneDelegate: ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular],
      _parentDelegate: [ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: null,
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: null,
      _invokeZS: [Object],
      _invokeDlgt: [ZoneDelegate],
      _invokeCurrZone: [Circular],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [ZoneDelegate],
      _handleErrorCurrZone: [Circular],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [ZoneDelegate],
      _scheduleTaskCurrZone: [Circular],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [ZoneDelegate],
      _invokeTaskCurrZone: [Circular],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [ZoneDelegate],
      _cancelTaskCurrZone: [Circular],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [ZoneDelegate],
      _hasTaskDlgtOwner: [Circular],
      _hasTaskCurrZone: [Circular]
    }
  },
  task: ZoneTask {
    _zone: Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: ReferenceError: window is not defined
          at new CIService (___lorem___/dist/server/main.js:1:2372254)
          at Object.CIService_Factory [as factory] (___lorem___/dist/server/main.js:1:2376123)
          at R3Injector.hydrate (___lorem___/dist/server/main.js:1:1422934)
          at R3Injector.get (___lorem___/dist/server/main.js:1:1419953)
          at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
          at R3Injector.get (___lorem___/dist/server/main.js:1:1420163)
          at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
          at Object.get (___lorem___/dist/server/main.js:1:1592056)
          at lookupTokenUsingModuleInjector (___lorem___/dist/server/main.js:1:1331698)
          at getOrCreateInjectable (___lorem___/dist/server/main.js:1:1333937)
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function],
    invoke: [Function]
  }
}
vitaly-shaposhnik commented 3 years ago

Hi @christianjung87 ! Fixed in 2.1.5