目次
ng new
Angularプロジェクトを新規で作成する場合の一般的な例は@angular/cliをグローバルインストールし、ng new [プロジェクト名]を実行する。
ngコマンドでgenerateを使用し、service・component・pipeなどを作成したり、ng serveで起動したりするだろうが、直接ターミナルでngコマンドを発行した場合はグローバルインストールされた@angular/cliのng実行ファイルを使用していることになる。
新規作成したプロジェクトにもngコマンドが入っている
ng new [プロジェクト名]で作成したプロジェクトのpackage.jsonのscripts部を見てみよう。
|
1 2 3 4 5 6 7 8 |
"scripts": { "ng": "ng", "start": "ng serve --open", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, |
ngコマンドが宣言されていることがわかる。実はプロジェクトにも@angular/cliがインストールされている。
|
1 2 3 |
"devDependencies": { "@angular-devkit/build-angular": "~0.7.0", "@angular/cli": "~6.1.2", |
ローカルのngコマンドを使用する
グローバルのngコマンドではなく、プロジェクトで宣言したローカルのngコマンドを使用するにはnpm run ngで実行する
|
1 |
npm run ng |
コンポーネントを作成する例
hogeコンポーネントを作成する場合は下記の通りになる
|
1 |
npm run ng g component hoge |
オプションを使う場合の注意
オプション指定の中にハイフン(-)がある場合は注意が必要になる。--flatオプションを付けて実行してみても無視されてしまう。
|
1 2 3 |
npm run ng g component hoge --flat > ng "g" "component" "hoge" ← !! --flatが有効になっていない!!! |
「npm run ng –」を使うクセをつける
オプションにハイフンがある場合は--をつけることによりコマンド通りの動作を行ってくれる。つまりnpm run ng --を常に指定することによりオプションがうまく動作しなくなる現象を避けることができる。また、オプションにハイフンが無い場合でも何も不都合なく動作するためnpm run ngではなくnpm run ng --を指定するクセを付けておくことをオススメする。
|
1 2 3 |
npm run ng -- g component hoge --flat > ng "g" "component" "hoge" "--flat" ← --flatが有効になる |
繰り返す!npm run ng --だー
蛇足
グローバルのngコマンドを使用してもよいが、プロジェクトの@angular/cliと同じバージョンでなければならない。複数のAngularプロジェクトを作成し、バージョンを上げた場合、グローバルのバージョンとプロジェクトのバージョンに差異が出てくる。この状態でグローバルのngコマンドを使用すると警告が発生する。