我在使用angular-cli v1.0.0.beta.1创建的项目中添加了angular2-material。

因为解释得太少，所以感觉到一种“你搞懂SystemJS了吧？”的氛围，虽然不知道它的正确使用方式，但还是记录下来，说不定会有用。

我试过的是md-toolbar。
我想要这样使用它。

<md-toolbar color="primary">
  <span>{{title}}</span>
</md-toolbar>

任务内容

首先，使用npm安装angular2-material的核心组件。

$ npm install --save @angular2-material/core @angular2-material/toolbar

只要查看npm上的angular2-material，就可以知道有哪些组件。可能查看源代码会更快一些。

接下来，我在angular-cli-build.js中添加了一项设置，以便在构建过程中将angular2-material配置到dist目录中。

 module.exports = function(defaults) {
   return new Angular2App(defaults, {
     vendorNpmFiles: [
       'systemjs/dist/system-polyfills.js',
       'systemjs/dist/system.src.js',
       'zone.js/dist/*.js',
       'es6-shim/es6-shim.js',
       'reflect-metadata/*.js',
       'rxjs/**/*.js',
-      '@angular/**/*.js'
+      '@angular/**/*.js',
+      '@angular2-material/**/*.js'
     ]
   });
 };

接下来，配置 src/system-config.ts。

修改了packages的常数。

const packages: any = {
  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  },
  '@angular2-material/toolbar': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'toolbar.js'
  },
};

我在System.config的map中添加了@angular2-material的设置。

 System.config({
   map: {
     '@angular': 'vendor/@angular',
+    '@angular2-material': 'vendor/@angular2-material',
     'rxjs': 'vendor/rxjs',
     'main': 'main.js'
   },

可能是因为在构建时文件会被放置在vendor/@angular2-material目录下，所以进行路径映射以便在@angular2-material中进行导入。

应该可以通过这个来导入，所以在想使用md-toolbar的组件中，将其导入并放入指令中就可以使用了。

import { Component } from '@angular/core';
import { MdToolbar } from '@angular2-material/toolbar';


@Component({
  moduleId: module.id,
  selector: 'hoge',
  templateUrl: 'hoge.component.html',
  styleUrls: ['hoge.component.css'],
  directives: [MdToolbar],  // MdToolbarを追加
})
export class HogeAppComponent {
  title = 'ほげ';
}

<md-toolbar color="primary">
  <span>{{title}}</span>
</md-toolbar>

由于我对Angular 2和SystemJS仍然不太清楚，所以准确性未知。