Doesn't work with Angular 11 and universal (SSR)

[mbagiella]

ERROR TypeError: this.element.getBoundingClientRect is not a function ERROR ReferenceError: MutationObserver is not defined TypeError: Cannot read property 'destroy' of undefined

[alexisqc92]

@mbagiella have you seen this : https://github.com/ivylaboratory/angular-carousel/issues/26

[mbagiella]

wow, the same error. Too bad :(

[yolchunasib]

any update for this?

[FrancescoPaiola]

becoming mad with this. I'm trying to import the module conditionally to solve this problem. What i did In app.module:

if(isPlatformBrowser(PLATFORM_ID)) {
  isBrowser = true;
}

...
@NgModule({
  imports: [
    ...,
    isBrowser ? IvyCarouselModule: [],
  ]
});

but the condition seems to be skipped. Did someone solved this?

[alexisqc92]

@FrancescoPaiola on the issue #26 they tried the fellowing, you could try and see if this works. This is to check if its runnin on browser or not:

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class PlatformService {
constructor(@Inject(PLATFORM_ID) private platform: Object) { }

isServer() {
    return isPlatformServer(this.platform);
}

  isBrowser() {
      return isPlatformBrowser(this.platform);
  }
}

[ashikjs]

This solution not work for me.

[dniday]

even if you get it to conditionally load (see below), it still doesnt seem to actually do the carousel thing, it just loads the images on to the page with no javascript.

import { isPlatformBrowser } from '@angular/common';

let browserImports = [];

if (isPlatformBrowser) {
  browserImports.push(IvyCarouselModule);
}
const IMPORTS = [
  ...browserImports
]