chore(ssr): fix document.body reference (#18863)

angular/src/app-initialize.ts

@@ -16,7 +16,7 @@ export function appInitialize(config: Config, doc: Document, zone: NgZone) {
         _zoneGate: (h: any) => zone.run(h)
       };
 
-      const aelFn = '__zone_symbol__addEventListener' in (document.body as any)
+      const aelFn = '__zone_symbol__addEventListener' in (doc.body as any)
         ? '__zone_symbol__addEventListener'
         : 'addEventListener';
 

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -43,7 +43,7 @@ export class ValueAccessor implements ControlValueAccessor {
   }
 }
 
-export function setIonicClasses(element: ElementRef) {
+export const setIonicClasses = (element: ElementRef) => {
   raf(() => {
     const input = element.nativeElement as HTMLElement;
     const classes = getClasses(input);
@@ -54,9 +54,9 @@ export function setIonicClasses(element: ElementRef) {
       setClasses(item, classes);
     }
   });
-}
+};
 
-function getClasses(element: HTMLElement) {
+const getClasses = (element: HTMLElement) => {
   const classList = element.classList;
   const classes = [];
   for (let i = 0; i < classList.length; i++) {
@@ -66,7 +66,7 @@ function getClasses(element: HTMLElement) {
     }
   }
   return classes;
-}
+};
 
 function setClasses(element: HTMLElement, classes: string[]) {
   const classList = element.classList;

angular/src/directives/navigation/stack-controller.ts

@@ -246,16 +246,19 @@ export class StackController {
   }
 }
 
-function cleanupAsync(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
+const cleanupAsync = (activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) => {
-  return new Promise(resolve => {
+  if (typeof (requestAnimationFrame as any) === 'function') {
+    return new Promise<any>(resolve => {
       requestAnimationFrame(() => {
         cleanup(activeRoute, views, viewsSnapshot, location);
         resolve();
       });
     });
-}
+  }
+  return Promise.resolve();
+};
 
-function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
+const cleanup = (activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) => {
   viewsSnapshot
     .filter(view => !views.includes(view))
     .forEach(destroyView);
@@ -280,4 +283,4 @@ function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: Rout
       view.ref.changeDetectorRef.detach();
     }
   });
-}
+};

angular/src/directives/navigation/stack-utils.ts

@@ -2,7 +2,7 @@ import { ComponentRef } from '@angular/core';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 import { NavDirection, RouterDirection } from '@ionic/core';
 
-export function insertView(views: RouteView[], view: RouteView, direction: RouterDirection) {
+export const insertView = (views: RouteView[], view: RouteView, direction: RouterDirection) => {
   if (direction === 'root') {
     return setRoot(views, view);
   } else if (direction === 'forward') {
@@ -10,15 +10,15 @@ export function insertView(views: RouteView[], view: RouteView, direction: Route
   } else {
     return setBack(views, view);
   }
-}
+};
 
-function setRoot(views: RouteView[], view: RouteView) {
+const setRoot = (views: RouteView[], view: RouteView) => {
   views = views.filter(v => v.stackId !== view.stackId);
   views.push(view);
   return views;
-}
+};
 
-function setForward(views: RouteView[], view: RouteView) {
+const setForward = (views: RouteView[], view: RouteView) => {
   const index = views.indexOf(view);
   if (index >= 0) {
     views = views.filter(v => v.stackId !== view.stackId || v.id <= view.id);
@@ -26,30 +26,30 @@ function setForward(views: RouteView[], view: RouteView) {
     views.push(view);
   }
   return views;
-}
+};
 
-function setBack(views: RouteView[], view: RouteView) {
+const setBack = (views: RouteView[], view: RouteView) => {
   const index = views.indexOf(view);
   if (index >= 0) {
     return views.filter(v => v.stackId !== view.stackId || v.id <= view.id);
   } else {
     return setRoot(views, view);
   }
-}
+};
 
-export function getUrl(router: Router, activatedRoute: ActivatedRoute) {
+export const getUrl = (router: Router, activatedRoute: ActivatedRoute) => {
   const urlTree = router.createUrlTree(['.'], { relativeTo: activatedRoute });
   return router.serializeUrl(urlTree);
-}
+};
 
-export function isTabSwitch(enteringView: RouteView, leavingView: RouteView | undefined) {
+export const isTabSwitch = (enteringView: RouteView, leavingView: RouteView | undefined) => {
   if (!leavingView) {
     return true;
   }
   return enteringView.stackId !== leavingView.stackId;
-}
+};
 
-export function computeStackId(prefixUrl: string[] | undefined, url: string) {
+export const computeStackId = (prefixUrl: string[] | undefined, url: string) => {
   if (!prefixUrl) {
     return undefined;
   }
@@ -63,22 +63,22 @@ export function computeStackId(prefixUrl: string[] | undefined, url: string) {
     }
   }
   return undefined;
-}
+};
 
-export function toSegments(path: string): string[] {
+export const toSegments = (path: string) => {
   return path
     .split('/')
     .map(s => s.trim())
     .filter(s => s !== '');
-}
+};
 
-export function destroyView(view: RouteView | undefined) {
+export const destroyView = (view: RouteView | undefined) => {
   if (view) {
     // TODO lifecycle event
     view.ref.destroy();
     view.unlistenEvents();
   }
-}
+};
 
 export interface StackEvent {
   enteringView: RouteView;

angular/src/util/util.ts

@@ -5,17 +5,17 @@ export const raf = (h: any) => {
   return (win.__zone_symbol__requestAnimationFrame) ? win.__zone_symbol__requestAnimationFrame(h) : requestAnimationFrame(h);
 };
 
-export function proxyMethod(ctrlName: string, doc: Document, methodName: string, ...args: any[]) {
+export const proxyMethod = (ctrlName: string, doc: Document, methodName: string, ...args: any[]) => {
   const controller = ensureElementInBody(ctrlName, doc);
   return controller.componentOnReady()
     .then(() => (controller as any)[methodName].apply(controller, args));
-}
+};
 
-export function ensureElementInBody(elementName: string, doc: Document) {
+export const ensureElementInBody = (elementName: string, doc: Document) => {
   let element = doc.querySelector(elementName);
   if (!element) {
     element = doc.createElement(elementName);
     doc.body.appendChild(element);
   }
   return element as HTMLStencilElement;
-}
+};