fix(overlay): injection errors for scroll strategy providers in lazy-loaded modules

crisbeto · crisbeto · commit a6c6eae24551 · 2018-05-08T23:00:50.000+02:00
Fixes injection errors being thrown by the overlay-based providers that have injection tokens for the default scroll strategy. The error comes from the fact that the scroll strategies were being provided at the root, whereas the `Overlay` provider was provided normally, causing it to be missing when a module is lazy-loaded. Fixes #10820.
diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts
@@ -10,16 +10,13 @@ import {Direction, Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ESCAPE} from '@angular/cdk/keycodes';
 import {TemplatePortal} from '@angular/cdk/portal';
-import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
 import {
   Directive,
   ElementRef,
   EventEmitter,
   Inject,
-  inject,
   InjectionToken,
   Input,
-  NgZone,
   OnChanges,
   OnDestroy,
   Optional,
@@ -74,20 +71,12 @@ const defaultPositionList: ConnectedPosition[] = [
 
 /** Injection token that determines the scroll handling while the connected overlay is open. */
 export const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY =
-    new InjectionToken<() => ScrollStrategy>('cdk-connected-overlay-scroll-strategy', {
-  providedIn: 'root',
-  factory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_FACTORY,
-});
+    new InjectionToken<() => ScrollStrategy>('cdk-connected-overlay-scroll-strategy');
 
-/** @docs-private */
-export function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_FACTORY(): () => ScrollStrategy {
-  // Store the injected deps here because we can't use the `inject` function outside
-  // this function's context (including the inner function).
-  const scrollDispatcher = inject(ScrollDispatcher);
-  const viewportRuler = inject(ViewportRuler);
-  const ngZone = inject(NgZone);
-  return (config?: RepositionScrollStrategyConfig) =>
-      new RepositionScrollStrategy(scrollDispatcher, viewportRuler, ngZone, config);
+/** @docs-private @deprecated @deletion-target 7.0.0 */
+export function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_FACTORY(overlay: Overlay):
+  () => ScrollStrategy {
+  return (config?: RepositionScrollStrategyConfig) => overlay.scrollStrategies.reposition(config);
 }
 
 /**
@@ -375,13 +364,13 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 }
 
 
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private */
 export function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
     () => RepositionScrollStrategy {
   return () => overlay.scrollStrategies.reposition();
 }
 
-/** @docs-private @deprecated @deletion-target 7.0.0 */
+/** @docs-private */
 export const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
   provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,
   deps: [Overlay],
diff --git a/src/cdk/overlay/overlay-module.ts b/src/cdk/overlay/overlay-module.ts
@@ -17,6 +17,8 @@ import {
   CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
   CdkConnectedOverlay,
   CdkOverlayOrigin,
+  CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,
+  CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_FACTORY,
 } from './overlay-directives';
 import {OverlayPositionBuilder} from './position/overlay-position-builder';
 
@@ -25,7 +27,10 @@ import {OverlayPositionBuilder} from './position/overlay-position-builder';
   imports: [BidiModule, PortalModule, ScrollDispatchModule],
   exports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollDispatchModule],
   declarations: [CdkConnectedOverlay, CdkOverlayOrigin],
-  providers: [Overlay],
+  providers: [
+    Overlay,
+    CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
+  ],
 })
 export class OverlayModule {}
 
diff --git a/src/lib/autocomplete/autocomplete-module.ts b/src/lib/autocomplete/autocomplete-module.ts
@@ -8,16 +8,25 @@
 
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {OverlayModule} from '@angular/cdk/overlay';
+import {OverlayModule, Overlay} from '@angular/cdk/overlay';
 import {MatOptionModule, MatCommonModule} from '@angular/material/core';
 import {MatAutocomplete} from './autocomplete';
 import {
   MatAutocompleteTrigger,
+  MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
+  MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY,
 } from './autocomplete-trigger';
 
 @NgModule({
   imports: [MatOptionModule, OverlayModule, MatCommonModule, CommonModule],
   exports: [MatAutocomplete, MatOptionModule, MatAutocompleteTrigger, MatCommonModule],
   declarations: [MatAutocomplete, MatAutocompleteTrigger],
+  providers: [
+    {
+      provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
+      deps: [Overlay],
+      useFactory: MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY,
+    }
+  ]
 })
 export class MatAutocompleteModule {}
diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -26,7 +26,6 @@ import {
   forwardRef,
   Host,
   Inject,
-  inject,
   InjectionToken,
   Input,
   NgZone,
@@ -61,14 +60,10 @@ export const AUTOCOMPLETE_PANEL_HEIGHT = 256;
 
 /** Injection token that determines the scroll handling while the autocomplete panel is open. */
 export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY =
-    new InjectionToken<() => ScrollStrategy>('mat-autocomplete-scroll-strategy', {
-      providedIn: 'root',
-      factory: MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY,
-    });
+    new InjectionToken<() => ScrollStrategy>('mat-autocomplete-scroll-strategy');
 
 /** @docs-private */
-export function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(): () => ScrollStrategy {
-  const overlay = inject(Overlay);
+export function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {
   return () => overlay.scrollStrategies.reposition();
 }
 
diff --git a/src/lib/datepicker/datepicker-module.ts b/src/lib/datepicker/datepicker-module.ts
@@ -7,15 +7,20 @@
  */
 
 import {A11yModule} from '@angular/cdk/a11y';
-import {OverlayModule} from '@angular/cdk/overlay';
+import {OverlayModule, Overlay} from '@angular/cdk/overlay';
 import {PortalModule} from '@angular/cdk/portal';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatCalendar, MatCalendarHeader} from './calendar';
 import {MatCalendarBody} from './calendar-body';
-import {MatDatepicker, MatDatepickerContent} from './datepicker';
+import {
+  MatDatepicker,
+  MatDatepickerContent,
+  MAT_DATEPICKER_SCROLL_STRATEGY,
+  MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY,
+} from './datepicker';
 import {MatDatepickerInput} from './datepicker-input';
 import {MatDatepickerIntl} from './datepicker-intl';
 import {MatDatepickerToggle, MatDatepickerToggleIcon} from './datepicker-toggle';
@@ -61,6 +66,11 @@ import {MatYearView} from './year-view';
   ],
   providers: [
     MatDatepickerIntl,
+    {
+      provide: MAT_DATEPICKER_SCROLL_STRATEGY,
+      deps: [Overlay],
+      useFactory: MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY,
+    }
   ],
   entryComponents: [
     MatDatepickerContent,
diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts
@@ -29,7 +29,6 @@ import {
   ElementRef,
   EventEmitter,
   Inject,
-  inject,
   InjectionToken,
   Input,
   NgZone,
@@ -54,14 +53,10 @@ let datepickerUid = 0;
 
 /** Injection token that determines the scroll handling while the calendar is open. */
 export const MAT_DATEPICKER_SCROLL_STRATEGY =
-    new InjectionToken<() => ScrollStrategy>('mat-datepicker-scroll-strategy', {
-      providedIn: 'root',
-      factory: MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY,
-    });
+    new InjectionToken<() => ScrollStrategy>('mat-datepicker-scroll-strategy');
 
 /** @docs-private */
-export function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(): () => ScrollStrategy {
-  const overlay = inject(Overlay);
+export function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {
   return () => overlay.scrollStrategies.reposition();
 }
 
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
@@ -19,7 +19,6 @@ import {Location} from '@angular/common';
 import {
   ComponentRef,
   Inject,
-  inject,
   Injectable,
   InjectionToken,
   Injector,
@@ -43,14 +42,10 @@ export const MAT_DIALOG_DEFAULT_OPTIONS =
 
 /** Injection token that determines the scroll handling while the dialog is open. */
 export const MAT_DIALOG_SCROLL_STRATEGY =
-    new InjectionToken<() => ScrollStrategy>('mat-dialog-scroll-strategy', {
-      providedIn: 'root',
-      factory: MAT_DIALOG_SCROLL_STRATEGY_FACTORY,
-    });
+    new InjectionToken<() => ScrollStrategy>('mat-dialog-scroll-strategy');
 
 /** @docs-private */
-export function MAT_DIALOG_SCROLL_STRATEGY_FACTORY(): ()  => ScrollStrategy {
-  const overlay = inject(Overlay);
+export function MAT_DIALOG_SCROLL_STRATEGY_FACTORY(overlay: Overlay): ()  => ScrollStrategy {
   return () => overlay.scrollStrategies.block();
 }
 
diff --git a/src/lib/menu/menu-module.ts b/src/lib/menu/menu-module.ts
@@ -6,14 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {OverlayModule} from '@angular/cdk/overlay';
+import {OverlayModule, Overlay} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatMenuContent} from './menu-content';
 import {MatMenu} from './menu-directive';
 import {MatMenuItem} from './menu-item';
-import {MatMenuTrigger} from './menu-trigger';
+import {
+  MatMenuTrigger,
+  MAT_MENU_SCROLL_STRATEGY,
+  MAT_MENU_SCROLL_STRATEGY_FACTORY,
+} from './menu-trigger';
 
 
 @NgModule({
@@ -25,5 +29,12 @@ import {MatMenuTrigger} from './menu-trigger';
   ],
   exports: [MatMenu, MatMenuItem, MatMenuTrigger, MatMenuContent, MatCommonModule],
   declarations: [MatMenu, MatMenuItem, MatMenuTrigger, MatMenuContent],
+  providers: [
+    {
+      provide: MAT_MENU_SCROLL_STRATEGY,
+      deps: [Overlay],
+      useFactory: MAT_MENU_SCROLL_STRATEGY_FACTORY,
+    }
+  ]
 })
 export class MatMenuModule {}
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
@@ -26,7 +26,6 @@ import {
   ElementRef,
   EventEmitter,
   Inject,
-  inject,
   InjectionToken,
   Input,
   OnDestroy,
@@ -44,14 +43,10 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
 
 /** Injection token that determines the scroll handling while the menu is open. */
 export const MAT_MENU_SCROLL_STRATEGY =
-    new InjectionToken<() => ScrollStrategy>('mat-menu-scroll-strategy', {
-      providedIn: 'root',
-      factory: MAT_MENU_SCROLL_STRATEGY_FACTORY,
-    });
+    new InjectionToken<() => ScrollStrategy>('mat-menu-scroll-strategy');
 
 /** @docs-private */
-export function MAT_MENU_SCROLL_STRATEGY_FACTORY(): () => ScrollStrategy {
-  const overlay = inject(Overlay);
+export function MAT_MENU_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {
   return () => overlay.scrollStrategies.reposition();
 }
 
diff --git a/src/lib/tooltip/tooltip-module.ts b/src/lib/tooltip/tooltip-module.ts
@@ -6,12 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {OverlayModule} from '@angular/cdk/overlay';
+import {OverlayModule, Overlay} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
-import {MatTooltip, TooltipComponent} from './tooltip';
-
+import {
+  MatTooltip,
+  TooltipComponent,
+  MAT_TOOLTIP_SCROLL_STRATEGY,
+  MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY,
+} from './tooltip';
 
 @NgModule({
   imports: [
@@ -22,5 +26,12 @@ import {MatTooltip, TooltipComponent} from './tooltip';
   exports: [MatTooltip, TooltipComponent, MatCommonModule],
   declarations: [MatTooltip, TooltipComponent],
   entryComponents: [TooltipComponent],
+  providers: [
+    {
+      provide: MAT_TOOLTIP_SCROLL_STRATEGY,
+      deps: [Overlay],
+      useFactory: MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY,
+    }
+  ]
 })
 export class MatTooltipModule {}
diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts
@@ -33,7 +33,6 @@ import {
   Directive,
   ElementRef,
   Inject,
-  inject,
   InjectionToken,
   Input,
   NgZone,
@@ -61,14 +60,10 @@ export function getMatTooltipInvalidPositionError(position: string) {
 
 /** Injection token that determines the scroll handling while a tooltip is visible. */
 export const MAT_TOOLTIP_SCROLL_STRATEGY =
-    new InjectionToken<() => ScrollStrategy>('mat-tooltip-scroll-strategy', {
-      providedIn: 'root',
-      factory: MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY,
-    });
+    new InjectionToken<() => ScrollStrategy>('mat-tooltip-scroll-strategy');
 
 /** @docs-private */
-export function MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY(): () => ScrollStrategy {
-  const overlay = inject(Overlay);
+export function MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {
   return () => overlay.scrollStrategies.reposition({scrollThrottle: SCROLL_THROTTLE_MS});
 }
 
