Angularビルド出力のカスタマイズ

問題の概要

Angular 18にアップグレード後、applicationビルダーを使用する際にカスタム出力パスを指定すると、意図せずbrowserフォルダが生成されてしまう問題が発生します。

# 出力例（意図しないbrowserフォルダ構造）
/projects/project-x-backend/
└── wwwroot
    └── browser  # このフォルダが不要
        ├── index.html
        ├── ...

問題の再現条件：

• Angular 18のapplicationビルダーを使用
• angular.jsonに"browser": ""設定を追加している
• コマンドラインで--output-pathをカスタマイズ：

  ng build --output-path=/projects/project-x-backend/wwwroot --watch

これはビルド設定とCLI引数の優先順位が原因で発生します。angular.json設定はプロジェクト直下の出力には有効ですが、カスタムパス指定時はデフォルト動作（browserフォルダ生成）が適用されるためです。

最適な解決方法

方法1: 新しいビルド設定を追加（推奨）

元のdevelopment設定を変更せず、watch用の専用設定を追加します。

angular.jsonに以下を追加：

"projects": {
  "project-x": {
    "architect": {
      "build": {
        "configurations": {
          "development": {
            // 既存のdevelopment設定
          },
          "dev-watch": {
            // development設定を継承しつつ出力パスを上書き
            "outputPath": {
              "base": "/projects/project-x-backend/wwwroot",
              "browser": ""  // 空設定でbrowserフォルダを抑制
            },
            // 他のdevelopment設定をここにコピー
          }
        }
      }
    }
  }
}

ビルドコマンド：

ng build --watch --configuration dev-watch

方法2: デフォルト設定を直接変更

プロジェクトの出力先を常に固定できる場合、メイン設定を更新します。

"projects": {
  "project-x": {
    "architect": {
      "build": {
        "options": {
          "outputPath": {
            "base": "/projects/project-x-backend/wwwroot",
            "browser": ""
          }
        },
        "configurations": {
          "development": {
            "outputPath": {
              "base": "/projects/project-x-backend/wwwroot",
              "browser": ""
            }
          }
        }
      }
    }
  }
}

パス指定のヒント

プロジェクトルートからの相対パスには./を付けます：

"base": "./public"

根本原因と設計変更

Angular 18のビルドシステムには以下の変更が導入されました：

ビルダー	出力構造	用途
application	/browser と /serverを生成	SSRアプリ向け（デフォルト）
browser	フラットな単一出力	クライアントサイドのみ

--output-pathはベースパスのみを変更し、内部のフォルダ構造（browser）は保持します。"browser": ""設定はベースパス直下に出力するよう指示しますが、これはangular.jsonで定義された設定でのみ有効です。

注意点

非推奨のbrowser-esbuildビルダーを提案する回答がありますが、Angularチームはこのビルダーの廃止を計画しています。長期サポートの観点からapplicationビルダーの使用を推奨します。

ASP.NETユーザー向け対応

Microsoft SPAテンプレートを使用している場合、[プロジェクト名].client.esprojを編集：

<!-- 変更前 -->
&lt;StaticWebAssetBasePath&gt;$(MSBuildProjectDirectory)\dist\project-name.client\&lt;/StaticWebAssetBasePath&gt;

<!-- 変更後 -->
&lt;StaticWebAssetBasePath&gt;$(MSBuildProjectDirectory)\dist\project-name.client\browser\&lt;/StaticWebAssetBasePath&gt;

まとめ

問題解決の鍵となる設定：

"outputPath": {
  "base": "カスタムパス",
  "browser": ""  // 空設定が重要
}

適切なアプローチ：

1. 頻繁に出力先を変更する ➡ dev-watchのような追加設定を作成
2. 出力先が固定 ➡ angular.jsonのメイン設定を更新
3. ASP.NET環境 ➡ .esprojファイルでパスを調整

これにより、Angular 18の新しいビルドシステムにおいても、クリーンな出力ディレクトリ構造を維持できます。