= getUserId();
const userResource = resource({
- request: () => ({id: userId()}),
+ params: () => ({id: userId()}),
loader: ({params}) => fetchUser(params),
});
@@ -99,15 +99,19 @@ userResource.reload();
| `isLoading` | リソースローダーが現在実行中かどうか。 |
| `status` | 後述のリソースの特定の`ResourceStatus`。 |
-The `status` signal provides a specific `ResourceStatus` that describes the state of the resource using a string constant.
+`status` シグナルは、文字列定数を使用してリソースの状態を説明する特定の `ResourceStatus` を提供します。
-| Status | `value()` | Description |
+| ステータス | `value()` | 説明 |
| ------------- | :---------------- | ---------------------------------------------------------------------------- |
-| `'idle'` | `undefined` | The resource has no valid request and the loader has not run. |
-| `'error'` | `undefined` | The loader has encountered an error. |
-| `'loading'` | `undefined` | The loader is running as a result of the `request` value changing. |
-| `'reloading'` | Previous value | The loader is running as a result calling of the resource's `reload` method. |
-| `'resolved'` | Resolved value | The loader has completed. |
-| `'local'` | Locally set value | The resource's value has been set locally via `.set()` or `.update()` |
+| `'idle'` | `undefined` | リソースに有効なリクエストがなく、ローダーが実行されていません。 |
+| `'error'` | `undefined` | ローダーの読み込みがエラーになりました。 |
+| `'loading'` | `undefined` | `params` 値の変更の結果としてローダーが実行中です。 |
+| `'reloading'` | 前の値 | リソースの `reload` メソッドの呼び出しの結果としてローダーが実行中です。 |
+| `'resolved'` | 解決された値 | ローダーが完了しました。 |
+| `'local'` | ローカルに設定された値 | リソースの値が `.set()` または `.update()` を介してローカルに設定されています。 |
この状態情報を使用して、ローディングインジケーターやエラーメッセージなどのユーザーインターフェース要素を条件付きで表示できます。
+
+## `httpResource` を使用したリアクティブデータ取得
+
+[`httpResource`](/guide/http/http-resource) は `HttpClient` のラッパーで、リクエストの状態とレスポンスをシグナルとして提供します。これはインターセプターを含むAngular HTTPスタックを通してHTTPリクエストを行います。
diff --git a/adev-ja/src/content/guide/ssr.en.md b/adev-ja/src/content/guide/ssr.en.md
index 6d72ec6e65..1d03b5b85e 100644
--- a/adev-ja/src/content/guide/ssr.en.md
+++ b/adev-ja/src/content/guide/ssr.en.md
@@ -67,7 +67,7 @@ const serverConfig: ApplicationConfig = {
};
```
-When using the [App shell pattern](ecosystem/service-workers/app-shell), you must specify the component to be used as the app shell for client-side rendered routes. To do this, use the [`withAppShell`](api/ssr/withAppShell 'API reference') fetaure:
+When using the [App shell pattern](ecosystem/service-workers/app-shell), you must specify the component to be used as the app shell for client-side rendered routes. To do this, use the [`withAppShell`](api/ssr/withAppShell 'API reference') feature:
```typescript
import { provideServerRendering, withRoutes, withAppShell } from '@angular/ssr';
diff --git a/adev-ja/src/content/guide/templates/defer.en.md b/adev-ja/src/content/guide/templates/defer.en.md
index 7e30d8ef07..994ea32da1 100644
--- a/adev-ja/src/content/guide/templates/defer.en.md
+++ b/adev-ja/src/content/guide/templates/defer.en.md
@@ -33,9 +33,9 @@ Angular's compiler produces a [dynamic import](https://developer.mozilla.org/en-
### `@defer`
-This is the primary block that defines the section of content that is lazily loaded. It is not rendered initially– deferred content loads and renders once the specified [trigger](/guide/defer#triggers) occurs or the `when` condition is met.
+This is the primary block that defines the section of content that is lazily loaded. It is not rendered initially– deferred content loads and renders once the specified [trigger](/guide/templates/defer#triggers) occurs or the `when` condition is met.
-By default, a @defer block is triggered when the browser state becomes [idle](/guide/defer#idle).
+By default, a @defer block is triggered when the browser state becomes [idle](/guide/templates/defer#idle).
```angular-html
@defer {
@@ -57,7 +57,7 @@ The `@placeholder` is an optional block that declares what content to show befor
}
```
-While optional, certain triggers may require the presence of either a `@placeholder` or a [template reference variable](/guide/templates/variables#template-reference-variables) to function. See the [Triggers](/guide/defer#triggers) section for more details.
+While optional, certain triggers may require the presence of either a `@placeholder` or a [template reference variable](/guide/templates/variables#template-reference-variables) to function. See the [Triggers](/guide/templates/defer#triggers) section for more details.
Angular replaces placeholder content with the main content once loading is complete. You can use any content in the placeholder section including plain HTML, components, directives, and pipes. Keep in mind the _dependencies of the placeholder block are eagerly loaded_.
diff --git a/adev-ja/src/content/guide/templates/defer.md b/adev-ja/src/content/guide/templates/defer.md
index a7121d9649..3320bfd4ef 100644
--- a/adev-ja/src/content/guide/templates/defer.md
+++ b/adev-ja/src/content/guide/templates/defer.md
@@ -33,9 +33,9 @@ Angularのコンパイラは、`@defer`ブロックで使用される各コン
### `@defer`
-これは、遅延読み込みされるコンテンツのセクションを定義するプライマリブロックです。これは最初はレンダリングされません。遅延コンテンツは、指定された[トリガー](/guide/defer#triggers)が発生するか、`when`条件が満たされたときに読み込まれてレンダリングされます。
+これは、遅延読み込みされるコンテンツのセクションを定義するプライマリブロックです。これは最初はレンダリングされません。遅延コンテンツは、指定された[トリガー](/guide/templates/defer#triggers)が発生するか、`when`条件が満たされたときに読み込まれてレンダリングされます。
-デフォルトでは、`@defer`ブロックはブラウザの状態が[アイドル](/guide/defer#idle)になるとトリガーされます。
+デフォルトでは、`@defer`ブロックはブラウザの状態が[アイドル](/guide/templates/defer#idle)になるとトリガーされます。
```angular-html
@defer {
@@ -57,7 +57,7 @@ Angularのコンパイラは、`@defer`ブロックで使用される各コン
}
```
-オプションですが、特定のトリガーでは、`@placeholder`または[テンプレート参照変数](/guide/templates/variables#template-reference-variables)のいずれかの存在が必要になる場合があります。詳細については、[トリガー](/guide/defer#triggers)セクションを参照してください。
+オプションですが、特定のトリガーでは、`@placeholder`または[テンプレート参照変数](/guide/templates/variables#template-reference-variables)のいずれかの存在が必要になる場合があります。詳細については、[トリガー](/guide/templates/defer#triggers)セクションを参照してください。
Angularは、読み込みが完了すると、プレースホルダーコンテンツをメインコンテンツに置き換えます。プレースホルダーセクションには、プレーンHTML、コンポーネント、ディレクティブ、パイプなど、あらゆるコンテンツを使用できます。_プレースホルダーブロックの依存関係は先に読み込まれます_。
diff --git a/adev-ja/src/content/guide/templates/expression-syntax.en.md b/adev-ja/src/content/guide/templates/expression-syntax.en.md
index ce01924d9f..d3b497afb6 100644
--- a/adev-ja/src/content/guide/templates/expression-syntax.en.md
+++ b/adev-ja/src/content/guide/templates/expression-syntax.en.md
@@ -24,7 +24,6 @@ Angular supports a subset of [literal values](https://developer.mozilla.org/en-U
| Literal type | Example value |
| ---------------------- | ------------------------ |
| RegExp | `/\d+/` |
-| Tagged template string | `` tag`Hello ${name}` `` |
## Globals
diff --git a/adev-ja/src/content/guide/templates/expression-syntax.md b/adev-ja/src/content/guide/templates/expression-syntax.md
index 5254b02be4..4c132dbaec 100644
--- a/adev-ja/src/content/guide/templates/expression-syntax.md
+++ b/adev-ja/src/content/guide/templates/expression-syntax.md
@@ -17,7 +17,6 @@ Angularは、[リテラル値](https://developer.mozilla.org/en-US/docs/Glossary
| Array | `['Onion', 'Cheese', 'Garlic']` |
| null | `null` |
| Template string | `` `Hello ${name}` `` |
-| Tagged template string | `` tag`Hello ${name}` `` |
### サポートされていないリテラル
diff --git a/adev-ja/src/content/introduction/essentials/components.en.md b/adev-ja/src/content/introduction/essentials/components.en.md
index 818605125c..47ec800416 100644
--- a/adev-ja/src/content/introduction/essentials/components.en.md
+++ b/adev-ja/src/content/introduction/essentials/components.en.md
@@ -60,7 +60,7 @@ export class UserProfile {
```angular-html
-Use profile
+User profile
This is the user profile page
```
diff --git a/adev-ja/src/content/introduction/essentials/components.md b/adev-ja/src/content/introduction/essentials/components.md
index 3ddfea2b9c..6db6308f4b 100644
--- a/adev-ja/src/content/introduction/essentials/components.md
+++ b/adev-ja/src/content/introduction/essentials/components.md
@@ -60,7 +60,7 @@ export class UserProfile {
```angular-html
-Use profile
+User profile
This is the user profile page
```
diff --git a/adev-ja/src/content/introduction/installation.en.md b/adev-ja/src/content/introduction/installation.en.md
index a495ea87ac..6d4c59557c 100644
--- a/adev-ja/src/content/introduction/installation.en.md
+++ b/adev-ja/src/content/introduction/installation.en.md
@@ -110,6 +110,10 @@ NOTE: Raw file sizes do not reflect development server per-request transformatio
And now you can visit the path in `Local` (e.g., `http://localhost:4200`) to see your application. Happy coding! 🎉
+### Using AI for Development
+
+To get started with building in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
+
## Next steps
Now that you've created your Angular project, you can learn more about Angular in our [Essentials guide](/essentials) or choose a topic in our in-depth guides!
diff --git a/adev-ja/src/content/introduction/installation.md b/adev-ja/src/content/introduction/installation.md
index 33c054cd82..cf43150916 100644
--- a/adev-ja/src/content/introduction/installation.md
+++ b/adev-ja/src/content/introduction/installation.md
@@ -110,6 +110,10 @@ NOTE: Raw file sizes do not reflect development server per-request transformatio
これで、`Local`のパス（例：`http://localhost:4200`）にアクセスしてアプリケーションを確認できます。コーディングを楽しんでください！🎉
+### 開発でのAIの使用
+
+AI搭載IDEでの開発を開始するには、[Angularプロンプトルールとベストプラクティスをチェックしてください](/ai/develop-with-ai)。
+
## 次のステップ
Angularプロジェクトを作成したので、[基本概念ガイド](/essentials)でAngularの詳細について学ぶか、詳しいガイドからトピックを選択してください！
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8115.md b/adev-ja/src/content/reference/extended-diagnostics/NG8115.md
new file mode 100644
index 0000000000..f36732e2cf
--- /dev/null
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8115.md
@@ -0,0 +1,61 @@
+# Uninvoked Track Function
+
+This diagnostic detects when a track function is not invoked in `@for` blocks.
+
+
+
+import {Component} from '@angular/core';
+
+@Component({
+ template: `@for (item of items; track trackByName) {}`,
+})
+class Items {
+ protected trackByName(item) { return item.name; }
+}
+
+
+
+## What's wrong with that?
+
+`@for` blocks need to uniquely identify items in the iterable to correctly perform DOM updates when items in the iterable are reordered, new items are added, or existing items are removed.
+When you don't invoke the function, the reconcialiation algorithm will use the function reference instead of returned value to compare items.
+
+## What should I do instead?
+
+Ensure to invoke the track function when you use it in a `@for` block to execute the function so the loop can uniquely identify items.
+
+
+
+import {Component} from '@angular/core';
+
+@Component({
+ template: `@for (item of items; track trackByName(item)) {}`,
+})
+class Items {
+ protected trackByName(item) { return item.name; }
+}
+
+
+
+## Configuration requirements
+
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
+`uninvokedTrackFunction` has no additional requirements beyond `strictTemplates`.
+
+## What if I can't avoid this?
+
+This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+
+
+{
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "uninvokedTrackFunction": "suppress"
+ }
+ }
+ }
+}
+
+
+See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-ja/src/content/reference/extended-diagnostics/overview.md b/adev-ja/src/content/reference/extended-diagnostics/overview.md
index 92829d8094..46391f5eef 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/overview.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/overview.md
@@ -22,6 +22,7 @@ Currently, Angular supports the following extended diagnostics:
| `NG8111` | [`uninvokedFunctionInEventBinding`](extended-diagnostics/NG8111) |
| `NG8113` | [`unusedStandaloneImports`](extended-diagnostics/NG8113) |
| `NG8114` | [`unparenthesizedNullishCoalescing`](extended-diagnostics/NG8114) |
+| `NG8115` | [`uninvokedTrackFunction`](extended-diagnostics/NG8115) |
| `NG8116` | [`missingStructuralDirective`](extended-diagnostics/NG8116) |
## Configuration
@@ -50,8 +51,7 @@ Check severity can be configured as an [Angular compiler option](reference/confi
// The category to use for any diagnostics not listed in `checks` above.
"defaultCategory": "error"
}
-
-}
+ }
}
diff --git a/adev-ja/src/content/reference/migrations/control-flow.md b/adev-ja/src/content/reference/migrations/control-flow.md
index d764a9bdb6..d1622fbefb 100644
--- a/adev-ja/src/content/reference/migrations/control-flow.md
+++ b/adev-ja/src/content/reference/migrations/control-flow.md
@@ -8,6 +8,6 @@ Run the schematic using the following command:
-ng update @angular/core --name=control-flow-migration
+ng generate @angular/core:control-flow
diff --git a/adev-ja/src/content/reference/releases.en.md b/adev-ja/src/content/reference/releases.en.md
index 4c19f2328a..1b704f7726 100644
--- a/adev-ja/src/content/reference/releases.en.md
+++ b/adev-ja/src/content/reference/releases.en.md
@@ -74,9 +74,9 @@ HELPFUL: Approximate dates are offered as general guidance and are subject to ch
| Version | Date |
|:--------|:-------------------|
-| v20.1 | TBD |
-| v20.2 | TBD |
-| v21.0 | TBD |
+| v20.1 | Week of 2025-07-07 |
+| v20.2 | Week of 2025-08-18 |
+| v21.0 | Week of 2025-11-17 |
### Support window
diff --git a/adev-ja/src/content/reference/releases.md b/adev-ja/src/content/reference/releases.md
index 628a165747..82fdf37f44 100644
--- a/adev-ja/src/content/reference/releases.md
+++ b/adev-ja/src/content/reference/releases.md
@@ -74,9 +74,9 @@ HELPFUL: 概算の日付は一般的なガイダンスとして提供されて
| バージョン | 日付 |
|:--------|:-------------------|
-| v20.1 | TBD |
-| v20.2 | TBD |
-| v21.0 | TBD |
+| v20.1 | Week of 2025-07-07 |
+| v20.2 | Week of 2025-08-18 |
+| v21.0 | Week of 2025-11-17 |
### サポート期間
diff --git a/adev-ja/src/content/tools/language-service.md b/adev-ja/src/content/tools/language-service.md
index 6c022c21e6..9cc309ca47 100644
--- a/adev-ja/src/content/tools/language-service.md
+++ b/adev-ja/src/content/tools/language-service.md
@@ -172,6 +172,10 @@ Angular Language Service can be used with Neovim by using the [nvim-lspconfig](h
2. [Configure angularls for nvim-lspconfig](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#angularls)
+### Zed
+
+In [Zed](https://zed.dev), install the extension from [Extensions: Marketplace](https://zed.dev/extensions?query=angular).
+
## How the Language Service works
When you use an editor with a language service, the editor starts a separate language-service process and communicates with it through an [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call), using the [Language Server Protocol](https://microsoft.github.io/language-server-protocol).
diff --git a/adev-ja/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.en.md b/adev-ja/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.en.md
index 70af0fda02..0dd4d85f4d 100644
--- a/adev-ja/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.en.md
+++ b/adev-ja/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.en.md
@@ -8,7 +8,7 @@ Deferrable views let you define content to be shown in different loading states.
@placeholder |
By default, defer blocks do not render any content before they are triggered. The @placeholder is an optional block that declares content to show before the deferred content loads. Angular replaces the placeholder with the deferred content after loading completes. While this block is optional, the Angular team recommends always including a placeholder.
-
+
Learn more in the full deferrable views documentation
|
diff --git a/adev-ja/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md b/adev-ja/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
index 3291f4c1f0..8f121a09df 100644
--- a/adev-ja/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
+++ b/adev-ja/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
@@ -8,7 +8,7 @@
@placeholder |
デフォルトでは、遅延ブロックはトリガーされる前にコンテンツをレンダリングしません。@placeholderは、遅延コンテンツの読み込み前に表示するコンテンツを宣言するオプションのブロックです。Angularは読み込みが完了した後、プレースホルダーを遅延コンテンツに置き換えます。このブロックはオプションですが、Angularチームは常にプレースホルダーを含めることを推奨しています。
-
+
遅延可能ビューの完全なドキュメントで詳細を確認してください
|
diff --git a/adev-ja/src/content/tutorials/first-app/intro/README.md b/adev-ja/src/content/tutorials/first-app/intro/README.md
index 0a9e0e13ab..8413c26699 100644
--- a/adev-ja/src/content/tutorials/first-app/intro/README.md
+++ b/adev-ja/src/content/tutorials/first-app/intro/README.md
@@ -69,6 +69,12 @@ You are free to use any tool you prefer to build apps with Angular. We recommend
3. [WebStorm](https://www.jetbrains.com/webstorm/)
+
+Angular-specific data are expressed in terms of framework concepts (components, change detection, lifecycle hooks, etc.) alongside lower-level function and method calls captured by a browser. These two data sets are correlated, and you can switch between the different views and level of details.
+
+You can use the Angular track to better understand how your code runs in the browser, including:
+
+- Determining whether a given code block is part of the Angular application, or whether it belongs to another script running on the same page.
+- Identifying performance bottlenecks and attribute those to specific components or services.
+- Gaining deeper insight into Angular's inner working with a visual breakdown of each change detection cycle.
+
+## Recording a profile
+
+### Enable integration
+
+You can enable Angular profiling in one of two ways:
+
+1. Run `ng.enableProfiling()` in Chrome's console panel, or
+1. Include a call to `enableProfiling()` in your application startup code (imported from `@angular/core`).
+
+NOTE:
+Angular profiling works exclusively in development mode.
+
+Here is an example of how you can enable the integration in the application bootstrap to capture all possible events:
+
+```ts
+import { enableProfiling } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { MyApp } from './my-app';
+
+// Turn on profiling *before* bootstrapping your application
+// in order to capture all of the code run on start-up.
+enableProfiling();
+bootstrapApplication(MyApp);
+```
+
+### Record a profile
+
+Use the **Record** button in the Chrome DevTools performance panel:
+
+
+
+See the [Chrome DevTools documentation](https://developer.chrome.com/docs/devtools/performance#record) for more details on recording profiles.
+
+## Interpreting a recorded profile
+
+You can use the "Angular" custom track to quickly identify and diagnose performance issues. The following sections describe some common profiling scenarios.
+
+### Differentiating between your Angular application and other tasks on the same page
+
+As Angular and Chrome data are presented on the separate but correlated tracks, you can see when Angular's application code is executed as opposed to some other browser processing (typically layout and paint) or other scripts running on the same page (in this case the custom Angular track does not have any data):
+
+
+
+This allows you to determine whether further investigations should focus on the Angular application code or on other parts of your codebase or dependencies.
+
+### Color-coding
+
+Angular uses colors in the flame chart graph to distinguish tasks types:
+
+- 🟦 Blue represents TypeScript code written by the application developer (for example: services, component constructors and lifecycle hooks, etc.).
+- 🟪 Purple represents templates code written by the application developer and transformed by the Angular compiler.
+- 🟩 Green represents entry points to the application code and identifies _reasons_ for executing code.
+
+The following examples illustrate the described color-coding in various, real-life recordings.
+
+#### Example: Application bootstrapping
+
+The application bootstrap process usually consists of:
+
+- Triggers marked in blue, such as the call to the `bootstrapApplication`, instantiation of the root component, and initial change detection
+- Various DI services instantiated during bootstrap, marked in green.
+
+
+
+#### Example: Component execution
+
+One component processing is typically represented as an entry point (blue) followed by its template execution (purple). A template might, in turn, trigger instantiation of directives and execution of lifecycle hooks (green):
+
+
+
+#### Example: Change detection
+
+A change detection cycle usually consists of one or more data synchronization passes (blue), where each pass traverses a subset of components.
+
+
+
+With this data visualization, it is possible to immediately identify components that were involved in the change detection and which were skipped (typically the `OnPush` components that were not marked dirty).
+
+Additionally, you can inspect the number of synchronization passes for one change detection. Having more than one synchronization pass suggest that state is updated during change detection. You should avoid this, as it slows down page updates and can even result in infinite loops in the worst cases.
diff --git a/adev-ja/src/content/best-practices/style-guide.en.md b/adev-ja/src/content/best-practices/style-guide.en.md
index 1add59bdd6..fe9c8345f3 100644
--- a/adev-ja/src/content/best-practices/style-guide.en.md
+++ b/adev-ja/src/content/best-practices/style-guide.en.md
@@ -222,6 +222,9 @@ Prefer `class` and `style` bindings over using the `NgClass` and `NgStyle` direc
```html