@nyamogera
Posted at

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

Angular2angular-cli
More than 1 year has passed since last update.

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


準備



  1. angular-cliをプロジェクトにインストールする。バージョンによってフォルダ構成が変わる可能性があるのでバージョンは固定で入れる。

    npm install @angular/cli@1.0.0-beta.32.3  —save-dev



  2. ファイルコピペするためのプラグインをインストールする。

    npm install cpx —save-dev



  3. テンプレを任意のディレクトリ（ここではcli-template）にコピーする

    cp -r ./node_modules/@angular/cli/blueprints cli-template


  4. cli-template内のテンプレを自分の好きなテンプレートに書き換える。



  5. 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


あとがき

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


参考

Angular-CLIチートシート#独自のテンプレートで出力したいとき - Qiita

Edit request
3