Angular 2 Componentのnode moduleを最小限の構成で作る

モチベーション

Angular2のコンポーネントを共有したい。

具体的には共有したいコンポーネントを@NgModuleで包んでnode moduleにして、いろんなプロジェクトからnpm installして使えるようにしたい。 最低限の構成でこれを実現するnode moduleプロジェクトmydatelibと、mydatelibを利用するプロジェクトconsumerを作った。

構成

root // 作業ディレクトリ
├─mydatelib
│  ├─dest
│  ├─src
│  │  ├─index.ts
│  │  ├─mydatelib.module.ts
│  │  └─datetime.component.ts
│  ├─tsconfig.json
│  └─package.json
└─ consumer //angular2-seedからゆるく作る。

mydatelib

作業スペースrootを作る。

mkdir root
cd root

mydatelibプロジェクトを作る。

mkdir mydatelib
cd mydatelib
mkdir src

npm initしてAngular2としての最低限のライブラリと、ngcをインストール。 最低限すぎるのでyarnさえ使わない。

npm init -y
npm i -S @angular/core rxjs zone.js
npm i -D typescript @angular/compiler @angular/compiler-cli

packageとtsのコンパイル設定

package.jsonを編集して、配布ディレクトリを指定。ngcをスクリプトに登録。

"main": "dest/index.js",
"files": ["dest"],
"scripts": {
  "ngc": "ngc"
},

tsc --initしてtsconfig.jsonを作る。

./node_modules/.bin/tsc --init

tsconfig.jsonを編集。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "declaration": true,
        "outDir": "dest",
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "lib": ["es6", "dom"]
    }
}

コンポーネントとモジュールをかく

時刻表示コンポーネント

datetime.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'datetime',
  template: '<p>{{date}}</p>'
})
export class DateTimeComponent {
  date: string = new Date().toString();
}

モジュール

mydatelib.module.ts

import { NgModule } from '@angular/core';
import { DateTimeComponent } from './datetime.component';

@NgModule({
  declarations: [
    DateTimeComponent
  ],
  exports: [
    DateTimeComponent
  ]
})
export class MyDateLibModule {}

index

index.ts

export * from './mydatelib.module';

ビルドする

npm run ngc

エラーが出なかった完了

mydatelibを利用するconsumer

angular2-seedをベースにrootディレクトリにconsumerプロジェクトを作る。

cd .. // rootに移動
git clone https://github.com/angular/angular2-seed.git consumer
cd consumer

angular2-seedデフォルトのnode moduleをインストール

npm install

一旦動かしてみる

npm start

http://localhost:3000 にアクセスするとこんなんが出る。

Angular 2 Seedの下あたりにDateTimeComponentを挿入してみることにする

mydatelibインストール

npm i -S ../mydatelib 

ここはgitからインストールするか、プライベートnpmリポジトリからインストールできるように変えたい

DateTimeComponentが表示されるように関連ソースを更新

モジュール

src/app/にあるapp.module.ts

import文を書く。読み込むのはモジュールだけ。

import { MyDateLibModule } from 'mydatelib/dest';

@NgModuleの中にもMyDateLibModuleを書く。

  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot(rootRouterConfig, { useHash: true }),
    MyDateLibModule // これ！
  ],

AppComponentのテンプレートを編集

src/appにあるapp.component.html

</h3>と<nav>の間にDateTimeComponentのselectorを書く。

</h3>
<datetime></datetime>
<nav>

動作確認

npm start

http://localhost:3000/ を開く。

やったね。