![見出し画像](https://assets.st-note.com/production/uploads/images/104399898/rectangle_large_type_2_a98922166c8e242b92b965a711c5a8ac.png?width=1200)
Angular_新しいコンポーネントを追加する_angular.json #370
GW中日、有給を取ってひたすらAngularと向き合った1日でした。
色々と学び得たものはあるのですが、まとまったものからアウトプットしていきます。
プロジェクトに新しいコンポーネントを追加する手順です。
Angularのコンポーネントは4つのファイル(.ts, .spec.ts, html, css)で1セットになっており、かつapp.module.tsのdeclarationsで宣言しないといけないので、以下のコマンドで新規生成します。
ng generate component /path/to/your-component
コマンドを実行すると、新しいyour-componentという名前のディレクトリが作成され、その中に新しいコンポーネントに関連するファイル群(your-component.component.ts、your-component.component.html、your-component.component.scss、your-component.component.spec.ts)が生成されます。
pathを指定できるので、好きな階層に生成できます。
また、上記はangular-cliで実行していますが、チーム開発ではバージョン管理されているのが通常だと思います。我々のチームではyarn.lockでangular-cliを管理しており、その場合のコマンドは以下です。
angular.jsonファイルが存在するディレクトリに移動します。
npx ng generate component path/to/directory/component-name
npxコマンドはnpmパッケージをインストールせずに一時的に実行するためのツールで、プロジェクト内のローカルにインストールされたパッケージを使う場合に便利です。
ホストPCにangular-cliをインストールしていなくても、上記コマンドでコンポーネントを作成できます。
余談ですが、コンポーネントより上位概念の、angularプロジェクト自体を新規作成する場合はnewコマンドです。generateとnewで混同しやすい気がしたのでメモしておきます。
また、以下のようにすればcssではなくscssを使うプロジェクトとして作成できます。
ng new my-app --style=scss
ここまでお読みいただきありがとうございました!