feat(material): use scoped injectables

Author: jelbourn

src/lib/autocomplete/autocomplete-module.ts

@@ -10,19 +10,14 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {MatOptionModule, MatCommonModule} from '@angular/material/core';
-import {MatAutocomplete, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS} from './autocomplete';
+import {MatAutocomplete} from './autocomplete';
 import {
   MatAutocompleteTrigger,
-  MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER,
 } from './autocomplete-trigger';
 
 @NgModule({
   imports: [MatOptionModule, OverlayModule, MatCommonModule, CommonModule],
   exports: [MatAutocomplete, MatOptionModule, MatAutocompleteTrigger, MatCommonModule],
   declarations: [MatAutocomplete, MatAutocompleteTrigger],
-  providers: [
-    MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER,
-    {provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: false}
-  ],
 })
 export class MatAutocompleteModule {}

src/lib/autocomplete/autocomplete-trigger.ts

@@ -6,28 +6,25 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Directionality} from '@angular/cdk/bidi';
-import {DOWN_ARROW, ENTER, ESCAPE, UP_ARROW, TAB} from '@angular/cdk/keycodes';
+import {DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW} from '@angular/cdk/keycodes';
 import {
   FlexibleConnectedPositionStrategy,
   Overlay,
-  OverlayRef,
   OverlayConfig,
+  OverlayRef,
   PositionStrategy,
   ScrollStrategy,
 } from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
-import {filter} from 'rxjs/operators/filter';
-import {take} from 'rxjs/operators/take';
-import {switchMap} from 'rxjs/operators/switchMap';
-import {tap} from 'rxjs/operators/tap';
-import {delay} from 'rxjs/operators/delay';
+import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectorRef,
   Directive,
   ElementRef,
   forwardRef,
   Host,
   Inject,
+  inject,
   InjectionToken,
   Input,
   NgZone,
@@ -37,19 +34,23 @@ import {
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
+  _countGroupLabelsBeforeOption,
+  _getOptionScrollPosition,
   MatOption,
   MatOptionSelectionChange,
-  _getOptionScrollPosition,
-  _countGroupLabelsBeforeOption,
 } from '@angular/material/core';
 import {MatFormField} from '@angular/material/form-field';
-import {DOCUMENT} from '@angular/common';
 import {Observable} from 'rxjs/Observable';
-import {Subject} from 'rxjs/Subject';
 import {defer} from 'rxjs/observable/defer';
 import {fromEvent} from 'rxjs/observable/fromEvent';
 import {merge} from 'rxjs/observable/merge';
 import {of as observableOf} from 'rxjs/observable/of';
+import {delay} from 'rxjs/operators/delay';
+import {filter} from 'rxjs/operators/filter';
+import {switchMap} from 'rxjs/operators/switchMap';
+import {take} from 'rxjs/operators/take';
+import {tap} from 'rxjs/operators/tap';
+import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
 import {MatAutocomplete} from './autocomplete';
 
@@ -68,20 +69,13 @@ 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');
-
-/** @docs-private */
-export function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
-    () => ScrollStrategy {
-  return () => overlay.scrollStrategies.reposition();
-}
-
-/** @docs-private */
-export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER = {
-  provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
-  deps: [Overlay],
-  useFactory: MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY,
-};
+    new InjectionToken<() => ScrollStrategy>('mat-autocomplete-scroll-strategy', {
+      providedIn: 'root',
+      factory: () => {
+        const overlay = inject(Overlay);
+        return () => overlay.scrollStrategies.reposition();
+      }
+    });
 
 /**
  * Provider that allows the autocomplete to register as a ControlValueAccessor.

src/lib/autocomplete/autocomplete.ts

@@ -61,7 +61,10 @@ export interface MatAutocompleteDefaultOptions {
 
 /** Injection token to be used to override the default options for `mat-autocomplete`. */
 export const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS =
-    new InjectionToken<MatAutocompleteDefaultOptions>('mat-autocomplete-default-options');
+    new InjectionToken<MatAutocompleteDefaultOptions>('mat-autocomplete-default-options', {
+      providedIn: 'root',
+      factory: () => ({autoActiveFirstOption: false}),
+    });
 
 
 @Component({

src/lib/core/common-behaviors/common-module.ts

@@ -11,7 +11,10 @@ import {BidiModule} from '@angular/cdk/bidi';
 
 
 /** Injection token that configures whether the Material sanity checks are enabled. */
-export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('mat-sanity-checks');
+export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('mat-sanity-checks', {
+  providedIn: 'root',
+  factory: () => true,
+});
 
 
 /**
@@ -23,9 +26,6 @@ export const MATERIAL_SANITY_CHECKS = new InjectionToken<boolean>('mat-sanity-ch
 @NgModule({
   imports: [BidiModule],
   exports: [BidiModule],
-  providers: [{
-    provide: MATERIAL_SANITY_CHECKS, useValue: true,
-  }],
 })
 export class MatCommonModule {
   /** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */

src/lib/core/datetime/date-adapter.ts

@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InjectionToken, LOCALE_ID} from '@angular/core';
+import {inject, InjectionToken, LOCALE_ID} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
 
 /** InjectionToken for datepicker that can be used to override default locale code. */
-export const MAT_DATE_LOCALE = new InjectionToken<string>('MAT_DATE_LOCALE');
-
-/** Provider for MAT_DATE_LOCALE injection token. */
-export const MAT_DATE_LOCALE_PROVIDER = {provide: MAT_DATE_LOCALE, useExisting: LOCALE_ID};
+export const MAT_DATE_LOCALE = new InjectionToken<string>('MAT_DATE_LOCALE', {
+  providedIn: 'root',
+  factory: () => inject(LOCALE_ID)
+});
 
 /** Adapts type `D` to be usable as a date by cdk-based components that work with dates. */
 export abstract class DateAdapter<D> {

src/lib/core/datetime/index.ts

@@ -8,7 +8,7 @@
 
 import {PlatformModule} from '@angular/cdk/platform';
 import {NgModule} from '@angular/core';
-import {DateAdapter, MAT_DATE_LOCALE_PROVIDER} from './date-adapter';
+import {DateAdapter} from './date-adapter';
 import {MAT_DATE_FORMATS} from './date-formats';
 import {NativeDateAdapter} from './native-date-adapter';
 import {MAT_NATIVE_DATE_FORMATS} from './native-date-formats';
@@ -23,7 +23,6 @@ export * from './native-date-formats';
   imports: [PlatformModule],
   providers: [
     {provide: DateAdapter, useClass: NativeDateAdapter},
-    MAT_DATE_LOCALE_PROVIDER
   ],
 })
 export class NativeDateModule {}

src/lib/core/error/error-options.ts

@@ -18,7 +18,7 @@ export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
 }
 
 /** Provider that defines how form controls behave with regards to displaying error messages. */
-@Injectable()
+@Injectable({providedIn: 'root'})
 export class ErrorStateMatcher {
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     return !!(control && control.invalid && (control.touched || (form && form.submitted)));

src/lib/datepicker/datepicker-intl.ts

@@ -11,7 +11,7 @@ import {Subject} from 'rxjs/Subject';
 
 
 /** Datepicker data that requires internationalization. */
-@Injectable()
+@Injectable({providedIn: 'root'})
 export class MatDatepickerIntl {
   /**
    * Stream that emits whenever the labels here are changed. Use this to notify

src/lib/datepicker/datepicker-module.ts

@@ -14,11 +14,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatCalendar} from './calendar';
 import {MatCalendarBody} from './calendar-body';
-import {
-  MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER,
-  MatDatepicker,
-  MatDatepickerContent,
-} from './datepicker';
+import {MatDatepicker, MatDatepickerContent} from './datepicker';
 import {MatDatepickerInput} from './datepicker-input';
 import {MatDatepickerIntl} from './datepicker-intl';
 import {MatDatepickerToggle, MatDatepickerToggleIcon} from './datepicker-toggle';
@@ -61,7 +57,6 @@ import {MatYearView} from './year-view';
   ],
   providers: [
     MatDatepickerIntl,
-    MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER,
   ],
   entryComponents: [
     MatDatepickerContent,

src/lib/datepicker/datepicker.spec.ts

@@ -1,8 +1,8 @@
 import {ENTER, ESCAPE, RIGHT_ARROW} from '@angular/cdk/keycodes';
-import {OverlayContainer, Overlay, ScrollDispatcher} from '@angular/cdk/overlay';
+import {Overlay, OverlayContainer, ScrollDispatcher} from '@angular/cdk/overlay';
 import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
 import {Component, ViewChild} from '@angular/core';
-import {fakeAsync, flush, ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {
   DEC,
@@ -14,15 +14,15 @@ import {
   NativeDateModule,
   SEP,
 } from '@angular/material/core';
-import {MatFormFieldModule, MatFormField} from '@angular/material/form-field';
+import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Subject} from 'rxjs/Subject';
 import {MatInputModule} from '../input/index';
 import {MatDatepicker} from './datepicker';
 import {MatDatepickerInput} from './datepicker-input';
 import {MatDatepickerToggle} from './datepicker-toggle';
-import {MatDatepickerIntl, MatDatepickerModule, MAT_DATEPICKER_SCROLL_STRATEGY} from './index';
-import {Subject} from 'rxjs/Subject';
+import {MAT_DATEPICKER_SCROLL_STRATEGY, MatDatepickerIntl, MatDatepickerModule} from './index';
 
 describe('MatDatepicker', () => {
   const SUPPORTS_INTL = typeof Intl != 'undefined';

src/lib/datepicker/datepicker.ts

@@ -10,67 +10,60 @@ import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {ESCAPE} from '@angular/cdk/keycodes';
 import {
+  FlexibleConnectedPositionStrategy,
   Overlay,
   OverlayConfig,
   OverlayRef,
   PositionStrategy,
-  RepositionScrollStrategy,
   ScrollStrategy,
-  FlexibleConnectedPositionStrategy,
 } from '@angular/cdk/overlay';
 import {ComponentPortal} from '@angular/cdk/portal';
-import {take} from 'rxjs/operators/take';
-import {filter} from 'rxjs/operators/filter';
+import {DOCUMENT} from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ComponentRef,
   ElementRef,
   EventEmitter,
   Inject,
+  inject,
   InjectionToken,
   Input,
   NgZone,
   OnDestroy,
+  OnInit,
   Optional,
   Output,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
-  ChangeDetectorRef,
-  OnInit,
 } from '@angular/core';
 import {CanColor, DateAdapter, mixinColor, ThemePalette} from '@angular/material/core';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
-import {DOCUMENT} from '@angular/common';
+import {merge} from 'rxjs/observable/merge';
+import {filter} from 'rxjs/operators/filter';
+import {take} from 'rxjs/operators/take';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
-import {merge} from 'rxjs/observable/merge';
-import {createMissingDateImplError} from './datepicker-errors';
-import {MatDatepickerInput} from './datepicker-input';
 import {MatCalendar} from './calendar';
 import {matDatepickerAnimations} from './datepicker-animations';
+import {createMissingDateImplError} from './datepicker-errors';
+import {MatDatepickerInput} from './datepicker-input';
 
 /** Used to generate a unique ID for each datepicker instance. */
 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');
-
-/** @docs-private */
-export function MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
-    () => RepositionScrollStrategy {
-  return () => overlay.scrollStrategies.reposition();
-}
-
-/** @docs-private */
-export const MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER = {
-  provide: MAT_DATEPICKER_SCROLL_STRATEGY,
-  deps: [Overlay],
-  useFactory: MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY,
-};
+    new InjectionToken<() => ScrollStrategy>('mat-datepicker-scroll-strategy', {
+      providedIn: 'root',
+      factory: () => {
+        const overlay = inject(Overlay);
+        return () => overlay.scrollStrategies.reposition();
+      }
+    });
 
 // Boilerplate for applying mixins to MatDatepickerContent.
 /** @docs-private */

src/lib/dialog/dialog.ts

@@ -10,15 +10,16 @@ import {Directionality} from '@angular/cdk/bidi';
 import {
   Overlay,
   OverlayConfig,
+  OverlayContainer,
   OverlayRef,
   ScrollStrategy,
-  OverlayContainer,
 } from '@angular/cdk/overlay';
 import {ComponentPortal, ComponentType, PortalInjector, TemplatePortal} from '@angular/cdk/portal';
 import {Location} from '@angular/common';
 import {
   ComponentRef,
   Inject,
+  inject,
   Injectable,
   InjectionToken,
   Injector,
@@ -44,7 +45,13 @@ 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');
+    new InjectionToken<() => ScrollStrategy>('mat-dialog-scroll-strategy', {
+      providedIn: 'root',
+      factory: () => {
+        const overlay = inject(Overlay);
+        return () => overlay.scrollStrategies.block();
+      }
+    });
 
 /** @docs-private */
 export function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):

src/lib/icon/icon-registry.ts

@@ -76,7 +76,7 @@ class SvgIconConfig {
  * - Registers aliases for CSS classes, for use with icon fonts.
  * - Loads icons from URLs and extracts individual icons from icon sets.
  */
-@Injectable()
+@Injectable({providedIn: 'root'})
 export class MatIconRegistry {
   private _document: Document;