feat(modules): add forRoot to material modules (#1122)

Author: hansl

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

@@ -39,8 +39,8 @@ import {TabsDemo} from './tabs/tab-group-demo';
     BrowserModule,
     FormsModule,
     HttpModule,
-    MaterialModule,
-    RouterModule.forRoot(DEMO_APP_ROUTES)
+    RouterModule.forRoot(DEMO_APP_ROUTES),
+    MaterialModule.forRoot(),
   ],
   declarations: [
     BaselineDemo,

src/demo-app/dialog/dialog-demo.ts

@@ -1,13 +1,11 @@
 import {Component, ViewContainerRef} from '@angular/core';
 import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular2-material/dialog/dialog';
-import {OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay';
 
 @Component({
   moduleId: module.id,
   selector: 'dialog-demo',
   templateUrl: 'dialog-demo.html',
   styleUrls: ['dialog-demo.css'],
-  providers: [MdDialog, OVERLAY_PROVIDERS]
 })
 export class DialogDemo {
   dialogRef: MdDialogRef<JazzDialog>;

src/demo-app/overlay/overlay-demo.ts

@@ -10,7 +10,6 @@ import {
     Overlay,
     OverlayState,
     OverlayOrigin,
-    OVERLAY_PROVIDERS,
     ComponentPortal,
     Portal,
     TemplatePortalDirective,
@@ -22,7 +21,6 @@ import {
   selector: 'overlay-demo',
   templateUrl: 'overlay-demo.html',
   styleUrls: ['overlay-demo.css'],
-  providers: [OVERLAY_PROVIDERS],
   encapsulation: ViewEncapsulation.None,
 })
 export class OverlayDemo {

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

@@ -13,8 +13,8 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
 @NgModule({
   imports: [
     BrowserModule,
-    MaterialModule,
     RouterModule.forRoot(E2E_APP_ROUTES),
+    MaterialModule.forRoot(),
   ],
   declarations: [
     E2EApp,

src/lib/all/all.ts

@@ -1,4 +1,4 @@
-import {NgModule} from '@angular/core';
+import {NgModule, ModuleWithProviders} from '@angular/core';
 import {MdButtonToggleModule} from '@angular2-material/button-toggle/button-toggle';
 import {MdButtonModule} from '@angular2-material/button/button';
 import {MdCheckboxModule} from '@angular2-material/checkbox/checkbox';
@@ -52,8 +52,45 @@ const MATERIAL_MODULES = [
 ];
 
 @NgModule({
-  imports: MATERIAL_MODULES,
+  imports: [
+    MdButtonModule,
+    MdCardModule,
+    MdCheckboxModule,
+    MdGridListModule,
+    MdInputModule,
+    MdListModule,
+    MdProgressBarModule,
+    MdProgressCircleModule,
+    MdRippleModule,
+    MdSidenavModule,
+    MdSliderModule,
+    MdSlideToggleModule,
+    MdTabsModule,
+    MdToolbarModule,
+    PortalModule,
+    RtlModule,
+
+    // These modules include providers.
+    MdButtonToggleModule.forRoot(),
+    MdDialogModule.forRoot(),
+    MdIconModule.forRoot(),
+    MdMenuModule.forRoot(),
+    MdRadioModule.forRoot(),
+    MdTooltipModule.forRoot(),
+    OverlayModule.forRoot(),
+  ],
   exports: MATERIAL_MODULES,
   providers: [MdLiveAnnouncer]
 })
-export class MaterialModule { }
+export class MaterialRootModule { }
+
+
+@NgModule({
+  imports: MATERIAL_MODULES,
+  exports: MATERIAL_MODULES,
+})
+export class MaterialModule {
+  static forRoot(): ModuleWithProviders {
+    return {ngModule: MaterialRootModule};
+  }
+}

src/lib/button-toggle/button-toggle.spec.ts

@@ -20,7 +20,7 @@ describe('MdButtonToggle', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdButtonToggleModule, FormsModule],
+      imports: [MdButtonToggleModule.forRoot(), FormsModule],
       declarations: [
         ButtonTogglesInsideButtonToggleGroup,
         ButtonToggleGroupWithNgModel,

src/lib/button-toggle/button-toggle.ts

@@ -1,5 +1,6 @@
 import {
     NgModule,
+    ModuleWithProviders,
     Component,
     ContentChildren,
     Directive,
@@ -385,18 +386,17 @@ export class MdButtonToggle implements OnInit {
   }
 }
 
-/** @deprecated */
-export const MD_BUTTON_TOGGLE_DIRECTIVES = [
-  MdButtonToggleGroup,
-  MdButtonToggleGroupMultiple,
-  MdButtonToggle
-];
-
 
 @NgModule({
   imports: [FormsModule],
-  exports: MD_BUTTON_TOGGLE_DIRECTIVES,
-  declarations: MD_BUTTON_TOGGLE_DIRECTIVES,
-  providers: [MdUniqueSelectionDispatcher],
+  exports: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
+  declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
 })
-export class MdButtonToggleModule { }
+export class MdButtonToggleModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: MdButtonToggleModule,
+      providers: [MdUniqueSelectionDispatcher]
+    };
+  }
+}

src/lib/button/button.ts

@@ -156,13 +156,9 @@ export class MdAnchor extends MdButton {
 }
 
 
-/** @deprecated */
-export const MD_BUTTON_DIRECTIVES: any[] = [MdButton, MdAnchor];
-
-
 @NgModule({
   imports: [CommonModule, MdRippleModule],
-  exports: MD_BUTTON_DIRECTIVES,
-  declarations: MD_BUTTON_DIRECTIVES,
+  exports: [MdButton, MdAnchor],
+  declarations: [MdButton, MdAnchor],
 })
 export class MdButtonModule { }

src/lib/card/card.ts

@@ -113,15 +113,15 @@ TODO(kara): update link to demo site when it exists
 })
 export class MdCardTitleGroup {}
 
-/** @deprecated */
-export const MD_CARD_DIRECTIVES: any[] = [
-  MdCard, MdCardContent, MdCardHeader, MdCardTitleGroup, MdCardTitle, MdCardSubtitle,
-  MdCardActions
-];
-
 
 @NgModule({
-  exports: MD_CARD_DIRECTIVES,
-  declarations: MD_CARD_DIRECTIVES,
+  exports: [
+    MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle,
+    MdCardActions
+  ],
+  declarations: [
+    MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle,
+    MdCardActions
+  ],
 })
 export class MdCardModule { }

src/lib/checkbox/checkbox.ts

@@ -304,12 +304,9 @@ export class MdCheckbox implements ControlValueAccessor {
   }
 }
 
-/** @deprecated */
-export const MD_CHECKBOX_DIRECTIVES = [MdCheckbox];
-
 
 @NgModule({
-  exports: MD_CHECKBOX_DIRECTIVES,
-  declarations: MD_CHECKBOX_DIRECTIVES,
+  exports: [MdCheckbox],
+  declarations: [MdCheckbox],
 })
 export class MdCheckboxModule { }

src/lib/core/core.ts

@@ -1,4 +1,4 @@
-import {NgModule} from '@angular/core';
+import {NgModule, ModuleWithProviders} from '@angular/core';
 import {MdLineModule} from './line/line';
 import {RtlModule} from './rtl/dir';
 import {MdRippleModule} from './ripple/ripple';
@@ -20,7 +20,6 @@ export {
 export {
   PortalHostDirective,
   TemplatePortalDirective,
-  PORTAL_DIRECTIVES,
   PortalModule,
 } from './portal/portal-directives';
 export {DomPortalHost} from './portal/dom-portal-host';
@@ -33,7 +32,6 @@ export {OverlayState} from './overlay/overlay-state';
 export {
   ConnectedOverlayDirective,
   OverlayOrigin,
-  OVERLAY_DIRECTIVES,
   OverlayModule,
 } from './overlay/overlay-directives';
 export {
@@ -45,7 +43,7 @@ export {
 export {MdGestureConfig} from './gestures/MdGestureConfig';
 
 // Ripple
-export {MD_RIPPLE_DIRECTIVES, MdRipple, MdRippleModule} from './ripple/ripple';
+export {MdRipple, MdRippleModule} from './ripple/ripple';
 
 // a11y
 export {
@@ -62,17 +60,15 @@ export {
 export {MdLineModule, MdLine, MdLineSetter} from './line/line';
 
 
-const coreModules = [
-  MdLineModule,
-  RtlModule,
-  MdRippleModule,
-  PortalModule,
-  OverlayModule,
-];
-
 @NgModule({
-  imports: coreModules,
-  exports: coreModules,
-  providers: [MdLiveAnnouncer],
+  imports: [MdLineModule, RtlModule, MdRippleModule, PortalModule, OverlayModule],
+  exports: [MdLineModule, RtlModule, MdRippleModule, PortalModule, OverlayModule],
 })
-export class MdCoreModule { }
+export class MdCoreModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: MdCoreModule,
+      providers: [MdLiveAnnouncer]
+    };
+  }
+}

src/lib/core/overlay/overlay-directives.spec.ts

@@ -11,7 +11,7 @@ describe('Overlay directives', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [OverlayModule],
+      imports: [OverlayModule.forRoot()],
       declarations: [ConnectedOverlayDirectiveTest],
       providers: [
         {provide: OverlayContainer, useFactory: () => {

src/lib/core/overlay/overlay-directives.ts

@@ -1,5 +1,6 @@
 import {
     NgModule,
+    ModuleWithProviders,
     Directive,
     TemplateRef,
     ViewContainerRef,
@@ -15,6 +16,7 @@ import {OverlayState} from './overlay-state';
 import {ConnectionPositionPair} from './position/connected-position';
 import {PortalModule} from '../portal/portal-directives';
 
+
 /** Default set of positions for the overlay. Follows the behavior of a dropdown. */
 let defaultPositionList = [
   new ConnectionPositionPair(
@@ -104,13 +106,16 @@ export class ConnectedOverlayDirective implements OnInit, OnDestroy {
 }
 
 
-export const OVERLAY_DIRECTIVES = [ConnectedOverlayDirective, OverlayOrigin];
-
-
 @NgModule({
   imports: [PortalModule],
-  exports: OVERLAY_DIRECTIVES,
-  declarations: OVERLAY_DIRECTIVES,
-  providers: OVERLAY_PROVIDERS,
+  exports: [ConnectedOverlayDirective, OverlayOrigin],
+  declarations: [ConnectedOverlayDirective, OverlayOrigin],
 })
-export class OverlayModule { }
+export class OverlayModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: OverlayModule,
+      providers: OVERLAY_PROVIDERS,
+    };
+  }
+}

src/lib/core/overlay/overlay.spec.ts

@@ -17,7 +17,7 @@ describe('Overlay', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [OverlayModule, PortalModule, OverlayTestModule],
+      imports: [OverlayModule.forRoot(), PortalModule, OverlayTestModule],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');

src/lib/core/overlay/overlay.ts

@@ -82,12 +82,10 @@ export class Overlay {
   }
 }
 
-
 /** Providers for Overlay and its related injectables. */
 export const OVERLAY_PROVIDERS = [
   ViewportRuler,
   OverlayPositionBuilder,
   Overlay,
   OverlayContainer,
 ];
-

src/lib/core/portal/portal-directives.ts

@@ -102,11 +102,9 @@ export class PortalHostDirective extends BasePortalHost {
   }
 }
 
-export const PORTAL_DIRECTIVES = [TemplatePortalDirective, PortalHostDirective];
-
 
 @NgModule({
-  exports: PORTAL_DIRECTIVES,
-  declarations: PORTAL_DIRECTIVES,
+  exports: [TemplatePortalDirective, PortalHostDirective],
+  declarations: [TemplatePortalDirective, PortalHostDirective],
 })
 export class PortalModule { }

src/lib/core/ripple/ripple.ts

@@ -168,12 +168,9 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges {
   // TODO: Reactivate the background div if the user drags out and back in.
 }
 
-/** @deprecated */
-export const MD_RIPPLE_DIRECTIVES = [MdRipple];
-
 
 @NgModule({
-  exports: MD_RIPPLE_DIRECTIVES,
-  declarations: MD_RIPPLE_DIRECTIVES,
+  exports: [MdRipple],
+  declarations: [MdRipple],
 })
 export class MdRippleModule { }

src/lib/dialog/dialog.spec.ts

@@ -15,7 +15,7 @@ describe('MdDialog', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdDialogModule, DialogTestModule],
+      imports: [MdDialogModule.forRoot(), DialogTestModule],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');