fix(ssr): resize observe and animation player errors 17.2.x (#15098)

* fix(*): Fix resize observe and animation player errors when using Angular SSR.

* chore(*): fix build. Change a check in resize observer creation

* chore(*): Use never observable when on server

* chore(*): add comments

* chore(*): apply review comments

Author: mddragnev

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

@@ -1,7 +1,7 @@
 import { CurrencyPipe, formatDate as _formatDate, isPlatformBrowser } from '@angular/common';
 import { Inject, Injectable, PLATFORM_ID } 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';
 
@@ -439,14 +439,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

@@ -491,8 +491,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

@@ -103,10 +103,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';
@@ -129,6 +129,7 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit,
         @Inject(IgxAngularAnimationService) animationService: AnimationService,
         cdr: ChangeDetectorRef,
         private ngZone: NgZone,
+        private platform: PlatformUtil,
         dir: IgxDirectionality) {
         super(animationService, cdr, dir);
     }
@@ -139,12 +140,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);
+            }
         });
     }