如何在Angular2中为多个模块创建包装模块？

Question

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:

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
]

and inside my AppController I am using it as follows:

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 {

}

but is there a way to create a MaterialModule that I can just import and not have to worry about adding individual modules or providers.

I have tried creating a MaterialModule:

@NgModule({
  imports:[
    ...MATERIAL_UI_MODULES,
  ],
  providers: MATERIAL_UI_REGISTRIES,
})
export class MaterialModule {

}

and importing in my AppComponent:

@NgModule({
  imports:[
    //...MATERIAL_UI_MODULES,
    MaterialModule,
    FormsModule,
    BrowserModule,
    routing,
    ComponentsModule
  ],
  declarations: APP_DECLARATIONS,
  bootstrap:[AppComponent],
  providers: APP_PROVIDERS,
})
export class AppModule {

}

But I get the following error

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. ("....

Answer 1

You can use SharedModule . Declare common things in SharedModule and then import SharedModule in components where you want to use common things.

Learn more about SharedModule here : https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module