angular-cliでつくった雛形にangular2-materialを追加したときのメモ

angular-cliのv1.0.0.beta.1でつくったプロジェクトにangular2-materialを追加した。

説明がなさすぎて「SystemJSわかるでしょ?」みたいな空気を感じたし、正しい使い方のどうかは知らないが記録しておくと役に立つかもしれないので記録しておく。

ためしたのはmd-toolbar。
こんな風につかいたい。

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

作業内容

まず、npmでangular2-materialのcoreとつかいたいコンポーネントをいれる。

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

どんなコンポーネントがあるかはnpmのangular2-materialを見ればいい気がする。ソースとかみたほうが早いかもしれない。

つづいて、ビルド時にdistディレクトリにangular2-materialが配置されるようにするんだと思われる設定をangular-cli-build.js に加えた。

 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定数を修正した。

src/system-config.ts

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

あとSytem.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をつかいたいcomponentでimportしてディレクティブにいれてあげたら使えた。

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 = 'ほげ';
}

hoge.component.html

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

angular2もSystemJSもまだよくわかってないので正確性は不明。