chore: switch e2e-app to secondary entry-points (#15987)

Since the primary entry-point `@angular/material` is now deprecated
with V8, we should no longer use the deprecated entry-point in our
examples.

src/e2e-app/BUILD.bazel

@@ -16,12 +16,26 @@ ng_module(
     "@npm//@angular/platform-browser",
     "@npm//@angular/router",
     "@npm//@angular/animations",
-    "@npm//material-components-web",
     "//src/cdk/drag-drop",
     "//src/cdk/overlay",
     "//src/cdk/scrolling",
-    # TODO(devversion): be more explicit by using "@angular/material" with individual entry points.
-    "//src/material:material",
+    "//src/material/button",
+    "//src/material/icon",
+    "//src/material/checkbox",
+    "//src/material/dialog",
+    "//src/material/core",
+    "//src/material/list",
+    "//src/material/grid-list",
+    "//src/material/icon",
+    "//src/material/form-field",
+    "//src/material/input",
+    "//src/material/menu",
+    "//src/material/progress-bar",
+    "//src/material/progress-spinner",
+    "//src/material/radio",
+    "//src/material/sidenav",
+    "//src/material/slide-toggle",
+    "//src/material/tabs",
     "//src/material-examples:examples",
     "//src/cdk-experimental/dialog",
     "//src/cdk-experimental/scrolling",

src/e2e-app/button/button-e2e-module.ts

@@ -7,7 +7,8 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatButtonModule, MatIconModule} from '@angular/material';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
 import {ButtonE2E} from './button-e2e';
 
 @NgModule({

src/e2e-app/checkbox/checkbox-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatCheckboxModule} from '@angular/material';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {SimpleCheckboxes} from './checkbox-e2e';
 
 @NgModule({

src/e2e-app/dialog/dialog-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatDialogModule} from '@angular/material';
+import {MatDialogModule} from '@angular/material/dialog';
 import {DialogE2E, TestDialog} from './dialog-e2e';
 
 @NgModule({

src/e2e-app/dialog/dialog-e2e.ts

@@ -1,5 +1,5 @@
 import {Component, ViewChild, TemplateRef} from '@angular/core';
-import {MatDialog, MatDialogRef, MatDialogConfig} from '@angular/material';
+import {MatDialog, MatDialogRef, MatDialogConfig} from '@angular/material/dialog';
 
 @Component({
   selector: 'dialog-e2e',

src/e2e-app/e2e-app/e2e-app-module.ts

@@ -8,7 +8,8 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {GestureConfig, MatListModule} from '@angular/material';
+import {GestureConfig} from '@angular/material/core';
+import {MatListModule} from '@angular/material/list';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
 import {E2eAppLayout, Home} from './e2e-app-layout';

src/e2e-app/grid-list/grid-list-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatGridListModule} from '@angular/material';
+import {MatGridListModule} from '@angular/material/grid-list';
 import {GridListE2E} from './grid-list-e2e';
 
 @NgModule({

src/e2e-app/icon/icon-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatIconModule} from '@angular/material';
+import {MatIconModule} from '@angular/material/icon';
 import {IconE2E} from './icon-e2e';
 
 @NgModule({

src/e2e-app/input/input-e2e-module.ts

@@ -7,7 +7,8 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatFormFieldModule, MatInputModule} from '@angular/material';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 import {InputE2E} from './input-e2e';
 
 @NgModule({

src/e2e-app/menu/menu-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatMenuModule} from '@angular/material';
+import {MatMenuModule} from '@angular/material/menu';
 import {MenuE2E} from './menu-e2e';
 
 @NgModule({

src/e2e-app/progress-bar/progress-bar-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatProgressBarModule} from '@angular/material';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {ProgressBarE2E} from './progress-bar-e2e';
 
 @NgModule({

src/e2e-app/progress-spinner/progress-spinner-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatProgressSpinnerModule} from '@angular/material';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {ProgressSpinnerE2E} from './progress-spinner-e2e';
 
 @NgModule({

src/e2e-app/radio/radio-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatRadioModule} from '@angular/material';
+import {MatRadioModule} from '@angular/material/radio';
 import {SimpleRadioButtons} from './radio-e2e';
 
 @NgModule({

src/e2e-app/sidenav/sidenav-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatSidenavModule} from '@angular/material';
+import {MatSidenavModule} from '@angular/material/sidenav';
 import {SidenavE2E} from './sidenav-e2e';
 
 @NgModule({

src/e2e-app/slide-toggle/slide-toggle-e2e-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatSlideToggleModule} from '@angular/material';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {SlideToggleE2E} from './slide-toggle-e2e';
 
 @NgModule({

src/e2e-app/tabs/tabs-e2e-module.ts

@@ -7,7 +7,9 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatFormFieldModule, MatInputModule, MatTabsModule} from '@angular/material';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatTabsModule} from '@angular/material/tabs';
 import {BasicTabs} from './tabs-e2e';
 
 @NgModule({

src/e2e-app/tsconfig.json

@@ -7,7 +7,6 @@
     "paths": {
       "@angular/cdk/*": ["../cdk/*"],
       "@angular/material/*": ["../material/*"],
-      "@angular/material": ["../material/public-api.ts"],
       "@angular/material-experimental/*": ["../material-experimental/*"],
       "@angular/material-experimental": ["../material-experimental/"],
       "@angular/cdk-experimental/*": ["../cdk-experimental/*"],