将Material Design导入Angular 2 + Webpack

Question

I'm new to Angular 2 and have a problem I use Angular2 + webpack, I'm importing Angular Material components but it doesn't work

 ////////////////// // WEBPACK /////////// new DllBundlesPlugin({ bundles: { '@angular/material', } }) // APP MODULE import { MaterialModule } from '@angular/material'; // Should I use @angular/material or @angular2-material import { MaterialModule } from '@angular2-material'; import 'hammerjs'; @NgModule({ imports: [MetarialModule.forRoot()] }) // COMPONENT // import { MdButton } from '@angular/material'; import { MdButton } from '@angular2-material/button'; @Component({ selector: 'test', templateUrl: './test.html', directive: [MdButton] // It says //Generic type 'Type<T>' requires 1 type argument(s) // Argument of type '{ selector: string; template: any; directives: typeof MdButton[]; }' is not assignable to parameter of type 'Component'. //Object literal may only specify known properties, and 'directives' does not exist in type 'Component'. }) 

Am I using wrong version or haven't include something ?

Answer 1

@angular2-material is quite old and deprecated.

You should use @angular/material .

I'm not sure MetarialModule.forRoot() is needed in the latest release. I think that anyway you can leave it but it'll be deprecated soon.

As you've imported MaterialModule in your module, you don't need to import every material component one by one. You'll have access to them directly.

If you want to use material in an other module than the one you imported MetarialModule.forRoot(), remember to import ( only ) MaterialModule.

---

Friendly advice [off topic]:

I'm new to Angular 2 and have a problem I use Angular2 + webpack

If you don't want to have to handle that kind of things on your own and focus on Angular, you should rather use angular-cli .

If you want to give a try with latest version :

npm install -g @angular/cli
ng new your-awesome-project
cd your-awesome-project
ng serve

You're now setup 👍.

To build : ng build --prod

Take a look in the Github repo to be aware of the commands that you can use ng generate ... etc.