From fa5b4278ffc322d890209793bec9861946ff0dd7 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Mon, 22 May 2017 23:52:53 +0200 Subject: [PATCH] chore: no longer use MaterialModule (#4571) * Replaces the `MaterialModule` with custom NgModules that contain all required Material modules. Closes #4532 --- src/demo-app/demo-app-module.ts | 57 +++++++++++++++---- src/e2e-app/e2e-app-module.ts | 30 +++++++++- src/material-examples/example-module.ts | 43 +++++++++++++- .../src/app/pixacto.dashboard.module.ts | 20 ++++++- 4 files changed, 132 insertions(+), 18 deletions(-) diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index 13bf216435c..6c033931e6b 100644 --- a/src/demo-app/demo-app-module.ts +++ b/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, diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts index 6bcbc485209..30f9c3220df 100644 --- a/src/e2e-app/e2e-app-module.ts +++ b/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: [ diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts index fb53dc4826f..e21a6469160 100644 --- a/src/material-examples/example-module.ts +++ b/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, diff --git a/tools/screenshot-test/src/app/pixacto.dashboard.module.ts b/tools/screenshot-test/src/app/pixacto.dashboard.module.ts index 6ad767b70e1..3cff5d19cf5 100644 --- a/tools/screenshot-test/src/app/pixacto.dashboard.module.ts +++ b/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],