Импорт Материал дизайн Угловое 2 + WebPack

Question

Я новичок в Угловое 2 и есть проблема я использую Angular2 + WebPack, я импортировать угловые компоненты материала, но он не работает

////////////////// 
 
// 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'. 
 
})

Я использую неправильную версию или не включил что-то?

Answer 1

@angular2-material довольно старый и устаревший.

Вы должны использовать @angular/material.

Я не уверен, что MetarialModule.forRoot() необходим в последней версии. Я думаю, что в любом случае вы можете оставить его, но он будет устаревшим в ближайшее время.

Поскольку вы импортировали MaterialModule в свой модуль, вам не нужно импортировать каждый компонент материала по одному. У вас будет доступ к ним напрямую.

Если вы хотите использовать материал в другом модуле, чем тот, который вы импортировали MetarialModule.forRoot(), не забудьте импортировать (только) MaterialModule.

---

Дружеский совет [по теме]:

Я новичок в угловыми 2 и есть проблема, которую я использую Angular2 + WebPack

Если вы не хотите Чтобы справиться с такими вещами самостоятельно и сосредоточиться на Угловом, вы должны использовать angular-cli.

Если вы хотите, чтобы попробовать с последней версией:

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

Вы теперь настройки.

Чтобы построить: ng build --prod

Посмотрите в репозиторий Github, чтобы быть в курсе команд, которые вы можете использовать ng generate ... и т.д.