title: How Can I create a wrapper module in Angular2 for multiple modules?
body: <p>I am currently trying to clean up my project structure and I wanted to keep my AppComponent as clean as possible. I am importing angular2 material in its own file:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  
  // Material
  import { MdCardModule } from '@angular2-material/card';
  import { MdButtonModule } from '@angular2-material/button';
  import { MdInputModule } from '@angular2-material/input';
  import { MdToolbarModule } from '@angular2-material/toolbar';
  import { MdListModule } from '@angular2-material/list';
  import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';
  
  export const MATERIAL_UI_MODULES = [
    MdCardModule,
    MdButtonModule,
    MdInputModule,
    MdToolbarModule,
    MdIconModule,
    MdListModule
  ]
  export const MATERIAL_UI_REGISTRIES = [
    MdIconRegistry
  ]
  </code></pre>
  
  <p>and inside my AppController I am using it as follows:</p>
  
  <pre><code>const APP_PROVIDERS = [
    ...MATERIAL_UI_REGISTRIES
  ];
  
  const APP_MODULES = [
      ...MATERIAL_UI_MODULES,
  ];
  
  @NgModule({
    imports:APP_MODULES,
    declarations: APP_DECLARATIONS,
    bootstrap:[AppComponent],
    providers: APP_PROVIDERS,
  })
  export class AppModule {
  
  }
  </code></pre>
  
  <p>but is there a way to create a <code>MaterialModule</code> that I can just import and not have to worry about adding individual modules or providers.</p>
  
  <p>I have tried creating a MaterialModule:</p>
  
  <pre><code>@NgModule({
    imports:[
      ...MATERIAL_UI_MODULES,
    ],
    providers: MATERIAL_UI_REGISTRIES,
  })
  export class MaterialModule {
  
  }
  </code></pre>
  
  <p>and importing in my AppComponent:</p>
  
  <pre><code>@NgModule({
    imports:[
      //...MATERIAL_UI_MODULES,
      MaterialModule,
      FormsModule,
      BrowserModule,
      routing,
      ComponentsModule
    ],
    declarations: APP_DECLARATIONS,
    bootstrap:[AppComponent],
    providers: APP_PROVIDERS,
  })
  export class AppModule {
  
  }
  </code></pre>
  
  <p>But I get the following error</p>
  
  <pre><code>zone.js:355 Unhandled Promise rejection: Template parse errors:
  'md-card-title' is not a known element:
  1. If 'md-card-title' is an Angular component, then verify that it is part of this module.
  2. If 'md-card-title' is a Web Component then add    "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to 
  suppress this message. ("....
  </code></pre>