refactor(multiple): clean up more ViewEngine-specific code

Cleans up a bunch of workarounds and docs that were specific to ViewEngine. There are still more places to clean up, but I'm trying to make it easier to track down any potential failures.

Author: crisbeto

src/cdk-experimental/dialog/dialog-module.ts

@@ -37,6 +37,5 @@ import {
     {provide: DIALOG_CONTAINER, useValue: CdkDialogContainer},
     {provide: DIALOG_CONFIG, useValue: DialogConfig},
   ],
-  entryComponents: [CdkDialogContainer],
 })
 export class DialogModule {}

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

@@ -4698,17 +4698,6 @@ describe('CdkDrag', () => {
     }));
 
     it('should be able to start dragging again if the dragged item is destroyed', fakeAsync(() => {
-      // We have some behavior where we move the dragged element out to the bottom of the `body`,
-      // in order to work around a browser issue. We restore the element when dragging stops, but
-      // the problem is that if it's destroyed before we've had a chance to return it, ViewEngine
-      // will throw an error since the element isn't in its original parent. Skip this test if the
-      // component hasn't been compiled with Ivy since the assertions depend on the element being
-      // removed while dragging.
-      // TODO(crisbeto): remove this check once ViewEngine has been dropped.
-      if (!DraggableInDropZone.hasOwnProperty('ɵcmp')) {
-        return;
-      }
-
       const fixture = createComponent(DraggableInDropZone);
       fixture.detectChanges();
 

src/cdk/portal/portal.md

@@ -50,9 +50,7 @@ A component can use `@ViewChild` or `@ViewChildren` to get a reference to a
 `CdkPortal`.
 
 ##### `ComponentPortal`
-Used to create a portal from a component type. When a component is dynamically created using
-portals, it must be included in the `entryComponents` of its `NgModule`if your project uses ViewEngine. Projects
-using Angular Ivy don't need `entryComponents`.
+Used to create a portal from a component type.
 
 Usage:
 ```ts

src/dev-app/main-module.ts

@@ -24,8 +24,6 @@ import {ANIMATIONS_STORAGE_KEY} from './dev-app/dev-app-layout';
 @NgModule({
   imports: [
     BrowserAnimationsModule.withConfig({
-      // Note that this doesn't seem to work on ViewEngine, but it's
-      // not a compilation error either so we can live with it.
       disableAnimations: localStorage.getItem(ANIMATIONS_STORAGE_KEY) === 'true',
     }),
     BrowserModule,

src/material-experimental/column-resize/column-resize-module.ts

@@ -23,7 +23,6 @@ const ENTRY_COMMON_COMPONENTS = [MatColumnResizeOverlayHandle];
 @NgModule({
   declarations: ENTRY_COMMON_COMPONENTS,
   exports: ENTRY_COMMON_COMPONENTS,
-  entryComponents: ENTRY_COMMON_COMPONENTS,
 })
 export class MatColumnResizeCommonModule {}
 

src/material-experimental/mdc-button/fab.ts

@@ -66,20 +66,11 @@ const defaults = MAT_FAB_DEFAULT_OPTIONS_FACTORY();
   selector: `button[mat-fab]`,
   templateUrl: 'button.html',
   styleUrls: ['fab.css'],
-  // TODO: change to MAT_BUTTON_INPUTS/MAT_BUTTON_HOST with spread after ViewEngine is deprecated
-  inputs: ['disabled', 'disableRipple', 'color', 'extended'],
+  inputs: [...MAT_BUTTON_INPUTS, 'extended'],
   host: {
+    ...MAT_BUTTON_HOST,
     '[class.mdc-fab--extended]': 'extended',
     '[class.mat-mdc-extended-fab]': 'extended',
-    '[attr.disabled]': 'disabled || null',
-    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
-    // MDC automatically applies the primary theme color to the button, but we want to support
-    // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
-    // select and style this "theme".
-    '[class.mat-unthemed]': '!color',
-    // Add a class that applies to all buttons. This makes it easier to target if somebody
-    // wants to target all Material buttons.
-    '[class.mat-mdc-button-base]': 'true',
   },
   exportAs: 'matButton',
   encapsulation: ViewEncapsulation.None,
@@ -153,26 +144,11 @@ export class MatMiniFabButton extends MatButtonBase {
   selector: `a[mat-fab]`,
   templateUrl: 'button.html',
   styleUrls: ['fab.css'],
-  // TODO: change to MAT_ANCHOR_INPUTS/MAT_ANCHOR_HOST with spread after ViewEngine is deprecated
-  inputs: ['disabled', 'disableRipple', 'color', 'tabIndex', 'extended'],
+  inputs: [...MAT_BUTTON_INPUTS, 'extended'],
   host: {
+    ...MAT_ANCHOR_HOST,
     '[class.mdc-fab--extended]': 'extended',
     '[class.mat-mdc-extended-fab]': 'extended',
-    '[attr.disabled]': 'disabled || null',
-    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
-
-    // Note that we ignore the user-specified tabindex when it's disabled for
-    // consistency with the `mat-button` applied on native buttons where even
-    // though they have an index, they're not tabbable.
-    '[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)',
-    '[attr.aria-disabled]': 'disabled.toString()',
-    // MDC automatically applies the primary theme color to the button, but we want to support
-    // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
-    // select and style this "theme".
-    '[class.mat-unthemed]': '!color',
-    // Add a class that applies to all buttons. This makes it easier to target if somebody
-    // wants to target all Material buttons.
-    '[class.mat-mdc-button-base]': 'true',
   },
   exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,

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

@@ -37,6 +37,5 @@ import {
     MatDialogContent,
   ],
   providers: [MatDialog, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER],
-  entryComponents: [MatDialogContainer],
 })
 export class MatDialogModule {}

src/material-experimental/mdc-snack-bar/module.ts

@@ -33,6 +33,5 @@ import {MatSnackBarAction, MatSnackBarActions, MatSnackBarLabel} from './snack-b
     MatSnackBarActions,
     MatSnackBarAction,
   ],
-  entryComponents: [MatSimpleSnackBar, MatSnackBarContainer],
 })
 export class MatSnackBarModule {}

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

@@ -19,7 +19,6 @@ import {MatTooltip, TooltipComponent} from './tooltip';
   imports: [A11yModule, CommonModule, OverlayModule, MatCommonModule],
   exports: [MatTooltip, TooltipComponent, MatCommonModule, CdkScrollableModule],
   declarations: [MatTooltip, TooltipComponent],
-  entryComponents: [TooltipComponent],
   providers: [MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER],
 })
 export class MatTooltipModule {}

src/material-experimental/selection/row-selection.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {CdkRowSelection} from '@angular/cdk-experimental/selection';
 import {Input, Directive} from '@angular/core';
 
@@ -24,20 +23,9 @@ import {Input, Directive} from '@angular/core';
     '[attr.aria-selected]': '_selection.isSelected(this.value, this.index)',
   },
   providers: [{provide: CdkRowSelection, useExisting: MatRowSelection}],
+  inputs: ['index: matRowSelectionIndex'],
 })
-// tslint:disable-next-line: coercion-types
 export class MatRowSelection<T> extends CdkRowSelection<T> {
   /** The value that is associated with the row */
   @Input('matRowSelectionValue') override value: T;
-
-  /** The index of the value in the list. Required when used with `trackBy` */
-  @Input('matRowSelectionIndex')
-  override get index(): number | undefined {
-    return this._index;
-  }
-  override set index(index: number | undefined) {
-    // TODO: when we remove support for ViewEngine, change this setter to an input
-    // alias in the decorator metadata.
-    this._index = coerceNumberProperty(index);
-  }
 }

src/material-experimental/selection/selection-toggle.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {CdkSelectionToggle} from '@angular/cdk-experimental/selection';
 import {Directive, Input} from '@angular/core';
 
@@ -23,21 +22,10 @@ import {Directive, Input} from '@angular/core';
 @Directive({
   selector: '[matSelectionToggle]',
   exportAs: 'matSelectionToggle',
+  inputs: ['index: matSelectionToggleIndex'],
   providers: [{provide: CdkSelectionToggle, useExisting: MatSelectionToggle}],
 })
-// tslint:disable-next-line: coercion-types
 export class MatSelectionToggle<T> extends CdkSelectionToggle<T> {
   /** The value that is associated with the toggle */
   @Input('matSelectionToggleValue') override value: T;
-
-  /** The index of the value in the list. Required when used with `trackBy` */
-  @Input('matSelectionToggleIndex')
-  override get index(): number | undefined {
-    return this._index;
-  }
-  override set index(index: number | undefined) {
-    // TODO: when we remove support for ViewEngine, change this setter to an input
-    // alias in the decorator metadata.
-    this._index = coerceNumberProperty(index);
-  }
 }

src/material/bottom-sheet/bottom-sheet-module.ts

@@ -16,6 +16,5 @@ import {MatBottomSheetContainer} from './bottom-sheet-container';
   imports: [OverlayModule, MatCommonModule, PortalModule],
   exports: [MatBottomSheetContainer, MatCommonModule],
   declarations: [MatBottomSheetContainer],
-  entryComponents: [MatBottomSheetContainer],
 })
 export class MatBottomSheetModule {}

src/material/bottom-sheet/bottom-sheet.md

@@ -49,39 +49,6 @@ export class HobbitSheet {
 }
 ```
 
-### Configuring bottom sheet content via `entryComponents`
-**You only need to specify `entryComponents` if your project uses ViewEngine. Projects
-using Angular Ivy don't need `entryComponents`.**
-
-Similarly to `MatDialog`, `MatBottomSheet` instantiates components at run-time. In order for it to
-work, the Angular compiler needs extra information to create the necessary `ComponentFactory` for
-your bottom sheet content component.
-
-Any components that are included inside of a bottom sheet have to be added to the `entryComponents`
-inside your `NgModule`.
-
-
-```ts
-@NgModule({
-  imports: [
-    // ...
-    MatBottomSheetModule
-  ],
-
-  declarations: [
-    AppComponent,
-    ExampleBottomSheetComponent
-  ],
-
-  entryComponents: [
-    ExampleBottomSheetComponent
-  ],
-
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
-```
-
 ### Specifying global configuration defaults
 Default bottom sheet options can be specified by providing an instance of `MatBottomSheetConfig`
 for `MAT_BOTTOM_SHEET_DEFAULT_OPTIONS` in your application's root module.

src/material/datepicker/date-range-input-parts.ts

@@ -208,10 +208,7 @@ const _MatDateRangeInputBase = mixinErrorState(MatDateRangeInputPartBase);
   outputs: ['dateChange', 'dateInput'],
   inputs: ['errorStateMatcher'],
 })
-export class MatStartDate<D>
-  extends _MatDateRangeInputBase<D>
-  implements CanUpdateErrorState, DoCheck, OnInit
-{
+export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpdateErrorState {
   /** Validator that checks that the start date isn't after the end date. */
   private _startValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
     const start = this._dateAdapter.getValidDateOrNull(
@@ -233,9 +230,6 @@ export class MatStartDate<D>
     @Optional() dateAdapter: DateAdapter<D>,
     @Optional() @Inject(MAT_DATE_FORMATS) dateFormats: MatDateFormats,
   ) {
-    // TODO(crisbeto): this constructor shouldn't be necessary, but ViewEngine doesn't seem to
-    // handle DI correctly when it is inherited from `MatDateRangeInputPartBase`. We can drop this
-    // constructor once ViewEngine is removed.
     super(
       rangeInput,
       elementRef,
@@ -248,26 +242,6 @@ export class MatStartDate<D>
     );
   }
 
-  override ngOnInit() {
-    // Normally this happens automatically, but it seems to break if not added explicitly when all
-    // of the criteria below are met:
-    // 1) The class extends a TS mixin.
-    // 2) The application is running in ViewEngine.
-    // 3) The application is being transpiled through tsickle.
-    // This can be removed once google3 is completely migrated to Ivy.
-    super.ngOnInit();
-  }
-
-  override ngDoCheck() {
-    // Normally this happens automatically, but it seems to break if not added explicitly when all
-    // of the criteria below are met:
-    // 1) The class extends a TS mixin.
-    // 2) The application is running in ViewEngine.
-    // 3) The application is being transpiled through tsickle.
-    // This can be removed once google3 is completely migrated to Ivy.
-    super.ngDoCheck();
-  }
-
   protected _validator = Validators.compose([...super._getValidators(), this._startValidator]);
 
   protected _getValueFromModel(modelValue: DateRange<D>) {
@@ -334,10 +308,7 @@ export class MatStartDate<D>
   outputs: ['dateChange', 'dateInput'],
   inputs: ['errorStateMatcher'],
 })
-export class MatEndDate<D>
-  extends _MatDateRangeInputBase<D>
-  implements CanUpdateErrorState, DoCheck, OnInit
-{
+export class MatEndDate<D> extends _MatDateRangeInputBase<D> implements CanUpdateErrorState {
   /** Validator that checks that the end date isn't before the start date. */
   private _endValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
     const end = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
@@ -357,9 +328,6 @@ export class MatEndDate<D>
     @Optional() dateAdapter: DateAdapter<D>,
     @Optional() @Inject(MAT_DATE_FORMATS) dateFormats: MatDateFormats,
   ) {
-    // TODO(crisbeto): this constructor shouldn't be necessary, but ViewEngine doesn't seem to
-    // handle DI correctly when it is inherited from `MatDateRangeInputPartBase`. We can drop this
-    // constructor once ViewEngine is removed.
     super(
       rangeInput,
       elementRef,
@@ -372,26 +340,6 @@ export class MatEndDate<D>
     );
   }
 
-  override ngOnInit() {
-    // Normally this happens automatically, but it seems to break if not added explicitly when all
-    // of the criteria below are met:
-    // 1) The class extends a TS mixin.
-    // 2) The application is running in ViewEngine.
-    // 3) The application is being transpiled through tsickle.
-    // This can be removed once google3 is completely migrated to Ivy.
-    super.ngOnInit();
-  }
-
-  override ngDoCheck() {
-    // Normally this happens automatically, but it seems to break if not added explicitly when all
-    // of the criteria below are met:
-    // 1) The class extends a TS mixin.
-    // 2) The application is running in ViewEngine.
-    // 3) The application is being transpiled through tsickle.
-    // This can be removed once google3 is completely migrated to Ivy.
-    super.ngDoCheck();
-  }
-
   protected _validator = Validators.compose([...super._getValidators(), this._endValidator]);
 
   protected _getValueFromModel(modelValue: DateRange<D>) {

src/material/datepicker/datepicker-module.ts

@@ -83,6 +83,5 @@ import {MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel} from './d
     MatDatepickerApply,
   ],
   providers: [MatDatepickerIntl, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
-  entryComponents: [MatDatepickerContent, MatCalendarHeader],
 })
 export class MatDatepickerModule {}

src/material/dialog/dialog-module.ts

@@ -37,6 +37,5 @@ import {
     MatDialogContent,
   ],
   providers: [MatDialog, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER],
-  entryComponents: [MatDialogContainer],
 })
 export class MatDialogModule {}

src/material/dialog/dialog.md

@@ -39,38 +39,6 @@ export class YourDialog {
 }
 ```
 
-### Configuring dialog content via `entryComponents`
-**You only need to specify `entryComponents` if your project uses ViewEngine. Projects
-using Angular Ivy don't need `entryComponents`.**
-
-Because `MatDialog` instantiates components at run-time, the Angular compiler needs extra
-information to create the necessary `ComponentFactory` for your dialog content component.
-
-For any component loaded into a dialog, you must include your component class in the list of
-`entryComponents` in your NgModule definition so that the Angular compiler knows to create
-the `ComponentFactory` for it.
-
-```ts
-@NgModule({
-  imports: [
-    // ...
-    MatDialogModule
-  ],
-
-  declarations: [
-    AppComponent,
-    ExampleDialogComponent
-  ],
-
-  entryComponents: [
-    ExampleDialogComponent
-  ],
-
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
-```
-
 ### Specifying global configuration defaults
 Default dialog options can be specified by providing an instance of `MatDialogConfig` for
 MAT_DIALOG_DEFAULT_OPTIONS in your application's root module.
@@ -194,5 +162,5 @@ sheet attempts to restore focus.
 You can add handling for this situation with the `afterClosed()` observable from `MatDialogRef`.
 
 <!-- example({"example":"dialog-from-menu",
-              "file":"dialog-from-menu-example.ts", 
+              "file":"dialog-from-menu-example.ts",
               "region":"focus-restoration"}) -->

src/material/snack-bar/snack-bar-module.ts

@@ -19,6 +19,5 @@ import {MatSnackBarContainer} from './snack-bar-container';
   imports: [OverlayModule, PortalModule, CommonModule, MatButtonModule, MatCommonModule],
   exports: [MatSnackBarContainer, MatCommonModule],
   declarations: [MatSnackBarContainer, SimpleSnackBar],
-  entryComponents: [MatSnackBarContainer, SimpleSnackBar],
 })
 export class MatSnackBarModule {}