Angular CLIアプリケーションは、ng serveコマンドで配信できます。
これにより、アプリケーションがコンパイルされ、不要な最適化がスキップされ、開発サーバーが起動し、その後の変更が自動的に再ビルドおよびライブリロードされます。
サーバーはCtrl+Cを押して停止できます。
ng serveは、angular.jsonで指定されたデフォルトプロジェクトのserveターゲットのビルダーのみを実行します。
ここでは任意のビルダーを使用できますが、最も一般的（かつデフォルト）なビルダーは@angular-devkit/build-angular:dev-serverです。
特定のプロジェクトで使用されているビルダーは、そのプロジェクトのserveターゲットを調べることで判断できます。
{ "projects": { "my-app": { "architect": { // `ng serve` invokes the Architect target named `serve`. "serve": { "builder": "@angular-devkit/build-angular:dev-server", // ... }, "build": { /* ... */ } "test": { /* ... */ } } } }}このページでは、@angular-devkit/build-angular:dev-serverの使用法とオプションについて説明します。
バックエンドサーバーへのプロキシ
プロキシサポートを使用して、特定のURLをバックエンドサーバーに転送するには、--proxy-configビルドオプションにファイルを渡します。
例えば、http://localhost:4200/apiへのすべての呼び出しをhttp://localhost:3000/apiで実行されているサーバーに転送するには、以下の手順を実行します。
プロジェクトの
src/フォルダーにproxy.conf.jsonファイルを作成します。新しいプロキシファイルに以下の内容を追加します。
{ "/api": { "target": "http://localhost:3000", "secure": false } }CLI設定ファイル
angular.jsonで、serveターゲットにproxyConfigオプションを追加します。{ "projects": { "my-app": { "architect": { "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "proxyConfig": "src/proxy.conf.json" } } } } } }このプロキシ設定で開発サーバーを実行するには、
ng serveを呼び出します。
プロキシ設定ファイルを編集して設定オプションを追加します。以下にいくつかの例を示します。
すべてのオプションの詳細については、@angular-devkit/build-angular:browserを使用する場合はwebpack DevServerドキュメントを、または@angular-devkit/build-angular:browser-esbuildまたは@angular-devkit/build-angular:applicationを使用する場合はVite DevServerドキュメントを参照してください。
NOTE: プロキシ設定ファイルを編集した場合、変更を有効にするにはng serveプロセスを再起動する必要があります。
localhostの解決
Nodeバージョン17以降、Nodeはhttp://localhost:<port>をhttp://127.0.0.1:<port>に常に解決するとは限りません
これは各マシンの設定に依存します。
もしlocalhostURLをターゲットとするプロキシを使用している際にECONNREFUSEDエラーが発生した場合、
ターゲットをhttp://localhost:<port>からhttp://127.0.0.1:<port>に更新することで、この問題を解決できます。
[http-proxy-middlewareのドキュメント`](https://github.com/chimurai/http-proxy-middleware#nodejs-17-econnrefused-issue-with-ipv6-and-localhost-705)を参照してください。
詳細については。