不能添加材料设计元素到样板应用程序

Question

我正在尝试添加材料设计元素来快速启动angular应用程序

在app.module.ts中添加了以下内容:

import {MaterialModule} from '@angular/material';
@NgModule({
  imports:      [ BrowserModule, MaterialModule.forRoot()],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

在app.component.ts中添加了以下内容:

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1><md-slide-toggle>Slide Toggle</md-slide-toggle>',
})

这是活塞 http://plnkr.co/edit/gAIVxRTA0QZNu3uTC66k?

Answer 1

DEMO: http://plnkr.co/edit/IpeusijLdoTb6p27m7d7?p=preview

---

您缺少如下所述的必需的东西

1) 你需要先添加angular2-material包才能使用它

systemjs.config.js

'@angular/material':'npm:@angular/material/material.umd.js',  //<<<### added this

2)angular2-material需要hammer.js支持。因此，您还需要将它包含在index.html

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

Answer 2

在systemjs.config.js中添加以下代码解决了问题

packages: {
  '@angular/material': {
    format: 'cjs',
    main: 'material.umd.js'
  }
}

或以下也可以解决:

'@angular/material':'npm:@angular/material/material.umd.js'