AngluarCLIでComponentを作成する際にVue.jsの単一ファイルコンポーネントっぽく、1Component1ファイルとする方法を紹介します。

やってみる

コマンド実行時のオプションで指定

$ ng g c <コンポーネント名>

コンポーネント作成(単一ファイルコンポーネント)

$ ng g c --inline-style --inline-template <コンポーネント名>

--inline-style --inline-templateオプションを付けて実行することでcss、htmlの内容がtsファイルにインラインで記述されます。

※ gはgenerateのエイリアス
※ cはcomponentのエイリアス

.angular-cli.jsonに設定を記述

事前にプロジェクトの設定ファイルに記述しておく方法です。

.angular-cli.json(デフォルト)

...
  "defaults": {
    "styleExt": "css",
    "class": {
      "spec": false
    },
    "component": {}
  }
}

.angular-cli.json(単一ファイルコンポーネント)

...
  "defaults": {
    "styleExt": "css",
    "class": {
      "spec": false
    },
    "component": {
      "inlineStyle": true,
      "inlineTemplate": true
    }
  }
}

以上です。

確認

オプション指定、もしくは.angular-cli.jsonに設定を記述した状態でComponentを作成してみます。

f:id:daikiojm:20171202140127p:plain

作成されたコンポーネントを確認すると、一つのtsファイルにstyleとテンプレートがまとまっているのが分かるかと思います。

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

@Component({
  selector: 'app-one-file',
  template: `
    <p>
      one-file works!
    </p>
  `,
  styles: []
})
export class OneFileComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}