More than 5 years have passed since last update.

[バッドノウハウ]angular-cliのテンプレートファイルを書き換える

Posted at 2017-02-27

angular-cliで作成されるテンプレートが気に入らないという声がありました。シングルクォーテーションが嫌だとか、ここの空白が気に入らないなど。私は長いものに巻かれる主義なので基本的には作成されたテンプレートで作りますが、こだわりの強い人のためにテンプレートを変更する方法を考えました。

準備

angular-cliをプロジェクトにインストールする。バージョンによってフォルダ構成が変わる可能性があるのでバージョンは固定で入れる。
```
npm install @angular/cli@1.0.0-beta.32.3  —save-dev
```
ファイルコピペするためのプラグインをインストールする。
```
npm install cpx —save-dev
```
テンプレを任意のディレクトリ（ここではcli-template）にコピーする
```
cp -r ./node_modules/@angular/cli/blueprints cli-template      
```
cli-template内のテンプレを自分の好きなテンプレートに書き換える。
package.jsonファイルのscriptsに次のコマンドを追加する。postinstallコマンドは、npm installコマンドが実行された後に実行されるコマンドで、node_modules以下のテンプレートフォルダをcli-templateフォルダで上書きするコードです。
package.json

"scripts": {
"ng": "ng",
"postinstall": "cpx 'cli-template/**/.' node_modules/@angular/cli/blueprints"
},
...略...
```

ngコマンドを使うときはnpm scripts経由で実行します。

npm run ng g component piyopiyo

こだわりを持つことも大事ですが、バージョンの変更で構成が変わったりがありますし、チームへの周知も必須です。危険なので出来る限りやめた方が良いです。