chore: no longer use MaterialModule (#4571)

* Replaces the `MaterialModule` with custom NgModules that contain all required Material modules.

Closes #4532

Author: devversion

src/demo-app/demo-app-module.ts

@@ -4,14 +4,7 @@ import {HttpModule} from '@angular/http';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {DemoApp, Home, DemoAppOnPush} from './demo-app/demo-app';
-import {
-  FullscreenOverlayContainer,
-  MaterialModule,
-  MdNativeDateModule,
-  MdSelectionModule,
-  OverlayContainer
-} from '@angular/material';
+import {DemoApp, DemoAppOnPush, Home} from './demo-app/demo-app';
 import {DEMO_APP_ROUTES} from './demo-app/routes';
 import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
 import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog/dialog-demo';
@@ -45,6 +38,50 @@ import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputDemo} from './input/input-demo';
 import {StyleDemo} from './style/style-demo';
 import {DatepickerDemo} from './datepicker/datepicker-demo';
+import {FullscreenOverlayContainer, OverlayContainer} from '@angular/material';
+import {
+  MdAutocompleteModule, MdButtonModule, MdButtonToggleModule, MdCardModule, MdCheckboxModule,
+  MdChipsModule, MdCoreModule, MdDatepickerModule, MdDialogModule, MdGridListModule, MdIconModule,
+  MdInputModule, MdListModule, MdMenuModule, MdNativeDateModule, MdProgressBarModule, MdRadioModule,
+  MdProgressSpinnerModule, MdRippleModule, MdSelectModule, MdSidenavModule, MdSliderModule,
+  MdSlideToggleModule, MdSnackBarModule, MdTabsModule, MdToolbarModule, MdTooltipModule
+} from '@angular/material';
+
+/**
+ * NgModule that includes all Material modules that are required to serve the demo-app.
+ */
+@NgModule({
+  exports: [
+    MdAutocompleteModule,
+    MdButtonModule,
+    MdButtonToggleModule,
+    MdCardModule,
+    MdCheckboxModule,
+    MdChipsModule,
+    MdDatepickerModule,
+    MdDialogModule,
+    MdGridListModule,
+    MdIconModule,
+    MdInputModule,
+    MdListModule,
+    MdMenuModule,
+    MdCoreModule,
+    MdProgressBarModule,
+    MdProgressSpinnerModule,
+    MdRadioModule,
+    MdRippleModule,
+    MdSelectModule,
+    MdSidenavModule,
+    MdSlideToggleModule,
+    MdSliderModule,
+    MdSnackBarModule,
+    MdTabsModule,
+    MdToolbarModule,
+    MdTooltipModule,
+    MdNativeDateModule,
+  ]
+})
+export class DemoMaterialModule {}
 
 
 @NgModule({
@@ -55,9 +92,7 @@ import {DatepickerDemo} from './datepicker/datepicker-demo';
     HttpModule,
     ReactiveFormsModule,
     RouterModule.forRoot(DEMO_APP_ROUTES),
-    MaterialModule,
-    MdNativeDateModule,
-    MdSelectionModule,
+    DemoMaterialModule,
   ],
   declarations: [
     AutocompleteDemo,

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

@@ -15,17 +15,43 @@ import {ListE2E} from './list/list-e2e';
 import {ProgressBarE2E} from './progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from './progress-spinner/progress-spinner-e2e';
 import {FullscreenE2E, TestDialog as TestDialogFullScreen} from './fullscreen/fullscreen-e2e';
-import {MaterialModule, OverlayContainer, FullscreenOverlayContainer} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
 import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
 import {InputE2E} from './input/input-e2e';
 import {BlockScrollStrategyE2E} from './block-scroll-strategy/block-scroll-strategy-e2e';
+import {
+  OverlayContainer, FullscreenOverlayContainer, MdGridListModule, MdProgressBarModule,
+  MdProgressSpinnerModule, MdTabsModule, MdRadioModule, MdSlideToggleModule, MdMenuModule,
+  MdListModule, MdInputModule, MdIconModule, MdDialogModule, MdCheckboxModule, MdButtonModule
+} from '@angular/material';
+
+/**
+ * NgModule that contains all Material modules that are required to serve the e2e-app.
+ */
+@NgModule({
+  exports: [
+    MdButtonModule,
+    MdCheckboxModule,
+    MdDialogModule,
+    MdGridListModule,
+    MdIconModule,
+    MdInputModule,
+    MdListModule,
+    MdMenuModule,
+    MdSlideToggleModule,
+    MdRadioModule,
+    MdProgressBarModule,
+    MdProgressSpinnerModule,
+    MdTabsModule
+  ]
+})
+export class E2eMaterialModule {}
 
 @NgModule({
   imports: [
     BrowserModule,
     RouterModule.forRoot(E2E_APP_ROUTES),
-    MaterialModule,
+    E2eMaterialModule,
     NoopAnimationsModule,
   ],
   declarations: [

src/material-examples/example-module.ts

@@ -1,7 +1,6 @@
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
-import {MaterialModule} from '@angular/material';
 import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
 import {ButtonOverviewExample} from './button-overview/button-overview-example';
 import {ButtonTypesExample} from './button-types/button-types-example';
@@ -71,7 +70,13 @@ import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {SelectFormExample} from './select-form/select-form-example';
 import {DatepickerOverviewExample} from './datepicker-overview/datepicker-overview-example';
-
+import {
+  MdAutocompleteModule, MdButtonModule, MdButtonToggleModule, MdCardModule, MdCheckboxModule,
+  MdChipsModule, MdDatepickerModule, MdDialogModule, MdGridListModule, MdIconModule, MdInputModule,
+  MdListModule, MdMenuModule, MdProgressBarModule, MdProgressSpinnerModule, MdRadioModule,
+  MdSelectModule, MdSliderModule, MdSlideToggleModule, MdSnackBarModule, MdTabsModule,
+  MdToolbarModule, MdTooltipModule
+} from '@angular/material';
 
 export interface LiveExample {
   title: string;
@@ -168,6 +173,38 @@ export const EXAMPLE_COMPONENTS = {
   'tooltip-position': {title: 'Tooltip with custom position', component: TooltipPositionExample},
 };
 
+/**
+ * NgModule that includes all Material modules that are required to serve the examples.
+ */
+@NgModule({
+  exports: [
+    MdAutocompleteModule,
+    MdButtonModule,
+    MdButtonToggleModule,
+    MdCardModule,
+    MdCheckboxModule,
+    MdChipsModule,
+    MdDatepickerModule,
+    MdDialogModule,
+    MdGridListModule,
+    MdIconModule,
+    MdInputModule,
+    MdListModule,
+    MdMenuModule,
+    MdProgressBarModule,
+    MdProgressSpinnerModule,
+    MdRadioModule,
+    MdSelectModule,
+    MdSlideToggleModule,
+    MdSliderModule,
+    MdSnackBarModule,
+    MdTabsModule,
+    MdToolbarModule,
+    MdTooltipModule
+  ]
+})
+export class ExampleMaterialModule {}
+
 /**
  * The list of all example components.
  * We need to put them in both `declarations` and `entryComponents` to make them work.
@@ -230,7 +267,7 @@ export const EXAMPLE_LIST = [
   declarations: EXAMPLE_LIST,
   entryComponents: EXAMPLE_LIST,
   imports: [
-    MaterialModule,
+    ExampleMaterialModule,
     FormsModule,
     ReactiveFormsModule,
     CommonModule,

tools/screenshot-test/src/app/pixacto.dashboard.module.ts

@@ -3,15 +3,31 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MaterialModule} from '@angular/material';
 import {FirebaseService} from './firebase.service';
 import {routing} from './routes';
+import {
+  MdToolbarModule, MdButtonModule, MdCardModule, MdButtonToggleModule, MdIconModule,
+  MdSnackBarModule, MdTooltipModule
+} from '@angular/material';
 
 import {PixactoDashboardComponent} from './pixacto.dashboard.component';
 import {ViewerComponent} from './viewer/viewer.component';
 import {ResultComponent} from './result/result.component';
 import {NavComponent} from './nav/nav.component';
 
+@NgModule({
+  exports: [
+    MdToolbarModule,
+    MdButtonModule,
+    MdCardModule,
+    MdButtonToggleModule,
+    MdIconModule,
+    MdTooltipModule,
+    MdSnackBarModule
+  ]
+})
+export class PixactoMaterialModule {}
+
 @NgModule({
   declarations: [
     PixactoDashboardComponent,
@@ -24,7 +40,7 @@ import {NavComponent} from './nav/nav.component';
     BrowserAnimationsModule,
     FormsModule,
     HttpModule,
-    MaterialModule,
+    PixactoMaterialModule,
     routing,
   ],
   providers: [FirebaseService],