Angular4から始めた身としては、Angular-CLIコマンドを叩くだけで、プロジェクトやコンポーネントの雛形生成、ビルドなどが自動で行えるのはありがたい限りです。Angular-CLIを使って開発を行う際によく使うコマンドをまとめてみました。
紹介するコマンドを検証した環境は、次の通りです。
$ npm -v
5.3.0
$ ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.2.0
node: 8.1.3
このコマンドでは、<プロジェクト名>というディレクトリの下にAngular4の新規プロジェクトが作成される。
$ ng new <プロジェクト名>
コマンドを実行した結果、次のようなディレクトリができる。
testapp/
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── node_modules
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
$ ng new <プロジェクト名> --routing
ルーティング定義を行うクラスを自動で生成するオプション。
個人的に、このオプションはよく使う。
src/appディレクトリに、app-routing.module.tsが自動生成される。あとに紹介するmodule追加コマンドと合わせてルーティングの設定を行うのに必要なコマンド。
testapp2/
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── node_modules
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app-routing.module.ts
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
オプション無しで実行したときと比べて、app-routing.module.tsが追加される。
$ ng generate component <コンポーネント名>
このコマンドでは、<コンポーネント名>の名前で新規コンポーネントが作成される。
オプション無しでこのコマンドを実行した場合、src/appディレクトリ以下に<コンポーネント名>のディレクトリが作成され、次のファイルが自動で作成される。
- <コンポーネント名>.component.css コンポーネントに適用するスタイルシート
- <コンポーネント名>.component.html コンポーネントのテンプレート
- <コンポーネント名>.component.spec.ts コンポーネントのメインの動作を定義するファイル
- <コンポーネント名>.component.ts ユニットテスト用クラスを定義するファイル
また、src/app/app.module.tsにモジュールのインポート定義が自動で追加される。
$ ng generate module <モジュール名>
このコマンドでは、/src/app/<モジュール名>というディレクトリの下に<モジュール名>.module.tsという名前でAngular4のmoduleが作成される。
$ ng generate module <モジュール名> --routing
/src/app/<モジュール名>というディレクトリの下に<モジュール名>-routing.module.ts`というモジュールごとのルーティング定義ファイルが追加される。
$ ng build
アプリをビルドする。 ビルドファイルはdistディレクトリに生成される。