Angular CLI コマンドを知る - とんかつ時々あんどーなつ

今回のサンプルアプリ

$ npx @angular/cli new ng-sample --packageManager yarn
$ yarn ng version
yarn run v1.22.4
$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.0.4
Node: 12.18.2
OS: darwin x64

Angular: 10.0.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.4
@angular-devkit/build-angular     0.1000.4
@angular-devkit/build-optimizer   0.1000.4
@angular-devkit/build-webpack     0.1000.4
@angular-devkit/core              10.0.4
@angular-devkit/schematics        10.0.4
@angular/cli                      10.0.4
@ngtools/webpack                  10.0.4
@schematics/angular               10.0.4
@schematics/update                0.1000.4
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

✨  Done in 1.59s.

用語説明

workspace

Angular CLI を使ってアプリケーションを作成すると一つの workspace が作成される
Git などのバージョン管理ツールでは大抵一つの workspace が 1 リポジトリとして管理される
一つの workspace には複数の project が含まれる
$ ng new で workspace を作成したときにデフォルトで同じ名前の project も作成される
workspace の設定は angular.json で管理される

project

workspace で管理されているアプリケーションやライブラリを指す
$ ng new で作成される default project の他に $ ng generate application や $ ng generate library を使って複数の project を管理することができる
- $ ng generate application や $ ng generate library で作られた project は projects/ ディレクトリに配置される

Angular CLI コマンドの動き

Angular CLI (ng)のコマンド一覧は commands.json に登録されている
- ちなみにこれを見るとイースターエッグなコマンドがあることもわかってしまう
各コマンドは architect-command.ts を継承して実装されている
- コマンドの実装は commands/[commandName]-impl.ts を見るとわかる
コマンドは builder と呼ばれる関数を使って実行される
コマンドの実行には project, target 更にオプションで configuration が必要であり、これらを使って angular.json から実行すべき builder を見つける
例えば $ ng build ng-sample --configuration production とした場合は project が ng-sample で architect が build の builder が configuration production の設定で実行される

{
  ...
  "projects": {
    "ng-sample": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
          },
          "configurations": {
            "production": {
              ...
            }
          }
        }
      }
    }
  }
}

ちなみに --prod で production の configuration が適用されるのは architect-command.ts#L373-L376 で置き換えられるため
staging 用のコマンドを用意したい場合は configurations の下に staging の設定を書くとよい

ng run コマンド

ng run コマンドを使うと angular.json の project, target, configuration を見て builder が実行される
- コマンドは ng run project:target[:configuration]
- production build を実行する場合は $ ng run ng-sample:build:production となる
ng run コマンドは angular.json に設定さえあれば Angular CLI が用意しているコマンド以外も実行することができる
例えば上述した build architect をコピーして同じ名前の hoge architect を作ると $ ng run ng-sample:hoge:production で production build ができる

{
  ...
  "projects": {
    "ng-sample": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
          },
          "configurations": {
            "production": {
              ...
            }
          }
        },
        "hoge": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
          },
          "configurations": {
            "production": {
              ...
            }
          }
        }
      }
    }
  }
}