How to create a custom Angular material module? (Material v2.0.0-beta.3)

Question

I used to import the material library into the base module, app.module.ts, but Angular Material v2.0.0-beta.3 condemns the Material module. According to the change ( https://github.com/angular/material2/blob/master/CHANGELOG.md ) now you must create a custom module that imports the individual components of the Material. I can not do this job.

This approach:

@NgModule({ declarations: [ MdInputModule ], imports: [ CommonModule, MdInputModule ], exports: [ MdInputModule ] }) export class FooMaterialModule {} 

Causes this error:

Missed error: unexpected module "MdInputModule" declared by the module "FooMaterialModule". Add the note @ Pipe / @ Directive / @ Component.

How to create a custom module for the Angular content library?

Answer 1

Your custom Angular Material module may reflect an obsolete Material module .

As the change log shows, you want to comment out material components not used by your application.

We found that in the current world turmoil, the use of an aggregate NgModule, such as MaterialModule, means that tools cannot eliminate code for unused components.

To provide users with the smallest code size possible, we do not recommend the MaterialModule, which will be removed in a future release.

To replace the MaterialModule, users can create their own “Material” module in their application (for example, GmailMaterialModule), which only imports the set of components actually used in the application.

my-material.module.ts

 import {NgModule} from '@angular/core'; import {A11yModule} from '@angular/cdk/a11y'; import {DragDropModule} from '@angular/cdk/drag-drop'; import {PortalModule} from '@angular/cdk/portal'; import {ScrollingModule} from '@angular/cdk/scrolling'; import {CdkStepperModule} from '@angular/cdk/stepper'; import {CdkTableModule} from '@angular/cdk/table'; import {CdkTreeModule} from '@angular/cdk/tree'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatBadgeModule} from '@angular/material/badge'; import {MatBottomSheetModule} from '@angular/material/bottom-sheet'; import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatChipsModule} from '@angular/material/chips'; import {MatStepperModule} from '@angular/material/stepper'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatDialogModule} from '@angular/material/dialog'; import {MatDividerModule} from '@angular/material/divider'; import {MatExpansionModule} from '@angular/material/expansion'; import {MatGridListModule} from '@angular/material/grid-list'; import {MatIconModule} from '@angular/material/icon'; import {MatInputModule} from '@angular/material/input'; import {MatListModule} from '@angular/material/list'; import {MatMenuModule} from '@angular/material/menu'; import {MatNativeDateModule, MatRippleModule} from '@angular/material/core'; import {MatPaginatorModule} from '@angular/material/paginator'; import {MatProgressBarModule} from '@angular/material/progress-bar'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatRadioModule} from '@angular/material/radio'; import {MatSelectModule} from '@angular/material/select'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatSliderModule} from '@angular/material/slider'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatSnackBarModule} from '@angular/material/snack-bar'; import {MatSortModule} from '@angular/material/sort'; import {MatTableModule} from '@angular/material/table'; import {MatTabsModule} from '@angular/material/tabs'; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatTreeModule} from '@angular/material/tree'; @NgModule({ exports: [ A11yModule, CdkStepperModule, CdkTableModule, CdkTreeModule, DragDropModule, MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatStepperModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule, PortalModule, ScrollingModule, ] }) export class MyMaterialModule {} 

app.module.ts

 import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserModule } from '@angular/platform-browser'; ... import { MyMaterialModule } from './my-material.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserAnimationsModule, BrowserModule, ... MyMaterialModule ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { } 

Answer 2

You can create a functional module that looks like this:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MdInputModule } from '@angular/material'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ imports: [ CommonModule ], exports: [ MdInputModule BrowserAnimationsModule ] }) export class CustomMaterialModule { } 

Then import it into your app.module.ts:

 import {CustomMaterialModule} from "./custom-material/custom-material.module"; ... @NgModule({ ... imports: [ ... CustomMaterialModule ] ... })