fix(ssr): resize observe and animation player errors

projects/igniteui-angular/src/lib/core/utils.ts

@@ -1,7 +1,7 @@
 import { CurrencyPipe, formatDate as _formatDate, isPlatformBrowser } from '@angular/common';
 import { Inject, Injectable, InjectionToken, PLATFORM_ID, inject } from '@angular/core';
 import { mergeWith } from 'lodash-es';
-import { Observable } from 'rxjs';
+import { NEVER, Observable } from 'rxjs';
 import { setImmediate } from './setImmediate';
 import { isDevMode } from '@angular/core';
 
@@ -449,14 +449,23 @@ export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'e
  * Run the resizeObservable outside angular zone, because it patches the MutationObserver which causes an infinite loop.
  * Related issue: https://github.com/angular/angular/issues/31712
  */
-export const resizeObservable = (target: HTMLElement): Observable<ResizeObserverEntry[]> => new Observable((observer) => {
- const instance = new (getResizeObserver())((entries: ResizeObserverEntry[]) => {
- observer.next(entries);
- });
- instance.observe(target);
- const unsubscribe = () => instance.disconnect();
- return unsubscribe;
-});
+export const resizeObservable = (target: HTMLElement): Observable<ResizeObserverEntry[]> => {
+ const resizeObserver = getResizeObserver();
+ // check whether we are on server env or client env
+ if (resizeObserver) {
+ return new Observable((observer) => {
+ const instance = new resizeObserver((entries: ResizeObserverEntry[]) => {
+ observer.next(entries);
+ });
+ instance.observe(target);
+ const unsubscribe = () => instance.disconnect();
+ return unsubscribe;
+ });
+ } else {
+ // if on a server env return a empty observable that does not complete immediately
+ return NEVER;
+ }
+}
 
 /**
  * @hidden

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -490,8 +490,10 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
  public ngAfterViewInit(): void {
  if (this.igxForScrollOrientation === 'vertical') {
  this._zone.runOutsideAngular(() => {
- this.contentObserver = new (getResizeObserver())(() => this.contentResizeNotify.next());
- this.contentObserver.observe(this.dc.instance._viewContainer.element.nativeElement);
+ if (this.platformUtil.isBrowser) {
+ this.contentObserver = new (getResizeObserver())(() => this.contentResizeNotify.next());
+ this.contentObserver.observe(this.dc.instance._viewContainer.element.nativeElement);
+ }
  });
  }
  }

projects/igniteui-angular/src/lib/services/animation/angular-animation-player.ts

@@ -23,7 +23,9 @@ export class IgxAngularAnimationPlayer implements AnimationPlayer {
  // To workaround this we are getting the positions from the inner player.
  // This is logged in Angular here - https://github.com/angular/angular/issues/18891
  // As soon as this is resolved we can remove this hack
- this._innerPlayer = innerRenderer.engine.players[innerRenderer.engine.players.length - 1];
+ const rendererEngine = innerRenderer.engine || innerRenderer.delegate.engine;
+ // A workaround because of Angular SSR is using some delegation.
+ this._innerPlayer = rendererEngine.players[rendererEngine.players.length - 1];
  }
 
  public init(): void {

projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.ts

@@ -99,10 +99,12 @@ export class IgxTabHeaderComponent extends IgxTabHeaderDirective implements Afte
  /** @hidden @internal */
  public ngAfterViewInit(): void {
  this.ngZone.runOutsideAngular(() => {
- this._resizeObserver = new (getResizeObserver())(() => {
- this.tabs.realignSelectedIndicator();
- });
- this._resizeObserver.observe(this.nativeElement);
+ if (this.platform.isBrowser) {
+ this._resizeObserver = new (getResizeObserver())(() => {
+ this.tabs.realignSelectedIndicator();
+ });
+ this._resizeObserver.observe(this.nativeElement);
+ }
  });
  }
 

projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostBinding, Inject, Input, NgZone, OnDestroy, ViewChild } from '@angular/core';
-import { getResizeObserver, mkenum } from '../../core/utils';
+import { getResizeObserver, mkenum, PlatformUtil } from '../../core/utils';
 import { IgxAngularAnimationService } from '../../services/animation/angular-animation-service';
 import { AnimationService } from '../../services/animation/animation';
 import { IgxDirectionality } from '../../services/direction/directionality';
@@ -139,6 +139,7 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit,
  cdr: ChangeDetectorRef,
  private ngZone: NgZone,
  dir: IgxDirectionality,
+ private platform: PlatformUtil
  ) {
  super(animationService, cdr, dir);
  }
@@ -149,12 +150,14 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit,
  super.ngAfterViewInit();
 
  this.ngZone.runOutsideAngular(() => {
- this._resizeObserver = new (getResizeObserver())(() => {
- this.updateScrollButtons();
- this.realignSelectedIndicator();
- });
- this._resizeObserver.observe(this.headerContainer.nativeElement);
- this._resizeObserver.observe(this.viewPort.nativeElement);
+ if (this.platform.isBrowser) {
+ this._resizeObserver = new (getResizeObserver())(() => {
+ this.updateScrollButtons();
+ this.realignSelectedIndicator();
+ });
+ this._resizeObserver.observe(this.headerContainer.nativeElement);
+ this._resizeObserver.observe(this.viewPort.nativeElement);
+ }
  });
  }