fix(ssr): fix lazy-loading functionality

* add global provider to StylesheetMap to prevent lazy loading
  from instantiating multiple copies
* add global provider to MatchMedia to ensure that the right version
  is instantiated in lazy modules

Author: CaerusKaru

src/lib/core/match-media/match-media-provider.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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 {InjectionToken, NgZone, Optional, PLATFORM_ID, SkipSelf} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+
+import {MatchMedia} from '../match-media/match-media';
+
+/**
+ * Ensure a single global service provider
+ */
+export function MATCH_MEDIA_PROVIDER_FACTORY(parentMedia: MatchMedia,
+                                             ngZone: NgZone,
+                                             platformId: Object,
+                                             _document: Document) {
+  return parentMedia || new MatchMedia(ngZone, platformId, _document);
+}
+
+
+/**
+ * Export provider that uses a global service factory (above)
+ */
+export const MATCH_MEDIA_PROVIDER = {
+  provide : MatchMedia,
+  deps : [
+    [ new Optional(), new SkipSelf(), MatchMedia ],
+    NgZone,
+    <InjectionToken<Object>>PLATFORM_ID,
+    <InjectionToken<Document>>DOCUMENT,
+  ],
+  useFactory : MATCH_MEDIA_PROVIDER_FACTORY
+};

src/lib/core/module.ts

@@ -7,12 +7,12 @@
  */
 import {NgModule} from '@angular/core';
 
-import {MatchMedia} from './match-media/match-media';
 import {MediaMonitor} from './media-monitor/media-monitor';
 import {BreakPointRegistry} from './breakpoints/break-point-registry';
 
 import {OBSERVABLE_MEDIA_PROVIDER} from './observable-media/observable-media-provider';
 import {DEFAULT_BREAKPOINTS_PROVIDER} from './breakpoints/break-points-provider';
+import {MATCH_MEDIA_PROVIDER} from './match-media/match-media-provider';
 
 /**
  * *****************************************************************
@@ -24,7 +24,7 @@ import {DEFAULT_BREAKPOINTS_PROVIDER} from './breakpoints/break-points-provider'
   providers: [
     DEFAULT_BREAKPOINTS_PROVIDER,  // Supports developer overrides of list of known breakpoints
     BreakPointRegistry,      // Registry of known/used BreakPoint(s)
-    MatchMedia,              // Low-level service to publish observables w/ window.matchMedia()
+    MATCH_MEDIA_PROVIDER,    // Low-level service to publish observables w/ window.matchMedia()
     MediaMonitor,            // MediaQuery monitor service observes all known breakpoints
     OBSERVABLE_MEDIA_PROVIDER  // easy subscription injectable `media$` matchMedia observable
   ]

src/lib/core/public-api.ts

@@ -10,7 +10,7 @@ export * from './browser-provider';
 export * from './module';
 export * from './media-queries-module';
 export * from './media-change';
-export * from './stylesheet-map';
+export * from './stylesheet-map/index';
 export * from './server-token';
 
 export * from './base/index';

src/lib/core/style-utils/style-utils.spec.ts

@@ -12,7 +12,7 @@ import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {customMatchers} from '../../utils/testing/custom-matchers';
 import {makeCreateTestComponent, expectNativeEl} from '../../utils/testing/helpers';
 import {StyleUtils} from './style-utils';
-import {StylesheetMap} from '../stylesheet-map';
+import {StylesheetMap} from '../stylesheet-map/stylesheet-map';
 
 describe('styler', () => {
   let styler: StyleUtils;

src/lib/core/style-utils/style-utils.ts

@@ -9,7 +9,7 @@ import {Inject, Injectable, Optional, PLATFORM_ID} from '@angular/core';
 import {isPlatformBrowser, isPlatformServer} from '@angular/common';
 
 import {applyCssPrefixes} from '../../utils/auto-prefixer';
-import {StylesheetMap} from '../stylesheet-map';
+import {StylesheetMap} from '../stylesheet-map/stylesheet-map';
 import {SERVER_TOKEN} from '../server-token';
 
 @Injectable()

src/lib/core/stylesheet-map/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+
+export * from './stylesheet-map';
+export * from './stylesheet-map-provider';

src/lib/core/stylesheet-map/stylesheet-map-provider.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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 {Optional, SkipSelf} from '@angular/core';
+
+import {StylesheetMap} from './stylesheet-map';
+
+/**
+ * Ensure a single global service provider
+ */
+export function STYLESHEET_MAP_PROVIDER_FACTORY(parentSheet: StylesheetMap) {
+  return parentSheet || new StylesheetMap();
+}
+
+
+/**
+ * Export provider that uses a global service factory (above)
+ */
+export const STYLESHEET_MAP_PROVIDER = {
+  provide: StylesheetMap,
+  deps: [
+    [new Optional(), new SkipSelf(), StylesheetMap],
+  ],
+  useFactory: STYLESHEET_MAP_PROVIDER_FACTORY
+};

src/lib/core/stylesheet-map.ts renamed to src/lib/core/stylesheet-map/stylesheet-map.ts

@@ -9,6 +9,7 @@ import {NgModule} from '@angular/core';
 import {
   BROWSER_PROVIDER,
   CoreModule,
+  STYLESHEET_MAP_PROVIDER,
   StylesheetMap,
   StyleUtils
 } from '@angular/flex-layout/core';
@@ -40,6 +41,7 @@ const ALL_DIRECTIVES = [
     StylesheetMap,
     StyleUtils,
     BROWSER_PROVIDER,
+    STYLESHEET_MAP_PROVIDER,
   ]
 })
 export class ExtendedModule {

src/lib/extended/module.ts

@@ -10,6 +10,7 @@ import {BidiModule} from '@angular/cdk/bidi';
 import {
   BROWSER_PROVIDER,
   CoreModule,
+  STYLESHEET_MAP_PROVIDER,
   StylesheetMap,
   StyleUtils
 } from '@angular/flex-layout/core';
@@ -49,6 +50,7 @@ const ALL_DIRECTIVES = [
     StylesheetMap,
     StyleUtils,
     BROWSER_PROVIDER,
+    STYLESHEET_MAP_PROVIDER,
   ]
 })
 export class FlexModule {