fix(ssr): add browser check for MatchMedia

* Add back the browser check in MatchMedia so that when the server module isn't loaded, there are no lingering window errors Fixes angular#624.
mmdehart · Feb 20, 2018 · 9dd03c6 · 9dd03c6
1 parent cf5266a
commit 9dd03c6
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 14 deletions.
diff --git a/guides/SSR.md b/guides/SSR.md
@@ -39,7 +39,10 @@ import {FlexLayoutServerModule} from '@angular/flex-layout/server';
 export class AppServerModule {}
 ```
 
-2. That's it! Your app should now be configured to use the server-side
+2. Make sure that your import of `FlexLayoutServerModule` comes **after** `FlexLayoutModule` or any
+modules that import `FlexLayoutModule`. This requirement may be lifted in a future release
+
+3. That's it! Your app should now be configured to use the server-side
 implementations of the Flex Layout utilities. 
 
 

diff --git a/src/lib/media-query/match-media.ts b/src/lib/media-query/match-media.ts
@@ -5,8 +5,8 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Inject, Injectable, NgZone} from '@angular/core';
-import {DOCUMENT} from '@angular/common';
+import {Inject, Injectable, NgZone, PLATFORM_ID} from '@angular/core';
+import {DOCUMENT, isPlatformBrowser} from '@angular/common';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Observable} from 'rxjs/Observable';
 import {filter} from 'rxjs/operators/filter';
@@ -27,6 +27,7 @@ export class MatchMedia {
   protected _observable$: Observable<MediaChange>;
 
   constructor(protected _zone: NgZone,
+              @Inject(PLATFORM_ID) protected _platformId: Object,
               @Inject(DOCUMENT) protected _document: any) {
     this._registry = new Map<string, MediaQueryList>();
     this._source = new BehaviorSubject<MediaChange>(new MediaChange(true));
@@ -98,7 +99,8 @@ export class MatchMedia {
    * supports 0..n listeners for activation/deactivation
    */
   protected _buildMQL(query: string): MediaQueryList {
-    let canListen = !!(<any>window).matchMedia('all').addListener;
+    let canListen = isPlatformBrowser(this._platformId) &&
+      !!(<any>window).matchMedia('all').addListener;
 
     return canListen ? (<any>window).matchMedia(query) : <MediaQueryList>{
       matches: query === 'all' || query === '',

diff --git a/src/lib/media-query/mock/mock-match-media.ts b/src/lib/media-query/mock/mock-match-media.ts
@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Inject, Injectable, NgZone} from '@angular/core';
+import {Inject, Injectable, NgZone, PLATFORM_ID} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 
 import {MatchMedia} from '../match-media';
@@ -29,9 +29,10 @@ export class MockMatchMedia extends MatchMedia {
   useOverlaps = false;
 
   constructor(_zone: NgZone,
+              @Inject(PLATFORM_ID) _platformId: Object,
               @Inject(DOCUMENT) _document: any,
               private _breakpoints: BreakPointRegistry) {
-    super(_zone, _document);
+    super(_zone, _platformId, _document);
     this._actives = [];
   }
 

diff --git a/src/lib/media-query/server-match-media.ts b/src/lib/media-query/server-match-media.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {DOCUMENT} from '@angular/common';
-import {Inject, Injectable, NgZone} from '@angular/core';
+import {Inject, Injectable, NgZone, PLATFORM_ID} from '@angular/core';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {MediaChange} from './media-change';
 import {BreakPoint} from './breakpoints/break-point';
@@ -91,8 +91,9 @@ export class ServerMatchMedia extends MatchMedia {
   protected _observable$: Observable<MediaChange>;
 
   constructor(protected _zone: NgZone,
+              @Inject(PLATFORM_ID) protected _platformId: Object,
               @Inject(DOCUMENT) protected _document: any) {
-    super(_zone, _document);
+    super(_zone, _platformId, _document);
     this._registry = new Map<string, ServerMediaQueryList>();
     this._source = new BehaviorSubject<MediaChange>(new MediaChange(true));
     this._observable$ = this._source.asObservable();

diff --git a/src/lib/module.ts b/src/lib/module.ts
@@ -13,11 +13,8 @@ import {MediaQueriesModule} from './media-query/_module';
 import {BreakPoint} from './media-query/breakpoints/break-point';
 import {
   BreakPointProviderOptions,
-  DEFAULT_BREAKPOINTS_PROVIDER,
   CUSTOM_BREAKPOINTS_PROVIDER_FACTORY
 } from './media-query/breakpoints/break-points-provider';
-import {MEDIA_MONITOR_PROVIDER} from './media-query/media-monitor-provider';
-import {OBSERVABLE_MEDIA_PROVIDER} from './media-query/observable-media-provider';
 
 import {FlexDirective} from './api/flexbox/flex';
 import {LayoutDirective} from './api/flexbox/layout';
@@ -70,9 +67,6 @@ const ALL_DIRECTIVES = [
   exports: [MediaQueriesModule, ...ALL_DIRECTIVES],
   declarations: [...ALL_DIRECTIVES],
   providers: [
-    MEDIA_MONITOR_PROVIDER,
-    DEFAULT_BREAKPOINTS_PROVIDER,   // Extend defaults with internal custom breakpoints
-    OBSERVABLE_MEDIA_PROVIDER,
     ServerStylesheet,
     StyleUtils,
     BROWSER_PROVIDER,