開発用にAngularアプリケーションを配信する

Angular CLIアプリケーションは、ng serveコマンドで配信できます。 これにより、アプリケーションがコンパイルされ、不要な最適化がスキップされ、開発サーバーが起動し、その後の変更が自動的に再ビルドおよびライブリロードされます。 サーバーはCtrl+Cを押して停止できます。

ng serveは、angular.jsonで指定されたデフォルトプロジェクトのserveターゲットのビルダーのみを実行します。ここでは任意のビルダーを使用できますが、最も一般的(かつデフォルト)なビルダーは@angular/build:dev-serverです。

特定のプロジェクトで使用されているビルダーは、そのプロジェクトのserveターゲットを調べることで判断できます。

{
  "projects": {
    "my-app": {
      "architect": {
        // `ng serve` invokes the Architect target named `serve`.
        "serve": {
          "builder": "@angular/build:dev-server"
          // ...
        },
        "build": {
          /* ... */
        },
        "test": {
          /* ... */
        }
      }
    }
  }
}

バックエンドサーバーへのプロキシ

プロキシサポートを使用して、特定のURLをバックエンドサーバーに転送するには、--proxy-configビルドオプションにファイルを渡します。 例えば、http://localhost:4200/apiへのすべての呼び出しをhttp://localhost:3000/apiで実行されているサーバーに転送するには、以下の手順を実行します。

1. プロジェクトのsrc/フォルダーにproxy.conf.jsonファイルを作成します。
2. 新しいプロキシファイルに以下の内容を追加します。

{
  "/api/**": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

1. CLI設定ファイルangular.jsonで、serveターゲットにproxyConfigオプションを追加します。

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@angular/build:dev-server",
          "options": {
            "proxyConfig": "src/proxy.conf.json"
          }
        }
      }
    }
  }
}

1. このプロキシ設定で開発サーバーを実行するには、ng serveを呼び出します。

パスマッチングの挙動はビルダーに依存する

@angular/build:dev-server (Viteベース)

• /apiは/apiのみにマッチします。
• /api/*は/api/usersにマッチしますが、/api/users/123にはマッチしません。
• /api/**は/api/usersと/api/users/123の両方にマッチします。

@angular-devkit/build-angular:dev-server (Webpack DevServerベース)

• /apiは/apiとすべてのサブパスにマッチします(/api/**と同等)。