開発用に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/**と同等)。