Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion adev-ja/src/content/events/v21.en.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/angular-v21-hero.jpg {loading: 'eager', fetchpriority: 'high'} 'Angular v21 Hero Image')
![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/v21-event/angular-v21-hero.jpg {loading: 'eager', fetchpriority: 'high'} 'Angular v21 Hero Image')

# Angular v21: The Adventure Begins

Expand Down
2 changes: 1 addition & 1 deletion adev-ja/src/content/events/v21.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
![Angular v21の今後のリリースを告知する、レトロな8ビットのピクセルアートスタイルのグラフィック。大きなグラデーションの「v21」テキストがフレームを占めています。その隣には、小さなテキストで「The Adventure Begins」という言葉と、ピンク色のピクセル化されたボックス内にリリース日「11-20-2025」が記載されています。Angularのロゴは右下隅にあります。](assets/images/angular-v21-hero.jpg {loading: 'eager', fetchpriority: 'high'} 'Angular v21ヒーロー画像')
![Angular v21の今後のリリースを告知する、レトロな8ビットのピクセルアートスタイルのグラフィック。大きなグラデーションの「v21」テキストがフレームを占めています。その隣には、小さなテキストで「The Adventure Begins」という言葉と、ピンク色のピクセル化されたボックス内にリリース日「11-20-2025」が記載されています。Angularのロゴは右下隅にあります。](assets/images/v21-event/angular-v21-hero.jpg {loading: 'eager', fetchpriority: 'high'} 'Angular v21ヒーロー画像')

# Angular v21: 冒険の始まり

Expand Down
38 changes: 22 additions & 16 deletions adev-ja/src/content/tools/cli/serve.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ You can serve your Angular CLI application with the `ng serve` command.
This will compile your application, skip unnecessary optimizations, start a devserver, and automatically rebuild and live reload any subsequent changes.
You can stop the server by pressing `Ctrl+C`.

`ng serve` only executes the builder for the `serve` target in the default project as specified in `angular.json`.
While any builder can be used here, the most common (and default) builder is `@angular-devkit/build-angular:dev-server`.
`ng serve` only executes the builder for the `serve` target in the default project as specified in `angular.json`. While any builder can be used here, the most common (and default) builder is `@angular/build:dev-server`.

You can determine which builder is being used for a particular project by looking up the `serve` target for that project.

Expand All @@ -17,10 +16,10 @@ You can determine which builder is being used for a particular project by lookin
"architect": {
// `ng serve` invokes the Architect target named `serve`.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"builder": "@angular/build:dev-server",
// ...
},
"build": { /* ... */ }
"build": { /* ... */ },
"test": { /* ... */ }
}
}
Expand All @@ -29,21 +28,19 @@ You can determine which builder is being used for a particular project by lookin

```

This page discusses usage and options of `@angular-devkit/build-angular:dev-server`.

## Proxying to a backend server

Use [proxying support](https://webpack.js.org/configuration/dev-server/#devserverproxy) to divert certain URLs to a backend server, by passing a file to the `--proxy-config` build option.
Use [proxying support](https://vite.dev/config/server-options#server-proxy) to divert certain URLs to a backend server, by passing a file to the `--proxy-config` build option.
For example, to divert all calls for `http://localhost:4200/api` to a server running on `http://localhost:3000/api`, take the following steps.

1. Create a file `proxy.conf.json` in your project's `src/` folder.
1. Add the following content to the new proxy file:

```json
{
"/api": {
"target": "http://localhost:3000",
"secure": false
"/api/**": {
"target": "http://localhost:3000",
"secure": false
}
}
```
Expand All @@ -56,10 +53,10 @@ For example, to divert all calls for `http://localhost:4200/api` to a server run
"my-app": {
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"builder": "@angular/build:dev-server",
"options": {
"proxyConfig": "src/proxy.conf.json"
}
"proxyConfig": "src/proxy.conf.json"
}
}
}
}
Expand All @@ -70,7 +67,16 @@ For example, to divert all calls for `http://localhost:4200/api` to a server run

1. To run the development server with this proxy configuration, call `ng serve`.

Edit the proxy configuration file to add configuration options; following are some examples.
For a detailed description of all options, refer to the [webpack DevServer documentation](https://webpack.js.org/configuration/dev-server/#devserverproxy) when using `@angular-devkit/build-angular:browser`, or the [Vite DevServer documentation](https://vite.dev/config/server-options#server-proxy) when using `@angular-devkit/build-angular:browser-esbuild` or `@angular-devkit/build-angular:application`.
NOTE: To apply changes made to your proxy configuration file, you must restart the `ng serve` process.

### Path matching behavior depends on the builder

**`@angular/build:dev-server`** (based on [Vite](https://vite.dev/config/server-options#server-proxy))

- `/api` matches only `/api`.
- `/api/*` matches `/api/users` but not `/api/users/123`.
- `/api/**` matches `/api/users` and `/api/users/123`.

**`@angular-devkit/build-angular:dev-server`** (based on [Webpack DevServer](https://webpack.js.org/configuration/dev-server/#devserverproxy))

NOTE: If you edit the proxy configuration file, you must relaunch the `ng serve` process to make your changes effective.
- `/api` matches `/api` and any sub-paths (equivalent to `/api/**`).
38 changes: 22 additions & 16 deletions adev-ja/src/content/tools/cli/serve.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ Angular CLIアプリケーションは、`ng serve`コマンドで配信でき
これにより、アプリケーションがコンパイルされ、不要な最適化がスキップされ、開発サーバーが起動し、その後の変更が自動的に再ビルドおよびライブリロードされます。
サーバーは`Ctrl+C`を押して停止できます。

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

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

Expand All @@ -17,10 +16,10 @@ Angular CLIアプリケーションは、`ng serve`コマンドで配信でき
"architect": {
// `ng serve` invokes the Architect target named `serve`.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"builder": "@angular/build:dev-server",
// ...
},
"build": { /* ... */ }
"build": { /* ... */ },
"test": { /* ... */ }
}
}
Expand All @@ -29,21 +28,19 @@ Angular CLIアプリケーションは、`ng serve`コマンドで配信でき

```

このページでは、`@angular-devkit/build-angular:dev-server`の使用法とオプションについて説明します。

## バックエンドサーバーへのプロキシ {#proxying-to-a-backend-server}

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

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

```json
{
"/api": {
"target": "http://localhost:3000",
"secure": false
"/api/**": {
"target": "http://localhost:3000",
"secure": false
}
}
```
Expand All @@ -56,10 +53,10 @@ Angular CLIアプリケーションは、`ng serve`コマンドで配信でき
"my-app": {
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"builder": "@angular/build:dev-server",
"options": {
"proxyConfig": "src/proxy.conf.json"
}
"proxyConfig": "src/proxy.conf.json"
}
}
}
}
Expand All @@ -70,7 +67,16 @@ Angular CLIアプリケーションは、`ng serve`コマンドで配信でき

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

プロキシ設定ファイルを編集して設定オプションを追加します。以下にいくつかの例を示します。
すべてのオプションの詳細については、`@angular-devkit/build-angular:browser`を使用する場合は[webpack DevServerドキュメント](https://webpack.js.org/configuration/dev-server/#devserverproxy)を、または`@angular-devkit/build-angular:browser-esbuild`または`@angular-devkit/build-angular:application`を使用する場合は[Vite DevServerドキュメント](https://vite.dev/config/server-options#server-proxy)を参照してください。
NOTE: プロキシ設定ファイルに加えた変更を適用するには、`ng serve`プロセスを再起動する必要があります。

### パスマッチングの挙動はビルダーに依存する {#path-matching-behavior-depends-on-the-builder}

**`@angular/build:dev-server`** ([Vite](https://vite.dev/config/server-options#server-proxy)ベース)

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

**`@angular-devkit/build-angular:dev-server`** ([Webpack DevServer](https://webpack.js.org/configuration/dev-server/#devserverproxy)ベース)

NOTE: プロキシ設定ファイルを編集した場合、変更を有効にするには`ng serve`プロセスを再起動する必要があります
- `/api`は`/api`とすべてのサブパスにマッチします(`/api/**`と同等)