refactor(scrolling): add dedicated module for CdkScrollable (#19064)

This is something that originally came up in #18082 and has been coming up as issues on GitHub. Some of our overlay-based components depend on `CdkScrollable` to tell them when to reposition, but the problem is that it's not very easy to consume, because:

1. It has an attribute selector so if it doesn't match, nothing will throw an error.
2. It has to be brought in through the `ScrollingModule` into the proper user module. The `ScrollingModule` is somewhat large, because it contains other things like virtual scrolling.

These changes address the issues by adding a small module dedicated only to `CdkScrollable`, and exporting the module through the relevant Material components.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -23,7 +23,7 @@ import {
 } from '@angular/core';
 import {TestBed, ComponentFixture, fakeAsync, flush, tick} from '@angular/core/testing';
 import {DOCUMENT} from '@angular/common';
-import {ViewportRuler, ScrollingModule} from '@angular/cdk/scrolling';
+import {ViewportRuler, CdkScrollableModule} from '@angular/cdk/scrolling';
 import {_supportsShadowDom} from '@angular/cdk/platform';
 import {of as observableOf} from 'rxjs';
 
@@ -48,7 +48,7 @@ describe('CdkDrag', () => {
       extraDeclarations: Type<any>[] = []): ComponentFixture<T> {
     TestBed
         .configureTestingModule({
-          imports: [DragDropModule, ScrollingModule],
+          imports: [DragDropModule, CdkScrollableModule],
           declarations: [componentType, PassthroughComponent, ...extraDeclarations],
           providers: [
             {

src/cdk/drag-drop/drag-drop-module.ts

@@ -7,6 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {CdkDropList} from './directives/drop-list';
 import {CdkDropListGroup} from './directives/drop-list-group';
 import {CdkDrag} from './directives/drag';
@@ -25,6 +26,7 @@ import {DragDrop} from './drag-drop';
     CdkDragPlaceholder,
   ],
   exports: [
+    CdkScrollableModule,
     CdkDropList,
     CdkDropListGroup,
     CdkDrag,

src/cdk/scrolling/scrolling-module.ts

@@ -15,17 +15,26 @@ import {CdkVirtualForOf} from './virtual-for-of';
 import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 @NgModule({
-  imports: [BidiModule, PlatformModule],
+  exports: [CdkScrollable],
+  declarations: [CdkScrollable]
+})
+export class CdkScrollableModule {}
+
+@NgModule({
+  imports: [
+    BidiModule,
+    PlatformModule,
+    CdkScrollableModule
+  ],
   exports: [
     BidiModule,
+    CdkScrollableModule,
     CdkFixedSizeVirtualScroll,
-    CdkScrollable,
     CdkVirtualForOf,
     CdkVirtualScrollViewport,
   ],
   declarations: [
     CdkFixedSizeVirtualScroll,
-    CdkScrollable,
     CdkVirtualForOf,
     CdkVirtualScrollViewport,
   ],

src/material-experimental/mdc-menu/BUILD.bazel

@@ -23,6 +23,7 @@ ng_module(
     module_name = "@angular/material-experimental/mdc-menu",
     deps = [
         "//src/cdk/overlay",
+        "//src/cdk/scrolling",
         "//src/material/core",
         "//src/material/menu",
         "@npm//@angular/animations",

src/material-experimental/mdc-menu/module.ts

@@ -11,6 +11,7 @@ import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {_MatMenuDirectivesModule} from '@angular/material/menu';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MatMenu, MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER} from './menu';
 import {MatMenuItem} from './menu-item';
 
@@ -22,7 +23,7 @@ import {MatMenuItem} from './menu-item';
     OverlayModule,
     _MatMenuDirectivesModule
   ],
-  exports: [MatMenu, MatCommonModule, MatMenuItem, _MatMenuDirectivesModule],
+  exports: [CdkScrollableModule, MatMenu, MatCommonModule, MatMenuItem, _MatMenuDirectivesModule],
   declarations: [MatMenu, MatMenuItem],
   providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER]
 })

src/material/autocomplete/autocomplete-module.ts

@@ -10,6 +10,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {MatOptionModule, MatCommonModule} from '@angular/material/core';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MatAutocomplete} from './autocomplete';
 import {
   MatAutocompleteTrigger,
@@ -20,6 +21,7 @@ import {MatAutocompleteOrigin} from './autocomplete-origin';
 @NgModule({
   imports: [MatOptionModule, OverlayModule, MatCommonModule, CommonModule],
   exports: [
+    CdkScrollableModule,
     MatAutocomplete,
     MatOptionModule,
     MatAutocompleteTrigger,

src/material/datepicker/datepicker-module.ts

@@ -13,6 +13,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MatCalendar, MatCalendarHeader} from './calendar';
 import {MatCalendarBody} from './calendar-body';
 import {
@@ -38,6 +39,7 @@ import {MatYearView} from './year-view';
     PortalModule,
   ],
   exports: [
+    CdkScrollableModule,
     MatCalendar,
     MatCalendarBody,
     MatDatepicker,

src/material/menu/BUILD.bazel

@@ -28,6 +28,7 @@ ng_module(
         "//src/cdk/overlay",
         "//src/cdk/platform",
         "//src/cdk/portal",
+        "//src/cdk/scrolling",
         "//src/material/core",
         "@npm//@angular/animations",
         "@npm//@angular/common",

src/material/menu/menu-module.ts

@@ -10,6 +10,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {_MatMenu} from './menu';
 import {MatMenuContent} from './menu-content';
 import {MatMenuItem} from './menu-item';
@@ -38,7 +39,7 @@ export class _MatMenuDirectivesModule {}
     OverlayModule,
     _MatMenuDirectivesModule,
   ],
-  exports: [MatCommonModule, _MatMenu, MatMenuItem, _MatMenuDirectivesModule],
+  exports: [CdkScrollableModule, MatCommonModule, _MatMenu, MatMenuItem, _MatMenuDirectivesModule],
   declarations: [_MatMenu, MatMenuItem],
   providers: [MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER]
 })

src/material/select/select-module.ts

@@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatOptionModule} from '@angular/material/core';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MAT_SELECT_SCROLL_STRATEGY_PROVIDER, MatSelect, MatSelectTrigger} from './select';
 
 
@@ -21,7 +22,14 @@ import {MAT_SELECT_SCROLL_STRATEGY_PROVIDER, MatSelect, MatSelectTrigger} from '
     MatOptionModule,
     MatCommonModule,
   ],
-  exports: [MatFormFieldModule, MatSelect, MatSelectTrigger, MatOptionModule, MatCommonModule],
+  exports: [
+    CdkScrollableModule,
+    MatFormFieldModule,
+    MatSelect,
+    MatSelectTrigger,
+    MatOptionModule,
+    MatCommonModule
+  ],
   declarations: [MatSelect, MatSelectTrigger],
   providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER]
 })

src/material/sidenav/sidenav-module.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {PlatformModule} from '@angular/cdk/platform';
-import {ScrollingModule} from '@angular/cdk/scrolling';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
@@ -18,10 +18,11 @@ import {MatSidenav, MatSidenavContainer, MatSidenavContent} from './sidenav';
   imports: [
     CommonModule,
     MatCommonModule,
-    ScrollingModule,
     PlatformModule,
+    CdkScrollableModule,
   ],
   exports: [
+    CdkScrollableModule,
     MatCommonModule,
     MatDrawer,
     MatDrawerContainer,

src/material/tooltip/tooltip-module.ts

@@ -11,6 +11,7 @@ import {A11yModule} from '@angular/cdk/a11y';
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
+import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {
   MatTooltip,
   TooltipComponent,
@@ -24,7 +25,7 @@ import {
     OverlayModule,
     MatCommonModule,
   ],
-  exports: [MatTooltip, TooltipComponent, MatCommonModule],
+  exports: [MatTooltip, TooltipComponent, MatCommonModule, CdkScrollableModule],
   declarations: [MatTooltip, TooltipComponent],
   entryComponents: [TooltipComponent],
   providers: [MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER]

tools/public_api_guard/cdk/drag-drop.d.ts

@@ -221,7 +221,7 @@ export interface DragDropConfig extends Partial<DragRefConfig> {
 
 export declare class DragDropModule {
     static ɵinj: i0.ɵɵInjectorDef<DragDropModule>;
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<DragDropModule, [typeof i1.CdkDropList, typeof i2.CdkDropListGroup, typeof i3.CdkDrag, typeof i4.CdkDragHandle, typeof i5.CdkDragPreview, typeof i6.CdkDragPlaceholder], never, [typeof i1.CdkDropList, typeof i2.CdkDropListGroup, typeof i3.CdkDrag, typeof i4.CdkDragHandle, typeof i5.CdkDragPreview, typeof i6.CdkDragPlaceholder]>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<DragDropModule, [typeof i1.CdkDropList, typeof i2.CdkDropListGroup, typeof i3.CdkDrag, typeof i4.CdkDragHandle, typeof i5.CdkDragPreview, typeof i6.CdkDragPlaceholder], never, [typeof i7.CdkScrollableModule, typeof i1.CdkDropList, typeof i2.CdkDropListGroup, typeof i3.CdkDrag, typeof i4.CdkDragHandle, typeof i5.CdkDragPreview, typeof i6.CdkDragPlaceholder]>;
 }
 
 export declare class DragDropRegistry<I, C> implements OnDestroy {

tools/public_api_guard/cdk/scrolling.d.ts

@@ -69,6 +69,11 @@ export declare class CdkScrollable implements OnInit, OnDestroy {
     static ɵfac: i0.ɵɵFactoryDef<CdkScrollable, [null, null, null, { optional: true; }]>;
 }
 
+export declare class CdkScrollableModule {
+    static ɵinj: i0.ɵɵInjectorDef<CdkScrollableModule>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<CdkScrollableModule, [typeof i1.CdkScrollable], never, [typeof i1.CdkScrollable]>;
+}
+
 export declare class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy {
     _cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined;
     get cdkVirtualForOf(): DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined;
@@ -171,7 +176,7 @@ export declare class ScrollDispatcher implements OnDestroy {
 
 export declare class ScrollingModule {
     static ɵinj: i0.ɵɵInjectorDef<ScrollingModule>;
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<ScrollingModule, [typeof i1.CdkFixedSizeVirtualScroll, typeof i2.CdkScrollable, typeof i3.CdkVirtualForOf, typeof i4.CdkVirtualScrollViewport], [typeof i5.BidiModule, typeof i6.PlatformModule], [typeof i5.BidiModule, typeof i1.CdkFixedSizeVirtualScroll, typeof i2.CdkScrollable, typeof i3.CdkVirtualForOf, typeof i4.CdkVirtualScrollViewport]>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<ScrollingModule, [typeof i2.CdkFixedSizeVirtualScroll, typeof i3.CdkVirtualForOf, typeof i4.CdkVirtualScrollViewport], [typeof i5.BidiModule, typeof i6.PlatformModule, typeof CdkScrollableModule], [typeof i5.BidiModule, typeof CdkScrollableModule, typeof i2.CdkFixedSizeVirtualScroll, typeof i3.CdkVirtualForOf, typeof i4.CdkVirtualScrollViewport]>;
 }
 
 export declare class ViewportRuler implements OnDestroy {

tools/public_api_guard/material/autocomplete.d.ts

@@ -66,7 +66,7 @@ export interface MatAutocompleteDefaultOptions {
 
 export declare class MatAutocompleteModule {
     static ɵinj: i0.ɵɵInjectorDef<MatAutocompleteModule>;
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatAutocompleteModule, [typeof i1.MatAutocomplete, typeof i2.MatAutocompleteTrigger, typeof i3.MatAutocompleteOrigin], [typeof i4.MatOptionModule, typeof i5.OverlayModule, typeof i4.MatCommonModule, typeof i6.CommonModule], [typeof i1.MatAutocomplete, typeof i4.MatOptionModule, typeof i2.MatAutocompleteTrigger, typeof i3.MatAutocompleteOrigin, typeof i4.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatAutocompleteModule, [typeof i1.MatAutocomplete, typeof i2.MatAutocompleteTrigger, typeof i3.MatAutocompleteOrigin], [typeof i4.MatOptionModule, typeof i5.OverlayModule, typeof i4.MatCommonModule, typeof i6.CommonModule], [typeof i7.CdkScrollableModule, typeof i1.MatAutocomplete, typeof i4.MatOptionModule, typeof i2.MatAutocompleteTrigger, typeof i3.MatAutocompleteOrigin, typeof i4.MatCommonModule]>;
 }
 
 export declare class MatAutocompleteOrigin {

tools/public_api_guard/material/datepicker.d.ts

@@ -239,7 +239,7 @@ export declare class MatDatepickerIntl {
 
 export declare class MatDatepickerModule {
     static ɵinj: i0.ɵɵInjectorDef<MatDatepickerModule>;
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatDatepickerModule, [typeof i1.MatCalendar, typeof i2.MatCalendarBody, typeof i3.MatDatepicker, typeof i3.MatDatepickerContent, typeof i4.MatDatepickerInput, typeof i5.MatDatepickerToggle, typeof i5.MatDatepickerToggleIcon, typeof i6.MatMonthView, typeof i7.MatYearView, typeof i8.MatMultiYearView, typeof i1.MatCalendarHeader], [typeof i9.CommonModule, typeof i10.MatButtonModule, typeof i11.MatDialogModule, typeof i12.OverlayModule, typeof i13.A11yModule, typeof i14.PortalModule], [typeof i1.MatCalendar, typeof i2.MatCalendarBody, typeof i3.MatDatepicker, typeof i3.MatDatepickerContent, typeof i4.MatDatepickerInput, typeof i5.MatDatepickerToggle, typeof i5.MatDatepickerToggleIcon, typeof i6.MatMonthView, typeof i7.MatYearView, typeof i8.MatMultiYearView, typeof i1.MatCalendarHeader]>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatDatepickerModule, [typeof i1.MatCalendar, typeof i2.MatCalendarBody, typeof i3.MatDatepicker, typeof i3.MatDatepickerContent, typeof i4.MatDatepickerInput, typeof i5.MatDatepickerToggle, typeof i5.MatDatepickerToggleIcon, typeof i6.MatMonthView, typeof i7.MatYearView, typeof i8.MatMultiYearView, typeof i1.MatCalendarHeader], [typeof i9.CommonModule, typeof i10.MatButtonModule, typeof i11.MatDialogModule, typeof i12.OverlayModule, typeof i13.A11yModule, typeof i14.PortalModule], [typeof i15.CdkScrollableModule, typeof i1.MatCalendar, typeof i2.MatCalendarBody, typeof i3.MatDatepicker, typeof i3.MatDatepickerContent, typeof i4.MatDatepickerInput, typeof i5.MatDatepickerToggle, typeof i5.MatDatepickerToggleIcon, typeof i6.MatMonthView, typeof i7.MatYearView, typeof i8.MatMultiYearView, typeof i1.MatCalendarHeader]>;
 }
 
 export declare class MatDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {

tools/public_api_guard/material/menu.d.ts

@@ -121,7 +121,7 @@ export declare class MatMenuItem extends _MatMenuItemMixinBase implements Focusa
 
 export declare class MatMenuModule {
     static ɵinj: i0.ɵɵInjectorDef<MatMenuModule>;
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatMenuModule, [typeof i4._MatMenu, typeof i5.MatMenuItem], [typeof i6.CommonModule, typeof i3.MatCommonModule, typeof i3.MatRippleModule, typeof i7.OverlayModule, typeof _MatMenuDirectivesModule], [typeof i3.MatCommonModule, typeof i4._MatMenu, typeof i5.MatMenuItem, typeof _MatMenuDirectivesModule]>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatMenuModule, [typeof i4._MatMenu, typeof i5.MatMenuItem], [typeof i6.CommonModule, typeof i3.MatCommonModule, typeof i3.MatRippleModule, typeof i7.OverlayModule, typeof _MatMenuDirectivesModule], [typeof i8.CdkScrollableModule, typeof i3.MatCommonModule, typeof i4._MatMenu, typeof i5.MatMenuItem, typeof _MatMenuDirectivesModule]>;
 }
 
 export interface MatMenuPanel<T = any> {

tools/public_api_guard/material/select.d.ts

@@ -123,7 +123,7 @@ export interface MatSelectConfig {
 
 export declare class MatSelectModule {
     static ɵinj: i0.ɵɵInjectorDef<MatSelectModule>;
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatSelectModule, [typeof i1.MatSelect, typeof i1.MatSelectTrigger], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.MatOptionModule, typeof i4.MatCommonModule], [typeof i5.MatFormFieldModule, typeof i1.MatSelect, typeof i1.MatSelectTrigger, typeof i4.MatOptionModule, typeof i4.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatSelectModule, [typeof i1.MatSelect, typeof i1.MatSelectTrigger], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.MatOptionModule, typeof i4.MatCommonModule], [typeof i5.CdkScrollableModule, typeof i6.MatFormFieldModule, typeof i1.MatSelect, typeof i1.MatSelectTrigger, typeof i4.MatOptionModule, typeof i4.MatCommonModule]>;
 }
 
 export declare class MatSelectTrigger {

tools/public_api_guard/material/sidenav.d.ts

@@ -126,7 +126,7 @@ export declare class MatSidenavContent extends MatDrawerContent {
 
 export declare class MatSidenavModule {
     static ɵinj: i0.ɵɵInjectorDef<MatSidenavModule>;
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatSidenavModule, [typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent], [typeof i3.CommonModule, typeof i4.MatCommonModule, typeof i5.ScrollingModule, typeof i6.PlatformModule], [typeof i4.MatCommonModule, typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent]>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatSidenavModule, [typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent], [typeof i3.CommonModule, typeof i4.MatCommonModule, typeof i5.PlatformModule, typeof i6.CdkScrollableModule], [typeof i6.CdkScrollableModule, typeof i4.MatCommonModule, typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent]>;
 }
 
 export declare function throwMatDuplicatedDrawerError(position: string): void;

tools/public_api_guard/material/tooltip.d.ts

@@ -69,7 +69,7 @@ export interface MatTooltipDefaultOptions {
 
 export declare class MatTooltipModule {
     static ɵinj: i0.ɵɵInjectorDef<MatTooltipModule>;
-    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatTooltipModule, [typeof i1.MatTooltip, typeof i1.TooltipComponent], [typeof i2.A11yModule, typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.MatCommonModule], [typeof i1.MatTooltip, typeof i1.TooltipComponent, typeof i5.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatTooltipModule, [typeof i1.MatTooltip, typeof i1.TooltipComponent], [typeof i2.A11yModule, typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.MatCommonModule], [typeof i1.MatTooltip, typeof i1.TooltipComponent, typeof i5.MatCommonModule, typeof i6.CdkScrollableModule]>;
 }
 
 export declare const SCROLL_THROTTLE_MS = 20;