fix(breakpoints): add global provider for BreakPointRegistry

* Fix issue with breakpoints not activating because the new breakpoints token is emptied when BreakPointRegistry is injected again
angular · Mar 20, 2018 · 7cedf6f · 7cedf6f
1 parent 84ca5c3
commit 7cedf6f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/src/lib/core/breakpoints/break-point-registry-provider.ts b/src/lib/core/breakpoints/break-point-registry-provider.ts
@@ -0,0 +1,33 @@
+/**
+ * @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, Optional, SkipSelf} from '@angular/core';
+
+import {BreakPointRegistry} from './break-point-registry';
+import {BreakPoint} from './break-point';
+import {BREAKPOINTS} from './break-points-token';
+
+/**
+ * Ensure a single global service provider
+ */
+export function BREAKPOINT_REGISTRY_PROVIDER_FACTORY(parentRegistry: BreakPointRegistry,
+                                                     breakpoints: BreakPoint[]) {
+  return parentRegistry || new BreakPointRegistry(breakpoints);
+}
+
+
+/**
+ * Export provider that uses a global service factory (above)
+ */
+export const BREAKPOINT_REGISTRY_PROVIDER = {
+  provide: BreakPointRegistry,
+  deps: [
+    [new Optional(), new SkipSelf(), BreakPointRegistry],
+    <InjectionToken<BreakPoint[]>>BREAKPOINTS,
+  ],
+  useFactory: BREAKPOINT_REGISTRY_PROVIDER_FACTORY
+};
diff --git a/src/lib/core/module.ts b/src/lib/core/module.ts
@@ -8,8 +8,7 @@
 import {NgModule} from '@angular/core';
 
 import {MediaMonitor} from './media-monitor/media-monitor';
-import {BreakPointRegistry} from './breakpoints/break-point-registry';
-
+import {BREAKPOINT_REGISTRY_PROVIDER} from './breakpoints/break-point-registry-provider';
 import {OBSERVABLE_MEDIA_PROVIDER} from './observable-media/observable-media-provider';
 import {BREAKPOINTS_PROVIDER} from './breakpoints/break-points-provider';
 import {MATCH_MEDIA_PROVIDER} from './match-media/match-media-provider';
@@ -25,11 +24,11 @@ import {STYLESHEET_MAP_PROVIDER} from './stylesheet-map/stylesheet-map-provider'
 
 @NgModule({
   providers: [
-    BREAKPOINTS_PROVIDER,    // Supports developer overrides of list of known breakpoints
-    BreakPointRegistry,      // Registry of known/used BreakPoint(s)
-    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]
+    BREAKPOINTS_PROVIDER,         // Supports developer overrides of list of known breakpoints
+    BREAKPOINT_REGISTRY_PROVIDER, // Registry of known/used BreakPoint(s)
+    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]
     STYLESHEET_MAP_PROVIDER,
     StyleUtils,
     BROWSER_PROVIDER,