Angular CLIのngコマンドをAngularのルートディレクトリ以外で動かす方法

Angular CLIのng generate コマンドをAngularのルートディレクトリ以外で動かす方法について説明します。

ngコマンドはカレントディレクトリのangular.jsonを参照します。

このangular.jsonを編集することでngコマンドの挙動を変えます。

作業ディレクトリにangular.jsonをコピーする

ng new で作られたangularアプリのディレクトリにangular.jsonも出来てるので、これをngコマンドを実行したいディレクトリにコピーしてきます。

angular.jsonのsourceRootを変更

作業ディレクトリにコピーしてきたangular.jsonを編集します。

angular.jsonのsourceRootの値を変更することで、ng generateを実行した時のファイル出力先を変えることが出来ます。

デフォルトだと“sourceRoot”: “src”, となっているので、これを相対パスでangularのプロジェクトがある場所に変えます。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
  "angular": {
    "root": "",
    "sourceRoot": "hogehoge/angular_app/src", ←ここを変更

これでng generate component すると、実行したディレクトリからの相対パスでhogehoge/angular_app/src以下にコンポーネントのファイル等が作られるようになります。

以上です。