fix(server): breakpoints can be used by MediaObserver (#1087)

MediaObserver on the server was not observing the breakpoints at the same lifecycle as the browser. This change moves the active breakpoints check from BEFORE_APP_SERIALIZED to the ServerMatchMedia service.

Author: Chris3773

src/lib/server/server-match-media.ts

@@ -7,15 +7,20 @@
  */
 import {DOCUMENT} from '@angular/common';
 import {Inject, Injectable, NgZone, PLATFORM_ID} from '@angular/core';
-import {BreakPoint, ɵMatchMedia as MatchMedia} from '@angular/flex-layout/core';
+import {
+  BreakPoint,
+  ɵMatchMedia as MatchMedia,
+  BREAKPOINTS,
+  LAYOUT_CONFIG,
+  LayoutConfigOptions
+} from '@angular/flex-layout/core';
 
 /**
  * Special server-only class to simulate a MediaQueryList and
  * - supports manual activation to simulate mediaQuery matching
  * - manages listeners
  */
 export class ServerMediaQueryList implements MediaQueryList {
-  private _isActive = false;
   private _listeners: MediaQueryListListener[] = [];
 
   get matches(): boolean {
@@ -26,7 +31,7 @@ export class ServerMediaQueryList implements MediaQueryList {
     return this._mediaQuery;
   }
 
-  constructor(private _mediaQuery: string) {}
+  constructor(private _mediaQuery: string, private _isActive = false) {}
 
   /**
    * Destroy the current list by deactivating the
@@ -111,10 +116,28 @@ export class ServerMediaQueryList implements MediaQueryList {
  */
 @Injectable()
 export class ServerMatchMedia extends MatchMedia {
+  private _activeBreakpoints: BreakPoint[] = [];
+
   constructor(protected _zone: NgZone,
               @Inject(PLATFORM_ID) protected _platformId: Object,
-              @Inject(DOCUMENT) protected _document: any) {
+              @Inject(DOCUMENT) protected _document: any,
+              @Inject(BREAKPOINTS) protected breakpoints: BreakPoint[],
+              @Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions) {
     super(_zone, _platformId, _document);
+
+    const serverBps = layoutConfig.ssrObserveBreakpoints;
+    if (serverBps) {
+      this._activeBreakpoints = serverBps
+        .reduce((acc: BreakPoint[], serverBp: string) => {
+          const foundBp = breakpoints.find(bp => serverBp === bp.alias);
+          if (!foundBp) {
+            console.warn(`FlexLayoutServerModule: unknown breakpoint alias "${serverBp}"`);
+          } else {
+            acc.push(foundBp);
+          }
+          return acc;
+        }, []);
+    }
   }
 
   /** Activate the specified breakpoint if we're on the server, no-op otherwise */
@@ -138,7 +161,9 @@ export class ServerMatchMedia extends MatchMedia {
    * supports 0..n listeners for activation/deactivation
    */
   protected buildMQL(query: string): ServerMediaQueryList {
-    return new ServerMediaQueryList(query);
+    const isActive = this._activeBreakpoints.some(ab => ab.mediaQuery === query);
+
+    return new ServerMediaQueryList(query, isActive);
   }
 }
 

src/lib/server/server-provider.ts

@@ -15,9 +15,7 @@ import {
   BreakPoint,
   ɵMatchMedia as MatchMedia,
   StylesheetMap,
-  sortAscendingPriority,
-  LayoutConfigOptions,
-  LAYOUT_CONFIG,
+  sortAscendingPriority
 } from '@angular/flex-layout/core';
 
 import {ServerMatchMedia} from './server-match-media';
@@ -33,8 +31,7 @@ import {ServerMatchMedia} from './server-match-media';
  */
 export function generateStaticFlexLayoutStyles(serverSheet: StylesheetMap,
                                                mediaController: ServerMatchMedia,
-                                               breakpoints: BreakPoint[],
-                                               layoutConfig: LayoutConfigOptions) {
+                                               breakpoints: BreakPoint[]) {
   // Store the custom classes in the following map, that way only
   // one class gets allocated per HTMLElement, and each class can
   // be referenced in the static media queries
@@ -55,20 +52,7 @@ export function generateStaticFlexLayoutStyles(serverSheet: StylesheetMap,
     mediaController.deactivateBreakpoint(breakpoints[i]);
   });
 
-  const serverBps = layoutConfig.ssrObserveBreakpoints;
-  if (serverBps) {
-    serverBps
-      .reduce((acc: BreakPoint[], serverBp: string) => {
-        const foundBp = breakpoints.find(bp => serverBp === bp.alias);
-        if (!foundBp) {
-          console.warn(`FlexLayoutServerModule: unknown breakpoint alias "${serverBp}"`);
-        } else {
-          acc.push(foundBp);
-        }
-        return acc;
-      }, [])
-      .forEach(mediaController.activateBreakpoint);
-  }
+
 
   return styleText;
 }
@@ -80,14 +64,12 @@ export function generateStaticFlexLayoutStyles(serverSheet: StylesheetMap,
 export function FLEX_SSR_SERIALIZER_FACTORY(serverSheet: StylesheetMap,
                                             mediaController: ServerMatchMedia,
                                             _document: Document,
-                                            breakpoints: BreakPoint[],
-                                            layoutConfig: LayoutConfigOptions) {
+                                            breakpoints: BreakPoint[]) {
   return () => {
     // This is the style tag that gets inserted into the head of the DOM,
     // populated with the manual media queries
     const styleTag = _document.createElement('style');
-    const styleText = generateStaticFlexLayoutStyles(serverSheet, mediaController, breakpoints,
-      layoutConfig);
+    const styleText = generateStaticFlexLayoutStyles(serverSheet, mediaController, breakpoints);
     styleTag.classList.add(`${CLASS_NAME}ssr`);
     styleTag.textContent = styleText;
     _document.head!.appendChild(styleTag);
@@ -105,8 +87,7 @@ export const SERVER_PROVIDERS = [
       StylesheetMap,
       MatchMedia,
       DOCUMENT,
-      BREAKPOINTS,
-      LAYOUT_CONFIG,
+      BREAKPOINTS
     ],
     multi: true
   },