From 9ec73f3d2368190685cf8532fa48f48b83c48130 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 22:25:38 +0900
Subject: [PATCH 01/55] chore: update origin to 31d3d56

---
 origin | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/origin b/origin
index 71cde39ff..31d3d5649 160000
--- a/origin
+++ b/origin
@@ -1 +1 @@
-Subproject commit 71cde39ff04dec1fee2ae92e953b7b145a996736
+Subproject commit 31d3d564961b701bda96d94731fbed72c01975fa

From db17b8df7e9f1091af5b6873404a2d96c714887c Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 22:26:36 +0900
Subject: [PATCH 02/55] fix: migrate untranslated files

---
 .../best-practices/performance/overview.md    |   43 +
 .../profiling-with-chrome-devtools.md         |    7 +-
 .../runtime-performance/slow-computations.md  |    2 +-
 .../ecosystem/rxjs-interop/signals-interop.md |   10 +-
 adev-ja/src/content/guide/animations/css.md   |   56 +-
 .../src/content/guide/animations/migration.md |  100 +-
 .../src/content/guide/animations/overview.md  |   26 +-
 .../guide/animations/reusable-animations.md   |    4 +-
 .../animations/transition-and-triggers.md     |   42 +-
 .../guide/di/creating-injectable-service.md   |   10 +-
 .../di/debugging-and-troubleshooting-di.md    | 1018 +++++++++++++++++
 .../guide/di/defining-dependency-providers.md |   68 +-
 adev-ja/src/content/guide/drag-drop.md        |  172 +--
 .../guide/forms/signals/async-operations.md   |  552 +++++++++
 .../signals/designing-your-form-model.md      |   16 +-
 .../content/guide/forms/signals/form-logic.md |  866 ++++++++++++++
 .../content/guide/forms/signals/migration.md  |   35 +-
 .../content/guide/i18n/format-data-locale.md  |    2 +-
 .../src/content/guide/ngmodules/overview.md   |    4 +-
 adev-ja/src/content/guide/signals/effect.md   |   25 +-
 .../testing/zone-js-testing-utilities.md      |   14 +-
 .../configs/angular-compiler-options.md       |    4 +-
 .../reference/configs/workspace-config.md     |   22 +-
 .../src/content/reference/errors/NG0204.md    |   59 +
 .../src/content/reference/errors/NG0205.md    |   76 ++
 .../src/content/reference/errors/NG0207.md    |   75 ++
 .../src/content/reference/errors/NG0919.md    |   18 +-
 .../reference/extended-diagnostics/NG8102.md  |   20 +-
 .../reference/extended-diagnostics/NG8105.md  |    4 +-
 .../reference/extended-diagnostics/NG8107.md  |   12 +-
 .../reference/extended-diagnostics/NG8108.md  |    4 +-
 .../reference/extended-diagnostics/NG8109.md  |    4 +-
 .../reference/extended-diagnostics/NG8111.md  |    4 +-
 .../reference/extended-diagnostics/NG8114.md  |   16 +-
 .../reference/extended-diagnostics/NG8115.md  |    4 +-
 .../reference/extended-diagnostics/NG8116.md  |   11 +-
 .../reference/extended-diagnostics/NG8117.md  |    4 +-
 .../migrations/common-to-standalone.md        |   20 +-
 .../reference/migrations/control-flow.md      |    8 +
 .../migrations/route-lazy-loading.md          |   10 +-
 .../reference/migrations/self-closing-tags.md |    4 -
 .../reference/migrations/signal-inputs.md     |    9 +-
 .../reference/migrations/signal-queries.md    |    8 +-
 .../reference/migrations/standalone.md        |   36 +-
 adev-ja/src/content/tools/cli/aot-compiler.md |   60 +-
 .../content/tools/cli/aot-metadata-errors.md  |   58 +-
 adev-ja/src/content/tools/cli/environments.md |    2 +-
 .../content/tools/cli/template-typecheck.md   |   16 +-
 .../src/content/tools/devtools/profiler.md    |    2 +-
 .../tools/libraries/angular-package-format.md |    2 +
 .../tools/libraries/creating-libraries.md     |    4 +-
 .../steps/06-property-binding/README.md       |    4 +-
 .../first-app/steps/09-services/README.md     |    2 +-
 .../first-app/steps/11-details-page/README.md |    2 +-
 54 files changed, 3130 insertions(+), 526 deletions(-)
 create mode 100644 adev-ja/src/content/best-practices/performance/overview.md
 create mode 100644 adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md
 create mode 100644 adev-ja/src/content/guide/forms/signals/async-operations.md
 create mode 100644 adev-ja/src/content/guide/forms/signals/form-logic.md
 create mode 100644 adev-ja/src/content/reference/errors/NG0204.md
 create mode 100644 adev-ja/src/content/reference/errors/NG0205.md
 create mode 100644 adev-ja/src/content/reference/errors/NG0207.md

diff --git a/adev-ja/src/content/best-practices/performance/overview.md b/adev-ja/src/content/best-practices/performance/overview.md
new file mode 100644
index 000000000..3ff3ac804
--- /dev/null
+++ b/adev-ja/src/content/best-practices/performance/overview.md
@@ -0,0 +1,43 @@
+# Performance
+
+Angular includes many optimizations out of the box, but as applications grow, you may need to fine-tune both how quickly your app loads and how responsive it feels during use. These guides cover the tools and techniques Angular provides to help you build fast applications.
+
+## Loading performance
+
+Loading performance determines how quickly your application becomes visible and interactive. Slow loading directly impacts [Core Web Vitals](https://web.dev/vitals/) like Largest Contentful Paint (LCP) and Time to First Byte (TTFB).
+
+| Technique                                                                             | What it does                                                                                                                                                                                                                    | When to use it                                                                                |
+| :------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------- |
+| [Lazy-loaded routes](guide/routing/define-routes#lazily-loaded-components-and-routes) | Defers loading route components until navigation, reducing the initial bundle size                                                                                                                                              | Applications with multiple routes where not all are needed on initial load                    |
+| [Deferred loading with `@defer`](best-practices/performance/defer)                    | Splits components into separate bundles that load on demand                                                                                                                                                                     | Components not visible on initial render, heavy third-party libraries, below-the-fold content |
+| [Image optimization](best-practices/performance/image-optimization)                   | Prioritizes LCP images, lazy loads others, generates responsive `srcset` attributes                                                                                                                                             | Any application that displays images                                                          |
+| [Server-side rendering](best-practices/performance/ssr)                               | Renders pages on the server for faster first paint and better SEO, with [hydration](guide/hydration) to restore interactivity and [incremental hydration](guide/incremental-hydration) to defer hydrating sections until needed | Content-heavy applications, pages that need search engine indexing                            |
+
+## Runtime performance
+
+Runtime performance determines how responsive your application feels after it loads. Angular's change detection system keeps the DOM in sync with your data, and optimizing how and when it runs is the primary lever for improving runtime performance.
+
+| Technique                                                       | What it does                                                                                        | When to use it                                                                        |
+| :-------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------ |
+| [Zoneless change detection](guide/zoneless)                     | Removes ZoneJS overhead and triggers change detection only when signals or events indicate a change | New applications (default in Angular v21+), or existing applications ready to migrate |
+| [Slow computations](best-practices/slow-computations)           | Identifies and optimizes expensive template expressions and lifecycle hooks                         | Profiling reveals specific components causing slow change detection cycles            |
+| [Skipping component subtrees](best-practices/skipping-subtrees) | Uses `OnPush` change detection to skip unchanged component trees                                    | Applications that need finer control over change detection                            |
+| [Zone pollution](best-practices/zone-pollution)                 | Prevents unnecessary change detection caused by third-party libraries or timers                     | Zone-based applications where profiling reveals excessive change detection cycles     |
+
+## Measuring performance
+
+Identifying what to optimize is just as important as knowing how to optimize it. Angular integrates with browser developer tools to help you find bottlenecks.
+
+| Tool                                                                       | What it does                                                                                                                                                                     |
+| :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Chrome DevTools profiling](best-practices/profiling-with-chrome-devtools) | Records Angular-specific performance data alongside browser profiling, with color-coded flame charts that show component rendering, change detection cycles, and lifecycle hooks |
+| [Angular DevTools](tools/devtools)                                         | A browser extension that provides a component tree inspector and a profiler for visualizing change detection cycles                                                              |
+
+## What to optimize first
+
+If you are unsure where to start, profile your application first using the [Chrome DevTools Angular track](best-practices/profiling-with-chrome-devtools) to identify specific bottlenecks.
+
+As a general starting point:
+
+- **Slow initial load** — Use [`@defer`](best-practices/performance/defer) to split large components out of the main bundle, [`NgOptimizedImage`](best-practices/performance/image-optimization) to prioritize above-the-fold images, and [server-side rendering](best-practices/performance/ssr) to deliver content faster.
+- **Slow interactions after load** — Check whether [zoneless change detection](guide/zoneless) is enabled, look for [slow computations](best-practices/slow-computations) in templates or lifecycle hooks, and consider [`OnPush`](best-practices/skipping-subtrees) to reduce unnecessary change detection.
diff --git a/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md b/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md
index 67a98b65e..d992e529a 100644
--- a/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md
+++ b/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md
@@ -25,11 +25,10 @@ You can use the Angular track to better understand how your code runs in the bro
 
 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`).
+1. Run [`ng.enableProfiling()`](api/core/enableProfiling) in Chrome's console panel, or
+1. Include a call to [`enableProfiling()`](api/core/enableProfiling) in your application startup code (imported from `@angular/core`).
 
-NOTE:
-Angular profiling works exclusively in development mode.
+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:
 
diff --git a/adev-ja/src/content/best-practices/runtime-performance/slow-computations.md b/adev-ja/src/content/best-practices/runtime-performance/slow-computations.md
index 744080ee3..b13506998 100644
--- a/adev-ja/src/content/best-practices/runtime-performance/slow-computations.md
+++ b/adev-ja/src/content/best-practices/runtime-performance/slow-computations.md
@@ -19,7 +19,7 @@ For example, in the preceding screenshot, the second recorded change detection c
 Here are several techniques to remove slow computations:
 
 - **Optimizing the underlying algorithm**. This is the recommended approach. If you can speed up the algorithm that is causing the problem, you can speed up the entire change detection mechanism.
-- **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](guide/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it.
+- **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](guide/templates/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it.
 - **Using memoization**. [Memoization](https://en.wikipedia.org/wiki/Memoization) is a similar technique to pure pipes, with the difference that pure pipes preserve only the last result from the computation where memoization could store multiple results.
 - **Avoid repaints/reflows in lifecycle hooks**. Certain [operations](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) cause the browser to either synchronously recalculate the layout of the page or re-render it. Since reflows and repaints are generally slow, you want to avoid performing them in every change detection cycle.
 
diff --git a/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md b/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md
index ee763e37a..9b28a809a 100644
--- a/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md
+++ b/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md
@@ -7,10 +7,10 @@ The `@angular/core/rxjs-interop` package offers APIs that help you integrate RxJ
 Use the `toSignal` function to create a signal which tracks the value of an Observable. It behaves similarly to the `async` pipe in templates, but is more flexible and can be used anywhere in an application.
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { AsyncPipe } from '@angular/common';
-import { interval } from 'rxjs';
-import { toSignal } from '@angular/core/rxjs-interop';
+import {Component} from '@angular/core';
+import {AsyncPipe} from '@angular/common';
+import {interval} from 'rxjs';
+import {toSignal} from '@angular/core/rxjs-interop';
 
 @Component({
   template: `{{ counter() }}`,
@@ -47,7 +47,7 @@ If you don't provide an `initialValue`, the resulting signal will return `undefi
 
 Some Observables are guaranteed to emit synchronously, such as `BehaviorSubject`. In those cases, you can specify the `requireSync: true` option.
 
-When `requiredSync` is `true`, `toSignal` enforces that the Observable emits synchronously on subscription. This guarantees that the signal always has a value, and no `undefined` type or initial value is required.
+When `requireSync` is `true`, `toSignal` enforces that the Observable emits synchronously on subscription. This guarantees that the signal always has a value, and no `undefined` type or initial value is required.
 
 ### `manualCleanup`
 
diff --git a/adev-ja/src/content/guide/animations/css.md b/adev-ja/src/content/guide/animations/css.md
index 517a78f6f..7f524b3e6 100644
--- a/adev-ja/src/content/guide/animations/css.md
+++ b/adev-ja/src/content/guide/animations/css.md
@@ -52,10 +52,10 @@ CSSには、アプリケーション内で美しく魅力的なアニメーシ
 
 アニメーションは、CSSのスタイルやクラスを切り替えることでトリガーできます。クラスが要素に追加されるとアニメーションが実行され、クラスを削除すると、その要素に定義されているCSSに戻ります。例を示します。
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
-    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.ts">
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.ts" />
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.html" />
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.css"/>
 </docs-code-multifile>
 
 ## トランジションとトリガー {#transition-and-triggers}
@@ -64,10 +64,10 @@ CSSには、アプリケーション内で美しく魅力的なアニメーシ
 
 CSS Gridを使用すると、`height: auto`へのアニメーションを実現できます。
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
-    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
-    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
-    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts">
+    <docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts" />
+    <docs-code header="auto-height.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.html" />
+    <docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.css"  />
 </docs-code-multifile>
 
 すべてのブラウザをサポートする必要がない場合は、`height: auto`をアニメーション化するためのより本質的な解決策である`calc-size()`も確認してください。詳しくは、[MDNのドキュメント](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size)とこの項目に関連する[チュートリアル](https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/)を参照してください。
@@ -76,18 +76,18 @@ CSS Gridを使用すると、`height: auto`へのアニメーションを実現
 
 要素がビューに入るとき、またはビューから出るときのアニメーションを作成できます。まずは、ビューに入るときのアニメーションを見ていきましょう。`animate.enter`を使うと、要素がビューに入るときにアニメーション用のクラスが適用されます。
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
-    <docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
-    <docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
-    <docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.ts">
+    <docs-code header="insert.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.ts" />
+    <docs-code header="insert.html" path="adev/src/content/examples/animations/src/app/native-css/insert.html" />
+    <docs-code header="insert.css" path="adev/src/content/examples/animations/src/app/native-css/insert.css"  />
 </docs-code-multifile>
 
 ビューから出るときのアニメーションも、ビューに入るときと同様です。`animate.leave`で、要素がビューから出るときに適用するCSSクラスを指定します。
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
-    <docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
-    <docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
-    <docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.ts">
+    <docs-code header="remove.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.ts" />
+    <docs-code header="remove.html" path="adev/src/content/examples/animations/src/app/native-css/remove.html" />
+    <docs-code header="remove.css" path="adev/src/content/examples/animations/src/app/native-css/remove.css"  />
 </docs-code-multifile>
 
 `animate.enter`と`animate.leave`について詳しくは、[EnterとLeaveのアニメーションガイド](guide/animations/enter-and-leave)を参照してください。
@@ -96,10 +96,10 @@ CSS Gridを使用すると、`height: auto`へのアニメーションを実現
 
 インクリメントとデクリメントに合わせてアニメーションするのは、アプリケーションでよくあるパターンです。以下はその例です。
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
-    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
-    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
-    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts">
+    <docs-code header="increment-decrement.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts" />
+    <docs-code header="increment-decrement.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.html" />
+    <docs-code header="increment-decrement.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.css" />
 </docs-code-multifile>
 
 ### アニメーション（またはすべてのアニメーション）を無効にする {#disabling-an-animation-or-all-animations}
@@ -147,10 +147,10 @@ NOTE: これらのコールバックはバブリング（イベント伝播）
 
 よくある効果の1つに、リスト内の各要素のアニメーションを段階的に遅らせてカスケード効果を作るものがあります。これは`animation-delay`または`transition-delay`を利用して実現できます。次はそのCSSの例です。
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
-    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
-    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
-    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.ts">
+    <docs-code header="stagger.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.ts" />
+    <docs-code header="stagger.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.html" />
+    <docs-code header="stagger.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.css" />
 </docs-code-multifile>
 
 ### 並行アニメーション {#parallel-animations}
@@ -171,10 +171,10 @@ NOTE: これらのコールバックはバブリング（イベント伝播）
 
 `@for`ループ内の要素は削除されて再追加されるため、enterアニメーションとして`@starting-styles`を使用したアニメーションが実行されます。同じ挙動は`animate.enter`でも実現できます。要素が削除されるときにアニメーションするには、以下の例のように`animate.leave`を使用します。
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
-    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
-    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
-    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.ts">
+    <docs-code header="reorder.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.ts" />
+    <docs-code header="reorder.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.html" />
+    <docs-code header="reorder.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.css" />
 </docs-code-multifile>
 
 ## アニメーションをプログラムで制御する {#programmatic-control-of-animations}
diff --git a/adev-ja/src/content/guide/animations/migration.md b/adev-ja/src/content/guide/animations/migration.md
index 7872a9b50..e3a3e8dff 100644
--- a/adev-ja/src/content/guide/animations/migration.md
+++ b/adev-ja/src/content/guide/animations/migration.md
@@ -38,7 +38,7 @@ The animations package allowed you to define various states using the [`state()`
 
 #### With Animations Package
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="state1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state1"/>
 
 This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling.
 
@@ -69,17 +69,17 @@ The animations package required specifying triggers using the `trigger()` functi
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.ts" />
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.html" />
-    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.css"/>
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/animations-package/open-close.ts" />
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/animations-package/open-close.html" />
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/animations-package/open-close.css"/>
 </docs-code-multifile>
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
-    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.ts">
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.ts" />
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.html" />
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.css"/>
 </docs-code-multifile>
 
 ## Transition and Triggers
@@ -97,19 +97,19 @@ The animations package offers the ability to animate things that have been histo
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.ts" />
-    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.html" />
-    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.css" />
+    <docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.ts" />
+    <docs-code header="auto-height.html" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.html" />
+    <docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.css" />
 </docs-code-multifile>
 
 You can use css-grid to animate to auto height.
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
-    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
-    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
-    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts">
+    <docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts" />
+    <docs-code header="auto-height.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.html" />
+    <docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.css"  />
 </docs-code-multifile>
 
 If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information.
@@ -121,29 +121,25 @@ The animations package offered the previously mentioned pattern matching for ent
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.ts" />
-    <docs-code header="insert-remove.component.html" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.html" />
-    <docs-code header="insert-remove.component.css" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.css" />
+    <docs-code header="insert-remove.ts" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.ts" />
+    <docs-code header="insert-remove.html" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.html" />
+    <docs-code header="insert-remove.css" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.css" />
 </docs-code-multifile>
 
-Here's how the same thing can be accomplished without the animations package using `animate.enter`.
-
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
-    <docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
-    <docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
-    <docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.ts">
+    <docs-code header="insert.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.ts" />
+    <docs-code header="insert.html" path="adev/src/content/examples/animations/src/app/native-css/insert.html" />
+    <docs-code header="insert.css" path="adev/src/content/examples/animations/src/app/native-css/insert.css"  />
 </docs-code-multifile>
 
-Use `animate.leave` to animate elements as they leave the view, which will apply the specified CSS classes to the element as it leaves the view.
-
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
-    <docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
-    <docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
-    <docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.ts">
+    <docs-code header="remove.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.ts" />
+    <docs-code header="remove.html" path="adev/src/content/examples/animations/src/app/native-css/remove.html" />
+    <docs-code header="remove.css" path="adev/src/content/examples/animations/src/app/native-css/remove.css"  />
 </docs-code-multifile>
 
 For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
@@ -155,17 +151,17 @@ Along with the aforementioned `:enter` and `:leave`, there's also `:increment` a
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.ts" />
-    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.html" />
-    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.css" />
+    <docs-code header="increment-decrement.ts" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.ts" />
+    <docs-code header="increment-decrement.html" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.html" />
+    <docs-code header="increment-decrement.css" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.css" />
 </docs-code-multifile>
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
-    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
-    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
-    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts">
+    <docs-code header="increment-decrement.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts" />
+    <docs-code header="increment-decrement.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.html" />
+    <docs-code header="increment-decrement.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.css" />
 </docs-code-multifile>
 
 ### Parent / Child Animations
@@ -226,17 +222,17 @@ The `stagger()` function allowed you to delay the animation of each item in a li
 #### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.ts" />
-    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.html" />
-    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.css" />
+    <docs-code header="stagger.ts" path="adev/src/content/examples/animations/src/app/animations-package/stagger.ts" />
+    <docs-code header="stagger.html" path="adev/src/content/examples/animations/src/app/animations-package/stagger.html" />
+    <docs-code header="stagger.css" path="adev/src/content/examples/animations/src/app/animations-package/stagger.css" />
 </docs-code-multifile>
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
-    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
-    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
-    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.ts">
+    <docs-code header="stagger.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.ts" />
+    <docs-code header="stagger.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.html" />
+    <docs-code header="stagger.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.css" />
 </docs-code-multifile>
 
 ### Parallel Animations
@@ -257,20 +253,20 @@ In this example, the `rotate` and `fade-in` animations fire at the same time.
 
 Items reordering in a list works out of the box using the previously described techniques. No additional special work is required. Items in a `@for` loop will be removed and re-added properly, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example above.
 
-#### With Animations Package<
+#### With Animations Package
 
 <docs-code-multifile>
-    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.ts" />
-    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.html" />
-    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.css" />
+    <docs-code header="reorder.ts" path="adev/src/content/examples/animations/src/app/animations-package/reorder.ts" />
+    <docs-code header="reorder.html" path="adev/src/content/examples/animations/src/app/animations-package/reorder.html" />
+    <docs-code header="reorder.css" path="adev/src/content/examples/animations/src/app/animations-package/reorder.css" />
 </docs-code-multifile>
 
 #### With Native CSS
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
-    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
-    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
-    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.ts">
+    <docs-code header="reorder.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.ts" />
+    <docs-code header="reorder.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.html" />
+    <docs-code header="reorder.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.css" />
 </docs-code-multifile>
 
 ## Migrating usages of AnimationPlayer
diff --git a/adev-ja/src/content/guide/animations/overview.md b/adev-ja/src/content/guide/animations/overview.md
index 04981eaa6..ec2ee0d7c 100644
--- a/adev-ja/src/content/guide/animations/overview.md
+++ b/adev-ja/src/content/guide/animations/overview.md
@@ -1,6 +1,6 @@
 # Introduction to Angular animations
 
-IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
 
 Animation provides the illusion of motion: HTML elements change styling over time.
 Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic.
@@ -52,7 +52,7 @@ For `NgModule` based applications import `BrowserAnimationsModule`, which introd
 <docs-step title="Importing animation functions into component files">
 If you plan to use specific animation functions in component files, import those functions from `@angular/animations`.
 
-<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" region="imports"/>
+<docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="imports"/>
 
 See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide.
 
@@ -61,7 +61,7 @@ See all [available animation functions](guide/legacy-animations#animations-api-s
 In the component file, add a metadata property called `animations:` within the `@Component()` decorator.
 You put the trigger that defines an animation within the `animations` metadata property.
 
-<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" region="decorator"/>
+<docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="decorator"/>
 </docs-step>
 </docs-workflow>
 
@@ -84,7 +84,7 @@ Run the following command in terminal to generate the component:
 ng g component open-close
 ```
 
-This will create the component at `src/app/open-close.component.ts`.
+This will create the component at `src/app/open-close.ts`.
 
 ### Animation state and styles
 
@@ -99,11 +99,11 @@ Let's see how Angular's [`state()`](api/animations/state) function works with th
 In this code snippet, multiple style attributes are set at the same time for the state.
 In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="state1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state1"/>
 
 In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="state2"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="state2"/>
 
 ### Transitions and timing
 
@@ -171,7 +171,7 @@ HELPFUL: See the Material Design website's topic on [Natural easing curves](http
 
 This example provides a state transition from `open` to `closed` with a 1-second transition between states.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="transition1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition1"/>
 
 In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional.
 Within the transition, `animate()` specifies how long the transition takes.
@@ -179,7 +179,7 @@ In this case, the state change from `open` to `closed` takes 1 second, expressed
 
 This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="transition2"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition2"/>
 
 HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions.
 
@@ -212,7 +212,7 @@ However, it's possible for multiple triggers to be active at once.
 Animations are defined in the metadata of the component that controls the HTML element to be animated.
 Put the code that defines your animations under the `animations:` property within the `@Component()` decorator.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="component"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
 
 When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol.
 Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state.
@@ -225,7 +225,7 @@ The animation is executed or triggered when the expression value changes to a ne
 
 The following code snippet binds the trigger to the value of the `isOpen` property.
 
-<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" region="trigger"/>
+<docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.1.html" region="trigger"/>
 
 In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change.
 Then it's up to the `openClose` code to handle the state change and kick off a state change animation.
@@ -242,9 +242,9 @@ In the HTML template file, use the trigger name to attach the defined animations
 Here are the code files discussed in the transition example.
 
 <docs-code-multifile>
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="component"/>
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" region="trigger"/>
-    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/open-close.component.css"/>
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="component"/>
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.1.html" region="trigger"/>
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/open-close.css"/>
 </docs-code-multifile>
 
 ### Summary
diff --git a/adev-ja/src/content/guide/animations/reusable-animations.md b/adev-ja/src/content/guide/animations/reusable-animations.md
index 350aaa4b4..b1519edfe 100644
--- a/adev-ja/src/content/guide/animations/reusable-animations.md
+++ b/adev-ja/src/content/guide/animations/reusable-animations.md
@@ -1,6 +1,6 @@
 # Reusable animations
 
-IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
 
 This topic provides some examples of how to create reusable animations.
 
@@ -23,7 +23,7 @@ For example, the following snippet exports the animation `trigger`.
 From this point, you can import reusable animation variables in your component class.
 For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.3.ts" region="reusable"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.3.ts" region="reusable"/>
 
 ## More on Angular animations
 
diff --git a/adev-ja/src/content/guide/animations/transition-and-triggers.md b/adev-ja/src/content/guide/animations/transition-and-triggers.md
index 1856a2e24..1e03b72ed 100644
--- a/adev-ja/src/content/guide/animations/transition-and-triggers.md
+++ b/adev-ja/src/content/guide/animations/transition-and-triggers.md
@@ -1,6 +1,6 @@
 # Animation transitions and triggers
 
-IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
 
 This guide goes into depth on special transition states such as the `*` wildcard and `void`. It shows how these special states are used for elements entering and leaving a view.
 This section also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes.
@@ -23,11 +23,11 @@ Instead of defining each state-to-state transition pair, any transition to `clos
 
 This allows the addition of new states without having to include separate transitions for each one.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="trigger-wildcard1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="trigger-wildcard1"/>
 
 Use a double arrow syntax to specify state-to-state transitions in both directions.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="trigger-wildcard2"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="trigger-wildcard2"/>
 
 ### Use wildcard state with multiple transition states
 
@@ -37,7 +37,7 @@ If the button can change from `open` to either `closed` or something like `inPro
 
 <img alt="wildcard state with 3 states" src="assets/images/guide/animations/wildcard-3-states.png">
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="trigger-transition"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="trigger-transition"/>
 
 The `* => *` transition applies when any change between two states takes place.
 
@@ -52,7 +52,7 @@ To do this, list the more specific transitions _before_ `* => *`.
 Use the wildcard `*` with a style to tell the animation to use whatever the current style value is, and animate with that.
 Wildcard is a fallback value that's used if the state being animated isn't declared within the trigger.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="transition4"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="transition4"/>
 
 ### Void state
 
@@ -76,7 +76,7 @@ Add a new behavior:
 - When you add a hero to the list of heroes, it appears to fly onto the page from the left
 - When you remove a hero from the list, it appears to fly out to the right
 
-<docs-code header="hero-list-enter-leave.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts" region="animationdef"/>
+<docs-code header="hero-list-enter-leave.ts" path="adev/src/content/examples/animations/src/app/hero-list-enter-leave.ts" region="animationdef"/>
 
 In the preceding code, you applied the `void` state when the HTML element isn't attached to a view.
 
@@ -105,11 +105,11 @@ As a rule of thumb consider that any element being added to the DOM by Angular p
 This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`.
 The HTML template contains the following code.
 
-<docs-code header="insert-remove.component.html" path="adev/src/content/examples/animations/src/app/insert-remove.component.html" region="insert-remove"/>
+<docs-code header="insert-remove.html" path="adev/src/content/examples/animations/src/app/insert-remove.html" region="insert-remove"/>
 
 In the component file, the `:enter` transition sets an initial opacity of 0. It then animates it to change that opacity to 1 as the element is inserted into the view.
 
-<docs-code header="insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/insert-remove.component.ts" region="enter-leave-trigger"/>
+<docs-code header="insert-remove.ts" path="adev/src/content/examples/animations/src/app/insert-remove.ts" region="enter-leave-trigger"/>
 
 Note that this example doesn't need to use [`state()`](api/animations/state).
 
@@ -121,13 +121,13 @@ Use these to kick off a transition when a numeric value has increased or decreas
 HELPFUL: The following example uses `query()` and `stagger()` methods.
 For more information on these methods, see the [complex sequences](guide/legacy-animations/complex-sequences) page.
 
-<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="increment"/>
+<docs-code header="hero-list-page.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.ts" region="increment"/>
 
 ## Boolean values in transitions
 
 If a trigger contains a Boolean value as a binding value, then this value can be matched using a `transition()` expression that compares `true` and `false`, or `1` and `0`.
 
-<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.2.html" region="trigger-boolean"/>
+<docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.2.html" region="trigger-boolean"/>
 
 In the code snippet above, the HTML template binds a `<div>` element to a trigger named `openClose` with a status expression of `isOpen`, and with possible values of `true` and `false`.
 This pattern is an alternative to the practice of creating two named states like `open` and `close`.
@@ -136,7 +136,7 @@ Inside the `@Component` metadata under the `animations:` property, when the stat
 In this case, the animation uses whatever height the element already had before the animation started.
 When the element is `closed`, the element gets animated to a height of 0, which makes it invisible.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.2.ts" region="trigger-boolean"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.2.ts" region="trigger-boolean"/>
 
 ## Multiple animation triggers
 
@@ -156,8 +156,8 @@ When true, the `@.disabled` binding prevents all animations from rendering.
 The following code sample shows how to use this feature.
 
 <docs-code-multifile>
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.4.html" region="toggle-animation"/>
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.4.ts" region="toggle-animation" language="typescript"/>
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.4.html" region="toggle-animation"/>
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.4.ts" region="toggle-animation" language="typescript"/>
 </docs-code-multifile>
 
 When the `@.disabled` binding is true, the `@childAnimation` trigger doesn't kick off.
@@ -177,7 +177,7 @@ Those elements can still animate.
 
 To turn off all animations for an Angular application, place the `@.disabled` host binding on the topmost Angular component.
 
-<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" region="toggle-app-animations"/>
+<docs-code header="app.ts" path="adev/src/content/examples/animations/src/app/app.ts" region="toggle-app-animations"/>
 
 HELPFUL: Disabling animations application-wide is useful during end-to-end \(E2E\) testing.
 
@@ -186,12 +186,12 @@ HELPFUL: Disabling animations application-wide is useful during end-to-end \(E2E
 The animation `trigger()` function emits _callbacks_ when it starts and when it finishes.
 The following example features a component that contains an `openClose` trigger.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="events1"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="events1"/>
 
 In the HTML template, the animation event is passed back via `$event`, as `@triggerName.start` and `@triggerName.done`, where `triggerName` is the name of the trigger being used.
 In this example, the trigger `openClose` appears as follows.
 
-<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.3.html" region="callbacks"/>
+<docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/open-close.3.html" region="callbacks"/>
 
 A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup.
 For example, an **InProgress** button can be set up to have its own looping animation while the backend system operation finishes.
@@ -204,7 +204,7 @@ An animation can influence an end user to _perceive_ the operation as faster, ev
 Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console.
 The following code snippet creates console log output for the original example, a button with the two states of `open` and `closed`.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" region="events"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.ts" region="events"/>
 
 ## Keyframes
 
@@ -217,7 +217,7 @@ For example, the button, instead of fading, could change color several times ove
 
 The code for this color change might look like this.
 
-<docs-code header="status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" region="keyframes"/>
+<docs-code header="status-slider.ts" path="adev/src/content/examples/animations/src/app/status-slider.ts" region="keyframes"/>
 
 ### Offset
 
@@ -233,7 +233,7 @@ Specifying an offset of 0.8 for the middle transition in the preceding example m
 
 The code with offsets specified would be as follows.
 
-<docs-code header="status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" region="keyframesWithOffsets"/>
+<docs-code header="status-slider.ts" path="adev/src/content/examples/animations/src/app/status-slider.ts" region="keyframesWithOffsets"/>
 
 You can combine keyframes with `duration`, `delay`, and `easing` within a single animation.
 
@@ -250,7 +250,7 @@ Here's an example of using keyframes to create a pulse effect:
 
 The code snippet for this animation might look like this.
 
-<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.1.ts" region="trigger"/>
+<docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/open-close.1.ts" region="trigger"/>
 
 ### Animatable properties and units
 
@@ -285,7 +285,7 @@ In these cases, you can use a special wildcard `*` property value under `style()
 The following example has a trigger called `shrinkOut`, used when an HTML element leaves the page.
 The animation takes whatever height the element has before it leaves, and animates from that height to zero.
 
-<docs-code header="hero-list-auto.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-auto.component.ts" region="auto-calc"/>
+<docs-code header="hero-list-auto.ts" path="adev/src/content/examples/animations/src/app/hero-list-auto.ts" region="auto-calc"/>
 
 ### Keyframes summary
 
diff --git a/adev-ja/src/content/guide/di/creating-injectable-service.md b/adev-ja/src/content/guide/di/creating-injectable-service.md
index 1dad19288..30123b8a6 100644
--- a/adev-ja/src/content/guide/di/creating-injectable-service.md
+++ b/adev-ja/src/content/guide/di/creating-injectable-service.md
@@ -108,20 +108,20 @@ For clarity and maintainability, it is recommended that you define components an
 
 To inject a service as a dependency into a component, you can declare a class field representing the dependency and use Angular's [`inject`](/api/core/inject) function to initialize it.
 
-The following example specifies the `HeroService` in the `HeroListComponent`.
+The following example specifies the `HeroService` in the `HeroList`.
 The type of `heroService` is `HeroService`.
 
 ```ts
 import {inject} from '@angular/core';
 
-export class HeroListComponent {
+export class HeroList {
   private heroService = inject(HeroService);
 }
 ```
 
 It is also possible to inject a service into a component using the component's constructor:
 
-```ts {header: 'hero-list.component.ts (constructor signature)'}
+```ts {header: 'hero-list.ts (constructor signature)'}
   constructor(private heroService: HeroService)
 ```
 
@@ -155,6 +155,6 @@ In this example, the `getHeroes()` method uses the `Logger` service by logging a
 ## What's next
 
 <docs-pill-row>
-  <docs-pill href="/guide/di/dependency-injection-providers" title="Configuring dependency providers"/>
-  <docs-pill href="/guide/di/dependency-injection-providers#using-an-injectiontoken-object" title="`InjectionTokens`"/>
+  <docs-pill href="guide/di/defining-dependency-providers" title="Configuring dependency providers"/>
+  <docs-pill href="guide/di/defining-dependency-providers#automatic-provision-for-non-class-dependencies" title="`InjectionTokens`"/>
 </docs-pill-row>
diff --git a/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md b/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md
new file mode 100644
index 000000000..e5f9ae964
--- /dev/null
+++ b/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md
@@ -0,0 +1,1018 @@
+# Debugging and troubleshooting dependency injection
+
+Dependency injection (DI) issues typically stem from configuration mistakes, scope problems, or incorrect usage patterns. This guide helps you identify and resolve common DI problems that developers encounter.
+
+## Common pitfalls and solutions
+
+### Services not available where expected
+
+One of the most common DI issues occurs when you try to inject a service but Angular cannot find it in the current injector or any parent injector. This usually happens when the service is provided in the wrong scope or not provided at all.
+
+#### Provider scope mismatch
+
+When you provide a service in a component's `providers` array, Angular creates an instance in that component's injector. This instance is only available to that component and its children. Parent components and sibling components cannot access it because they use different injectors.
+
+```angular-ts {header: 'child-view.ts'}
+import {Component} from '@angular/core';
+import {DataStore} from './data-store';
+
+@Component({
+  selector: 'app-child',
+  template: '<p>Child</p>',
+  providers: [DataStore], // Only available in this component and its children
+})
+export class ChildView {}
+```
+
+```angular-ts {header: 'parent-view.ts'}
+import {Component, inject} from '@angular/core';
+import {DataStore} from './data-store';
+
+@Component({
+  selector: 'app-parent',
+  template: '<app-child />',
+})
+export class ParentView {
+  private dataService = inject(DataStore); // ERROR: Not available to parent
+}
+```
+
+Angular only searches up the hierarchy, never down. Parent components cannot access services provided in child components.
+
+**Solution:** Provide the service at a higher level (application or parent component).
+
+```ts {prefer}
+import {Injectable} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class DataStore {
+  // Available everywhere
+}
+```
+
+TIP: Use `providedIn: 'root'` by default for services that don't need component-specific state. This makes services available everywhere and enables tree-shaking.
+
+#### Services and lazy-loaded routes
+
+When you provide a service in a lazy-loaded route's `providers` array, Angular creates a child injector for that route. This injector and its services only become available after the route loads. Components in the eagerly-loaded parts of your application cannot access these services because they use different injectors that exist before the lazy-loaded injector is created.
+
+```ts {header: 'feature.routes.ts'}
+import {Routes} from '@angular/router';
+import {FeatureClient} from './feature-client';
+
+export const featureRoutes: Routes = [
+  {
+    path: 'feature',
+    providers: [FeatureClient],
+    loadComponent: () => import('./feature-view'),
+  },
+];
+```
+
+```angular-ts {header: 'eager-view.ts'}
+import {Component, inject} from '@angular/core';
+import {FeatureClient} from './feature-client';
+
+@Component({
+  selector: 'app-eager',
+  template: '<p>Eager Component</p>',
+})
+export class EagerView {
+  private featureService = inject(FeatureClient); // ERROR: Not available yet
+}
+```
+
+Lazy-loaded routes create child injectors that are only available after the route loads.
+
+NOTE: By default, route injectors and their services persist even after navigating away from the route. They are not destroyed until the application is closed. For automatic cleanup of unused route injectors, see [customizing route behavior](guide/routing/customizing-route-behavior#experimental-automatic-cleanup-of-unused-route-injectors).
+
+**Solution:** Use `providedIn: 'root'` for services that need to be shared across lazy boundaries.
+
+```ts {prefer, header: 'Provide at root for shared services'}
+import {Injectable} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class FeatureClient {
+  // Available everywhere, including before lazy load
+}
+```
+
+If the service should be lazy-loaded but still available to eager components, inject it only where needed and use optional injection to handle availability.
+
+### Multiple instances instead of singletons
+
+You expect one shared instance (singleton) but get separate instances in different components.
+
+#### Providing in component instead of root
+
+When you add a service to a component's `providers` array, Angular creates a new instance of that service for each instance of the component. Each component gets its own separate service instance, which means changes in one component don't affect the service instance in other components. This is often unexpected when you want shared state across your application.
+
+```angular-ts {avoid, header: 'Component-level provider creates multiple instances'}
+import {Component, inject} from '@angular/core';
+import {UserClient} from './user-client';
+
+@Component({
+  selector: 'app-profile',
+  template: '<p>Profile</p>',
+  providers: [UserClient], // Creates new instance per component!
+})
+export class UserProfile {
+  private userService = inject(UserClient);
+}
+
+@Component({
+  selector: 'app-settings',
+  template: '<p>Settings</p>',
+  providers: [UserClient], // Different instance!
+})
+export class UserSettings {
+  private userService = inject(UserClient);
+}
+```
+
+Each component gets its own `UserClient` instance. Changes in one component don't affect the other.
+
+**Solution:** Use `providedIn: 'root'` for singletons.
+
+```ts {prefer, header: 'Root-level singleton'}
+import {Injectable} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class UserClient {
+  // Single instance shared across all components
+}
+```
+
+#### When multiple instances are intentional
+
+Sometimes you want separate instances per component for component-specific state.
+
+```angular-ts {header: 'Intentional: Component-scoped state'}
+import {Injectable, signal} from '@angular/core';
+
+@Injectable() // No providedIn - must be provided explicitly
+export class FormStateStore {
+  private formData = signal({});
+
+  setData(data: any) {
+    this.formData.set(data);
+  }
+
+  getData() {
+    return this.formData();
+  }
+}
+
+@Component({
+  selector: 'app-user-form',
+  template: '<form>...</form>',
+  providers: [FormStateStore], // Each form gets its own state
+})
+export class UserForm {
+  private formState = inject(FormStateStore);
+}
+```
+
+This pattern is useful for:
+
+- Form state management (each form has isolated state)
+- Component-specific caching
+- Temporary data that shouldn't be shared
+
+### Incorrect inject() usage
+
+The `inject()` function only works in specific contexts during class construction and factory execution.
+
+#### Using inject() in lifecycle hooks
+
+When you call the `inject()` function inside lifecycle hooks like `ngOnInit()`, `ngAfterViewInit()`, or `ngOnDestroy()`, Angular throws an error because these methods run outside the injection context. The injection context is only available during the synchronous execution of class construction, which happens before lifecycle hooks are called.
+
+```angular-ts {avoid, header: 'inject() in ngOnInit'}
+import {Component, inject} from '@angular/core';
+import {UserClient} from './user-client';
+
+@Component({
+  selector: 'app-profile',
+  template: '<p>User: {{userName}}</p>',
+})
+export class UserProfile {
+  userName = '';
+
+  ngOnInit() {
+    const userService = inject(UserClient); // ERROR: Not an injection context
+    this.userName = userService.getUser().name;
+  }
+}
+```
+
+**Solution:** Capture dependencies and derive values in field initializers.
+
+```angular-ts {prefer, header: 'Derive values in field initializers'}
+import {Component, inject} from '@angular/core';
+import {UserClient} from './user-client';
+
+@Component({
+  selector: 'app-profile',
+  template: '<p>User: {{userName}}</p>',
+})
+export class UserProfile {
+  private userService = inject(UserClient);
+  userName = this.userService.getUser().name;
+}
+```
+
+#### Using the Injector for deferred injection
+
+When you need to retrieve services outside an injection context, use the captured `Injector` directly with `injector.get()`:
+
+```angular-ts
+import {Component, inject, Injector} from '@angular/core';
+import {UserClient} from './user-client';
+
+@Component({
+  selector: 'app-profile',
+  template: '<button (click)="delayedLoad()">Load Later</button>',
+})
+export class UserProfile {
+  private injector = inject(Injector);
+
+  delayedLoad() {
+    setTimeout(() => {
+      const userService = this.injector.get(UserClient);
+      console.log(userService.getUser());
+    }, 1000);
+  }
+}
+```
+
+#### Using runInInjectionContext for callbacks
+
+Use `runInInjectionContext()` when you need to enable **other code** to call `inject()`. This is useful when accepting callbacks that might use dependency injection:
+
+```angular-ts
+import {Component, inject, Injector, input} from '@angular/core';
+
+@Component({
+  selector: 'app-data-loader',
+  template: '<button (click)="load()">Load</button>',
+})
+export class DataLoader {
+  private injector = inject(Injector);
+  onLoad = input<() => void>();
+
+  load() {
+    const callback = this.onLoad();
+    if (callback) {
+      // Enable the callback to use inject()
+      this.injector.runInInjectionContext(callback);
+    }
+  }
+}
+```
+
+The `runInInjectionContext()` method creates a temporary injection context, allowing code inside the callback to call `inject()`.
+
+IMPORTANT: Always capture dependencies at the class level when possible. Use `injector.get()` for simple deferred retrieval, and `runInInjectionContext()` only when external code needs to call `inject()`.
+
+TIP: Use `assertInInjectionContext()` to verify your code is running in a valid injection context. This is useful when creating reusable functions that call `inject()`. See [Asserting the context](guide/di/dependency-injection-context#asserts-the-context) for details.
+
+### providers vs viewProviders confusion
+
+The difference between `providers` and `viewProviders` affects content projection scenarios.
+
+#### Understanding the difference
+
+**providers:** Available to the component's template AND any content projected into the component (ng-content).
+
+**viewProviders:** Only available to the component's template, NOT to projected content.
+
+```angular-ts {header: 'parent-view.ts'}
+import {Component, inject} from '@angular/core';
+import {ThemeStore} from './theme-store';
+
+@Component({
+  selector: 'app-parent',
+  template: `
+    <div>
+      <p>Theme: {{ themeService.theme() }}</p>
+      <ng-content />
+    </div>
+  `,
+  providers: [ThemeStore], // Available to content children
+})
+export class ParentView {
+  protected themeService = inject(ThemeStore);
+}
+
+@Component({
+  selector: 'app-parent-view',
+  template: `
+    <div>
+      <p>Theme: {{ themeService.theme() }}</p>
+      <ng-content />
+    </div>
+  `,
+  viewProviders: [ThemeStore], // NOT available to content children
+})
+export class ParentViewOnly {
+  protected themeService = inject(ThemeStore);
+}
+```
+
+```angular-ts {header: 'child-view.ts'}
+import {Component, inject} from '@angular/core';
+import {ThemeStore} from './theme-store';
+
+@Component({
+  selector: 'app-child',
+  template: '<p>Child theme: {{theme()}}</p>',
+})
+export class ChildView {
+  private themeService = inject(ThemeStore, {optional: true});
+  theme = () => this.themeService?.theme() ?? 'none';
+}
+```
+
+```angular-ts {header: 'app.ts'}
+@Component({
+  selector: 'app-root',
+  template: `
+    <app-parent>
+      <app-child />
+      <!-- Can access ThemeStore -->
+    </app-parent>
+
+    <app-parent-view>
+      <app-child />
+      <!-- Cannot access ThemeStore -->
+    </app-parent-view>
+  `,
+})
+export class App {}
+```
+
+**When projected into `app-parent`:** The child component can inject `ThemeStore` because `providers` makes it available to projected content.
+
+**When projected into `app-parent-view`:** The child component cannot inject `ThemeStore` because `viewProviders` restricts it to the parent's template only.
+
+#### Choosing between providers and viewProviders
+
+Use `providers` when:
+
+- The service should be available to projected content
+- You want content children to access the service
+- You're providing general-purpose services
+
+Use `viewProviders` when:
+
+- The service should only be available to your component's template
+- You want to hide implementation details from projected content
+- You're providing internal services that shouldn't leak out
+
+**Default recommendation:** Use `providers` unless you have a specific reason to restrict access with `viewProviders`.
+
+### InjectionToken issues
+
+When using `InjectionToken` for non-class dependencies, developers often encounter problems related to token identity, type safety, and provider configuration. These issues usually stem from how JavaScript handles object identity and how TypeScript infers types.
+
+#### Token identity confusion
+
+When you create a new `InjectionToken` instance, JavaScript creates a unique object in memory. Even if you create another `InjectionToken` with the exact same description string, it's a completely different object. Angular uses the token object's identity (not its description) to match providers with injection points, so tokens with the same description but different object identities cannot access each other's values.
+
+```ts {header: 'config.token.ts'}
+import {InjectionToken} from '@angular/core';
+
+export interface AppConfig {
+  apiUrl: string;
+}
+
+export const APP_CONFIG = new InjectionToken<AppConfig>('app config');
+```
+
+```ts {header: 'app.config.ts'}
+import {APP_CONFIG} from './config.token';
+
+export const appConfig: AppConfig = {
+  apiUrl: 'https://api.example.com',
+};
+
+bootstrapApplication(App, {
+  providers: [{provide: APP_CONFIG, useValue: appConfig}],
+});
+```
+
+```angular-ts {avoid, header: 'feature-view.ts'}
+// Creating new token with same description
+import {InjectionToken, inject} from '@angular/core';
+import {AppConfig} from './config.token';
+
+const APP_CONFIG = new InjectionToken<AppConfig>('app config');
+
+@Component({
+  selector: 'app-feature',
+  template: '<p>Feature</p>',
+})
+export class FeatureView {
+  private config = inject(APP_CONFIG); // ERROR: Different token instance!
+}
+```
+
+Even though both tokens have the description `'app config'`, they are different objects. Angular compares tokens by reference, not by description.
+
+**Solution:** Import the same token instance.
+
+```angular-ts {prefer, header: 'feature-view.ts'}
+import {inject} from '@angular/core';
+import {APP_CONFIG, AppConfig} from './config.token';
+
+@Component({
+  selector: 'app-feature',
+  template: '<p>API: {{config.apiUrl}}</p>',
+})
+export class FeatureView {
+  protected config = inject(APP_CONFIG); // Works: Same token instance
+}
+```
+
+TIP: Always export tokens from a shared file and import them everywhere they're needed. Never create multiple `InjectionToken` instances with the same description.
+
+#### Trying to inject interfaces
+
+When you define a TypeScript interface, it only exists during compilation for type checking. TypeScript erases all interface definitions when it compiles to JavaScript, so at runtime there's no object for Angular to use as an injection token. If you try to inject an interface type, Angular has nothing to match against the provider configuration.
+
+```angular-ts {avoid, header: 'Can't inject interface'}
+interface UserConfig {
+  name: string;
+  email: string;
+}
+
+@Component({
+  selector: 'app-profile',
+  template: '<p>Profile</p>',
+})
+export class UserProfile {
+  // ERROR: Interfaces don't exist at runtime
+  constructor(private config: UserConfig) {}
+}
+```
+
+**Solution:** Use `InjectionToken` for interface types.
+
+```angular-ts {prefer, header: 'Use InjectionToken for interfaces'}
+import {InjectionToken, inject} from '@angular/core';
+
+interface UserConfig {
+  name: string;
+  email: string;
+}
+
+export const USER_CONFIG = new InjectionToken<UserConfig>('user configuration');
+
+// Provide the configuration
+bootstrapApplication(App, {
+  providers: [
+    {
+      provide: USER_CONFIG,
+      useValue: {name: 'Alice', email: 'alice@example.com'},
+    },
+  ],
+});
+
+// Inject using the token
+@Component({
+  selector: 'app-profile',
+  template: '<p>User: {{config.name}}</p>',
+})
+export class UserProfile {
+  protected config = inject(USER_CONFIG);
+}
+```
+
+The `InjectionToken` exists at runtime and can be used for injection, while the `UserConfig` interface provides type safety during development.
+
+### Circular dependencies
+
+Circular dependencies occur when services inject each other, creating a cycle that Angular cannot resolve. For detailed explanations and code examples, see [NG0200: Circular dependency](errors/NG0200).
+
+**Resolution strategies** (in order of preference):
+
+1. **Restructure** - Extract shared logic to a third service, breaking the cycle
+2. **Use events** - Replace direct dependencies with event-based communication (such as `Subject`)
+3. **Lazy injection** - Use `Injector.get()` to defer one dependency (last resort)
+
+NOTE: Do not use `forwardRef()` for service circular dependencies—it only solves circular imports in standalone component configurations.
+
+## Debugging dependency resolution
+
+### Understanding the resolution process
+
+Angular resolves dependencies by walking up the injector hierarchy. When a `NullInjectorError` occurs, understanding this search order helps you identify where to add the missing provider.
+
+Angular searches in this order:
+
+1. **Element injector** - The current component or directive
+2. **Parent element injectors** - Up the DOM tree through parent components
+3. **Environment injector** - The route or application injector
+4. **NullInjector** - Throws `NullInjectorError` if not found
+
+When you see a `NullInjectorError`, the service isn't provided at any level the component can access. Check that:
+
+- The service has `@Injectable({providedIn: 'root'})`, or
+- The service is in a `providers` array the component can reach
+
+You can modify this search behavior with resolution modifiers like `self`, `skipSelf`, `host`, and `optional`. For complete coverage of resolution rules and modifiers, see the [Hierarchical injectors guide](guide/di/hierarchical-dependency-injection).
+
+### Using Angular DevTools
+
+Angular DevTools includes an injector tree inspector that visualizes the entire injector hierarchy and shows which providers are available at each level. For installation and general usage, see the [Angular DevTools injector documentation](tools/devtools/injectors).
+
+When debugging DI issues, use DevTools to answer these questions:
+
+- **Is the service provided?** Select the component that fails to inject and check if the service appears in the Injector section.
+- **At what level?** Walk up the component tree to find where the service is actually provided (component, route, or application level).
+- **Multiple instances?** If a singleton service appears in multiple component injectors, it's likely provided in component `providers` arrays instead of using `providedIn: 'root'`.
+
+If a service never appears in any injector, verify it has the `@Injectable()` decorator with `providedIn: 'root'` or is listed in a `providers` array.
+
+### Logging and tracing injection
+
+When DevTools isn't enough, use logging to trace injection behavior.
+
+#### Logging service creation
+
+Add console logs to service constructors to see when services are created.
+
+```ts
+import {Injectable} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class UserClient {
+  constructor() {
+    console.log('UserClient created');
+    console.trace(); // Shows call stack
+  }
+
+  getUser() {
+    return {name: 'Alice'};
+  }
+}
+```
+
+When the service is created, you'll see the log message and a stack trace showing where the injection occurred.
+
+**What to look for:**
+
+- How many times is the constructor called? (should be once for singletons)
+- Where in the code is it being injected? (check the stack trace)
+- Is it created at the expected time? (application startup vs lazy)
+
+#### Checking service availability
+
+Use optional injection with logging to determine if a service is available.
+
+```angular-ts
+import {Component, inject} from '@angular/core';
+import {UserClient} from './user-client';
+
+@Component({
+  selector: 'app-debug',
+  template: '<p>Debug Component</p>',
+})
+export class DebugView {
+  private userService = inject(UserClient, {optional: true});
+
+  constructor() {
+    if (this.userService) {
+      console.log('UserClient available:', this.userService);
+    } else {
+      console.warn('UserClient NOT available');
+      console.trace(); // Shows where we tried to inject
+    }
+  }
+}
+```
+
+This pattern helps you verify if a service is available without crashing the application.
+
+#### Logging resolution modifiers
+
+Test different resolution strategies with logging.
+
+```angular-ts
+import {Component, inject} from '@angular/core';
+import {UserClient} from './user-client';
+
+@Component({
+  selector: 'app-debug',
+  template: '<p>Debug Component</p>',
+  providers: [UserClient],
+})
+export class DebugView {
+  // Try to get local instance
+  private localService = inject(UserClient, {self: true, optional: true});
+
+  // Try to get parent instance
+  private parentService = inject(UserClient, {
+    skipSelf: true,
+    optional: true,
+  });
+
+  constructor() {
+    console.log('Local instance:', this.localService);
+    console.log('Parent instance:', this.parentService);
+    console.log('Same instance?', this.localService === this.parentService);
+  }
+}
+```
+
+This shows you which instances are available at different injector levels.
+
+### Debugging workflow
+
+When DI fails, follow this systematic approach:
+
+**Step 1: Read the error message**
+
+- Identify the error code (NG0200, NG0203, etc.)
+- Read the dependency path
+- Note which token failed
+
+**Step 2: Check the basics**
+
+- Does the service have `@Injectable()`?
+- Is `providedIn` set correctly?
+- Are imports correct?
+- Is the file included in compilation?
+
+**Step 3: Verify injection context**
+
+- Is `inject()` called in a valid context?
+- Check for async issues (await, setTimeout, promises)
+- Verify timing (not after destroy)
+
+**Step 4: Use debugging tools**
+
+- Open Angular DevTools
+- Check injector hierarchy
+- Add console logs to constructors
+- Use optional injection to test availability
+
+**Step 5: Simplify and isolate**
+
+- Remove dependencies one by one
+- Test in a minimal component
+- Check each injector level separately
+- Create a reproduction case
+
+## DI error reference
+
+This section provides detailed information about specific Angular DI error codes you may encounter. Use this as a reference when you see these errors in your console.
+
+### NullInjectorError: No provider for [Service]
+
+**Error code:** None (displayed as `NullInjectorError`)
+
+This error occurs when Angular cannot find a provider for a token in the injector hierarchy. The error message includes a dependency path showing where the injection was attempted.
+
+```
+NullInjectorError: No provider for UserClient!
+  Dependency path: App -> AuthClient -> UserClient
+```
+
+The dependency path shows that `App` injected `AuthClient`, which tried to inject `UserClient`, but no provider was found.
+
+#### Missing @Injectable decorator
+
+The most common cause is forgetting the `@Injectable()` decorator on a service class.
+
+```ts {avoid, header: 'Missing decorator'}
+export class UserClient {
+  getUser() {
+    return {name: 'Alice'};
+  }
+}
+```
+
+Angular requires the `@Injectable()` decorator to generate the metadata needed for dependency injection.
+
+```ts {prefer, header: 'Include @Injectable'}
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserClient {
+  getUser() {
+    return {name: 'Alice'};
+  }
+}
+```
+
+NOTE: Classes with zero-argument constructors can work without `@Injectable()`, but this is not recommended. Always include the decorator for consistency and to avoid issues when adding dependencies later.
+
+#### Missing providedIn configuration
+
+A service may have `@Injectable()` but not specify where it should be provided.
+
+```ts {avoid, header: 'No providedIn specified'}
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class UserClient {
+  getUser() {
+    return {name: 'Alice'};
+  }
+}
+```
+
+Specify `providedIn: 'root'` to make the service available throughout your application.
+
+```ts {prefer, header: 'Specify providedIn'}
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserClient {
+  getUser() {
+    return {name: 'Alice'};
+  }
+}
+```
+
+The `providedIn: 'root'` configuration makes the service available application-wide and enables tree-shaking (the service is removed from the bundle if never injected).
+
+#### Standalone component missing imports
+
+In Angular v20+ with standalone components, you must explicitly import or provide dependencies in each component.
+
+```angular-ts {avoid, header: 'Missing service import'}
+import {Component, inject} from '@angular/core';
+import {UserClient} from './user-client';
+
+@Component({
+  selector: 'app-profile',
+  template: '<p>User: {{user().name}}</p>',
+})
+export class UserProfile {
+  private userService = inject(UserClient); // ERROR: No provider
+  user = this.userService.getUser();
+}
+```
+
+Ensure the service uses `providedIn: 'root'` or add it to the component's `providers` array.
+
+```angular-ts {prefer, header: 'Service uses providedIn: root'}
+import {Component, inject} from '@angular/core';
+import {UserClient} from './user-client';
+
+@Component({
+  selector: 'app-profile',
+  template: '<p>User: {{user().name}}</p>',
+})
+export class UserProfile {
+  private userService = inject(UserClient); // Works: providedIn: 'root'
+  user = this.userService.getUser();
+}
+```
+
+#### Debugging with the dependency path
+
+The dependency path in the error message shows the chain of injections that led to the failure.
+
+```
+NullInjectorError: No provider for LoggerStore!
+  Dependency path: App -> DataStore -> ApiClient -> LoggerStore
+```
+
+This path tells you:
+
+1. `App` injected `DataStore`
+2. `DataStore` injected `ApiClient`
+3. `ApiClient` tried to inject `LoggerStore`
+4. No provider for `LoggerStore` was found
+
+Start your investigation at the end of the chain (`LoggerStore`) and verify it has proper configuration.
+
+#### Checking provider availability with optional injection
+
+Use optional injection to check if a provider exists without throwing an error.
+
+```angular-ts
+import {Component, inject} from '@angular/core';
+import {UserClient} from './user-client';
+
+@Component({
+  selector: 'app-debug',
+  template: '<p>Service available: {{serviceAvailable}}</p>',
+})
+export class DebugView {
+  private userService = inject(UserClient, {optional: true});
+  serviceAvailable = this.userService !== null;
+}
+```
+
+Optional injection returns `null` if no provider is found, allowing you to handle the absence gracefully.
+
+### NG0203: inject() must be called from an injection context
+
+**Error code:** NG0203
+
+This error occurs when you call `inject()` outside of a valid injection context. Angular requires `inject()` to be called synchronously during class construction or factory execution.
+
+```
+NG0203: inject() must be called from an injection context such as a
+constructor, a factory function, a field initializer, or a function
+used with `runInInjectionContext`.
+```
+
+#### Valid injection contexts
+
+Angular allows `inject()` in these locations:
+
+1. **Class field initializers**
+
+   ```angular-ts
+   import {Component, inject} from '@angular/core';
+   import {UserClient} from './user-client';
+
+   @Component({
+     selector: 'app-profile',
+     template: '<p>User: {{user().name}}</p>',
+   })
+   export class UserProfile {
+     private userService = inject(UserClient); // Valid
+     user = this.userService.getUser();
+   }
+   ```
+
+2. **Class constructor**
+
+   ```angular-ts
+   import {Component, inject} from '@angular/core';
+   import {UserClient} from './user-client';
+
+   @Component({
+     selector: 'app-profile',
+     template: '<p>User: {{user().name}}</p>',
+   })
+   export class UserProfile {
+     private userService: UserClient;
+
+     constructor() {
+       this.userService = inject(UserClient); // Valid
+     }
+
+     user = this.userService.getUser();
+   }
+   ```
+
+3. **Provider factory functions**
+
+   ```ts
+   import {inject, InjectionToken} from '@angular/core';
+   import {UserClient} from './user-client';
+
+   export const GREETING = new InjectionToken<string>('greeting', {
+     factory() {
+       const userService = inject(UserClient); // Valid
+       const user = userService.getUser();
+       return `Hello, ${user.name}`;
+     },
+   });
+   ```
+
+4. **Inside runInInjectionContext()**
+
+   ```angular-ts
+   import {Component, inject, Injector} from '@angular/core';
+   import {UserClient} from './user-client';
+
+   @Component({
+     selector: 'app-profile',
+     template: '<button (click)="loadUser()">Load User</button>',
+   })
+   export class UserProfile {
+     private injector = inject(Injector);
+
+     loadUser() {
+       this.injector.runInInjectionContext(() => {
+         const userService = inject(UserClient); // Valid
+         console.log(userService.getUser());
+       });
+     }
+   }
+   ```
+
+Other injection contexts that `inject()` also works in include:
+
+- [provideAppInitializer](api/core/provideAppInitializer)
+- [provideEnvironmentInitializer](api/core/provideEnvironmentInitializer)
+- Functional [route guards](guide/routing/route-guards)
+- Functional [data resolvers](guide/routing/data-resolvers)
+
+#### When this error occurs
+
+This error occurs when:
+
+- Calling `inject()` in lifecycle hooks (`ngOnInit`, `ngAfterViewInit`, etc.)
+- Calling `inject()` after `await` in async functions
+- Calling `inject()` in callbacks (`setTimeout`, `Promise.then()`, etc.)
+- Calling `inject()` outside of class construction phase
+
+See the "Incorrect inject() usage" section for detailed examples and solutions.
+
+#### Solutions and workarounds
+
+**Solution 1:** Capture dependencies in field initializers (most common)
+
+```ts
+private userService = inject(UserClient) // Capture at class level
+```
+
+**Solution 2:** Use `runInInjectionContext()` for callbacks
+
+```ts
+private injector = inject(Injector)
+
+someCallback() {
+  this.injector.runInInjectionContext(() => {
+    const service = inject(MyClient)
+  })
+}
+```
+
+**Solution 3:** Pass dependencies as parameters instead of injecting them
+
+```ts
+// Instead of injecting inside a callback
+setTimeout(() => {
+  const service = inject(MyClient) // ERROR
+}, 1000)
+
+// Capture first, then use
+private service = inject(MyClient)
+
+setTimeout(() => {
+  this.service.doSomething() // Use captured reference
+}, 1000)
+```
+
+### NG0200: Circular dependency detected
+
+**Error code:** NG0200
+
+This error occurs when two or more services depend on each other, creating a circular dependency that Angular cannot resolve.
+
+```
+NG0200: Circular dependency in DI detected for AuthClient
+  Dependency path: AuthClient -> UserClient -> AuthClient
+```
+
+The dependency path shows the cycle: `AuthClient` depends on `UserClient`, which depends back on `AuthClient`.
+
+#### Understanding the error
+
+Angular creates service instances by calling their constructors and injecting dependencies. When services depend on each other circularly, Angular cannot determine which to create first.
+
+#### Common causes
+
+- Direct circular dependency (Service A → Service B → Service A)
+- Indirect circular dependency (Service A → Service B → Service C → Service A)
+- Import cycles in module files that also have service dependencies
+
+#### Resolution strategies
+
+See the "Circular dependencies" section for detailed examples and solutions:
+
+1. **Restructure** - Extract shared logic to a third service (recommended)
+2. **Use events** - Replace direct dependencies with event-based communication
+3. **Lazy injection** - Use `Injector.get()` to defer one dependency (last resort)
+
+Do NOT use `forwardRef()` for service circular dependencies. It only solves circular imports in component configurations.
+
+### Other DI error codes
+
+For detailed explanations and solutions for these errors, see the [Angular error reference](errors):
+
+| Error Code              | Description                                                                                |
+| ----------------------- | ------------------------------------------------------------------------------------------ |
+| [NG0204](errors/NG0204) | Can't resolve all parameters - missing `@Injectable()` decorator                           |
+| [NG0205](errors/NG0205) | Injector already destroyed - accessing services after component destruction                |
+| [NG0207](errors/NG0207) | EnvironmentProviders in wrong context - using `provideHttpClient()` in component providers |
+
+## Next steps
+
+When you encounter DI errors, remember to:
+
+1. Read the error message and dependency path carefully
+2. Verify basic configuration (decorators, `providedIn`, imports)
+3. Check injection context and timing
+4. Use DevTools and logging to investigate
+5. Simplify and isolate the problem
+
+For a deeper understanding of specific topics on dependency injection, check out:
+
+- [Understanding dependency injection](guide/di) - Core DI concepts and patterns
+- [Hierarchical dependency injection](guide/di/hierarchical-dependency-injection) - How the injector hierarchy works
+- [Testing with dependency injection](guide/testing) - Using TestBed and mocking dependencies
diff --git a/adev-ja/src/content/guide/di/defining-dependency-providers.md b/adev-ja/src/content/guide/di/defining-dependency-providers.md
index f685b05ef..84d4684f4 100644
--- a/adev-ja/src/content/guide/di/defining-dependency-providers.md
+++ b/adev-ja/src/content/guide/di/defining-dependency-providers.md
@@ -66,7 +66,7 @@ export const APP_CONFIG = new InjectionToken<AppConfig>('app.config', {
   selector: 'app-header',
   template: `<h1>Version: {{ config.version }}</h1>`,
 })
-export class HeaderComponent {
+export class Header {
   config = inject(APP_CONFIG); // Automatically available
 }
 ```
@@ -167,7 +167,7 @@ export class LocalDataStore {
   providers: [LocalDataStore],
   template: `...`,
 })
-export class ExampleComponent {
+export class Example {
   dataStore = inject(LocalDataStore);
 }
 ```
@@ -191,7 +191,7 @@ export class DataStore {
   providers: [DataStore],
   template: `...`,
 })
-export class IsolatedComponent {
+export class Isolated {
   dataStore = inject(DataStore); // Component-specific instance
 }
 ```
@@ -235,14 +235,14 @@ Think of Angular's dependency injection system as a hash map or dictionary. Each
 When manually providing dependencies, you typically see this shorthand syntax:
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { LocalService } from './local-service';
+import {Component} from '@angular/core';
+import {LocalService} from './local-service';
 
 @Component({
   selector: 'app-example',
-  providers: [LocalService]  // Service without providedIn
+  providers: [LocalService], // Service without providedIn
 })
-export class ExampleComponent { }
+export class Example {}
 ```
 
 This is actually a shorthand for a more detailed provider configuration:
@@ -282,16 +282,16 @@ Provider identifiers allow Angular's dependency injection (DI) system to retriev
 Class name use the imported class directly as the identifier:
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { LocalService } from './local-service';
+import {Component} from '@angular/core';
+import {LocalService} from './local-service';
 
 @Component({
   selector: 'app-example',
-  providers: [
-    { provide: LocalService, useClass: LocalService }
-  ]
+  providers: [{provide: LocalService, useClass: LocalService}],
 })
-export class ExampleComponent { /* ... */ }
+export class Example {
+  /* ... */
+}
 ```
 
 The class serves as both the identifier and the implementation, which is why Angular provides the shorthand `providers: [LocalService]`.
@@ -313,17 +313,15 @@ NOTE: The string `'DataService'` is a description used purely for debugging purp
 Use the token in your provider configuration:
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { LocalDataService } from './local-data-service';
-import { DATA_SERVICE_TOKEN } from './tokens';
+import {Component, inject} from '@angular/core';
+import {LocalDataService} from './local-data-service';
+import {DATA_SERVICE_TOKEN} from './tokens';
 
 @Component({
   selector: 'app-example',
-  providers: [
-    { provide: DATA_SERVICE_TOKEN, useClass: LocalDataService }
-  ]
+  providers: [{provide: DATA_SERVICE_TOKEN, useClass: LocalDataService}],
 })
-export class ExampleComponent {
+export class Example {
   private dataService = inject(DATA_SERVICE_TOKEN);
 }
 ```
@@ -344,7 +342,7 @@ interface DataService {
     {provide: DataService, useClass: LocalDataService}, // Error!
   ],
 })
-export class ExampleComponent {
+export class Example {
   private dataService = inject(DataService); // Error!
 }
 
@@ -354,7 +352,7 @@ export const DATA_SERVICE_TOKEN = new InjectionToken<DataService>('DataService')
 @Component({
   providers: [{provide: DATA_SERVICE_TOKEN, useClass: LocalDataService}],
 })
-export class ExampleComponent {
+export class Example {
   private dataService = inject(DATA_SERVICE_TOKEN); // Works!
 }
 ```
@@ -428,7 +426,7 @@ export class EvenBetterLogger extends Logger {
     {provide: Logger, useClass: EvenBetterLogger},
   ],
 })
-export class ExampleComponent {
+export class Example {
   private logger = inject(Logger); // Gets EvenBetterLogger instance
 }
 ```
@@ -485,7 +483,7 @@ bootstrapApplication(AppComponent, {
   selector: 'app-header',
   template: `<h1>{{ title }}</h1>`,
 })
-export class HeaderComponent {
+export class Header {
   private config = inject(APP_CONFIG);
   title = this.config.appTitle;
 }
@@ -575,7 +573,7 @@ export const apiClientProvider = {
   selector: 'app-dashboard',
   providers: [apiClientProvider],
 })
-export class DashboardComponent {
+export class Dashboard {
   private apiClient = inject(ApiClient);
 }
 ```
@@ -628,7 +626,7 @@ Use application-level providers in `bootstrapApplication` when:
 
 ```ts
 // main.ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     {provide: API_BASE_URL, useValue: 'https://api.example.com'},
     {provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true},
@@ -672,20 +670,20 @@ Use component or directive providers when:
 @Component({
   selector: 'app-advanced-form',
   providers: [
-    FormValidationService,  // Each form gets its own validator
-    { provide: FORM_CONFIG, useValue: { strictMode: true } }
-  ]
+    FormValidationService, // Each form gets its own validator
+    {provide: FORM_CONFIG, useValue: {strictMode: true}},
+  ],
 })
-export class AdvancedFormComponent { }
+export class AdvancedForm {}
 
 // Modal component with isolated state management
 @Component({
   selector: 'app-modal',
   providers: [
-    ModalStateService  // Each modal manages its own state
-  ]
+    ModalStateService, // Each modal manages its own state
+  ],
 })
-export class ModalComponent { }
+export class Modal {}
 ```
 
 **Benefits:**
@@ -771,7 +769,7 @@ export function provideAnalytics(config: AnalyticsConfig): Provider[] {
 
 // Usage in consumer app
 // main.ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideAnalytics({
       trackingId: 'GA-12345',
@@ -881,7 +879,7 @@ export function withRetry(config: RetryConfig): HttpFeature {
 }
 
 // Consumer usage with multiple features
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideHttpClient(
       {baseUrl: 'https://api.example.com'},
diff --git a/adev-ja/src/content/guide/drag-drop.md b/adev-ja/src/content/guide/drag-drop.md
index c33451438..2e2aebbe3 100644
--- a/adev-ja/src/content/guide/drag-drop.md
+++ b/adev-ja/src/content/guide/drag-drop.md
@@ -34,8 +34,8 @@ import {Component} from '@angular/core';
 import {CdkDrag} from '@angular/cdk/drag-drop';
 
 @Component({
-  selector: 'my-custom-component',
-  templateUrl: 'my-custom-component.html',
+  selector: 'drag-drop-example',
+  templateUrl: 'drag-drop-example.html',
   imports: [CdkDrag],
 })
 export class DragDropExample {}
@@ -45,10 +45,10 @@ export class DragDropExample {}
 
 You can make any element draggable by adding the `cdkDrag` directive. By default, all draggable elements support free dragging.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/overview/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/overview/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/overview/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/overview/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/overview/app/app.css"/>
 </docs-code-multifile>
 
 ## Create a list of reorderable draggable elements
@@ -57,10 +57,10 @@ Add the `cdkDropList` directive to a parent element to group draggable elements
 
 The drag and drop directives don't update your data model. To update the data model, listen to the `cdkDropListDropped` event (once the user finishes dragging) and update the data model manually.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/sorting/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DROP_LIST` injection token that can be used to reference instances of `cdkDropList`. For more information see the [dependency injection guide](/guide/di) and the [drop list injection token API](api/cdk/drag-drop/CDK_DROP_LIST).
@@ -84,27 +84,27 @@ The `cdkDropListConnectedTo` directive works both with a direct reference to ano
 <div cdkDropList id="list-two" [cdkDropListConnectedTo]="['list-one']"></div>
 ```
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.css"/>
 </docs-code-multifile>
 
 Use the `cdkDropListGroup` directive if you have an unknown number of connected drop lists to set up the connection automatically. Any new `cdkDropList` that is added under a group automatically connects to all other lists.
 
-```html
+```angular-html
 <div cdkDropListGroup>
   <!-- All lists in here will be connected. -->
   @for (list of lists; track list) {
-  <div cdkDropList></div>
+    <div cdkDropList></div>
   }
 </div>
 ```
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to reference instances of `cdkDropListGroup`. For more information see the [dependency injection guide](/guide/di) and the [drop list group injection token API](api/cdk/drag-drop/CDK_DROP_LIST_GROUP).
@@ -113,23 +113,23 @@ You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to refere
 
 By default, a user can move `cdkDrag` elements from one container into another connected container. For more fine-grained control over which elements can be dropped into a container, use `cdkDropListEnterPredicate`. Angular calls the predicate whenever a draggable element enters a new container. Depending on whether the predicate returns true or false, the item may or may not be allowed into the new container.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.css"/>
 </docs-code-multifile>
 
 ## Attach data
 
 You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by setting `cdkDragData` or `cdkDropListData`, respectively. You can bind to the events fired from both directives that will include this data, allowing you to easily identify the origin of the drag or drop interaction.
 
-```html
+```angular-html
 @for (list of lists; track list) {
-<div cdkDropList [cdkDropListData]="list" (cdkDropListDropped)="drop($event)">
-  @for (item of list; track item) {
-  <div cdkDrag [cdkDragData]="item"></div>
-  }
-</div>
+  <div cdkDropList [cdkDropListData]="list" (cdkDropListDropped)="drop($event)">
+    @for (item of list; track item) {
+      <div cdkDrag [cdkDragData]="item"></div>
+    }
+  </div>
 }
 ```
 
@@ -139,10 +139,10 @@ You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by s
 
 By default, the user can drag the entire `cdkDrag` element to move it around. To restrict the user to only be able to do so using a handle element, add the `cdkDragHandle` directive to an element inside of `cdkDrag`. You can have as many `cdkDragHandle` elements as you want.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DRAG_HANDLE` injection token that can be used to reference instances of `cdkDragHandle`. For more information see the [dependency injection guide](/guide/di) and the [drag handle injection token API](api/cdk/drag-drop/CDK_DRAG_HANDLE).
@@ -155,10 +155,10 @@ To customize the preview, provide a custom template via `*cdkDragPreview`. The c
 
 The cloned element removes its id attribute in order to avoid having multiple elements with the same id on the page. This will cause any CSS that targets that id not to be applied.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DRAG_PREVIEW` injection token that can be used to reference instances of `cdkDragPreview`. For more information see the [dependency injection guide](/guide/di) and the [drag preview injection token API](api/cdk/drag-drop/CDK_DRAG_PREVIEW).
@@ -181,10 +181,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `p
 
 While a `cdkDrag` element is being dragged, the directive creates a placeholder element that shows where the element will be placed when dropped. By default, the placeholder is a clone of the element that is being dragged. You can replace the placeholder with a custom one using the `*cdkDragPlaceholder` directive:
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.css"/>
 </docs-code-multifile>
 
 You can use the `CDK_DRAG_PLACEHOLDER` injection token that can be used to reference instances of `cdkDragPlaceholder`. For more information see the [dependency injection guide](/guide/di) and the [drag placeholder injection token API](api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER).
@@ -195,10 +195,10 @@ Set the `cdkDragRootElement` attribute if there's an element that you want to ma
 
 The attribute accepts a selector and looks up the DOM until it finds an element that matches the selector. If an element is found, it becomes draggable. This is useful for cases such as making a dialog draggable.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/root-element/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/root-element/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/root-element/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/root-element/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `rootElementSelector` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -207,20 +207,20 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `r
 
 By default, `cdkDrag` elements not in a `cdkDropList` move from their normal DOM position only when a user manually moves the element. Use the `cdkDragFreeDragPosition` input to explicitly set the element’s position. A common use case for this is restoring a draggable element's position after a user has navigated away and then returned.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.css"/>
 </docs-code-multifile>
 
 ### Restrict movement within an element
 
 To stop the user from being able to drag a `cdkDrag` element outside of another element, pass a CSS selector to the `cdkDragBoundary` attribute. This attribute accepts a selector and looks up the DOM until it finds an element that matches it. If a match is found, the element becomes the boundary that the draggable element can't be dragged outside of `cdkDragBoundary` can also be used when `cdkDrag` is placed inside a `cdkDropList`.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/boundary/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/boundary/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/boundary/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/boundary/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update boundaryElement within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -229,10 +229,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update bo
 
 By default, `cdkDrag` allows free movement in all directions. To restrict dragging to a specific axis, set `cdkDragLockAxis` to either "x" or "y"on `cdkDrag`. To restrict dragging for multiple draggable elements within `cdkDropList`, set `cdkDropListLockAxis` on `cdkDropList` instead.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `lockAxis` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -243,10 +243,10 @@ By default when the user puts their pointer down on a `cdkDrag`, the dragging se
 
 You can delay the dragging sequence using the `cdkDragStartDelay` input. The input waits for the user to hold down their pointer for the specified number of milliseconds before dragging the element.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dragStartDelay within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -255,10 +255,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dr
 
 If you want to disable dragging for a particular drag item, set the `cdkDragDisabled` input on a `cdkDrag` item to true or false. You can disable an entire list using the `cdkDropListDisabled` input on a `cdkDropList`. It is also possible to disable a specific handle via `cdkDragHandleDisabled` on `cdkDragHandle`.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `draggingDisabled` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -269,10 +269,10 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `d
 
 By default, the `cdkDropList` directive assumes lists are vertical. This can be changed by setting the `cdkDropListOrientation` property to horizontal.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `listOrientation` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -283,30 +283,30 @@ By default, the `cdkDropList` sorts the draggable elements by moving them around
 
 If you have a sortable list that needs to wrap onto new lines, you can set `cdkDropListOrientation` attribute to `mixed`. This causes the list to use a different strategy of sorting the elements which involves moving them in the DOM. However the list can no longer animate the sorting action .
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.css"/>
 </docs-code-multifile>
 
 ### Selective sorting
 
 By default, `cdkDrag` elements are sorted into any position inside of a `cdkDropList`. To change this behavior, set the `cdkDropListSortPredicate` attribute which takes in a function. The predicate function is called whenever a draggable element is about to be moved into a new index within the drop list. If the predicate returns true, the item will be moved into the new index, otherwise it will keep its current position.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.css"/>
 </docs-code-multifile>
 
 ### Disable sorting
 
 There are cases where draggable elements can be dragged out of one `cdkDropList` into another, however the user shouldn't be able to sort them within the source list. For these cases, add the `cdkDropListSortingDisabled` attribute to prevent the draggable elements in a `cdkDropList` from sorting. This preserves the dragged element's initial position in the source list if it does not get dragged to a new valid position.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.css"/>
 </docs-code-multifile>
 
 Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update sortingDisabled within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
@@ -319,10 +319,10 @@ To enable copying, you can set the `cdkDropListHasAnchor` input. This tells the
 
 Combining `cdkDropListHasAnchor` with `cdkDropListSortingDisabled` makes it possible to construct a list from which a user can copy items without being able to reorder the source list (e.g. a product list and a shopping cart).
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts">
-  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.html"/>
-  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts"/>
-  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/copy-list/app/app.ts">
+  <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.html"/>
+  <docs-code header="app.ts" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.ts"/>
+  <docs-code header="app.css" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.css"/>
 </docs-code-multifile>
 
 ## Customize animations
diff --git a/adev-ja/src/content/guide/forms/signals/async-operations.md b/adev-ja/src/content/guide/forms/signals/async-operations.md
new file mode 100644
index 000000000..ec4a837c2
--- /dev/null
+++ b/adev-ja/src/content/guide/forms/signals/async-operations.md
@@ -0,0 +1,552 @@
+# Async operations
+
+Some validation requires data from external sources like backend APIs or third-party services. Signal Forms provides two functions for asynchronous validation: `validateHttp()` for HTTP-based validation and `validateAsync()` for custom resource-based validation.
+
+## When to use async validation
+
+Use async validation when your validation logic requires external data. Some common examples include:
+
+- **Uniqueness checks** - Verify usernames or emails don't already exist
+- **Database lookups** - Check values against server-side data
+- **External API validation** - Validate addresses, tax IDs, or other data with third-party services
+- **Server-side business rules** - Apply validation rules that only the server can verify
+
+Don't use async validation for checks you can perform synchronously on the client. Use synchronous validation rules like `pattern()`, `email()`, or `validate()` for format validation and static rules.
+
+## How async validation works
+
+Async validation runs only after all synchronous validation passes. While the validation executes, the field's `pending()` signal returns `true`. The validation can target errors to specific fields, and pending requests cancel automatically when field values change.
+
+Here's an example checking username availability:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, validateHttp, FormField} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-registration',
+  imports: [FormField],
+  template: `
+    <form>
+      <label>
+        Username:
+        <input [formField]="registrationForm.username" />
+      </label>
+
+      @if (registrationForm.username().pending()) {
+        <span class="checking">Checking availability...</span>
+      }
+      @if (registrationForm.username().invalid()) {
+        @for (error of registrationForm.username().errors(); track $index) {
+          <span class="error">{{ error.message }}</span>
+        }
+      }
+    </form>
+  `,
+})
+export class Registration {
+  registrationModel = signal({username: ''});
+
+  registrationForm = form(this.registrationModel, (schemaPath) => {
+    validateHttp(schemaPath.username, {
+      request: ({value}) => {
+        const username = value();
+        return username ? `/api/users/check?username=${username}` : undefined;
+      },
+      onSuccess: (response) => {
+        return response.available
+          ? null
+          : {
+              kind: 'usernameTaken',
+              message: 'Username is already taken',
+            };
+      },
+      onError: (error) => {
+        console.error('Validation request failed:', error);
+        return {
+          kind: 'serverError',
+          message: 'Could not verify username availability',
+        };
+      },
+    });
+  });
+}
+```
+
+The validation flow works like this:
+
+1. User types a value
+2. Synchronous validation rules run first
+3. If synchronous validation fails, async validation doesn't run
+4. If synchronous validation passes, async validation starts and `pending()` becomes `true`
+5. The request completes and `pending()` becomes `false`
+6. Errors update based on the response
+
+## HTTP validation with validateHttp()
+
+The `validateHttp()` function provides the most common form of async validation. Use it when you need to validate against a REST API or any HTTP endpoint.
+
+### Request function
+
+The `request` function returns either a URL string or an `HttpResourceRequest` object. Return `undefined` to skip the validation:
+
+```ts
+import {Component, signal} from '@angular/core';
+import {form, validateHttp, FormField} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-registration',
+  imports: [FormField],
+  template: `...`,
+})
+export class Registration {
+  registrationModel = signal({username: ''});
+
+  // Cache usernames that passed validation
+  private validatedUsernames = new Set<string>();
+
+  registrationForm = form(this.registrationModel, (schemaPath) => {
+    validateHttp(schemaPath.username, {
+      request: ({value}) => {
+        const username = value();
+        // Skip HTTP request if already validated
+        if (this.validatedUsernames.has(username)) return undefined;
+
+        return `/api/users/check?username=${username}`;
+      },
+      onSuccess: (response, {value}) => {
+        if (response.available) {
+          // Cache successful validations
+          this.validatedUsernames.add(value());
+          return null;
+        }
+        return {
+          kind: 'usernameTaken',
+          message: 'Username is already taken',
+        };
+      },
+      onError: () => ({
+        kind: 'serverError',
+        message: 'Could not verify username',
+      }),
+    });
+  });
+}
+```
+
+For POST requests or custom headers, return an `HttpResourceRequest` object:
+
+```ts
+request: ({value}) => ({
+  url: '/api/validate',
+  method: 'POST',
+  body: {username: value()},
+}) // prettier-ignore
+```
+
+### Success and error handlers
+
+The `onSuccess` function receives the HTTP response and returns validation errors or `undefined` for valid values:
+
+```ts
+onSuccess: (response) => {
+  if (response.valid) return undefined;
+
+  return {
+    kind: 'invalid',
+    message: response.message || 'Validation failed',
+  };
+} // prettier-ignore
+```
+
+Return multiple errors when needed:
+
+```ts
+onSuccess: (response) => {
+  const errors = [];
+  if (response.usernameTaken) {
+    errors.push({
+      kind: 'usernameTaken',
+      message: 'Username taken',
+    });
+  }
+  if (response.profanity) {
+    errors.push({
+      kind: 'profanity',
+      message: 'Username contains inappropriate content',
+    });
+  }
+  return errors.length > 0 ? errors : undefined;
+} // prettier-ignore
+```
+
+The `onError` function handles request failures like network errors or HTTP errors:
+
+```ts
+onError: (error) => {
+  console.error('Validation request failed:', error);
+  return {
+    kind: 'serverError',
+    message: 'Could not verify. Please try again later.',
+  };
+} // prettier-ignore
+```
+
+### HTTP options
+
+Customize the HTTP request with the `options` parameter:
+
+```ts
+import {HttpHeaders} from '@angular/common/http';
+
+validateHttp(schemaPath.field, {
+  request: ({value}) => `/api/validate?value=${value()}`,
+  options: {
+    headers: new HttpHeaders({
+      Authorization: 'Bearer token',
+    }),
+    timeout: 5000,
+  },
+  onSuccess: (response) =>
+    response.valid
+      ? null
+      : {
+          kind: 'invalid',
+          message: 'Invalid value',
+        },
+  onError: () => ({
+    kind: 'requestFailed',
+    message: 'Unable to reach server to validate.',
+  }),
+});
+```
+
+TIP: See the [httpResource API documentation](api/common/http/httpResource) for all available options.
+
+## Custom async validation with validateAsync()
+
+Most applications should use `validateHttp()` for async validation. It handles HTTP requests with minimal configuration and covers the majority of use cases.
+
+`validateAsync()` is a lower-level API that exposes Angular's resource primitive directly. It offers complete control but requires more code and familiarity with Angular's resource API.
+
+Consider `validateAsync()` only when `validateHttp()` can't meet your needs. Some examples include:
+
+- **Non-HTTP validation** - WebSocket connections, IndexedDB lookups, or Web Worker computations
+- **Custom caching strategies** - Application-specific caching beyond simple memoization
+- **Complex retry logic** - Custom backoff strategies or conditional retries
+- **Direct resource access** - When you need the full resource lifecycle
+
+### Creating a custom validation rule
+
+The `validateAsync()` function requires four properties: `params`, `factory`, `onSuccess`, and `onError`. The `params` function returns the parameters for your resource, while `factory` creates the resource:
+
+```ts
+import {Component, inject, signal, resource, Signal} from '@angular/core';
+import {form, validateAsync, FormField} from '@angular/forms/signals';
+import {UsernameValidator} from './username-validator';
+
+@Component({
+  selector: 'app-registration',
+  imports: [FormField],
+  template: `...`,
+})
+export class Registration {
+  registrationModel = signal({username: ''});
+
+  private usernameValidator = inject(UsernameValidator);
+  private cache = new Map<string, {available: boolean}>();
+
+  // Custom resource factory with caching
+  createUsernameResource = (usernameSignal: Signal<string | undefined>) => {
+    return resource({
+      params: () => usernameSignal(),
+      loader: async ({params: username}) => {
+        if (!username) return undefined;
+
+        // Check cache first
+        const cached = this.cache.get(username);
+        if (cached !== undefined) return cached;
+
+        // Use injected service for validation
+        const result = await this.usernameValidator.checkAvailability(username);
+
+        // Cache result
+        this.cache.set(username, result);
+        return result;
+      },
+    });
+  };
+
+  registrationForm = form(this.registrationModel, (schemaPath) => {
+    validateAsync(schemaPath.username, {
+      params: ({value}) => {
+        const username = value();
+        return username.length >= 3 ? username : undefined;
+      },
+      factory: this.createUsernameResource,
+      onSuccess: (result) => {
+        return result?.available
+          ? null
+          : {
+              kind: 'usernameTaken',
+              message: 'Username taken',
+            };
+      },
+      onError: (error) => {
+        console.error('Validation failed:', error);
+        return {
+          kind: 'serverError',
+          message: 'Could not verify username',
+        };
+      },
+    });
+  });
+}
+```
+
+The `params` function runs on every value change. Return `undefined` to skip validation. The `factory` function runs once during setup and receives params as a signal. The resource updates automatically when params change.
+
+### Using Observable-based services
+
+If your application has existing services that return Observables, use `rxResource` from `@angular/core/rxjs-interop`:
+
+```ts
+import {Component, inject, signal, Signal} from '@angular/core';
+import {rxResource} from '@angular/core/rxjs-interop';
+import {form, validateAsync, FormField} from '@angular/forms/signals';
+import {UsernameService} from './username-service';
+
+@Component({
+  selector: 'app-registration',
+  imports: [FormField],
+  template: `...`,
+})
+export class Registration {
+  registrationModel = signal({username: ''});
+
+  private usernameService = inject(UsernameService);
+
+  private createUsernameResource = (usernameSignal: Signal<string | undefined>) => {
+    return rxResource({
+      request: () => usernameSignal(),
+      stream: ({request: username}) => this.usernameService.checkUsername(username),
+    });
+  };
+
+  registrationForm = form(this.registrationModel, (schemaPath) => {
+    validateAsync(schemaPath.username, {
+      params: ({value}) => value() || undefined,
+      factory: this.createUsernameResource,
+      onSuccess: (result) =>
+        result?.available ? null : {kind: 'usernameTaken', message: 'Username taken'},
+      onError: () => ({
+        kind: 'serverError',
+        message: 'Could not verify username',
+      }),
+    });
+  });
+}
+```
+
+The `rxResource` function works directly with Observables and handles subscription cleanup automatically when the field value changes.
+
+## Understanding pending state
+
+When async validation runs, the field's `pending()` signal returns `true`. During this time:
+
+- `valid()` returns `false`
+- `invalid()` returns `false`
+- `errors()` returns an empty array
+- `submit()` waits for validation to complete
+
+Show the pending state in your template to provide feedback:
+
+```angular-html
+<input [formField]="loginForm.username" />
+
+@if (loginForm.username().pending()) {
+  <span class="loading">Checking availability...</span>
+}
+
+@if (loginForm.username().touched() && loginForm.username().invalid()) {
+  @for (error of loginForm.username().errors(); track $index) {
+    <span class="error">{{ error.message }}</span>
+  }
+}
+```
+
+Disable form submission while validation is pending:
+
+```angular-html
+<button type="submit" [disabled]="loginForm().pending()">
+  @if (loginForm().pending()) {
+    Validating...
+  } @else {
+    Submit
+  }
+</button>
+```
+
+TIP: See the [Field State Management guide](guide/forms/signals/field-state-management) for more patterns using `pending()`, `valid()`, and `invalid()` signals.
+
+### Validation execution order
+
+Async validation only runs after synchronous validation passes. This prevents unnecessary server requests for invalid input:
+
+```ts
+import {form, required, minLength, validateHttp} from '@angular/forms/signals';
+
+form(model, (schemaPath) => {
+  // 1. These synchronous validation rules run first
+  required(schemaPath.username);
+  minLength(schemaPath.username, 3);
+
+  // 2. This async validation rule only runs if synchronous validation passes
+  validateHttp(schemaPath.username, {
+    request: ({value}) => `/api/check?username=${value()}`,
+    onSuccess: (result) =>
+      result.valid
+        ? null
+        : {
+            kind: 'usernameTaken',
+            message: 'Username taken',
+          },
+    onError: () => ({
+      kind: 'serverError',
+      message: 'Validation failed',
+    }),
+  });
+});
+```
+
+This execution order improves performance by reducing server load and catching format errors instantly.
+
+### Request cancellation
+
+When a field value changes, Signal Forms automatically cancels any pending async validation request for that field. This prevents race conditions and ensures validation always reflects the current value. You don't need to implement cancellation logic yourself.
+
+## Best practices
+
+### Combine with synchronous validation
+
+Always validate format before making async requests. This catches errors instantly and prevents unnecessary server requests:
+
+```ts
+import {form, required, email, validateHttp} from '@angular/forms/signals';
+
+form(model, (schemaPath) => {
+  // Validate format first
+  required(schemaPath.email);
+  email(schemaPath.email);
+
+  // Then check availability
+  validateHttp(schemaPath.email, {
+    request: ({value}) => `/api/emails/check?email=${value()}`,
+    onSuccess: (result) =>
+      result.available
+        ? null
+        : {
+            kind: 'emailInUse',
+            message: 'Email already in use',
+          },
+    onError: () => ({
+      kind: 'serverError',
+      message: 'Could not verify email',
+    }),
+  });
+});
+```
+
+### Skip validation when appropriate
+
+Return `undefined` from the `request` function to skip validation. Use this to avoid validating empty fields or values that don't meet minimum requirements:
+
+```ts
+import {validateHttp} from '@angular/forms/signals';
+
+validateHttp(schemaPath.username, {
+  request: ({value}) => {
+    const username = value();
+    // Skip validation for empty or short usernames
+    if (!username || username.length < 3) return undefined;
+
+    return `/api/users/check?username=${username}`;
+  },
+  onSuccess: (result) =>
+    result.valid
+      ? null
+      : {
+          kind: 'usernameTaken',
+          message: 'Username taken',
+        },
+  onError: () => ({
+    kind: 'serverError',
+    message: 'Validation failed',
+  }),
+});
+```
+
+### Handle errors gracefully
+
+Provide clear, user-friendly error messages. Log technical details for debugging but show simple messages to users:
+
+```ts
+import {validateHttp} from '@angular/forms/signals';
+
+validateHttp(schemaPath.field, {
+  request: ({value}) => `/api/validate?field=${value()}`,
+  onSuccess: (result) => {
+    if (result.valid) return null;
+    // Use server message when available
+    return {
+      kind: 'serverError',
+      message: result.message || 'Validation failed',
+    };
+  },
+  onError: (error) => {
+    // Log for debugging
+    console.error('Validation request failed:', error);
+
+    // Show user-friendly message
+    return {
+      kind: 'serverError',
+      message: 'Unable to validate. Please try again later.',
+    };
+  },
+});
+```
+
+### Show clear feedback
+
+Use the `pending()` signal to show when validation is happening. This helps users understand delays and provides better perceived performance:
+
+```angular-html
+@if (field().pending()) {
+  <span class="checking">
+    <span class="spinner"></span>
+    Checking...
+  </span>
+}
+@if (field().valid() && !field().pending()) {
+  <span class="success">Available</span>
+}
+@if (field().invalid()) {
+  <span class="error">{{ field().errors()[0]?.message }}</span>
+}
+```
+
+## Next steps
+
+This guide covered async validation with `validateHttp()` and `validateAsync()`. Related guides explore other aspects of Signal Forms:
+
+<docs-pill-row>
+  <docs-pill href="guide/forms/signals/validation" title="Validation"/>
+  <docs-pill href="guide/forms/signals/field-state-management" title="Field State Management"/>
+</docs-pill-row>
+
+For detailed API documentation, see:
+
+- [`validateHttp()`](api/forms/signals/validateHttp) - HTTP-based async validation
+- [`validateAsync()`](api/forms/signals/validateAsync) - Custom resource-based async validation
+- [`httpResource()`](api/common/http/httpResource) - Angular's HTTP resource API
+- [`resource()`](api/core/resource) - Angular's resource primitive
diff --git a/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md b/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md
index 007f092d3..750d8ac17 100644
--- a/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md
+++ b/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md
@@ -109,7 +109,7 @@ interface BeverageOrderFormModel {
 
 ### Avoid `undefined`
 
-A form model model must not contain `undefined` values or properties. In Signal Forms the structure of the form is derived from the structure of the model, and `undefined` signifies the _absence of a field_, rather than a field with an empty value. This means you must also avoid optional fields (e.g., `{property?: string}`), as they implicitly allow `undefined`.
+A form model must not contain `undefined` values or properties. In Signal Forms the structure of the form is derived from the structure of the model, and `undefined` signifies the _absence of a field_, rather than a field with an empty value. This means you must also avoid optional fields (e.g., `{property?: string}`), as they implicitly allow `undefined`.
 
 To represent a property with an empty value in your form model, use a value that the UI control understands to mean "empty" (e.g. `""` for a `<input type="text">`). If you're designing a custom UI control, `null` often works as a good value to signify "empty".
 
@@ -161,12 +161,12 @@ createAccountForm = form<CreateAccountFormModel>(
 );
 ```
 
-Using this representation, all of the subfields we need now exist, and we can bind them using the `[field]` directive in our template.
+Using this representation, all of the subfields we need now exist, and we can bind them using the `[formField]` directive in our template.
 
 ```html
-First: <input [field]="createAccountForm.name.first" /> Last:
-<input [field]="createAccountForm.name.last" /> Username:
-<input [field]="createAccountForm.username" />
+First: <input [formField]="createAccountForm.name.first" /> Last:
+<input [formField]="createAccountForm.name.last" /> Username:
+<input [formField]="createAccountForm.username" />
 ```
 
 #### Fields that are conditionally hidden or unavailable
@@ -289,8 +289,8 @@ interface UserProfileFormModel {
 In the template, we bind the `location` field directly to our custom control:
 
 ```html
-Username: <input [field]="userForm.username" /> Location:
-<location-picker [field]="userForm.location"></location-picker>
+Username: <input [formField]="userForm.username" /> Location:
+<location-picker [formField]="userForm.location"></location-picker>
 ```
 
 Here, `<location-picker>` consumes and produces the entire `Location` object (or `null`), and doesn't access `userForm.location.lat` or `userForm.location.lng`. Therefore, `location` can safely have a dynamic shape without violating the principles of model-driven forms.
@@ -409,7 +409,7 @@ class MyForm {
 }
 ```
 
-The examples above show a pure conversion from the form model to the domain model. However, it is perfectly acceptable to consider the full form state in addition to just the form model value. For example, to save bytes me might want to only send partial updates to the server based on what the user changed. In this case our conversion function could be designed to take the entire form state and return a sparse domain model based on the form's values and dirtiness.
+The examples above show a pure conversion from the form model to the domain model. However, it is perfectly acceptable to consider the full form state in addition to just the form model value. For example, to save bytes we might want to only send partial updates to the server based on what the user changed. In this case our conversion function could be designed to take the entire form state and return a sparse domain model based on the form's values and dirtiness.
 
 ```ts
 type Sparse<T> = T extends object ? {
diff --git a/adev-ja/src/content/guide/forms/signals/form-logic.md b/adev-ja/src/content/guide/forms/signals/form-logic.md
new file mode 100644
index 000000000..5aa44718a
--- /dev/null
+++ b/adev-ja/src/content/guide/forms/signals/form-logic.md
@@ -0,0 +1,866 @@
+# Adding form logic
+
+Signal Forms allow you to add logic to your form using schemas. Validation logic is covered in the [Validation guide](guide/forms/signals/validation), and this guide discusses other rules available in schemas. You can disable fields conditionally, hide them based on other values, make them readonly, debounce user input, and attach metadata for custom controls.
+
+This guide shows you how to use rules like `disabled()`, `hidden()`, `readonly()`, `debounce()`, and `metadata()` to control field behavior.
+
+## When to add form logic
+
+Use rules when field behavior depends on other field values or needs to update reactively. For example:
+
+- A coupon code field that's disabled when the order total is too low
+- An address field that's hidden unless shipping is required
+- A search field that debounces to reduce API calls
+
+## How rules work
+
+Rules bind reactive logic to specific fields in your form. Most rules accept a reactive logic function as an optional argument. The reactive logic function automatically recomputes whenever the signals it references change, just like a `computed`.
+
+```ts
+const orderForm = form(this.orderModel, (schemaPath) => {
+  disabled(schemaPath.couponCode, ({valueOf}) => valueOf(schemaPath.total) < 50);
+  //~~~~~~ ~~~~~~~~~~~~~~~~~~~~~  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  //rule     path                   reactive logic function
+});
+```
+
+Reactive logic functions receive a `FieldContext` object that provides access to field values and state through helper functions like `valueOf()` and `stateOf()`. It is often destructured to access these helpers directly.
+
+NOTE: The schema callback parameter (`schemaPath` in these examples) is a `SchemaPathTree` object that provides paths to all fields in your form. You can name this parameter anything you like.
+
+For complete details on `FieldContext` properties and methods, see the [Validation guide](guide/forms/signals/validation).
+
+## Prevent field updates with `disabled()`
+
+The `disabled()` rule configures a field's disabled state.
+
+It works with the `[formField]` directive to automatically bind the `disabled` attribute based on the field's state, so you don't need to manually add `[disabled]="yourForm.fieldName().disabled()"` to your template.
+
+NOTE: Disabled fields skip validation - they don't participate in form validation checks. The field's value is preserved but not validated. For details on validation behavior, see the [Validation guide](guide/forms/signals/validation).
+
+### Always disabled
+
+To disable a field permanently, call `disabled()` with just the field path:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, disabled} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-settings',
+  imports: [FormField],
+  template: `
+    <label>
+      System ID (cannot be changed)
+      <input [formField]="settingsForm.systemId" />
+    </label>
+  `,
+})
+export class Settings {
+  settingsModel = signal({
+    systemId: 'SYS-12345',
+    userName: '',
+  });
+
+  settingsForm = form(this.settingsModel, (schemaPath) => {
+    disabled(schemaPath.systemId);
+  });
+}
+```
+
+### Conditional disabling
+
+To disable a field based on conditions, provide a reactive logic function that returns `true` (disabled) or `false` (enabled):
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, disabled} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-order',
+  imports: [FormField],
+  template: `
+    <label>
+      Order Total
+      <input type="number" [formField]="orderForm.total" />
+    </label>
+
+    <label>
+      Coupon Code
+      <input [formField]="orderForm.couponCode" />
+    </label>
+  `,
+})
+export class Order {
+  orderModel = signal({
+    total: 25,
+    couponCode: '',
+  });
+
+  orderForm = form(this.orderModel, (schemaPath) => {
+    disabled(schemaPath.couponCode, ({valueOf}) => valueOf(schemaPath.total) < 50);
+  });
+}
+```
+
+In this example, when the order total is less than $50, the coupon code field is disabled.
+
+### Disabled reasons
+
+When you disable a field, provide user-facing explanations by returning a string instead of `true`:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, disabled} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-order',
+  imports: [FormField],
+  template: `
+    <label>
+      Order Total
+      <input type="number" [formField]="orderForm.total" />
+    </label>
+
+    <label>
+      Coupon Code
+      <input [formField]="orderForm.couponCode" />
+    </label>
+
+    @if (orderForm.couponCode().disabled()) {
+      <div class="info">
+        @for (reason of orderForm.couponCode().disabledReasons(); track reason) {
+          <p>{{ reason.message }}</p>
+        }
+      </div>
+    }
+  `,
+})
+export class Order {
+  orderModel = signal({
+    total: 25,
+    couponCode: '',
+  });
+
+  orderForm = form(this.orderModel, (schemaPath) => {
+    disabled(schemaPath.couponCode, ({valueOf}) =>
+      valueOf(schemaPath.total) < 50 ? 'Order must be $50 or more to use a coupon' : false,
+    );
+  });
+}
+```
+
+The reactive logic function returns:
+
+- A **string** to disable the field with a reason
+- `false` to enable the field (not just any falsy value - use `false` explicitly)
+
+Access the reasons through the `disabledReasons()` signal on the field state. Each reason has a `message` property containing the string you returned.
+
+#### Multiple disabled reasons
+
+You can also call `disabled()` multiple times on the same field, and all of the returned reasons accumulate:
+
+```angular-ts
+orderForm = form(this.orderModel, (schemaPath) => {
+  disabled(schemaPath.promoCode, ({valueOf}) =>
+    !valueOf(schemaPath.hasAccount) ? 'You must have an account to use promo codes' : false,
+  );
+  disabled(schemaPath.promoCode, ({valueOf}) =>
+    valueOf(schemaPath.total) < 25 ? 'Order must be at least $25' : false,
+  );
+});
+```
+
+If both conditions are true, the field shows both disabled reasons. This pattern is useful for complex availability rules that you want to keep separate.
+
+## Configuring `hidden()` state on fields
+
+The `hidden()` rule configures a field's hidden state. However, this only sets a programmatic state. **You control whether the field appears in the UI**.
+
+IMPORTANT: Unlike `disabled` and `readonly`, there is no native DOM property for `hidden` state. The `[formField]` directive does not apply a `hidden` attribute to elements. You must use `@if` or CSS in your template to conditionally render fields based on the `hidden()` state.
+
+NOTE: Like disabled fields, hidden fields also skip validation. See the [Validation guide](guide/forms/signals/validation) for details.
+
+### Basic field hiding
+
+Use `hidden()` with a reactive logic function that returns `true` (hidden) or `false` (visible):
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, hidden} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-profile',
+  imports: [FormField],
+  template: `
+    <label>
+      <input type="checkbox" [FormField]="profileForm.isPublic" />
+      Make profile public
+    </label>
+
+    @if (!profileForm.publicUrl().hidden()) {
+      <label>
+        Public URL
+        <input [FormField]="profileForm.publicUrl" />
+      </label>
+    }
+  `,
+})
+export class Profile {
+  profileModel = signal({
+    isPublic: false,
+    publicUrl: '',
+  });
+
+  profileForm = form(this.profileModel, (schemaPath) => {
+    hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic));
+  });
+}
+```
+
+## Display uneditable fields with `readonly()`
+
+The `readonly()` rule prevents users from updating a field. The `[FormField]` directive automatically binds this state to the HTML `readonly` attribute, which prevents editing while still allowing users to focus and select text.
+
+NOTE: Readonly fields skip [validation](guide/forms/signals/validation).
+
+### Always readonly
+
+To make a field permanently readonly, call `readonly()` with just the field path:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, readonly} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-account',
+  imports: [FormField],
+  template: `
+    <label>
+      Username (cannot be changed)
+      <input [FormField]="accountForm.username" />
+    </label>
+
+    <label>
+      Email
+      <input [FormField]="accountForm.email" />
+    </label>
+  `,
+})
+export class Account {
+  accountModel = signal({
+    username: 'johndoe',
+    email: 'john@example.com',
+  });
+
+  accountForm = form(this.accountModel, (schemaPath) => {
+    readonly(schemaPath.username);
+  });
+}
+```
+
+The `[FormField]` directive automatically binds the `readonly` attribute based on the field's state.
+
+### Conditional readonly
+
+To make a field readonly based on conditions, provide a reactive logic function:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, readonly} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-document',
+  imports: [FormField],
+  template: `
+    <label>
+      <input type="checkbox" [FormField]="documentForm.isLocked" />
+      Lock document
+    </label>
+
+    <label>
+      Document Title
+      <input [FormField]="documentForm.title" />
+    </label>
+  `,
+})
+export class Document {
+  documentModel = signal({
+    isLocked: false,
+    title: 'Untitled',
+  });
+
+  documentForm = form(this.documentModel, (schemaPath) => {
+    readonly(schemaPath.title, ({valueOf}) => valueOf(schemaPath.isLocked));
+  });
+}
+```
+
+When `isLocked` is true, the title field becomes readonly.
+
+## Choose between hidden, disabled, and readonly
+
+These three configuration functions control field availability in different ways:
+
+Choose `hidden()` when the field:
+
+- Should not appear in the UI at all
+- Is irrelevant to the current form state
+- Example: Shipping address fields when "same as billing" is checked
+
+Choose `disabled()` when the field:
+
+- Should be visible but not editable
+- Needs to show why it's unavailable (using disabled reasons)
+- Should be excluded from HTML form submission
+- Example: Submit button disabled until form is valid, approval fields disabled for non-admin users
+
+Choose `readonly()` when the field:
+
+- Should be visible but not editable
+- Contains data users need to see, select, or copy
+- Should be included in HTML form submission
+- Example: Order confirmation number, system-generated reference codes
+
+All three skip validation and prevent user editing while active. The key differences:
+
+| Feature                          | `hidden()` | `disabled()` | `readonly()` |
+| -------------------------------- | ---------- | ------------ | ------------ |
+| Visible in UI                    | No         | Yes          | Yes          |
+| Users can focus/select           | No         | No           | Yes          |
+| Included in HTML form submission | No         | No           | Yes          |
+
+## Delay input operations with `debounce()`
+
+The `debounce()` rule delays updating the form model. This is useful for performance optimization and reducing unnecessary operations during rapid input.
+
+### What debouncing does
+
+Without debouncing, every keystroke immediately updates the form model. This can trigger:
+
+- Expensive computed signals that recalculate on every change
+- Validation checks after each character
+- API calls or other side effects tied to the model value
+
+Debouncing delays these updates and reduces unnecessary work.
+
+### Basic debouncing
+
+You can debounce a field by specifying a delay in milliseconds:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, debounce} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-search',
+  imports: [FormField],
+  template: `
+    <label>
+      Search
+      <input [FormField]="searchForm.query" />
+    </label>
+
+    <p>Searching for: {{ searchForm.query().value() }}</p>
+  `,
+})
+export class Search {
+  searchModel = signal({
+    query: '',
+  });
+
+  searchForm = form(this.searchModel, (schemaPath) => {
+    debounce(schemaPath.query, 300);
+  });
+}
+```
+
+With a 300ms debounce:
+
+- User types in the input field
+- Form model updates only after 300ms of typing inactivity
+- If user keeps typing, the timer resets with each keystroke
+- Once user pauses for 300ms, the model updates with the final value
+
+### Timing guarantees
+
+The `debounce()` function ensures users don't lose data through these mechanisms:
+
+- **When marked as touched:** The value syncs immediately, aborting any pending debounce delay. This happens when the field loses focus (blur) or when explicitly marked as touched.
+- **On form submission:** All fields are marked as touched before validation, which ensures all debounced values sync immediately.
+
+This means users can type quickly, tab away, or submit the form without waiting for debounce delays to expire.
+
+### Custom debounce logic
+
+For advanced control, provide a debouncer function that controls when to synchronize the value. This function is called every time the control value is updated and can return either `undefined` to synchronize immediately, or a Promise that prevents synchronization until it resolves:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, debounce} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-search',
+  imports: [FormField],
+  template: `
+    <label>
+      Search
+      <input [FormField]="searchForm.query" />
+    </label>
+  `,
+})
+export class Search {
+  searchModel = signal({
+    query: '',
+  });
+
+  searchForm = form(this.searchModel, (schemaPath) => {
+    debounce(schemaPath.query, () => {
+      // Return a promise that resolves after 500ms
+      return new Promise<void>((resolve) => {
+        setTimeout(() => resolve(), 500);
+      });
+    });
+  });
+}
+```
+
+The debouncer function can return:
+
+- `undefined` to synchronize the value immediately
+- A `Promise<void>` that prevents synchronization until it resolves
+
+Use cases for custom debounce logic:
+
+- Implementing custom timing logic beyond simple delays
+- Coordinating synchronization with external events
+- Conditional debouncing based on application state
+
+### When to use debouncing
+
+Debouncing is most useful when:
+
+- You have expensive computed signals that depend on the field value
+- The field triggers API calls or other side effects
+- You want to reduce validation overhead during rapid typing
+- Performance profiling shows model updates are causing slowdowns
+
+Don't use debouncing if:
+
+- The field needs immediate updates for good UX (such as calculator inputs)
+- The performance benefit is negligible
+- Users expect real-time feedback
+
+## Associate data with a field using `metadata()`
+
+Metadata allows you to attach computed information to fields that can be read by [custom controls](guide/forms/signals/custom-controls) or form logic. Common use cases include HTML input attributes (min, max, maxlength, pattern), custom UI hints (placeholder text, help text), and accessibility information.
+
+### Pre-defined metadata keys
+
+Signal Forms provides six pre-defined metadata keys that validation rules automatically populate:
+
+- `REQUIRED` - Whether the field is required (`boolean`)
+- `MIN` - Minimum numeric value (`number | undefined`)
+- `MAX` - Maximum numeric value (`number | undefined`)
+- `MIN_LENGTH` - Minimum string/array length (`number | undefined`)
+- `MAX_LENGTH` - Maximum string/array length (`number | undefined`)
+- `PATTERN` - Regular expression pattern (`RegExp[]` - array to support multiple patterns)
+
+When you use validation rules like `required()` or `min()`, they automatically set the corresponding metadata. The `metadata()` function provides a way to publish additional data associated with a field.
+
+### Reading pre-defined metadata
+
+The `[FormField]` directive automatically binds built-in metadata to HTML attributes. You can also read metadata directly using the built-in accessors on field state:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, required, min, max} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-age',
+  imports: [FormField],
+  template: `
+    <label>
+      Age (between {{ ageForm.age().min() }} and {{ ageForm.age().max() }})
+      <input type="number" [FormField]="ageForm.age" />
+    </label>
+
+    @if (ageForm.age().required()) {
+      <span class="required-indicator">*</span>
+    }
+  `,
+})
+export class Age {
+  ageModel = signal({
+    age: 0,
+  });
+
+  ageForm = form(this.ageModel, (schemaPath) => {
+    required(schemaPath.age);
+    min(schemaPath.age, 18);
+    max(schemaPath.age, 120);
+  });
+}
+```
+
+The `[formField]` directive automatically binds `required`, `min`, and `max` attributes to the input. You can read these values using `field().required()`, `field().min()`, and `field().max()` for display or logic purposes.
+
+### Setting metadata manually
+
+Use the `metadata()` function to set metadata values when validation rules don't automatically set them. For built-in metadata like `MIN` and `MAX`, prefer using the validation rules:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, min, max, validate} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-custom',
+  imports: [formField],
+  template: ` <input [formField]="customForm.score" /> `,
+})
+export class Custom {
+  customModel = signal({score: 0});
+
+  customForm = form(this.customModel, (schemaPath) => {
+    // Use built-in validation rules - they automatically set metadata
+    min(schemaPath.score, 0);
+    max(schemaPath.score, 100);
+
+    // Add custom validation logic if needed
+    validate(schemaPath.score, ({value}) => {
+      const score = value();
+      // Custom validation beyond min/max (e.g., must be multiple of 5)
+      if (score % 5 !== 0) {
+        return {kind: 'increment', message: 'Score must be a multiple of 5'};
+      }
+      return null;
+    });
+  });
+}
+```
+
+### Creating custom metadata keys
+
+Create your own metadata keys for application-specific information:
+
+```angular-ts
+import {createMetadataKey, metadata} from '@angular/forms/signals';
+
+// Define at module level (not inside components)
+export const PLACEHOLDER = createMetadataKey<string>();
+export const HELP_TEXT = createMetadataKey<string>();
+
+// Use in schema
+form(model, (schemaPath) => {
+  metadata(schemaPath.email, PLACEHOLDER, () => 'user@example.com');
+  metadata(schemaPath.email, HELP_TEXT, () => 'We will never share your email');
+});
+
+// Read in component
+const placeholderText = myForm.email().metadata(PLACEHOLDER);
+const helpText = myForm.email().metadata(HELP_TEXT);
+```
+
+By default, custom metadata keys use a "last write wins" strategy - if you call `metadata()` multiple times with the same key, only the last value is kept.
+
+**Important:** Always define metadata keys at module level, never inside components. Metadata keys rely on object identity, and recreating them loses that identity.
+
+### Accumulating metadata with reducers
+
+By default, calling `metadata()` multiple times with the same key uses "last write wins" - only the final value is kept. To accumulate values instead, pass a reducer to `createMetadataKey()`:
+
+```angular-ts
+import {createMetadataKey, metadata, MetadataReducer} from '@angular/forms/signals';
+
+// Create a key that accumulates values into an array
+export const HINTS = createMetadataKey<string, string[]>(MetadataReducer.list());
+
+// Multiple calls accumulate values
+form(model, (schemaPath) => {
+  metadata(schemaPath.password, HINTS, () => 'At least 8 characters');
+  metadata(schemaPath.password, HINTS, () => 'Include a number');
+  metadata(schemaPath.password, HINTS, () => 'Include a special character');
+});
+
+// Result: Signal containing the accumulated array
+const passwordHints = passwordForm.password().metadata(HINTS)();
+// ['At least 8 characters', 'Include a number', 'Include a special character']
+```
+
+Angular provides built-in reducers through `MetadataReducer`:
+
+- `MetadataReducer.list()` - Accumulates values into an array
+- `MetadataReducer.min()` - Keeps the minimum value
+- `MetadataReducer.max()` - Keeps the maximum value
+- `MetadataReducer.or()` - Logical OR of boolean values
+- `MetadataReducer.and()` - Logical AND of boolean values
+
+### Managed metadata keys
+
+Use `createManagedMetadataKey()` when you need to compute a new value from the accumulated result. The transform function receives a signal of the reduced value and returns the computed result:
+
+```angular-ts
+import {createManagedMetadataKey, metadata, MetadataReducer} from '@angular/forms/signals';
+
+// Accumulate hints and compute additional data from the result
+export const HINTS = createManagedMetadataKey(
+  (signal) =>
+    computed(() => {
+      const hints = signal();
+      return {
+        messages: hints,
+        count: hints?.length ?? 0,
+      };
+    }),
+  MetadataReducer.list(),
+);
+
+// Multiple calls accumulate values
+form(model, (schemaPath) => {
+  metadata(schemaPath.password, HINTS, () => 'At least 8 characters');
+  metadata(schemaPath.password, HINTS, () => 'Include a number');
+  metadata(schemaPath.password, HINTS, () => 'Include a special character');
+});
+
+// Result: Signal with transformed value
+const passwordHints = passwordForm.password().metadata(HINTS)();
+// { messages: ['At least 8 characters', 'Include a number', 'Include a special character'], count: 3 }
+```
+
+The managed metadata key takes two arguments:
+
+1. **Transform function** - Computes a new value from the accumulated result (receives a signal of the reduced value)
+2. **Reducer** - Determines how values accumulate (optional - defaults to "last write wins")
+
+### Reactive metadata
+
+Make metadata reactive to other field values:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, max} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-inventory',
+  imports: [formField],
+  template: `
+    <label>
+      Item
+      <select [formField]="inventoryForm.item">
+        <option value="widget">Widget</option>
+        <option value="gadget">Gadget</option>
+      </select>
+    </label>
+
+    <label>
+      Quantity (max: {{ inventoryForm.quantity().max() }})
+      <input
+        type="number"
+        [formField]="inventoryForm.quantity"
+        [max]="inventoryForm.quantity().max()"
+      />
+    </label>
+  `,
+})
+export class Inventory {
+  inventoryModel = signal({
+    item: 'widget',
+    quantity: 0,
+  });
+
+  inventoryForm = form(this.inventoryModel, (schemaPath) => {
+    max(schemaPath.quantity, ({valueOf}) => {
+      const item = valueOf(schemaPath.item);
+      return item === 'widget' ? 100 : 50;
+    });
+  });
+}
+```
+
+The `max()` validation rule sets the `MAX` metadata reactively based on the selected item. This demonstrates how validation rules can have conditional values that change when other fields update.
+
+### Using metadata in custom controls
+
+Custom controls can read metadata to configure their HTML attributes and behavior:
+
+```angular-ts
+import {Component, input, computed, model} from '@angular/core';
+import {FormValueControl, Field, PLACEHOLDER} from '@angular/forms/signals';
+
+@Component({
+  selector: 'custom-input',
+  template: `
+    <input
+      type="number"
+      [value]="state().value()"
+      (input)="state().value.set(($event.target as HTMLInputElement).valueAsNumber)"
+      [min]="state().min()"
+      [max]="state().max()"
+      [required]="state().required()"
+      [placeholder]="placeholderText()"
+    />
+  `,
+})
+export class CustomInput implements FormValueControl<number> {
+  // Bind to the form field.
+  formField = input.required<Field<number>>();
+
+  // Compute the current field state.
+  state = computed(() => this.formField()());
+
+  // Required property of the FormValueControl interface.
+  value = model(0);
+
+  placeholderText = computed(() => this.state().metadata(PLACEHOLDER)() ?? '');
+}
+```
+
+This pattern allows custom controls to automatically configure themselves based on the validation rules and metadata defined in the schema.
+
+TIP: For more information on creating custom controls, see the [Custom Controls guide](guide/forms/signals/custom-controls).
+
+## Combining rules
+
+You can apply multiple rules to the same field, and you can use conditional logic to apply entire groups of rules based on form state.
+
+### Multiple rules on one field
+
+Apply multiple rules to configure all aspects of a field's behavior:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {
+  form,
+  FormField,
+  disabled,
+  hidden,
+  debounce,
+  metadata,
+  PLACEHOLDER,
+} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-promo',
+  imports: [formField],
+  template: `
+    @if (!promoForm.promoCode().hidden()) {
+      <label>
+        Promo Code
+        <input [formField]="promoForm.promoCode" />
+      </label>
+    }
+  `,
+})
+export class Promo {
+  promoModel = signal({
+    hasAccount: false,
+    subscriptionType: 'free' as 'free' | 'premium',
+    promoCode: '',
+  });
+
+  promoForm = form(this.promoModel, (schemaPath) => {
+    disabled(schemaPath.promoCode, ({valueOf}) =>
+      !valueOf(schemaPath.hasAccount) ? 'You must have an account' : false,
+    );
+    hidden(schemaPath.promoCode, ({valueOf}) => valueOf(schemaPath.subscriptionType) === 'free');
+    debounce(schemaPath.promoCode, 300);
+    metadata(schemaPath.promoCode, PLACEHOLDER, () => 'Enter promo code');
+  });
+}
+```
+
+These rules work together:
+
+- Hidden takes precedence - if the field is hidden, disabled state doesn't matter
+- Disabled prevents editing regardless of readonly state
+- Debouncing affects model updates regardless of other state
+- Metadata is independent and always available
+
+### Conditional logic with applyWhen
+
+Use `applyWhen()` to conditionally apply entire groups of rules:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, applyWhen, required, pattern} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-address',
+  imports: [formField],
+  template: `
+    <label>
+      Country
+      <select [formField]="addressForm.country">
+        <option value="US">United States</option>
+        <option value="CA">Canada</option>
+      </select>
+    </label>
+
+    <label>
+      Zip/Postal Code
+      <input [formField]="addressForm.zipCode" />
+    </label>
+  `,
+})
+export class Address {
+  addressModel = signal({
+    country: 'US',
+    zipCode: '',
+  });
+
+  addressForm = form(this.addressModel, (schemaPath) => {
+    applyWhen(
+      schemaPath,
+      ({valueOf}) => valueOf(schemaPath.country) === 'US',
+      (schemaPath) => {
+        // Only applied when country is US
+        required(schemaPath.zipCode);
+        pattern(schemaPath.zipCode, /^\d{5}(-\d{4})?$/);
+      },
+    );
+  });
+}
+```
+
+The `applyWhen()` function receives:
+
+1. A path to apply logic to (often the root form path)
+2. A reactive logic function that returns `true` (apply) or `false` (don't apply)
+3. A schema function that defines the conditional rules
+
+The conditional rules only run when the condition is true. This is useful for complex forms where validation rules or behavior changes based on user choices.
+
+### Reusable schema functions
+
+Extract common rule configurations into reusable functions:
+
+```angular-ts
+import {SchemaPath, debounce, metadata, maxLength, PLACEHOLDER} from '@angular/forms/signals';
+
+function emailFieldConfig(path: SchemaPath<string>) {
+  debounce(path, 300);
+  metadata(path, PLACEHOLDER, () => 'user@example.com');
+  maxLength(path, 255);
+}
+
+// Use in multiple forms
+const contactForm = form(contactModel, (schemaPath) => {
+  emailFieldConfig(schemaPath.email);
+  emailFieldConfig(schemaPath.alternateEmail);
+});
+
+const registrationForm = form(registrationModel, (schemaPath) => {
+  emailFieldConfig(schemaPath.email);
+});
+```
+
+This pattern is useful when you have standard field configurations that you use across multiple forms in your application.
+
+## Next steps
+
+To learn more about Signal Forms, check out these related guides:
+
+- [Field State Management](guide/forms/signals/field-state-management) - Learn how to use the state signals created by these functions in your templates and component logic
+- [Validation](guide/forms/signals/validation) - Learn about validation rules and error handling
+- [Custom Controls](guide/forms/signals/custom-controls) - Learn how custom controls can read metadata and state to configure themselves automatically
diff --git a/adev-ja/src/content/guide/forms/signals/migration.md b/adev-ja/src/content/guide/forms/signals/migration.md
index ab2d4d82c..a2041eb07 100644
--- a/adev-ja/src/content/guide/forms/signals/migration.md
+++ b/adev-ja/src/content/guide/forms/signals/migration.md
@@ -1,7 +1,7 @@
 # Migrating existing forms to Signal Forms
 
 This guide provides strategies for migrating existing codebases to Signal Forms, focusing on interoperability with
-legacy Reactive Forms.
+existing Reactive Forms.
 
 ## Top-down migration using `compatForm`
 
@@ -10,7 +10,7 @@ controls that involve:
 
 - Complex asynchronous logic.
 - Intricate RxJS operators that are not yet ported.
-- Integration with legacy third-party libraries.
+- Integration with existing third-party libraries.
 
 ### Integrating a `FormControl` into a signal form
 
@@ -24,7 +24,7 @@ import {signal} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {compatForm} from '@angular/forms/signals/compat';
 
-// 1. Existing legacy control with a specialized validator
+// 1. Existing control with a specialized validator
 const passwordControl = new FormControl('', {
   validators: [Validators.required, enterprisePasswordValidator()],
   nonNullable: true,
@@ -33,7 +33,7 @@ const passwordControl = new FormControl('', {
 // 2. Wrap it inside your form state signal
 const user = signal({
   email: '',
-  password: passwordControl, // Nest the legacy control directly
+  password: passwordControl, // Nest the existing control directly
 });
 
 // 3. Create the form
@@ -45,24 +45,24 @@ console.log(f.password().value()); // Current value of passwordControl
 
 // Reactive state is proxied automatically
 const isPasswordValid = f.password().valid();
-const passwordErrors = f.password().errors(); // Returns CompatValidationError if the legacy validator fails
+const passwordErrors = f.password().errors(); // Returns CompatValidationError if the existing validator fails
 ```
 
 In the template, use standard reactive syntax by binding the underlying control:
 
 ```angular-html
-<form>
+<form novalidate>
   <div>
     <label>
       Email:
-      <input [field]="f.email">
+      <input [formField]="f.email" />
     </label>
   </div>
 
   <div>
     <label>
       Password:
-      <input [field]="f.password" type="password">
+      <input [formField]="f.password" type="password" />
     </label>
 
     @if (f.password().touched() && f.password().invalid()) {
@@ -83,14 +83,15 @@ In the template, use standard reactive syntax by binding the underlying control:
 
 ### Integrating a `FormGroup` into a signal form
 
-You can also wrap an entire `FormGroup`. This is common when a reusable sub-section of a form—such as an **Address Block**—is still managed by legacy Reactive Forms.
+You can also wrap an entire `FormGroup`. This is common when a reusable sub-section of a form—such as an
+**Address Block**—is still managed by existing Reactive Forms.
 
 ```typescript
 import {signal} from '@angular/core';
 import {FormGroup, FormControl, Validators} from '@angular/forms';
 import {compatForm} from '@angular/forms/signals/compat';
 
-// 1. A legacy address group with its own validation logic
+// 1. An existing address group with its own validation logic
 const addressGroup = new FormGroup({
   street: new FormControl('123 Angular Way', Validators.required),
   city: new FormControl('Mountain View', Validators.required),
@@ -109,16 +110,16 @@ const f = compatForm(checkoutModel, (p) => {
 ```
 
 The `shippingAddress` field acts as a branch in your Signal Form tree. You can bind these nested controls in your
-template by accessing the underlying legacy controls via `.control()`:
+template by accessing the underlying existing controls via `.control()`:
 
 ```angular-html
-<form>
+<form novalidate>
   <h3>Shipping Details</h3>
 
   <div>
     <label>
       Customer Name:
-      <input [field]="f.customerName">
+      <input [formField]="f.customerName" />
     </label>
 
     @if (f.customerName().touched() && f.customerName().invalid()) {
@@ -135,7 +136,7 @@ template by accessing the underlying legacy controls via `.control()`:
     <div>
       <label>
         Street:
-        <input [formControl]="street">
+        <input [formControl]="street" />
       </label>
       @if (street.touched && street.invalid) {
         <div class="error-list">
@@ -148,7 +149,7 @@ template by accessing the underlying legacy controls via `.control()`:
     <div>
       <label>
         City:
-        <input [formControl]="city">
+        <input [formControl]="city" />
       </label>
       @if (city.touched && city.invalid) {
         <div class="error-list">
@@ -161,7 +162,7 @@ template by accessing the underlying legacy controls via `.control()`:
     <div>
       <label>
         Zip Code:
-        <input [formControl]="zip">
+        <input [formControl]="zip" />
       </label>
       @if (zip.touched && zip.invalid) {
         <div class="error-list">
@@ -187,7 +188,7 @@ const passwordControl = new FormControl('password' /** ... */);
 
 const user = signal({
   email: '',
-  password: passwordControl, // Nest the legacy control directly
+  password: passwordControl, // Nest the existing control directly
 });
 
 const form = compatForm(user);
diff --git a/adev-ja/src/content/guide/i18n/format-data-locale.md b/adev-ja/src/content/guide/i18n/format-data-locale.md
index 8f90ef869..3565cf2ef 100644
--- a/adev-ja/src/content/guide/i18n/format-data-locale.md
+++ b/adev-ja/src/content/guide/i18n/format-data-locale.md
@@ -25,7 +25,7 @@ Add the `locale` parameter to the pipe to override the current value of `LOCALE_
 To force the currency to use American English \(`en-US`\), use the following format for the `CurrencyPipe`
 
 ```angular-html
-{{ amount | currency : 'en-US' }}
+{{ amount | currency: 'en-US' }}
 ```
 
 HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCALE_ID` token of your application.
diff --git a/adev-ja/src/content/guide/ngmodules/overview.md b/adev-ja/src/content/guide/ngmodules/overview.md
index 76739afce..a66b96124 100644
--- a/adev-ja/src/content/guide/ngmodules/overview.md
+++ b/adev-ja/src/content/guide/ngmodules/overview.md
@@ -1,6 +1,6 @@
 # NgModules
 
-IMPORTANT: The Angular team recommends using [standalone components](guide/components/anatomy-of-components#-imports-in-the-component-decorator) instead of `NgModule` for all new code. Use this guide to understand existing code built with `@NgModule`.
+IMPORTANT: The Angular team recommends using [standalone components](guide/components) instead of `NgModule` for all new code. Use this guide to understand existing code built with `@NgModule`.
 
 An NgModule is a class marked by the `@NgModule` decorator. This decorator accepts _metadata_ that tells Angular how to compile component templates and configure dependency injection.
 
@@ -173,7 +173,7 @@ IMPORTANT: The Angular team recommends using [bootstrapApplication](api/platform
 
 The `@NgModule` decorator accepts an optional `bootstrap` array that may contain one or more components.
 
-You can use the [`bootstrapModule`](/api/core/PlatformRef#bootstrapModule) method from either [`platformBrowser`](api/platform-browser/platformBrowser) or [`platformServer`](api/platform-server/platformServer) to start an Angular application. When run, this function locates any elements on the page with a CSS selector that matches the listed componet(s) and renders those components on the page.
+You can use the [`bootstrapModule`](/api/core/PlatformRef#bootstrapModule) method from either [`platformBrowser`](api/platform-browser/platformBrowser) or [`platformServer`](api/platform-server/platformServer) to start an Angular application. When run, this function locates any elements on the page with a CSS selector that matches the listed component(s) and renders those components on the page.
 
 ```typescript
 import {platformBrowser} from '@angular/platform-browser';
diff --git a/adev-ja/src/content/guide/signals/effect.md b/adev-ja/src/content/guide/signals/effect.md
index 211f7d763..3d3e66205 100644
--- a/adev-ja/src/content/guide/signals/effect.md
+++ b/adev-ja/src/content/guide/signals/effect.md
@@ -35,7 +35,7 @@ By default, you can only create an `effect()` within an [injection context](guid
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class EffectiveCounter {
   readonly count = signal(0);
@@ -52,15 +52,20 @@ export class EffectiveCounter {
 To create an effect outside the constructor, you can pass an `Injector` to `effect` via its options:
 
 ```ts
-@Component({...})
-export class EffectiveCounterComponent {
+@Component({
+  /*...*/
+})
+export class EffectiveCounter {
   readonly count = signal(0);
   private injector = inject(Injector);
 
   initializeLogging(): void {
-    effect(() => {
-      console.log(`The count is: ${this.count()}`);
-    }, {injector: this.injector});
+    effect(
+      () => {
+        console.log(`The count is: ${this.count()}`);
+      },
+      {injector: this.injector},
+    );
   }
 }
 ```
@@ -77,7 +82,7 @@ The execution of both kinds of `effect` are tied to the change detection process
 - "View effects" are executed _before_ their corresponding component is checked by the change detection process.
 - "Root effects" are executed prior to all components being checked by the change detection process.
 
-In both cases, if at least one of the effect dependencies changed during the effect execution, the effect will re-run before moving ahead on the change detection process,
+In both cases, if at least one of the effect dependencies changed during the effect execution, the effect will re-run before moving ahead on the change detection process.
 
 ### Destroying effects
 
@@ -117,7 +122,7 @@ For these situations, you can use `afterRenderEffect`. It functions like `effect
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class MyFancyChart {
   chartData = input.required<ChartData>();
@@ -128,7 +133,7 @@ export class MyFancyChart {
     // Run a single time to create the chart instance
     afterNextRender({
       write: () => {
-        this.chart = initializeChart(this.canvas().nativeElement(), this.charData());
+        this.chart = initializeChart(this.canvas().nativeElement(), this.chartData());
       },
     });
 
@@ -146,7 +151,7 @@ TIP: You often don't need `afterRenderEffect` to check for DOM changes. APIs lik
 
 ### Render phases
 
-Accessing the DOM and mutating it can impact the performance of your application, for example by triggering to many unecesary [reflows](https://developer.mozilla.org/en-US/docs/Glossary/Reflow).
+Accessing the DOM and mutating it can impact the performance of your application, for example by triggering too many unnecessary [reflows](https://developer.mozilla.org/en-US/docs/Glossary/Reflow).
 
 To optimize those operations, `afterRenderEffect` offers four phases to group the callbacks and execute them in an optimized order.
 
diff --git a/adev-ja/src/content/guide/testing/zone-js-testing-utilities.md b/adev-ja/src/content/guide/testing/zone-js-testing-utilities.md
index d22cae86e..ce459dc87 100644
--- a/adev-ja/src/content/guide/testing/zone-js-testing-utilities.md
+++ b/adev-ja/src/content/guide/testing/zone-js-testing-utilities.md
@@ -6,10 +6,10 @@ For general Angular testing utilities, including `TestBed` and `ComponentFixture
 
 Here's a summary of Zone.js-specific functions:
 
-| Function               | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `waitForAsync`         | Tracks async tasks and completes the tests only once there are no longer any micro or macrotasks remaining in the test zone. See [waitForAsync](guide/testing/components-scenarios#waitForAsync).                                                                                                                                                                                                                                                                                                                                                                                               |
-| `fakeAsync`            | Runs the body of a test \(`it`\) within a special _fakeAsync test zone_, enabling a linear control flow coding style. See [fakeAsync](guide/testing/components-scenarios#fake-async).                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `tick`                 | Simulates the passage of time and the completion of pending asynchronous activities by flushing both _timer_ and _micro-task_ queues within the _fakeAsync test zone_. The curious, dedicated reader might enjoy this lengthy blog post, ["_Tasks, microtasks, queues and schedules_"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules). Accepts an optional argument that moves the virtual clock forward by the specified number of milliseconds, clearing asynchronous activities scheduled within that timeframe. See [tick](guide/testing/components-scenarios#tick). |
-| `discardPeriodicTasks` | Discards any periodic tasks (e.g. `setInterval`) that were created inside the `fakeAsync` Zone.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `flushMicrotasks`      | When a `fakeAsync()` test ends with pending _micro-tasks_ such as unresolved promises, the test fails with a clear error message. <br /> In general, a test should wait for micro-tasks to finish. When pending microtasks are expected, call `flushMicrotasks` to flush the _micro-task_ queue and avoid the error.                                                                                                                                                                                                                                                                            |
+| Function               | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `waitForAsync`         | Tracks async tasks and completes the tests only once there are no longer any micro or macrotasks remaining in the test zone.                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `fakeAsync`            | Runs the body of a test \(`it`\) within a special _fakeAsync test zone_, enabling a linear control flow coding style.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `tick`                 | Simulates the passage of time and the completion of pending asynchronous activities by flushing both _timer_ and _micro-task_ queues within the _fakeAsync test zone_. The curious, dedicated reader might enjoy this lengthy blog post, ["_Tasks, microtasks, queues and schedules_"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules). Accepts an optional argument that moves the virtual clock forward by the specified number of milliseconds, clearing asynchronous activities scheduled within that timeframe. |
+| `discardPeriodicTasks` | Discards any periodic tasks (e.g. `setInterval`) that were created inside the `fakeAsync` Zone.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `flushMicrotasks`      | When a `fakeAsync()` test ends with pending _micro-tasks_ such as unresolved promises, the test fails with a clear error message. <br /> In general, a test should wait for micro-tasks to finish. When pending microtasks are expected, call `flushMicrotasks` to flush the _micro-task_ queue and avoid the error.                                                                                                                                                                                                                       |
diff --git a/adev-ja/src/content/reference/configs/angular-compiler-options.md b/adev-ja/src/content/reference/configs/angular-compiler-options.md
index 539383d5c..4fccf7bef 100644
--- a/adev-ja/src/content/reference/configs/angular-compiler-options.md
+++ b/adev-ja/src/content/reference/configs/angular-compiler-options.md
@@ -132,7 +132,7 @@ The `module` field of the library's `package.json` would be `"index.js"` and the
 
 ### `fullTemplateTypeCheck`
 
-When `true`, the recommended value, enables the [binding expression validation](tools/cli/aot-compiler#binding-expression-validation) phase of the template compiler. This phase uses TypeScript to verify binding expressions.
+When `true`, the recommended value, enables the binding expression validation phase of the template compiler. This phase uses TypeScript to verify binding expressions.
 For more information, see [Template type checking](tools/cli/template-typecheck).
 
 Default is `false`, but when you use the Angular CLI command `ng new --strict`, it is set to `true` in the new project's configuration.
@@ -151,7 +151,7 @@ Do this when using factory summaries.
 When `false`, the default, removes blank text nodes from compiled templates, which results in smaller emitted template factory modules.
 Set to `true` to preserve blank text nodes.
 
-HELPFUL: When using hydration, it is recommended that you use `preserveWhitespaces: false`, which is the default value. If you choose to enable preserving whitespaces by adding `preserveWhitespaces: true` to your tsconfig, it is possible you may encounter issues with hydration. This is not yet a fully supported configuration. Ensure this is also consistently set between the server and client tsconfig files. See the [hydration guide](guide/hydration#preserve-whitespaces) for more details.
+HELPFUL: When using hydration, it is recommended that you use `preserveWhitespaces: false`, which is the default value. If you choose to enable preserving whitespaces by adding `preserveWhitespaces: true` to your tsconfig, it is possible you may encounter issues with hydration. This is not yet a fully supported configuration. Ensure this is also consistently set between the server and client tsconfig files. See the [hydration guide](guide/hydration#preserve-whitespaces-configuration) for more details.
 
 ### `skipMetadataEmit`
 
diff --git a/adev-ja/src/content/reference/configs/workspace-config.md b/adev-ja/src/content/reference/configs/workspace-config.md
index 1757ff391..151c4b8b7 100644
--- a/adev-ja/src/content/reference/configs/workspace-config.md
+++ b/adev-ja/src/content/reference/configs/workspace-config.md
@@ -208,16 +208,16 @@ In this example, if both `staging` and `french` configurations set the output pa
 The configurable options for a default or targeted build generally correspond to the options available for the [`ng build`](cli/build), and [`ng test`](cli/test) commands.
 For details of those options and their possible values, see the [Angular CLI Reference](cli).
 
-| Options properties         | Details                                                                                                                                                                                                                                                                |
-| :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `assets`                   | An object containing paths to static assets to serve with the application. The default paths point to the project's `public` directory. See more in the [Assets configuration](#assets-configuration) section.                                                         |
-| `styles`                   | An array of CSS files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                    |
-| `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                                                                                 |
-| `scripts`                  | An object containing JavaScript files to add to the application. The scripts are loaded exactly as if you had added them in a `<script>` tag inside `index.html`. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.       |
-| `budgets`                  | Default size-budget type and thresholds for all or parts of your application. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See [Configure size budgets](tools/cli/build#configure-size-budgets). |
-| `fileReplacements`         | An object containing files and their compile-time replacements. See more in [Configure target-specific file replacements](tools/cli/build#configure-target-specific-file-replacements).                                                                                |
-| `index`                    | A base HTML document which loads the application. See more in [Index configuration](#index-configuration).                                                                                                                                                             |
-| `security`                 | An object containing the key `autoCsp` that can be set to `true` or `false`                                                                                                                                                                                            |
+| Options properties         | Details                                                                                                                                                                                                                                                                  |
+| :------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `assets`                   | An object containing paths to static assets to serve with the application. The default paths point to the project's `public` directory. See more in the [Assets configuration](#assets-configuration) section.                                                           |
+| `styles`                   | An array of CSS files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                      |
+| `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                                                                                   |
+| `scripts`                  | An object containing JavaScript files to add to the application. The scripts are loaded exactly as if you had added them in a `<script>` tag inside `index.html`. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.         |
+| `budgets`                  | Default size-budget type and thresholds for all or parts of your application. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See [Configure size budgets](tools/cli/build#configuring-size-budgets). |
+| `fileReplacements`         | An object containing files and their compile-time replacements. See more in [Configure target-specific file replacements](tools/cli/environments#configure-environment-specific-defaults).                                                                               |
+| `index`                    | A base HTML document which loads the application. See more in [Index configuration](#index-configuration).                                                                                                                                                               |
+| `security`                 | An object containing the key `autoCsp` that can be set to `true` or `false`                                                                                                                                                                                              |
 
 ### Extra serve options
 
@@ -375,7 +375,7 @@ To add paths, use the `stylePreprocessorOptions` option:
 Files in that directory, such as `src/style-paths/_variables.scss`, can be imported from anywhere in your project without the need for a relative path:
 
 ```scss
-// src/app/app.component.scss
+// src/app/app.scss
 // A relative path works
 @import '../style-paths/variables';
 
diff --git a/adev-ja/src/content/reference/errors/NG0204.md b/adev-ja/src/content/reference/errors/NG0204.md
new file mode 100644
index 000000000..55077d2dd
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0204.md
@@ -0,0 +1,59 @@
+# Invalid Injection Token
+
+This error occurs when Angular cannot resolve a dependency for a class during dependency injection. This most commonly affects classes using constructor injection, where Angular relies on TypeScript metadata to determine parameter types.
+
+The most common causes are:
+
+1. A service class is missing the `@Injectable()` decorator
+2. An `InjectionToken` lacks a proper provider definition
+3. A constructor parameter cannot be resolved
+
+NOTE: The `inject()` function takes an explicit token, so the "unresolvable parameter" scenario does not apply to it directly. However, if the injected class itself is missing `@Injectable()` and has its own constructor dependencies, the error can still occur.
+
+## Common scenarios
+
+### Missing `@Injectable()` decorator
+
+When a class has constructor dependencies but lacks the `@Injectable()` decorator, Angular cannot resolve its parameters:
+
+```ts {header: 'Missing @Injectable() decorator'}
+export class UserClient {
+  constructor(private http: HttpClient) {} // Angular can't resolve this
+}
+```
+
+Add the `@Injectable()` decorator to fix this:
+
+```ts
+@Injectable({providedIn: 'root'})
+export class UserClient {
+  constructor(private http: HttpClient) {}
+}
+```
+
+### Unresolvable constructor parameters
+
+This error also appears when Angular cannot determine the type of a constructor parameter:
+
+```ts
+@Injectable({providedIn: 'root'})
+export class DataStore {
+  // Angular can't resolve 'config' without a provider
+  constructor(private config: AppConfig) {}
+}
+```
+
+Ensure all constructor parameters either have providers configured or use `@Optional()` for optional dependencies.
+
+## Debugging the error
+
+The error message includes details about which token could not be resolved:
+
+- `Can't resolve all parameters for X: (?, ?, ?)` — The `?` marks indicate unresolvable parameters. Check that the class has `@Injectable()` and all dependencies have providers.
+- `Token X is missing a ɵprov definition` — An `InjectionToken` was used without configuring a provider. Register the token with a value using `{provide: TOKEN, useValue: ...}` or add a default factory to the token definition.
+
+Work backwards from the error's stack trace to identify where the problematic injection occurs, then verify that:
+
+1. The class has `@Injectable()` decorator
+2. All constructor parameters have registered providers
+3. Any `InjectionToken` has a configured provider or default value
diff --git a/adev-ja/src/content/reference/errors/NG0205.md b/adev-ja/src/content/reference/errors/NG0205.md
new file mode 100644
index 000000000..f3b3b2315
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0205.md
@@ -0,0 +1,76 @@
+# Injector has already been destroyed
+
+This error occurs when you attempt to retrieve a service from an injector that has already been destroyed. This typically happens when code tries to access dependencies after a component, directive, or module has been destroyed.
+
+## Common scenarios
+
+### Accessing services in callbacks after destruction
+
+When a component is destroyed, its injector is also destroyed. If an async callback later tries to access services, this error occurs:
+
+```ts
+@Component({
+  /*...*/
+})
+export class UserProfile implements OnInit {
+  private userClient = inject(UserClient);
+
+  ngOnInit() {
+    setTimeout(() => {
+      // ERROR: If component was destroyed before timeout fires,
+      // the injector is no longer available
+      this.userClient.fetchData();
+    }, 5000);
+  }
+}
+```
+
+### Accessing services after unsubscribing
+
+Similar issues occur with observables if cleanup happens in the wrong order:
+
+```ts
+@Component({
+  /*...*/
+})
+export class DataView implements OnDestroy {
+  private dataStore = inject(DataStore);
+
+  ngOnDestroy() {
+    // Problematic: attempting to use the injector during destruction
+    // after other cleanup may have occurred
+    this.dataStore.cleanup();
+  }
+}
+```
+
+## Debugging the error
+
+To fix this error:
+
+1. **Check async operations** — Ensure callbacks, promises, and subscriptions are cancelled when the component is destroyed. Use `takeUntilDestroyed()` or `DestroyRef` for cleanup.
+
+2. **Capture dependencies early** — Store references to services in class fields rather than accessing the injector in callbacks.
+
+3. **Guard against destroyed state** — For operations that might outlive the component, check if the component is still active before accessing services.
+
+```ts
+@Component({
+  /*...*/
+})
+export class UserProfile implements OnInit {
+  private destroyRef = inject(DestroyRef);
+  private userClient = inject(UserClient);
+
+  ngOnInit() {
+    // Use takeUntilDestroyed to automatically cancel when destroyed
+    interval(5000)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.userClient.fetchData();
+      });
+  }
+}
+```
+
+The stack trace indicates where the destroyed injector was accessed. Work backwards to identify the async operation that outlived its component.
diff --git a/adev-ja/src/content/reference/errors/NG0207.md b/adev-ja/src/content/reference/errors/NG0207.md
new file mode 100644
index 000000000..b02643e26
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0207.md
@@ -0,0 +1,75 @@
+# EnvironmentProviders in wrong context
+
+This error occurs when `EnvironmentProviders` are used in a context that only accepts regular providers, such as a component's `providers` array. Environment providers are designed for application-wide configuration and can only be used in environment injectors (like the root injector configured in `bootstrapApplication` or route configurations).
+
+## Common scenarios
+
+### Using `provideHttpClient()` in component providers
+
+Functions like `provideHttpClient()` return `EnvironmentProviders`, which cannot be used at the component level:
+
+```ts
+@Component({
+  providers: [
+    provideHttpClient(), // ERROR: EnvironmentProviders can't be used here
+  ],
+})
+export class UserProfile {}
+```
+
+### Using `importProvidersFrom()` in component providers
+
+The `importProvidersFrom()` function also returns `EnvironmentProviders`:
+
+```ts
+@Component({
+  providers: [
+    importProvidersFrom(SomeModule), // ERROR: can't be used for component providers
+  ],
+})
+export class DataView {}
+```
+
+## Debugging the error
+
+Move the environment providers to an appropriate location:
+
+### For application-wide providers
+
+Configure environment providers in `bootstrapApplication`:
+
+```ts
+bootstrapApplication(App, {
+  providers: [provideHttpClient(), importProvidersFrom(SomeModule)],
+});
+```
+
+### For route-specific providers
+
+Use the `providers` array in route configurations:
+
+```ts
+const routes: Routes = [
+  {
+    path: 'admin',
+    component: AdminView,
+    providers: [provideHttpClient(withInterceptors([authInterceptor]))],
+  },
+];
+```
+
+### For component-level services
+
+If you need component-scoped services, use regular providers instead of environment providers:
+
+```ts
+@Component({
+  providers: [
+    UserClient, // Regular provider - this works
+    {provide: API_URL, useValue: '/api'}, // Value provider - this works
+  ],
+})
+export class UserProfile {}
+```
+
+The error message specifies which provider caused the issue. Check that all items in your component's `providers` array are regular providers, not environment providers returned by functions like `provideHttpClient()`, `provideRouter()`, or `importProvidersFrom()`.
diff --git a/adev-ja/src/content/reference/errors/NG0919.md b/adev-ja/src/content/reference/errors/NG0919.md
index ae1c76efe..65a18558b 100644
--- a/adev-ja/src/content/reference/errors/NG0919.md
+++ b/adev-ja/src/content/reference/errors/NG0919.md
@@ -20,28 +20,28 @@ Cannot read properties of undefined (reading 'ɵcmp')
 
 The most common cause is when two components import each other:
 
-```angular-ts {header:"parent.component.ts"}
+```angular-ts {header:"parent.ts"}
 import {Component} from '@angular/core';
-import {ChildComponent} from './child.component';
+import {Child} from './child';
 
 @Component({
   selector: 'app-parent',
-  imports: [ChildComponent],
+  imports: [Child],
   template: '<app-child/>',
 })
-export class ParentComponent {}
+export class Parent {}
 ```
 
-```angular-ts {header:"child.component.ts"}
+```angular-ts {header:"child.ts"}
 import {Component} from '@angular/core';
-import {ParentComponent} from './parent.component';
+import {Parent} from './parent';
 
 @Component({
   selector: 'app-child',
-  imports: [ParentComponent],
+  imports: [Parent],
   template: '<app-parent/>',
 })
-export class ChildComponent {}
+export class Child {}
 ```
 
 ### Indirect Circular References
@@ -72,7 +72,7 @@ export class SharedService {
 If you only need types for TypeScript, use `import type`:
 
 ```ts
-import type {ParentComponent} from './parent.component';
+import type {Parent} from './parent';
 ```
 
 Type-only imports are erased at compile time and don't contribute to runtime circular dependencies.
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8102.md b/adev-ja/src/content/reference/extended-diagnostics/NG8102.md
index 8c4e56901..40f2e5612 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8102.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8102.md
@@ -33,35 +33,31 @@ Double-check the type of the input and confirm whether it is actually expected t
 If the input should be nullable, add `null` or `undefined` to its type to indicate this.
 
 ```angular-ts
-
 import {Component} from '@angular/core';
 
 @Component({
-template: `<div>{{ username ?? 'root' }}</div>`,
+  template: `<div>{{ username ?? 'root' }}</div>`,
 })
 class MyComponent {
-// `username` is now nullable. If it is ever set to `null`, 'root' will be
-// displayed.
-username: string | null = 'Angelino';
+  // `username` is now nullable. If it is ever set to `null`, 'root' will be
+  // displayed.
+  username: string | null = 'Angelino';
 }
-
 ```
 
 If the input should _not_ be nullable, delete the `??` operator and its right operand, since the value is guaranteed by TypeScript to always be non-nullable.
 
 ```angular-ts
-
 import {Component} from '@angular/core';
 
 @Component({
-// Template always displays `username`, which is guaranteed to never be `null`
-// or `undefined`.
-template: `<div>{{ username }}</div>`,
+  // Template always displays `username`, which is guaranteed to never be `null`
+  // or `undefined`.
+  template: `<div>{{ username }}</div>`,
 })
 class MyComponent {
-username: string = 'Angelino';
+  username: string = 'Angelino';
 }
-
 ```
 
 ## Configuration requirements
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8105.md b/adev-ja/src/content/reference/extended-diagnostics/NG8105.md
index fdce634d2..48d451c60 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8105.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8105.md
@@ -3,7 +3,7 @@
 This diagnostic is emitted when an expression used in `*ngFor` is missing the `let` keyword.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   // The `let` keyword is missing in the `*ngFor` expression.
@@ -23,7 +23,7 @@ A missing `let` is indicative of a syntax error in the `*ngFor` string. It also
 Add the missing `let` keyword.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   // The `let` keyword is now present in the `*ngFor` expression,
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8107.md b/adev-ja/src/content/reference/extended-diagnostics/NG8107.md
index f0c1729d1..56c7aceb9 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8107.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8107.md
@@ -3,7 +3,7 @@
 This diagnostic detects when the left side of an optional chain operation (`.?`) does not include `null` or `undefined` in its type in Angular templates.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   // Print the user's name safely, even if `user` is `null` or `undefined`.
@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
 })
 class MyComponent {
   // `user` is declared as an object which _cannot_ be `null` or `undefined`.
-  user: { name: string } = { name: 'Angelino' };
+  user: {name: string} = {name: 'Angelino'};
 }
 ```
 
@@ -29,7 +29,7 @@ Double-check the type of the input and confirm whether it is actually expected t
 If the input should be nullable, add `null` or `undefined` to its type to indicate this.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   // If `user` is nullish, `name` won't be evaluated and the expression will
@@ -37,14 +37,14 @@ import { Component } from '@angular/core';
   template: `<div>{{ user?.name }}</div>`,
 })
 class MyComponent {
-  user: { name: string } | null = { name: 'Angelino' };
+  user: {name: string} | null = {name: 'Angelino'};
 }
 ```
 
 If the input should not be nullable, delete the `?` operator.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   // Template always displays `name` as `user` is guaranteed to never be `null`
@@ -52,7 +52,7 @@ import { Component } from '@angular/core';
   template: `<div>{{ foo.bar }}</div>`,
 })
 class MyComponent {
-  user: { name: string } = { name: 'Angelino' };
+  user: {name: string} = {name: 'Angelino'};
 }
 ```
 
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8108.md b/adev-ja/src/content/reference/extended-diagnostics/NG8108.md
index 96f1530df..3dda90667 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8108.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8108.md
@@ -4,7 +4,7 @@
 This diagnostic ensures that this attribute `ngSkipHydration` is set statically and the value is either set to `"true"` or an empty value.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   template: `<user-viewer ngSkipHydration="hasUser" />`,
@@ -23,7 +23,7 @@ As a special attribute implemented by Angular, `ngSkipHydration` needs to be sta
 When using the `ngSkipHydration`, ensure that it's set as a static attribute (i.e. you do not use the Angular template binding syntax).
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   template: `
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8109.md b/adev-ja/src/content/reference/extended-diagnostics/NG8109.md
index e3cfe35fa..4ff6916ad 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8109.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8109.md
@@ -3,7 +3,7 @@
 This diagnostic detects uninvoked signals in template interpolations.
 
 ```angular-ts
-import { Component, signal, Signal } from '@angular/core';
+import {Component, signal, Signal} from '@angular/core';
 
 @Component({
   template: `<div>{{ mySignal }}</div>`,
@@ -23,7 +23,7 @@ This means they are meant to be invoked when used in template interpolations to
 Ensure to invoke the signal when you use it within a template interpolation to render its value.
 
 ```angular-ts
-import { Component, signal, Signal } from '@angular/core';
+import {Component, signal, Signal} from '@angular/core';
 
 @Component({
   template: `<div>{{ mySignal() }}</div>`,
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8111.md b/adev-ja/src/content/reference/extended-diagnostics/NG8111.md
index 7a9df6059..d4119ef13 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8111.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8111.md
@@ -3,7 +3,7 @@
 This diagnostic detects uninvoked functions in event bindings.
 
 ```angular-ts
-import { Component, signal, Signal } from '@angular/core';
+import {Component, signal, Signal} from '@angular/core';
 
 @Component({
   template: `<button (click)="(onClick)">Click me</button>`,
@@ -25,7 +25,7 @@ If the function is not invoked, it will not execute when the event is triggered.
 Ensure to invoke the function when you use it in an event binding to execute the function when the event is triggered.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   template: `<button (click)="onClick()">Click me</button>`,
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8114.md b/adev-ja/src/content/reference/extended-diagnostics/NG8114.md
index c74e91ea4..9b13bc786 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8114.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8114.md
@@ -4,14 +4,10 @@ This diagnostic detects cases where the nullish coalescing operator (`??`) is mi
 or (`||`) or logical and (`&&`) operators without parentheses to disambiguate precedence.
 
 ```angular-ts
-import { Component, signal, Signal } from '@angular/core';
+import {Component, signal, Signal} from '@angular/core';
 
 @Component({
-  template: `
-    <button [disabled]="hasPermission() && (task()?.disabled ?? true)">
-      Run
-    </button>
-  `,
+  template: `<button [disabled]="hasPermission() && (task()?.disabled ?? true)">Run</button>`,
 })
 class MyComponent {
   hasPermission = input(false);
@@ -32,14 +28,10 @@ intent of the code was but want to keep the behavior the same, place the parenth
 operator.
 
 ```angular-ts
-import { Component, signal, Signal } from '@angular/core';
+import {Component, signal, Signal} from '@angular/core';
 
 @Component({
-  template: `
-    <button [disabled]="hasPermission() && (task()?.disabled ?? true)">
-      Run
-    </button>
-  `,
+  template: `<button [disabled]="hasPermission() && (task()?.disabled ?? true)">Run</button>`,
 })
 class MyComponent {
   hasPermission = input(false);
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8115.md b/adev-ja/src/content/reference/extended-diagnostics/NG8115.md
index 562ee975c..9863a5ebc 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8115.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8115.md
@@ -3,7 +3,7 @@
 This diagnostic detects when a track function is not invoked in `@for` blocks.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   template: `@for (item of items; track trackByName) {}`,
@@ -25,7 +25,7 @@ When you don't invoke the function, the reconcialiation algorithm will use the f
 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.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   template: `@for (item of items; track trackByName(item)) {}`,
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8116.md b/adev-ja/src/content/reference/extended-diagnostics/NG8116.md
index 5664ec173..61145b124 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8116.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8116.md
@@ -3,12 +3,12 @@
 This diagnostic ensures that a standalone component using custom structural directives (e.g., `*select` or `*featureFlag`) in a template has the necessary imports for those directives.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   // Template uses `*select`, but no corresponding directive imported.
   imports: [],
-  template: `<p *select="let data from source">{{ data }}</p>`,
+  template: `<p *select="let data; from: source">{{ data }}</p>`,
 })
 class MyComponent {}
 ```
@@ -22,16 +22,15 @@ Using a structural directive without importing it will fail at runtime, as Angul
 Make sure that the corresponding structural directive is imported into the component:
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { SelectDirective } from 'my-directives';
+import {Component} from '@angular/core';
+import {SelectDirective} from 'my-directives';
 
 @Component({
   // Add `SelectDirective` to the `imports` array to make it available in the template.
   imports: [SelectDirective],
-  template: `<p *select="let data from source">{{ data }}</p>`,
+  template: `<p *select="let data; from: source">{{ data }}</p>`,
 })
 class MyComponent {}
-
 ```
 
 ## Configuration requirements
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8117.md b/adev-ja/src/content/reference/extended-diagnostics/NG8117.md
index db38695cf..66d646d4d 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8117.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8117.md
@@ -3,7 +3,7 @@
 This diagnostic detects uninvoked functions in text interpolation.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   template: `{{ getValue }}`,
@@ -25,7 +25,7 @@ If the function is not invoked, it will not return any value and the interpolati
 Ensure to invoke the function when you use it in text interpolation to return the value.
 
 ```angular-ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   template: `{{ getValue() }}`,
diff --git a/adev-ja/src/content/reference/migrations/common-to-standalone.md b/adev-ja/src/content/reference/migrations/common-to-standalone.md
index f0f59b064..9162d3520 100644
--- a/adev-ja/src/content/reference/migrations/common-to-standalone.md
+++ b/adev-ja/src/content/reference/migrations/common-to-standalone.md
@@ -19,8 +19,8 @@ ng generate @angular/core:common-to-standalone
 Before:
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-example',
@@ -29,19 +29,19 @@ import { CommonModule } from '@angular/common';
     <div *ngIf="show">
       {{ data | async | json }}
     </div>
-  `
+  `,
 })
-export class ExampleComponent {
+export class Example {
   show = true;
-  data = Promise.resolve({ message: 'Hello' });
+  data = Promise.resolve({message: 'Hello'});
 }
 ```
 
 After running the migration (component imports added, CommonModule removed):
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { AsyncPipe, JsonPipe, NgIf } from '@angular/common';
+import {Component} from '@angular/core';
+import {AsyncPipe, JsonPipe, NgIf} from '@angular/common';
 
 @Component({
   selector: 'app-example',
@@ -50,10 +50,10 @@ import { AsyncPipe, JsonPipe, NgIf } from '@angular/common';
     <div *ngIf="show">
       {{ data | async | json }}
     </div>
-  `
+  `,
 })
-export class ExampleComponent {
+export class Example {
   show = true;
-  data = Promise.resolve({ message: 'Hello' });
+  data = Promise.resolve({message: 'Hello'});
 }
 ```
diff --git a/adev-ja/src/content/reference/migrations/control-flow.md b/adev-ja/src/content/reference/migrations/control-flow.md
index 58ef83b8b..64397254a 100644
--- a/adev-ja/src/content/reference/migrations/control-flow.md
+++ b/adev-ja/src/content/reference/migrations/control-flow.md
@@ -9,3 +9,11 @@ Run the schematic using the following command:
 ```shell
 ng generate @angular/core:control-flow
 ```
+
+## Breaking changes
+
+### `@for` view reuse
+
+Using `@for` block if a property used in the `track` expression changes but the object reference remains the same (in-place modification), Angular updates the view's bindings (including component inputs) instead of destroying and recreating the element.
+
+This differs from `*ngFor`, which would execute a remount (destroy and recreate) of the element in a similar scenario if the `trackBy` function returned a different value.
diff --git a/adev-ja/src/content/reference/migrations/route-lazy-loading.md b/adev-ja/src/content/reference/migrations/route-lazy-loading.md
index 1ae553df5..1b2019120 100644
--- a/adev-ja/src/content/reference/migrations/route-lazy-loading.md
+++ b/adev-ja/src/content/reference/migrations/route-lazy-loading.md
@@ -34,15 +34,15 @@ The migration will check all the components in the routes, check if they are sta
 
 ```typescript
 // app.module.ts
-import {HomeComponent} from './home/home.component';
+import {Home} from './home';
 
 @NgModule({
   imports: [
     RouterModule.forRoot([
       {
         path: 'home',
-        // HomeComponent is standalone and eagerly loaded
-        component: HomeComponent,
+        // Home is standalone and eagerly loaded
+        component: Home,
       },
     ]),
   ],
@@ -59,8 +59,8 @@ export class AppModule {}
     RouterModule.forRoot([
       {
         path: 'home',
-        // ↓ HomeComponent is now lazy loaded
-        loadComponent: () => import('./home/home.component').then((m) => m.HomeComponent),
+        // ↓ Home is now lazy loaded
+        loadComponent: () => import('./home').then((m) => m.Home),
       },
     ]),
   ],
diff --git a/adev-ja/src/content/reference/migrations/self-closing-tags.md b/adev-ja/src/content/reference/migrations/self-closing-tags.md
index b65f72433..a6fdf8e0f 100644
--- a/adev-ja/src/content/reference/migrations/self-closing-tags.md
+++ b/adev-ja/src/content/reference/migrations/self-closing-tags.md
@@ -13,15 +13,11 @@ ng generate @angular/core:self-closing-tag
 #### Before
 
 ```angular-html
-
 <hello-world></hello-world>
-
 ```
 
 #### After
 
 ```angular-html
-
 <hello-world />
-
 ```
diff --git a/adev-ja/src/content/reference/migrations/signal-inputs.md b/adev-ja/src/content/reference/migrations/signal-inputs.md
index 34e5b44f9..8efbcec45 100644
--- a/adev-ja/src/content/reference/migrations/signal-inputs.md
+++ b/adev-ja/src/content/reference/migrations/signal-inputs.md
@@ -2,7 +2,7 @@
 
 Angular introduced an improved API for inputs that is considered
 production ready as of v19.
-Read more about signal inputs and their benefits in the [dedicated guide](guide/signals/inputs).
+Read more about signal inputs and their benefits in the [dedicated guide](guide/components/inputs).
 
 To support existing teams that would like to use signal inputs, the Angular team
 provides an automated migration that converts `@Input` fields to the new `input()` API.
@@ -29,10 +29,10 @@ See more details in the section [below](#vscode-extension).
 import {Component, Input} from '@angular/core';
 
 @Component({
-  template: `Name: {{name ?? ''}}`
+  template: `Name: {{ name ?? '' }}`,
 })
 export class MyComponent {
-  @Input() name: string|undefined = undefined;
+  @Input() name: string | undefined = undefined;
 
   someMethod(): number {
     if (this.name) {
@@ -49,7 +49,7 @@ export class MyComponent {
 import {Component, input} from '@angular/core';
 
 @Component({
-  template: `Name: {{name() ?? ''}}`
+  template: `Name: {{ name() ?? '' }}`,
 })
 export class MyComponent {
   readonly name = input<string>();
@@ -61,7 +61,6 @@ export class MyComponent {
     }
     return -1;
   }
-
 }
 ```
 
diff --git a/adev-ja/src/content/reference/migrations/signal-queries.md b/adev-ja/src/content/reference/migrations/signal-queries.md
index 075db95e2..0081e37c0 100644
--- a/adev-ja/src/content/reference/migrations/signal-queries.md
+++ b/adev-ja/src/content/reference/migrations/signal-queries.md
@@ -2,7 +2,7 @@
 
 Angular introduced improved APIs for queries that are considered
 production ready as of v19.
-Read more about signal queries and their benefits in the [dedicated guide](guide/signals/queries).
+Read more about signal queries and their benefits in the [dedicated guide](guide/components/queries).
 
 To support existing teams that would like to use signal queries, the Angular team
 provides an automated migration that converts existing decorator query fields to the new API.
@@ -30,10 +30,10 @@ See more details in the section [below](#vscode-extension).
 import {Component, ContentChild} from '@angular/core';
 
 @Component({
-  template: `Has ref: {{someRef ? 'Yes' : 'No'}}`
+  template: `Has ref: {{ someRef ? 'Yes' : 'No' }}`,
 })
 export class MyComponent {
-  @ContentChild('someRef') ref: ElementRef|undefined = undefined;
+  @ContentChild('someRef') ref: ElementRef | undefined = undefined;
 
   someMethod(): void {
     if (this.ref) {
@@ -49,7 +49,7 @@ export class MyComponent {
 import {Component, contentChild} from '@angular/core';
 
 @Component({
-  template: `Has ref: {{someRef() ? 'Yes' : 'No'}}`
+  template: `Has ref: {{ someRef() ? 'Yes' : 'No' }}`,
 })
 export class MyComponent {
   readonly ref = contentChild<ElementRef>('someRef');
diff --git a/adev-ja/src/content/reference/migrations/standalone.md b/adev-ja/src/content/reference/migrations/standalone.md
index 472f74df2..c8ce63143 100644
--- a/adev-ja/src/content/reference/migrations/standalone.md
+++ b/adev-ja/src/content/reference/migrations/standalone.md
@@ -71,20 +71,20 @@ HELPFUL: The schematic ignores NgModules which bootstrap a component during this
 // shared.module.ts
 @NgModule({
   imports: [CommonModule],
-  declarations: [GreeterComponent],
-  exports: [GreeterComponent],
+  declarations: [Greeter],
+  exports: [Greeter],
 })
 export class SharedModule {}
 ```
 
 ```angular-ts
-// greeter.component.ts
+// greeter.ts
 @Component({
   selector: 'greeter',
   template: '<div *ngIf="showGreeting">Hello</div>',
   standalone: false,
 })
-export class GreeterComponent {
+export class Greeter {
   showGreeting = true;
 }
 ```
@@ -94,20 +94,20 @@ export class GreeterComponent {
 ```typescript
 // shared.module.ts
 @NgModule({
-  imports: [CommonModule, GreeterComponent],
-  exports: [GreeterComponent],
+  imports: [CommonModule, Greeter],
+  exports: [Greeter],
 })
 export class SharedModule {}
 ```
 
 ```angular-ts
-// greeter.component.ts
+// greeter.ts
 @Component({
   selector: 'greeter',
   template: '<div *ngIf="showGreeting">Hello</div>',
-  imports: [NgIf]
+  imports: [NgIf],
 })
-export class GreeterComponent {
+export class Greeter {
   showGreeting = true;
 }
 ```
@@ -155,23 +155,23 @@ This step converts any usages of `bootstrapModule` to the new, standalone-based
 ```typescript
 // ./app/app.module.ts
 import {NgModule} from '@angular/core';
-import {AppComponent} from './app.component';
+import {App} from './app';
 
 @NgModule({
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
+  declarations: [App],
+  bootstrap: [App],
 })
 export class AppModule {}
 ```
 
 ```typescript
-// ./app/app.component.ts
+// ./app/app.ts
 @Component({
   selector: 'app',
   template: 'hello',
   standalone: false,
 })
-export class AppComponent {}
+export class App {}
 ```
 
 ```typescript
@@ -192,20 +192,20 @@ platformBrowser()
 ```
 
 ```typescript
-// ./app/app.component.ts
+// ./app/app.ts
 @Component({
   selector: 'app',
   template: 'hello',
 })
-export class AppComponent {}
+export class App {}
 ```
 
 ```typescript
 // ./main.ts
 import {bootstrapApplication} from '@angular/platform-browser';
-import {AppComponent} from './app/app.component';
+import {App} from './app';
 
-bootstrapApplication(AppComponent).catch((e) => console.error(e));
+bootstrapApplication(App).catch((e) => console.error(e));
 ```
 
 ## Common problems
diff --git a/adev-ja/src/content/tools/cli/aot-compiler.md b/adev-ja/src/content/tools/cli/aot-compiler.md
index afa68a38d..88a5ccf73 100644
--- a/adev-ja/src/content/tools/cli/aot-compiler.md
+++ b/adev-ja/src/content/tools/cli/aot-compiler.md
@@ -40,23 +40,21 @@ The Angular AOT compiler extracts **metadata** to interpret the parts of the app
 You can specify the metadata explicitly in **decorators** such as `@Component()`, or implicitly in the constructor declarations of the decorated classes.
 The metadata tells Angular how to construct instances of your application classes and interact with them at runtime.
 
-In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `TypicalComponent`.
+In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `Typical`.
 
 ```angular-ts
-
 @Component({
   selector: 'app-typical',
-  template: '<div>A typical component for {{data.name}}</div>'
+  template: '<div>A typical component for {{data.name}}</div>',
 })
-export class TypicalComponent {
+export class Typical {
   data = input.required<TypicalData>();
   private someService = inject(SomeService);
 }
-
 ```
 
-The Angular compiler extracts the metadata _once_ and generates a _factory_ for `TypicalComponent`.
-When it needs to create a `TypicalComponent` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.
+The Angular compiler extracts the metadata _once_ and generates a _factory_ for `Typical`.
+When it needs to create a `Typical` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.
 
 ### Compilation phases
 
@@ -188,17 +186,15 @@ The collector can evaluate references to module-local `const` declarations and i
 Consider the following component definition:
 
 ```angular-ts
-
 const template = '<div>{{hero().name}}</div>';
 
 @Component({
   selector: 'app-hero',
-  template: template
+  template: template,
 })
-export class HeroComponent {
+export class Hero {
   hero = input.required<Hero>();
 }
-
 ```
 
 The compiler could not refer to the `template` constant because it isn't exported.
@@ -206,15 +202,13 @@ The collector, however, can fold the `template` constant into the metadata defin
 The effect is the same as if you had written:
 
 ```angular-ts
-
 @Component({
   selector: 'app-hero',
-  template: '<div>{{hero().name}}</div>'
+  template: '<div>{{hero().name}}</div>',
 })
-export class HeroComponent {
+export class Hero {
   hero = input.required<Hero>();
 }
-
 ```
 
 There is no longer a reference to `template` and, therefore, nothing to trouble the compiler when it later interprets the _collector's_ output in `.metadata.json`.
@@ -222,25 +216,21 @@ There is no longer a reference to `template` and, therefore, nothing to trouble
 You can take this example a step further by including the `template` constant in another expression:
 
 ```angular-ts
-
 const template = '<div>{{hero().name}}</div>';
 
 @Component({
   selector: 'app-hero',
-  template: template + '<div>{{hero().title}}</div>'
+  template: template + '<div>{{hero().title}}</div>',
 })
-export class HeroComponent {
+export class Hero {
   hero = input.required<Hero>();
 }
-
 ```
 
 The collector reduces this expression to its equivalent _folded_ string:
 
 ```angular-ts
-
-'<div>{{hero().name}}</div><div>{{hero().title}}</div>'
-
+'<div>{{hero().name}}</div><div>{{hero().title}}</div>';
 ```
 
 #### Foldable syntax
@@ -297,7 +287,7 @@ The compiler can only create instances of certain classes, supports only core de
 | Compiler action      | Details                                                                                                                                                |
 | :------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | New instances        | The compiler only allows metadata that create instances of the class `InjectionToken` from `@angular/core`.                                            |
-| Supported decorators | The compiler only supports metadata for the [Angular decorators in the `@angular/core` module](api/core#decorators).                                   |
+| Supported decorators | The compiler only supports metadata for the [Angular decorators in the `@angular/core` module](/api?type=decorator).                                   |
 | Function calls       | Factory functions must be exported, named functions. The AOT compiler does not support lambda expressions \("arrow functions"\) for factory functions. |
 
 ### Functions and static method calls
@@ -319,7 +309,7 @@ You might use `wrapInArray()` like this:
 
 ```ts
 @NgModule({
-  declarations: wrapInArray(TypicalComponent),
+  declarations: wrapInArray(Typical),
 })
 export class TypicalModule {}
 ```
@@ -328,14 +318,14 @@ The compiler treats this usage as if you had written:
 
 ```ts
 @NgModule({
-  declarations: [TypicalComponent],
+  declarations: [Typical],
 })
 export class TypicalModule {}
 ```
 
 The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
 Review the [source code](https://github.com/angular/angular/blob/main/packages/router/src/router_module.ts#L139 'RouterModule.forRoot source code')
-for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules).
+for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules/overview).
 
 ### Metadata rewriting
 
@@ -389,15 +379,13 @@ file.
 For example, consider the following component:
 
 ```angular-ts
-
 @Component({
   selector: 'my-component',
-  template: '{{person.addresss.street}}'
+  template: '{{person.addresss.street}}',
 })
 class MyComponent {
   person?: Person;
 }
-
 ```
 
 This produces the following error:
@@ -436,20 +424,18 @@ template compiler, the same way the `if` expression does in TypeScript.
 For example, to avoid `Object is possibly 'undefined'` error in the template above, modify it to only emit the interpolation if the value of `person` is initialized as shown below:
 
 ```angular-ts
-
 @Component({
   selector: 'my-component',
-  template: '<span *ngIf="person"> {{person.address.street}} </span>'
+  template: '<span *ngIf="person"> {{person.address.street}} </span>',
 })
 class MyComponent {
   person?: Person;
 }
-
 ```
 
 Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the binding expression will never be `undefined`.
 
-For more information about input type narrowing, see [Improving template type checking for custom directives](guide/directives/structural-directives#directive-type-checks).
+For more information about input type narrowing, see [Improving template type checking for custom directives](/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives).
 
 ### Non-null type assertion operator
 
@@ -459,10 +445,9 @@ In the following example, the `person` and `address` properties are always set t
 There is no convenient way to describe this constraint to TypeScript and the template compiler, but the error is suppressed in the example by using `address!.street`.
 
 ```angular-ts
-
 @Component({
   selector: 'my-component',
-  template: '<span *ngIf="person"> {{person.name}} lives on {{address!.street}} </span>'
+  template: '<span *ngIf="person"> {{person.name}} lives on {{address!.street}} </span>',
 })
 class MyComponent {
   person?: Person;
@@ -473,7 +458,6 @@ class MyComponent {
     this.address = address;
   }
 }
-
 ```
 
 The non-null assertion operator should be used sparingly as refactoring of the component might break this constraint.
@@ -481,10 +465,9 @@ The non-null assertion operator should be used sparingly as refactoring of the c
 In this example it is recommended to include the checking of `address` in the `*ngIf` as shown below:
 
 ```angular-ts
-
 @Component({
   selector: 'my-component',
-  template: '<span *ngIf="person && address"> {{person.name}} lives on {{address.street}} </span>'
+  template: '<span *ngIf="person && address"> {{person.name}} lives on {{address.street}} </span>',
 })
 class MyComponent {
   person?: Person;
@@ -495,5 +478,4 @@ class MyComponent {
     this.address = address;
   }
 }
-
 ```
diff --git a/adev-ja/src/content/tools/cli/aot-metadata-errors.md b/adev-ja/src/content/tools/cli/aot-metadata-errors.md
index 0f30278ec..d954c78bc 100644
--- a/adev-ja/src/content/tools/cli/aot-metadata-errors.md
+++ b/adev-ja/src/content/tools/cli/aot-metadata-errors.md
@@ -6,7 +6,7 @@ The following are metadata errors you may encounter, with explanations and sugge
 
 HELPFUL: The compiler encountered an expression it didn't understand while evaluating Angular metadata.
 
-Language features outside of the compiler's [restricted expression syntax](tools/cli/aot-compiler#expression-syntax)
+Language features outside of the compiler's [restricted expression syntax](tools/cli/aot-compiler)
 can produce this error, as seen in the following example:
 
 ```ts
@@ -23,7 +23,7 @@ const prop = typeof Fooish; // typeof is not valid in metadata
 You can use `typeof` and bracket notation in normal application code.
 You just can't use those features within expressions that define Angular metadata.
 
-Avoid this error by sticking to the compiler's [restricted expression syntax](tools/cli/aot-compiler#expression-syntax)
+Avoid this error by sticking to the compiler's [restricted expression syntax](tools/cli/aot-compiler)
 when writing Angular metadata
 and be wary of new or unusual TypeScript features.
 
@@ -171,7 +171,7 @@ abstract class MyStrategy { }
   …
 ```
 
-Angular generates a class factory in a separate module and that factory [can only access exported classes](tools/cli/aot-compiler#exported-symbols).
+Angular generates a class factory in a separate module and that factory [can only access exported classes](tools/cli/aot-compiler#public-or-protected-symbols).
 To correct this error, export the referenced class.
 
 ```ts
@@ -202,7 +202,7 @@ function myStrategy() { … }
   …
 ```
 
-Angular generates a class factory in a separate module and that factory [can only access exported functions](tools/cli/aot-compiler#exported-symbols).
+Angular generates a class factory in a separate module and that factory [can only access exported functions](tools/cli/aot-compiler#public-or-protected-symbols).
 To correct this error, export the function.
 
 ```ts
@@ -216,56 +216,6 @@ export function myStrategy() { … }
   …
 ```
 
-## Function calls are not supported
-
-HELPFUL: _Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function._
-
-The compiler does not currently support [function expressions or lambda functions](tools/cli/aot-compiler#function-expression).
-For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this.
-
-```ts
-// ERROR
-  …
-  providers: [
-    { provide: MyStrategy, useFactory: function() { … } },
-    { provide: OtherStrategy, useFactory: () => { … } }
-  ]
-  …
-```
-
-You also get this error if you call a function or method in a provider's `useValue`.
-
-```ts
-// ERROR
-import { calculateValue } from './utilities';
-
-  …
-  providers: [
-    { provide: SomeValue, useValue: calculateValue() }
-  ]
-  …
-```
-
-To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
-
-```ts
-// CORRECTED
-import { calculateValue } from './utilities';
-
-export function myStrategy() { … }
-export function otherStrategy() { … }
-export function someValueFactory() {
-  return calculateValue();
-}
-  …
-  providers: [
-    { provide: MyStrategy, useFactory: myStrategy },
-    { provide: OtherStrategy, useFactory: otherStrategy },
-    { provide: SomeValue, useFactory: someValueFactory }
-  ]
-  …
-```
-
 ## Destructured variable or constant not supported
 
 HELPFUL: _Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring._
diff --git a/adev-ja/src/content/tools/cli/environments.md b/adev-ja/src/content/tools/cli/environments.md
index 902ef1069..380d79c4c 100644
--- a/adev-ja/src/content/tools/cli/environments.md
+++ b/adev-ja/src/content/tools/cli/environments.md
@@ -119,7 +119,7 @@ import {environment} from './environments/environment';
 
 This ensures that the build and serve commands can find the configurations for specific build targets.
 
-The following code in the component file (`app.component.ts`) uses an environment variable defined in the configuration files.
+The following code in the component file (`app.ts`) uses an environment variable defined in the configuration files.
 
 ```ts
 import {environment} from './../environments/environment';
diff --git a/adev-ja/src/content/tools/cli/template-typecheck.md b/adev-ja/src/content/tools/cli/template-typecheck.md
index 298eb81a9..ae53649e7 100644
--- a/adev-ja/src/content/tools/cli/template-typecheck.md
+++ b/adev-ja/src/content/tools/cli/template-typecheck.md
@@ -134,7 +134,6 @@ The template type checker checks whether a binding expression's type is compatib
 As an example, consider the following component:
 
 ```angular-ts
-
 export interface User {
   name: string;
 }
@@ -146,13 +145,11 @@ export interface User {
 export class UserDetailComponent {
   user = input.required<User>();
 }
-
 ```
 
 The `AppComponent` template uses this component as follows:
 
 ```angular-ts
-
 @Component({
   selector: 'app-root',
   template: '<user-detail [user]="selectedUser"></user-detail>',
@@ -160,7 +157,6 @@ The `AppComponent` template uses this component as follows:
 export class AppComponent {
   selectedUser: User | null = null;
 }
-
 ```
 
 Here, during type checking of the template for `AppComponent`, the `[user]="selectedUser"` binding corresponds with the `UserDetailComponent.user` input.
@@ -169,7 +165,7 @@ TypeScript checks the assignment according to its type system, obeying flags suc
 
 Avoid run-time type errors by providing more specific in-template type requirements to the template type checker.
 Make the input type requirements for your own directives as specific as possible by providing template-guard functions in the directive definition.
-See [Improving template type checking for custom directives](guide/directives/structural-directives#directive-type-checks) in this guide.
+See [Improving template type checking for custom directives](/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives) in this guide.
 
 ### Strict null checks
 
@@ -214,7 +210,7 @@ In the case of the `async` pipe, notice that the expression needs to be wrapped
 As a library author, you can take several measures to provide an optimal experience for your users.
 First, enabling `strictNullChecks` and including `null` in an input's type, as appropriate, communicates to your consumers whether they can provide a nullable value or not.
 Additionally, it is possible to provide type hints that are specific to the template type checker.
-See [Improving template type checking for custom directives](guide/directives/structural-directives#directive-type-checks), and [Input setter coercion](#input-setter-coercion).
+See [Improving template type checking for custom directives](/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives), and [Input setter coercion](#input-setter-coercion).
 
 ## Input setter coercion
 
@@ -224,7 +220,6 @@ As an example, consider this custom button component:
 Consider the following directive:
 
 ```angular-ts
-
 @Component({
   selector: 'submit-button',
   template: `
@@ -234,9 +229,8 @@ Consider the following directive:
   `,
 })
 class SubmitButton {
-  disabled = input.required({transform: booleanAttribute });
+  disabled = input.required({transform: booleanAttribute});
 }
-
 ```
 
 Here, the `disabled` input of the component is being passed on to the `<button>` in the template.
@@ -306,13 +300,11 @@ The compiler treats it as a cast to the `any` type just like in TypeScript when
 In the following example, casting `person` to the `any` type suppresses the error `Property address does not exist`.
 
 ```angular-ts
-
 @Component({
   selector: 'my-component',
-  template: '{{$any(person).address.street}}'
+  template: '{{$any(person).address.street}}',
 })
 class MyComponent {
   person?: Person;
 }
-
 ```
diff --git a/adev-ja/src/content/tools/devtools/profiler.md b/adev-ja/src/content/tools/devtools/profiler.md
index 34ce43d71..b3ec6dbd7 100644
--- a/adev-ja/src/content/tools/devtools/profiler.md
+++ b/adev-ja/src/content/tools/devtools/profiler.md
@@ -13,7 +13,7 @@ Interact with your application to trigger change detection and generate data Ang
 To finish recording, click the circle again to **Stop recording**.
 
 You can also import an existing recording.
-Read more about this feature in the [Import recording](tools/devtools#import-and-export-recordings) section.
+Read more about this feature in the [Import recording](tools/devtools/profiler#import-and-export-recordings) section.
 
 ## Understand your application's execution
 
diff --git a/adev-ja/src/content/tools/libraries/angular-package-format.md b/adev-ja/src/content/tools/libraries/angular-package-format.md
index 9f29cfb29..4254feed8 100644
--- a/adev-ja/src/content/tools/libraries/angular-package-format.md
+++ b/adev-ja/src/content/tools/libraries/angular-package-format.md
@@ -206,6 +206,7 @@ The Angular compiler can generate index ES module files. Tools like Rollup can u
 
 FESM is a file format created by flattening all ES Modules accessible from an entrypoint into a single ES Module.
 It's formed by following all imports from a package and copying that code into a single file while preserving all public ES exports and removing all private imports.
+However, in some cases, the FESM may depend on shared chunks that are shared between multiple entry points.
 
 The abbreviated name, FESM, pronounced _phe-som_, can be followed by a number such as FESM2020.
 The number refers to the language level of the JavaScript inside the module.
@@ -300,6 +301,7 @@ Short for ECMAScript Modules \(see above\).
 ### FESM
 
 Short for Flattened ES Modules and consists of a file format created by flattening all ES Modules accessible from an entry point into a single ES Module.
+Note that FESM is typically a single file, but it can depend on a shared chunk that is shared with other FESMs.
 
 ### Module ID
 
diff --git a/adev-ja/src/content/tools/libraries/creating-libraries.md b/adev-ja/src/content/tools/libraries/creating-libraries.md
index bc33665ef..0cf32af30 100644
--- a/adev-ja/src/content/tools/libraries/creating-libraries.md
+++ b/adev-ja/src/content/tools/libraries/creating-libraries.md
@@ -152,7 +152,7 @@ In your Angular library, the distributable can include additional assets like th
 For more information [copy assets into your library as part of the build](https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md) and [embed assets in component styles](https://github.com/ng-packagr/ng-packagr/blob/master/docs/embed-assets-css.md).
 
 IMPORTANT: When including additional assets like Sass mixins or pre-compiled CSS.
-You need to add these manually to the conditional ["exports"](tools/libraries/angular-package-format#quotexportsquot) in the `package.json` of the primary entrypoint.
+You need to add these manually to the conditional ["exports"](tools/libraries/angular-package-format#exports) in the `package.json` of the primary entrypoint.
 
 `ng-packagr` will merge handwritten `"exports"` with the auto-generated ones, allowing for library authors to configure additional export subpaths, or custom conditions.
 
@@ -289,7 +289,7 @@ To use linked libraries, you need to configure your application's `angular.json`
 
 **Configuration options explained:**
 
-- `preserveSymlinks: true`: Instructs the build system to follow the symlinks created by your package manager's linking command instead of resolving to the symlink's original location. This is essential to to avoid multiple copies of the dependent node packages.
+- `preserveSymlinks: true`: Instructs the build system to follow the symlinks created by your package manager's linking command instead of resolving to the symlink's original location. This is essential to avoid multiple copies of the dependent node packages.
 - `sourceMap.vendor`: Enabling vendor source maps (especially `vendor: true`) for easier debugging of linked library code.
 - `prebundle.exclude`: By default, the Angular CLI can pre-bundle all node dependencies. Excluding your library ensures that the linked source code is properly watched and rebuilt when changes occur.
 
diff --git a/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md
index 1821e58df..88018aa07 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md
@@ -15,7 +15,7 @@ In this lesson, you'll continue the process of sharing data from the parent comp
 
 Property binding enables you to connect a variable to an `Input` in an Angular template. The data is then dynamically bound to the `Input`.
 
-For a more in depth explanation, please refer to the [Property binding](guide/templates/property-binding) guide.
+For a more in depth explanation, please refer to the [Property binding](/guide/templates/binding#css-class-and-style-property-bindings) guide.
 
 <docs-workflow>
 
@@ -46,5 +46,5 @@ SUMMARY: In this lesson, you added a new property binding and passed in a refere
 For more information about the topics covered in this lesson, visit:
 
 <docs-pill-row>
-  <docs-pill href="/guide/templates/property-binding" title="Property binding"/>
+  <docs-pill href="/guide/templates/binding#css-class-and-style-property-bindings" title="Property binding"/>
 </docs-pill-row>
diff --git a/adev-ja/src/content/tutorials/first-app/steps/09-services/README.md b/adev-ja/src/content/tutorials/first-app/steps/09-services/README.md
index c797bb535..ecc074213 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/09-services/README.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/09-services/README.md
@@ -103,7 +103,7 @@ In a later lesson, you'll refactor the service to get its data from an API endpo
 For more information about the topics covered in this lesson, visit:
 
 <docs-pill-row>
-  <docs-pill href="guide/di/creating-injectable-service" title="Creating an injectable service"/>
+  <docs-pill href="guide/di/creating-and-using-services" title="Creating an injectable service"/>
   <docs-pill href="guide/di" title="Dependency injection in Angular"/>
   <docs-pill href="cli/generate/service" title="ng generate service"/>
   <docs-pill href="cli/generate" title="ng generate"/>
diff --git a/adev-ja/src/content/tutorials/first-app/steps/11-details-page/README.md b/adev-ja/src/content/tutorials/first-app/steps/11-details-page/README.md
index 864ca99b8..59ef918db 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/11-details-page/README.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/11-details-page/README.md
@@ -131,7 +131,7 @@ Really great work so far.
 For more information about the topics covered in this lesson, visit:
 
 <docs-pill-row>
-  <docs-pill href="guide/routing/common-router-tasks#accessing-query-parameters-and-fragments" title="Route Parameters"/>
+  <docs-pill href="guide/routing/read-route-state#get-information-about-the-current-route-with-activatedroute" title="Route Parameters"/>
   <docs-pill href="guide/routing" title="Routing in Angular Overview"/>
   <docs-pill href="guide/routing/common-router-tasks" title="Common Routing Tasks"/>
   <docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Optional_chaining" title="Optional Chaining Operator"/>

From ac652cfdbb8124bffbcb31da6f484497c7b1d17e Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 22:41:44 +0900
Subject: [PATCH 03/55] fix(docs): migrate ai docs

---
 adev-ja/src/content/ai/ai-tutor.en.md         | 11 ++++++++++-
 adev-ja/src/content/ai/ai-tutor.md            | 11 ++++++++++-
 adev-ja/src/content/ai/design-patterns.en.md  | 10 +++++-----
 adev-ja/src/content/ai/design-patterns.md     | 10 +++++-----
 adev-ja/src/content/ai/mcp-server-setup.en.md | 14 ++++++++------
 adev-ja/src/content/ai/mcp-server-setup.md    |  6 ++++--
 adev-ja/src/content/ai/overview.en.md         |  2 +-
 adev-ja/src/content/ai/overview.md            |  2 +-
 8 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/adev-ja/src/content/ai/ai-tutor.en.md b/adev-ja/src/content/ai/ai-tutor.en.md
index fd3b01aed..7c922be05 100644
--- a/adev-ja/src/content/ai/ai-tutor.en.md
+++ b/adev-ja/src/content/ai/ai-tutor.en.md
@@ -108,7 +108,7 @@ If the tutor doesn't respond correctly or you suspect an issue with your applica
 
 ## **Your Learning Journey: The Phased Path**
 
-You will build your application over a four-phase journey. You can follow this path from start to finish to create a complete, fully-functional Angular application. Each module builds logically upon the last, taking you from the basics to advanced, real-world features.
+You will build your application over a five-phase journey. You can follow this path from start to finish to create a complete, fully-functional Angular application. Each module builds logically upon the last, taking you from the basics to advanced, real-world features.
 
 **A Note on Automated Setup:** Some modules require a setup step, like creating interfaces or mock data. In these cases, the tutor will present you with the code and file instructions. You will be responsible for creating and modifying these files as instructed before the exercise begins.
 
@@ -141,6 +141,15 @@ You will build your application over a four-phase journey. You can follow this p
 - **Module 16:** Introduction to Forms
 - **Module 17:** Intro to Angular Material
 
+### **Phase 5: Experimental Signal Forms (⚠️ WARNING: Subject to Change)**
+
+**CRITICAL NOTE FOR THIS PHASE:** Signal Forms are currently an [**EXPERIMENTAL** feature](/reference/releases#experimental). The API may change significantly in future Angular releases. Please proceed with the understanding that this section demonstrates a cutting-edge feature.
+
+- **Module 18**: **Introduction to Signal Forms**
+- **Module 19**: **Submitting & Resetting**
+- **Module 20**: **Validation in Signal Forms**
+- **Module 21**: **Field State & Error Messages**
+
 ---
 
 ## **A Note on AI & Feedback**
diff --git a/adev-ja/src/content/ai/ai-tutor.md b/adev-ja/src/content/ai/ai-tutor.md
index 2ecfff631..7ff8f7d37 100644
--- a/adev-ja/src/content/ai/ai-tutor.md
+++ b/adev-ja/src/content/ai/ai-tutor.md
@@ -108,7 +108,7 @@ Angular AIチューターは、完全でモダンなAngularアプリケーショ
 
 ## **学習の道のり：段階的なパス** {#your-learning-journey-the-phased-path}
 
-4つのフェーズにわたる道のりでアプリケーションを構築します。このパスを最初から最後までたどることで、完全で機能的なAngularアプリケーションを作成できます。各モジュールは前のモジュールの上に論理的に構築されており、基礎から高度で実践的な機能へと導きます。
+5つのフェーズにわたる道のりでアプリケーションを構築します。このパスを最初から最後までたどることで、完全で機能的なAngularアプリケーションを作成できます。各モジュールは前のモジュールの上に論理的に構築されており、基礎から高度で実践的な機能へと導きます。
 
 **自動セットアップに関する注意：** 一部のモジュールでは、インターフェースやモックデータの作成など、セットアップ手順が必要です。これらの場合、チューターがコードとファイルの手順を提示します。演習が始まる前に、指示に従ってこれらのファイルを作成・修正する責任があります。
 
@@ -141,6 +141,15 @@ Angular AIチューターは、完全でモダンなAngularアプリケーショ
 - **モジュール16：** フォーム入門
 - **モジュール17：** Angular Material入門
 
+### **フェーズ5：実験的なシグナルフォーム（⚠️ 警告：変更の可能性あり）** {#phase-5-experimental-signal-forms-warning-subject-to-change}
+
+**このフェーズに関する重要な注意：** シグナルフォームは現在[**実験的な**機能](/reference/releases#experimental)です。APIは将来のAngularリリースで大幅に変更される可能性があります。このセクションは最先端の機能を示すものであることをご理解の上、お進みください。
+
+- **モジュール18：** **シグナルフォーム入門**
+- **モジュール19：** **送信とリセット**
+- **モジュール20：** **シグナルフォームのバリデーション**
+- **モジュール21：** **フィールドの状態とエラーメッセージ**
+
 ---
 
 ## **AIとフィードバックに関する注意点** {#a-note-on-ai-feedback}
diff --git a/adev-ja/src/content/ai/design-patterns.en.md b/adev-ja/src/content/ai/design-patterns.en.md
index d40582e24..8a4ce4d67 100644
--- a/adev-ja/src/content/ai/design-patterns.en.md
+++ b/adev-ja/src/content/ai/design-patterns.en.md
@@ -80,14 +80,14 @@ The following example demonstrates how to create a responsive UI to dynamically
   <div class="img-placeholder">
     <mat-spinner [diameter]="50" />
   </div>
-<!-- Dynamically populates the src attribute with the generated image URL -->
+  <!-- Dynamically populates the src attribute with the generated image URL -->
 } @else if (imgResource.hasValue()) {
   <img [src]="imgResource.value()" />
-<!-- Provides a retry option if the request fails  -->
+  <!-- Provides a retry option if the request fails  -->
 } @else {
   <div class="img-placeholder" (click)="imgResource.reload()">
     <mat-icon fontIcon="refresh" />
-      <p>Failed to load image. Click to retry.</p>
+    <p>Failed to load image. Click to retry.</p>
   </div>
 }
 ```
@@ -130,9 +130,9 @@ The `characters` member is updated asynchronously and can be displayed in the te
 @if (characters.isLoading()) {
   <p>Loading...</p>
 } @else if (characters.hasValue()) {
-  <p>{{characters.value()}}</p>
+  <p>{{ characters.value() }}</p>
 } @else {
-  <p>{{characters.error()}}</p>
+  <p>{{ characters.error() }}</p>
 }
 ```
 
diff --git a/adev-ja/src/content/ai/design-patterns.md b/adev-ja/src/content/ai/design-patterns.md
index bc1186048..0e750827b 100644
--- a/adev-ja/src/content/ai/design-patterns.md
+++ b/adev-ja/src/content/ai/design-patterns.md
@@ -80,14 +80,14 @@ LLM APIは、従来のより決定論的なAPIよりも低速でエラーが発
   <div class="img-placeholder">
     <mat-spinner [diameter]="50" />
   </div>
-<!-- Dynamically populates the src attribute with the generated image URL -->
+  <!-- Dynamically populates the src attribute with the generated image URL -->
 } @else if (imgResource.hasValue()) {
   <img [src]="imgResource.value()" />
-<!-- Provides a retry option if the request fails  -->
+  <!-- Provides a retry option if the request fails  -->
 } @else {
   <div class="img-placeholder" (click)="imgResource.reload()">
     <mat-icon fontIcon="refresh" />
-      <p>Failed to load image. Click to retry.</p>
+    <p>Failed to load image. Click to retry.</p>
   </div>
 }
 ```
@@ -130,9 +130,9 @@ characters = resource({
 @if (characters.isLoading()) {
   <p>Loading...</p>
 } @else if (characters.hasValue()) {
-  <p>{{characters.value()}}</p>
+  <p>{{ characters.value() }}</p>
 } @else {
-  <p>{{characters.error()}}</p>
+  <p>{{ characters.error() }}</p>
 }
 ```
 
diff --git a/adev-ja/src/content/ai/mcp-server-setup.en.md b/adev-ja/src/content/ai/mcp-server-setup.en.md
index c8e929e38..1a9a8a6be 100644
--- a/adev-ja/src/content/ai/mcp-server-setup.en.md
+++ b/adev-ja/src/content/ai/mcp-server-setup.en.md
@@ -22,10 +22,12 @@ Some tools are provided in experimental / preview status since they are new or n
 | Name                       | Description                                                                                                                                                                                                                                                         | `local-only` | `read-only` |
 | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------: | :---------: |
 | `build`                    | Perform a one-off, non-watched build using `ng build`.                                                                                                                                                                                                              |      ✅      |     ❌      |
-| `modernize`                | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](/reference/migrations)                                                                                 |      ✅      |     ❌      |
 | `devserver.start`          | Asynchronously starts a development server that watches the workspace for changes, similar to running `ng serve`. Since this is asynchronous it returns immediately. To manage the resulting server, use the `devserver.stop` and `devserver.wait_for_build` tools. |      ✅      |     ✅      |
 | `devserver.stop`           | Stops a development server started by `devserver.start`.                                                                                                                                                                                                            |      ✅      |     ✅      |
 | `devserver.wait_for_build` | Returns the output logs of the most recent build in a running development server started by `devserver.start`. If a build is currently ongoing, it will first wait for that build to complete and then return the logs.                                             |      ✅      |     ✅      |
+| `e2e`                      | Executes the end-to-end tests configured in the project.                                                                                                                                                                                                            |      ✅      |     ✅      |
+| `modernize`                | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](https://angular.dev/reference/migrations)                                                              |      ✅      |     ❌      |
+| `test`                     | Runs the project's unit tests.                                                                                                                                                                                                                                      |      ✅      |     ✅      |
 
 ## Get Started
 
@@ -133,11 +135,11 @@ For other IDEs, check your IDE's documentation for the proper location of the MC
 
 The `mcp` command can be configured with the following options passed as arguments in your IDE's MCP configuration:
 
-| Option                        | Type      | Description                                                                                                                                                                                                                  | Default |
-| :---------------------------- | :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------ |
-| `--read-only`                 | `boolean` | Only register tools that do not make changes to the project. Your editor or coding agent may still perform edits.                                                                                                            | `false` |
-| `--local-only`                | `boolean` | Only register tools that do not require an internet connection. Your editor or coding agent may still send data over the network.                                                                                            | `false` |
-| `--experimental-tool`<br>`-E` | `string`  | Enable an [experimental tool](#experimental-tools). Separate multiple options by spaces, e.g. `-E tool_a tool_b`. You can also enable tool groups like `devserver` to enable all related tools at once, e.g. `-E devserver`. |         |
+| Option                        | Type      | Description                                                                                                                                                               | Default |
+| :---------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ |
+| `--read-only`                 | `boolean` | Only register tools that do not make changes to the project. Your editor or coding agent may still perform edits.                                                         | `false` |
+| `--local-only`                | `boolean` | Only register tools that do not require an internet connection. Your editor or coding agent may still send data over the network.                                         | `false` |
+| `--experimental-tool`<br>`-E` | `string`  | Enable an [experimental tool](#experimental-tools). Separate multiple options by spaces, e.g. `-E tool_a tool_b`. Enable all `devserver.x` tools by using `-E devserver`. |         |
 
 For example, to run the server in read-only mode in VS Code, you would update your `mcp.json` like this:
 
diff --git a/adev-ja/src/content/ai/mcp-server-setup.md b/adev-ja/src/content/ai/mcp-server-setup.md
index ec20c1d2e..6eba92921 100644
--- a/adev-ja/src/content/ai/mcp-server-setup.md
+++ b/adev-ja/src/content/ai/mcp-server-setup.md
@@ -22,10 +22,12 @@ Angular CLI MCPサーバーは、開発ワークフローを支援するいく
 | 名前                       | 説明                                                                                                                                                                                                                                                             | `local-only` | `read-only` |
 | :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
 | `build`                    | `ng build`を使用して、1回限りの非監視ビルドを実行します。                                                                                                                                                                                                           |      ✅      |     ❌      |
-| `modernize`                | コード移行を実行し、最新のベストプラクティスと構文に合わせてAngularコードをモダナイズする方法についてさらなる指示を提供します。[詳細を見る](/reference/migrations)                                                                                                       |      ✅      |     ❌      |
 | `devserver.start`          | ワークスペースの変更を監視する開発サーバーを非同期に起動します。`ng serve`の実行に似ています。これは非同期であるため、即座に戻ります。結果として得られるサーバーを管理するには、`devserver.stop`および`devserver.wait_for_build`ツールを使用します。                     |      ✅      |     ✅      |
 | `devserver.stop`           | `devserver.start`によって起動された開発サーバーを停止します。                                                                                                                                                                                                        |      ✅      |     ✅      |
 | `devserver.wait_for_build` | `devserver.start`によって起動された実行中の開発サーバーにおける最新のビルドの出力ログを返します。ビルドが現在進行中の場合、まずそのビルドが完了するのを待ってからログを返します。                                                                                        |      ✅      |     ✅      |
+| `e2e`                      | プロジェクトで設定されたエンドツーエンドテストを実行します。                                                                                                                                                                                                          |      ✅      |     ✅      |
+| `modernize`                | コード移行を実行し、最新のベストプラクティスと構文に合わせてAngularコードをモダナイズする方法についてさらなる指示を提供します。[詳細を見る](https://angular.dev/reference/migrations)                                                                                   |      ✅      |     ❌      |
+| `test`                     | プロジェクトのユニットテストを実行します。                                                                                                                                                                                                                           |      ✅      |     ✅      |
 
 ## 開始方法 {#get-started}
 
@@ -137,7 +139,7 @@ MCPサーバーの設定に関する最新の手順については、JetBrains
 | :---------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------- |
 | `--read-only`                 | `boolean` | プロジェクトに変更を加えないツールのみを登録します。エディタまたはコーディングエージェントは引き続き編集を実行する場合があります。                                                                                                                         | `false`    |
 | `--local-only`                | `boolean` | インターネット接続を必要としないツールのみを登録します。エディタまたはコーディングエージェントは引き続きネットワーク経由でデータを送信する場合があります。                                                                                                 | `false`    |
-| `--experimental-tool`<br>`-E` | `string`  | [実験的ツール](#experimental-tools)を有効にします。複数のオプションをスペースで区切ります。例: `-E tool_a tool_b`。`devserver`のようなツールグループを有効にして、関連するすべてのツールを一度に有効にすることもできます。例: `-E devserver`。 |            |
+| `--experimental-tool`<br>`-E` | `string`  | [実験的ツール](#experimental-tools)を有効にします。複数のオプションをスペースで区切ります。例: `-E tool_a tool_b`。`-E devserver`を使用してすべての`devserver.x`ツールを有効にできます。 |            |
 
 たとえば、VS Codeにおいて読み取り専用モードでサーバーを実行する場合は、`mcp.json`を次のように更新します：
 
diff --git a/adev-ja/src/content/ai/overview.en.md b/adev-ja/src/content/ai/overview.en.md
index e2da24e39..b11f3e662 100644
--- a/adev-ja/src/content/ai/overview.en.md
+++ b/adev-ja/src/content/ai/overview.en.md
@@ -38,7 +38,7 @@ Here are examples of how to build with Genkit and Angular:
 
 - [Agentic Apps with Genkit and Angular starter-kit](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit) — New to building with AI? Start here with a basic app that features an agentic workflow. Perfect place to start for your first AI building experience.
 
-- [Use Genkit in an Angular app](https://genkit.dev/docs/angular/) — Build a basic application that uses Genkit Flows, Angular and Gemini 2.5 Flash. This step-by-step walkthrough guides you through creating a full-stack Angular application with AI features.
+- [Use Genkit in an Angular app](https://genkit.dev/docs/frameworks/angular/) — Build a basic application that uses Genkit Flows, Angular and Gemini 2.5 Flash. This step-by-step walkthrough guides you through creating a full-stack Angular application with AI features.
 
 - [Dynamic Story Generator app](https://github.com/angular/examples/tree/main/genkit-angular-story-generator) — Learn to build an agentic Angular app powered by Genkit, Gemini and Imagen 3 to dynamically generate a story based on user interaction featuring beautiful image panels to accompany the events that take place. Start here if you'd like to experiment with a more advanced use-case.
 
diff --git a/adev-ja/src/content/ai/overview.md b/adev-ja/src/content/ai/overview.md
index a8ed4a1fe..a9d0604c7 100644
--- a/adev-ja/src/content/ai/overview.md
+++ b/adev-ja/src/content/ai/overview.md
@@ -38,7 +38,7 @@ GenkitとAngularで構築する方法の例を次に示します。
 
 - [GenkitとAngularのスターターキットを使用したエージェントアプリ](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit)— AIでの構築は初めてですか？エージェントワークフローを備えた基本的なアプリケーションから始めましょう。初めてのAI構築体験に最適な場所です。
 
-- [AngularアプリでGenkitを使用する](https://genkit.dev/docs/angular/)— Genkit Flows、Angular、Gemini 2.5 Flashを使用する基本的なアプリケーションを構築します。このステップバイステップのウォークスルーは、AI機能を備えたフルスタックAngularアプリケーションの作成をガイドします。
+- [AngularアプリでGenkitを使用する](https://genkit.dev/docs/frameworks/angular/)— Genkit Flows、Angular、Gemini 2.5 Flashを使用する基本的なアプリケーションを構築します。このステップバイステップのウォークスルーは、AI機能を備えたフルスタックAngularアプリケーションの作成をガイドします。
 
 - [動的ストーリー生成アプリ](https://github.com/angular/examples/tree/main/genkit-angular-story-generator)— Genkit、Gemini、Imagen 3を搭載したエージェントAngularアプリケーションを構築し、ユーザーインタラクションに基づいてストーリーを動的に生成し、発生するイベントに付随する美しい画像パネルを特徴とする方法を学びます。より高度なユースケースを試したい場合は、ここから始めましょう。
 

From e90c845394abf333dde2aaac8edc3bb61e55151f Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 22:45:02 +0900
Subject: [PATCH 04/55] fix(docs): migrate best-practices docs

---
 adev-ja/src/content/best-practices/a11y.en.md | 27 +++++--------------
 adev-ja/src/content/best-practices/a11y.md    | 27 +++++--------------
 .../best-practices/error-handling.en.md       |  2 +-
 .../content/best-practices/error-handling.md  |  2 +-
 .../content/best-practices/style-guide.en.md  |  8 +++---
 .../src/content/best-practices/style-guide.md |  8 +++---
 .../src/content/best-practices/update.en.md   |  2 +-
 adev-ja/src/content/best-practices/update.md  |  2 +-
 8 files changed, 24 insertions(+), 54 deletions(-)

diff --git a/adev-ja/src/content/best-practices/a11y.en.md b/adev-ja/src/content/best-practices/a11y.en.md
index 14e751f56..54994a5c1 100644
--- a/adev-ja/src/content/best-practices/a11y.en.md
+++ b/adev-ja/src/content/best-practices/a11y.en.md
@@ -37,13 +37,10 @@ Some ARIA patterns expose DOM APIs or directive inputs that accept structured va
     <h2 #dialogTitle>Attention</h2>
     <p #dialogDescription>Please review your answers before continuing.</p>
 
-    <section
-      role="dialog"
-      [ariaLabelledByElements]="[dialogTitle, dialogDescription]">
+    <section role="dialog" [ariaLabelledByElements]="[dialogTitle, dialogDescription]">
       <ng-content />
     </section>
-
-`,
+  `,
 })
 export class ReviewDialog {}
 ```
@@ -99,7 +96,7 @@ The following example shows how to make a progress bar accessible by using host
     path="adev/src/content/examples/accessibility/src/app/progress-bar.component.ts"
     language="ts"
     linenums
-    highlight="[12, 20]"/>
+    highlight="[12, 19]"/>
   <docs-code
     path="adev/src/content/examples/accessibility/src/app/app.component.html"
     language="html"
@@ -145,21 +142,9 @@ The following example shows how to apply the `active-page` class to active links
 
 ```angular-html
 <nav>
-  <a routerLink="home"
-      routerLinkActive="active-page"
-      ariaCurrentWhenActive="page">
-    Home
-  </a>
-  <a routerLink="about"
-      routerLinkActive="active-page"
-      ariaCurrentWhenActive="page">
-    About
-  </a>
-  <a routerLink="shop"
-      routerLinkActive="active-page"
-      ariaCurrentWhenActive="page">
-    Shop
-  </a>
+  <a routerLink="home" routerLinkActive="active-page" ariaCurrentWhenActive="page"> Home </a>
+  <a routerLink="about" routerLinkActive="active-page" ariaCurrentWhenActive="page"> About </a>
+  <a routerLink="shop" routerLinkActive="active-page" ariaCurrentWhenActive="page"> Shop </a>
 </nav>
 ```
 
diff --git a/adev-ja/src/content/best-practices/a11y.md b/adev-ja/src/content/best-practices/a11y.md
index 36bba194d..7c9411481 100644
--- a/adev-ja/src/content/best-practices/a11y.md
+++ b/adev-ja/src/content/best-practices/a11y.md
@@ -37,13 +37,10 @@ HELPFUL: 慣習的に、HTML属性は小文字の名前を使用します (`tabi
     <h2 #dialogTitle>Attention</h2>
     <p #dialogDescription>Please review your answers before continuing.</p>
 
-    <section
-      role="dialog"
-      [ariaLabelledByElements]="[dialogTitle, dialogDescription]">
+    <section role="dialog" [ariaLabelledByElements]="[dialogTitle, dialogDescription]">
       <ng-content />
     </section>
-
-`,
+  `,
 })
 export class ReviewDialog {}
 ```
@@ -99,7 +96,7 @@ Angularコンポーネントを作成する際には、サポートされてい
     path="adev/src/content/examples/accessibility/src/app/progress-bar.component.ts"
     language="ts"
     linenums
-    highlight="[12, 20]"/>
+    highlight="[12, 19]"/>
   <docs-code
     path="adev/src/content/examples/accessibility/src/app/app.component.html"
     language="html"
@@ -145,21 +142,9 @@ router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
 
 ```angular-html
 <nav>
-  <a routerLink="home"
-      routerLinkActive="active-page"
-      ariaCurrentWhenActive="page">
-    Home
-  </a>
-  <a routerLink="about"
-      routerLinkActive="active-page"
-      ariaCurrentWhenActive="page">
-    About
-  </a>
-  <a routerLink="shop"
-      routerLinkActive="active-page"
-      ariaCurrentWhenActive="page">
-    Shop
-  </a>
+  <a routerLink="home" routerLinkActive="active-page" ariaCurrentWhenActive="page"> Home </a>
+  <a routerLink="about" routerLinkActive="active-page" ariaCurrentWhenActive="page"> About </a>
+  <a routerLink="shop" routerLinkActive="active-page" ariaCurrentWhenActive="page"> Shop </a>
 </nav>
 ```
 
diff --git a/adev-ja/src/content/best-practices/error-handling.en.md b/adev-ja/src/content/best-practices/error-handling.en.md
index d9cb07d36..8f88da54d 100644
--- a/adev-ja/src/content/best-practices/error-handling.en.md
+++ b/adev-ja/src/content/best-practices/error-handling.en.md
@@ -52,7 +52,7 @@ Errors that are caught neither by the application code nor by the framework's ap
 
 ### Client-side rendering
 
-Adding [`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners) to the [ApplicationConfig](guide/di/dependency-injection#at-the-application-root-level-using-applicationconfig) adds the `'error'` and `'unhandledrejection'` listeners to the browser window and forwards those errors to `ErrorHandler`. The Angular CLI generates new applications with this provider by default. The Angular team recommends handling these global errors for most applications, either with the framework's built-in listeners or with your own custom listeners. If you provide custom listeners, you can remove `provideBrowserGlobalErrorListeners`.
+Adding [`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners) to the [ApplicationConfig](guide/di/defining-dependency-providers#application-bootstrap) adds the `'error'` and `'unhandledrejection'` listeners to the browser window and forwards those errors to `ErrorHandler`. The Angular CLI generates new applications with this provider by default. The Angular team recommends handling these global errors for most applications, either with the framework's built-in listeners or with your own custom listeners. If you provide custom listeners, you can remove `provideBrowserGlobalErrorListeners`.
 
 ### Server-side and hybrid rendering
 
diff --git a/adev-ja/src/content/best-practices/error-handling.md b/adev-ja/src/content/best-practices/error-handling.md
index 94e84906f..3fc3e3812 100644
--- a/adev-ja/src/content/best-practices/error-handling.md
+++ b/adev-ja/src/content/best-practices/error-handling.md
@@ -52,7 +52,7 @@ export class GlobalErrorHandler implements ErrorHandler {
 
 ### クライアントサイドレンダリング {#client-side-rendering}
 
-[ApplicationConfig](guide/di/dependency-injection#at-the-application-root-level-using-applicationconfig)に[`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners)を追加すると、ブラウザウィンドウに`'error'`と`'unhandledrejection'`リスナーが追加され、それらのエラーが`ErrorHandler`に転送されます。Angular CLIは、デフォルトでこのプロバイダーを使用して新しいアプリケーションを生成します。Angularチームは、ほとんどのアプリケーションで、フレームワークの組み込みリスナーまたは独自のカスタムリスナーのいずれかを使用して、これらのグローバルエラーを処理することを推奨しています。カスタムリスナーを提供する場合は、`provideBrowserGlobalErrorListeners`を削除できます。
+[ApplicationConfig](guide/di/defining-dependency-providers#application-bootstrap)に[`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners)を追加すると、ブラウザウィンドウに`'error'`と`'unhandledrejection'`リスナーが追加され、それらのエラーが`ErrorHandler`に転送されます。Angular CLIは、デフォルトでこのプロバイダーを使用して新しいアプリケーションを生成します。Angularチームは、ほとんどのアプリケーションで、フレームワークの組み込みリスナーまたは独自のカスタムリスナーのいずれかを使用して、これらのグローバルエラーを処理することを推奨しています。カスタムリスナーを提供する場合は、`provideBrowserGlobalErrorListeners`を削除できます。
 
 ### サーバーサイドおよびハイブリッドレンダリング {#server-side-and-hybrid-rendering}
 
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 6b32e7646..9a8c542f7 100644
--- a/adev-ja/src/content/best-practices/style-guide.en.md
+++ b/adev-ja/src/content/best-practices/style-guide.en.md
@@ -197,7 +197,7 @@ ensures that the value set by Angular is not overwritten.
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UserProfile {
   readonly userId = input();
@@ -211,7 +211,7 @@ advice applies to output properties and queries, but not input properties.
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UserProfile {
   @Output() readonly userSaved = new EventEmitter<void>();
@@ -276,7 +276,7 @@ then delegate to more specific behaviors based on the event details:
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 class RichText {
   handleKeydown(event: KeyboardEvent) {
@@ -323,7 +323,7 @@ your class, import and `implement` these interfaces to ensure that the methods a
 import {Component, OnInit} from '@angular/core';
 
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UserProfile implements OnInit {
   // The `OnInit` interface ensures this method is named correctly.
diff --git a/adev-ja/src/content/best-practices/style-guide.md b/adev-ja/src/content/best-practices/style-guide.md
index fc541f67c..3e2bce8a0 100644
--- a/adev-ja/src/content/best-practices/style-guide.md
+++ b/adev-ja/src/content/best-practices/style-guide.md
@@ -197,7 +197,7 @@ readonlyアクセス修飾子は、Angularによって設定された値が上
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UserProfile {
   readonly userId = input();
@@ -211,7 +211,7 @@ export class UserProfile {
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UserProfile {
   @Output() readonly userSaved = new EventEmitter<void>();
@@ -276,7 +276,7 @@ export class UserProfile {
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 class RichText {
   handleKeydown(event: KeyboardEvent) {
@@ -323,7 +323,7 @@ Angularは、各ライフサイクルメソッドに対応するTypeScriptイン
 import {Component, OnInit} from '@angular/core';
 
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UserProfile implements OnInit {
   // The `OnInit` interface ensures this method is named correctly.
diff --git a/adev-ja/src/content/best-practices/update.en.md b/adev-ja/src/content/best-practices/update.en.md
index 57297149e..0e2cabdfa 100644
--- a/adev-ja/src/content/best-practices/update.en.md
+++ b/adev-ja/src/content/best-practices/update.en.md
@@ -43,7 +43,7 @@ It also includes troubleshooting information and any recommended manual changes
 For simple updates, the CLI command [`ng update`](cli/update) is all you need.
 Without additional arguments, [`ng update`](cli/update) lists the updates that are available to you and provides recommended steps to update your application to the most current version.
 
-[Angular Versioning and Releases](reference/releases#versioning 'Angular Release Practices, Versioning') describes the level of change that you can expect based on a release's version number.
+[Angular Versioning and Releases](reference/releases#angular-versioning 'Angular Release Practices, Versioning') describes the level of change that you can expect based on a release's version number.
 It also describes supported update paths.
 
 ## Resource summary
diff --git a/adev-ja/src/content/best-practices/update.md b/adev-ja/src/content/best-practices/update.md
index 0c2aba53c..b4b773566 100644
--- a/adev-ja/src/content/best-practices/update.md
+++ b/adev-ja/src/content/best-practices/update.md
@@ -43,7 +43,7 @@ Angularアップデートガイドは、指定した現在のバージョンと
 簡単なアップデートの場合は、CLIコマンド [`ng update`](cli/update) で十分です。
 追加の引数なしで、[`ng update`](cli/update)は、使用可能なアップデートをリストし、アプリケーションを最新バージョンにアップデートするための推奨される手順を提供します。
 
-[Angularのバージョン管理とリリース](reference/releases#versioning 'Angular リリースプラクティス、バージョン管理')では、リリースのバージョン番号に基づいて期待できる変更レベルについて説明しています。
+[Angularのバージョン管理とリリース](reference/releases#angular-versioning 'Angular リリースプラクティス、バージョン管理')では、リリースのバージョン番号に基づいて期待できる変更レベルについて説明しています。
 また、サポートされているアップデートパスについても説明しています。
 
 ## リソースの概要

From d460919e21a989a279eba121413bcfbcb12aa248 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 22:48:28 +0900
Subject: [PATCH 05/55] fix(docs): migrate introduction docs

---
 .../introduction/essentials/components.en.md  | 14 ++++--
 .../introduction/essentials/components.md     | 14 ++++--
 .../essentials/dependency-injection.en.md     |  5 +-
 .../essentials/dependency-injection.md        |  5 +-
 .../introduction/essentials/next-steps.en.md  |  2 +-
 .../introduction/essentials/next-steps.md     |  2 +-
 .../essentials/signal-forms.en.md             | 46 +++++++++----------
 .../introduction/essentials/signal-forms.md   | 46 +++++++++----------
 .../introduction/essentials/signals.en.md     |  2 +-
 .../introduction/essentials/signals.md        |  2 +-
 .../introduction/essentials/templates.en.md   | 14 ++++--
 .../introduction/essentials/templates.md      | 14 ++++--
 .../introduction/what-is-angular.en.md        |  2 +-
 .../content/introduction/what-is-angular.md   |  2 +-
 14 files changed, 96 insertions(+), 74 deletions(-)

diff --git a/adev-ja/src/content/introduction/essentials/components.en.md b/adev-ja/src/content/introduction/essentials/components.en.md
index 4e3e18120..78e873578 100644
--- a/adev-ja/src/content/introduction/essentials/components.en.md
+++ b/adev-ja/src/content/introduction/essentials/components.en.md
@@ -24,7 +24,9 @@ Here is a simplified example of a `UserProfile` component.
     <p>This is the user profile page</p>
   `,
 })
-export class UserProfile { /* Your component code goes here */ }
+export class UserProfile {
+  /* Your component code goes here */
+}
 ```
 
 The `@Component` decorator also optionally accepts a `styles` property for any CSS you want to apply to your template:
@@ -37,9 +39,15 @@ The `@Component` decorator also optionally accepts a `styles` property for any C
     <h1>User profile</h1>
     <p>This is the user profile page</p>
   `,
-  styles: `h1 { font-size: 3em; } `,
+  styles: `
+    h1 {
+      font-size: 3em;
+    }
+  `,
 })
-export class UserProfile { /* Your component code goes here */ }
+export class UserProfile {
+  /* Your component code goes here */
+}
 ```
 
 ### Separating HTML and CSS into separate files
diff --git a/adev-ja/src/content/introduction/essentials/components.md b/adev-ja/src/content/introduction/essentials/components.md
index 11941f7f0..c47e4d720 100644
--- a/adev-ja/src/content/introduction/essentials/components.md
+++ b/adev-ja/src/content/introduction/essentials/components.md
@@ -24,7 +24,9 @@ Angularアプリケーションを作成するための基本的な構成要素
     <p>This is the user profile page</p>
   `,
 })
-export class UserProfile { /* Your component code goes here */ }
+export class UserProfile {
+  /* Your component code goes here */
+}
 ```
 
 `@Component`デコレーターは、テンプレートに適用するCSSを指定するために、オプションで`styles`プロパティも受け付けます。
@@ -37,9 +39,15 @@ export class UserProfile { /* Your component code goes here */ }
     <h1>User profile</h1>
     <p>This is the user profile page</p>
   `,
-  styles: `h1 { font-size: 3em; } `,
+  styles: `
+    h1 {
+      font-size: 3em;
+    }
+  `,
 })
-export class UserProfile { /* Your component code goes here */ }
+export class UserProfile {
+  /* Your component code goes here */
+}
 ```
 
 ### HTMLとCSSを別々のファイルに分離する {#separating-html-and-css-into-separate-files}
diff --git a/adev-ja/src/content/introduction/essentials/dependency-injection.en.md b/adev-ja/src/content/introduction/essentials/dependency-injection.en.md
index 9f9519735..284ac6cc5 100644
--- a/adev-ja/src/content/introduction/essentials/dependency-injection.en.md
+++ b/adev-ja/src/content/introduction/essentials/dependency-injection.en.md
@@ -36,14 +36,13 @@ When you want to use a service in a component, you need to:
 Here’s what it might look like in the `Receipt` component:
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { Calculator } from './calculator';
+import {Component, inject} from '@angular/core';
+import {Calculator} from './calculator';
 
 @Component({
   selector: 'app-receipt',
   template: `<h1>The total is {{ totalCost }}</h1>`,
 })
-
 export class Receipt {
   private calculator = inject(Calculator);
   totalCost = this.calculator.add(50, 25);
diff --git a/adev-ja/src/content/introduction/essentials/dependency-injection.md b/adev-ja/src/content/introduction/essentials/dependency-injection.md
index 7acdf9c1a..5749c2986 100644
--- a/adev-ja/src/content/introduction/essentials/dependency-injection.md
+++ b/adev-ja/src/content/introduction/essentials/dependency-injection.md
@@ -36,14 +36,13 @@ export class Calculator {
 以下は、`Receipt`コンポーネントでの例です。
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { Calculator } from './calculator';
+import {Component, inject} from '@angular/core';
+import {Calculator} from './calculator';
 
 @Component({
   selector: 'app-receipt',
   template: `<h1>The total is {{ totalCost }}</h1>`,
 })
-
 export class Receipt {
   private calculator = inject(Calculator);
   totalCost = this.calculator.add(50, 25);
diff --git a/adev-ja/src/content/introduction/essentials/next-steps.en.md b/adev-ja/src/content/introduction/essentials/next-steps.en.md
index 2c5c92149..fbdbbab60 100644
--- a/adev-ja/src/content/introduction/essentials/next-steps.en.md
+++ b/adev-ja/src/content/introduction/essentials/next-steps.en.md
@@ -25,7 +25,7 @@ Put these main concepts into practice with our in-browser tutorial or build your
 Here are some in-depth guides you might be interested in reading:
 
 <docs-pill-row>
-  <docs-pill title="Components In-depth Guide" href="guide/components/importing" />
+  <docs-pill title="Components In-depth Guide" href="guide/components" />
   <docs-pill title="Template In-depth Guide" href="guide/templates" />
   <docs-pill title="Forms In-depth Guide" href="/guide/forms" />
 </docs-pill-row>
diff --git a/adev-ja/src/content/introduction/essentials/next-steps.md b/adev-ja/src/content/introduction/essentials/next-steps.md
index 55db03914..4b1b0bdb4 100644
--- a/adev-ja/src/content/introduction/essentials/next-steps.md
+++ b/adev-ja/src/content/introduction/essentials/next-steps.md
@@ -25,7 +25,7 @@ Angularの主要なコンセプトに入門できました。学んだことを
 興味のある詳細なガイドを以下に示します。
 
 <docs-pill-row>
-  <docs-pill title="コンポーネントの詳細ガイド" href="guide/components/importing" />
+  <docs-pill title="コンポーネントの詳細ガイド" href="guide/components" />
   <docs-pill title="テンプレートの詳細ガイド" href="guide/templates" />
   <docs-pill title="フォームの詳細ガイド" href="/guide/forms" />
 </docs-pill-row>
diff --git a/adev-ja/src/content/introduction/essentials/signal-forms.en.md b/adev-ja/src/content/introduction/essentials/signal-forms.en.md
index 611034bb0..ac390f8b5 100644
--- a/adev-ja/src/content/introduction/essentials/signal-forms.en.md
+++ b/adev-ja/src/content/introduction/essentials/signal-forms.en.md
@@ -36,18 +36,18 @@ loginForm.email;
 loginForm.password;
 ```
 
-### 3. Bind HTML inputs with `[field]` directive
+### 3. Bind HTML inputs with `[formField]` directive
 
-Next, you bind your HTML inputs to the form using the `[field]` directive, which creates two-way binding between them:
+Next, you bind your HTML inputs to the form using the `[formField]` directive, which creates two-way binding between them:
 
 ```html
-<input type="email" [field]="loginForm.email" />
-<input type="password" [field]="loginForm.password" />
+<input type="email" [formField]="loginForm.email" />
+<input type="password" [formField]="loginForm.password" />
 ```
 
 As a result, user changes (such as typing in the field) automatically updates the form.
 
-NOTE: The `[field]` directive also syncs field state for attributes like `required`, `disabled`, and `readonly` when appropriate.
+NOTE: The `[formField]` directive also syncs field state for attributes like `required`, `disabled`, and `readonly` when appropriate.
 
 ### 4. Read field values with `value()`
 
@@ -95,7 +95,7 @@ Here's a complete example:
 
 ## Basic usage
 
-The `[field]` directive works with all standard HTML input types. Here are the most common patterns:
+The `[formField]` directive works with all standard HTML input types. Here are the most common patterns:
 
 ### Text inputs
 
@@ -103,8 +103,8 @@ Text inputs work with various `type` attributes and textareas:
 
 ```html
 <!-- Text and email -->
-<input type="text" [field]="form.name" />
-<input type="email" [field]="form.email" />
+<input type="text" [formField]="form.name" />
+<input type="email" [formField]="form.email" />
 ```
 
 #### Numbers
@@ -113,7 +113,7 @@ Number inputs automatically convert between strings and numbers:
 
 ```html
 <!-- Number - automatically converts to number type -->
-<input type="number" [field]="form.age" />
+<input type="number" [formField]="form.age" />
 ```
 
 #### Date and time
@@ -122,8 +122,8 @@ Date inputs store values as `YYYY-MM-DD` strings, and time inputs use `HH:mm` fo
 
 ```html
 <!-- Date and time - stores as ISO format strings -->
-<input type="date" [field]="form.eventDate" />
-<input type="time" [field]="form.eventTime" />
+<input type="date" [formField]="form.eventDate" />
+<input type="time" [formField]="form.eventTime" />
 ```
 
 If you need to convert date strings to Date objects, you can do so by passing the field value into `Date()`:
@@ -138,7 +138,7 @@ Textareas work the same way as text inputs:
 
 ```html
 <!-- Textarea -->
-<textarea [field]="form.message" rows="4"></textarea>
+<textarea [formField]="form.message" rows="4"></textarea>
 ```
 
 ### Checkboxes
@@ -148,42 +148,42 @@ Checkboxes bind to boolean values:
 ```html
 <!-- Single checkbox -->
 <label>
-  <input type="checkbox" [field]="form.agreeToTerms" />
+  <input type="checkbox" [formField]="form.agreeToTerms" />
   I agree to the terms
 </label>
 ```
 
 #### Multiple checkboxes
 
-For multiple options, create a separate boolean `field` for each:
+For multiple options, create a separate boolean `formField` for each:
 
 ```html
 <label>
-  <input type="checkbox" [field]="form.emailNotifications" />
+  <input type="checkbox" [formField]="form.emailNotifications" />
   Email notifications
 </label>
 <label>
-  <input type="checkbox" [field]="form.smsNotifications" />
+  <input type="checkbox" [formField]="form.smsNotifications" />
   SMS notifications
 </label>
 ```
 
 ### Radio buttons
 
-Radio buttons work similarly to checkboxes. As long as the radio buttons use the same `[field]` value, Signal Forms will automatically bind the same `name` attribute to all of them:
+Radio buttons work similarly to checkboxes. As long as the radio buttons use the same `[formField]` value, Signal Forms will automatically bind the same `name` attribute to all of them:
 
 ```html
 <label>
-  <input type="radio" value="free" [field]="form.plan" />
+  <input type="radio" value="free" [formField]="form.plan" />
   Free
 </label>
 <label>
-  <input type="radio" value="premium" [field]="form.plan" />
+  <input type="radio" value="premium" [formField]="form.plan" />
   Premium
 </label>
 ```
 
-When a user selects a radio button, the form `field` stores the value from that radio button's `value` attribute. For example, selecting "Premium" sets `form.plan().value()` to `"premium"`.
+When a user selects a radio button, the form `formField` stores the value from that radio button's `value` attribute. For example, selecting "Premium" sets `form.plan().value()` to `"premium"`.
 
 ### Select dropdowns
 
@@ -191,14 +191,14 @@ Select elements work with both static and dynamic options:
 
 ```angular-html
 <!-- Static options -->
-<select [field]="form.country">
+<select [formField]="form.country">
   <option value="">Select a country</option>
   <option value="us">United States</option>
   <option value="ca">Canada</option>
 </select>
 
 <!-- Dynamic options with @for -->
-<select [field]="form.productId">
+<select [formField]="form.productId">
   <option value="">Select a product</option>
   @for (product of products; track product.id) {
     <option [value]="product.id">{{ product.name }}</option>
@@ -206,7 +206,7 @@ Select elements work with both static and dynamic options:
 </select>
 ```
 
-NOTE: Multiple select (`<select multiple>`) is not supported by the `[field]` directive at this time.
+NOTE: Multiple select (`<select multiple>`) is not supported by the `[formField]` directive at this time.
 
 ## Validation and state
 
diff --git a/adev-ja/src/content/introduction/essentials/signal-forms.md b/adev-ja/src/content/introduction/essentials/signal-forms.md
index 81aea5ba6..efebd1397 100644
--- a/adev-ja/src/content/introduction/essentials/signal-forms.md
+++ b/adev-ja/src/content/introduction/essentials/signal-forms.md
@@ -36,18 +36,18 @@ loginForm.email;
 loginForm.password;
 ```
 
-### 3. `[field]`ディレクティブでHTML入力をバインドする {#3-bind-html-inputs-with-field-directive}
+### 3. `[formField]`ディレクティブでHTML入力をバインドする {#3-bind-html-inputs-with-field-directive}
 
-次に、`[field]`ディレクティブを使用してHTMLの入力をフォームにバインドします。これにより、それらの間に双方向バインディングが作成されます:
+次に、`[formField]`ディレクティブを使用してHTMLの入力をフォームにバインドします。これにより、それらの間に双方向バインディングが作成されます:
 
 ```html
-<input type="email" [field]="loginForm.email" />
-<input type="password" [field]="loginForm.password" />
+<input type="email" [formField]="loginForm.email" />
+<input type="password" [formField]="loginForm.password" />
 ```
 
 その結果、ユーザーによる変更（フィールドへの入力など）は自動的にフォームを更新します。
 
-NOTE: `[field]`ディレクティブは、必要に応じて`required`、`disabled`、`readonly`などの属性のフィールドの状態も同期します。
+NOTE: `[formField]`ディレクティブは、必要に応じて`required`、`disabled`、`readonly`などの属性のフィールドの状態も同期します。
 
 ### 4. `value()`でフィールドの値を読み取る {#4-read-field-values-with-value}
 
@@ -95,7 +95,7 @@ console.log(loginModel().email); // 'alice@wonderland.com'
 
 ## 基本的な使い方 {#basic-usage}
 
-`[field]`ディレクティブは、すべての標準的なHTMLのinputタイプで動作します。以下は、最も一般的なパターンです:
+`[formField]`ディレクティブは、すべての標準的なHTMLのinputタイプで動作します。以下は、最も一般的なパターンです:
 
 ### テキスト入力 {#text-inputs}
 
@@ -103,8 +103,8 @@ console.log(loginModel().email); // 'alice@wonderland.com'
 
 ```html
 <!-- Text and email -->
-<input type="text" [field]="form.name" />
-<input type="email" [field]="form.email" />
+<input type="text" [formField]="form.name" />
+<input type="email" [formField]="form.email" />
 ```
 
 #### 数値 {#numbers}
@@ -113,7 +113,7 @@ console.log(loginModel().email); // 'alice@wonderland.com'
 
 ```html
 <!-- Number - automatically converts to number type -->
-<input type="number" [field]="form.age" />
+<input type="number" [formField]="form.age" />
 ```
 
 #### 日付と時刻 {#date-and-time}
@@ -122,8 +122,8 @@ console.log(loginModel().email); // 'alice@wonderland.com'
 
 ```html
 <!-- Date and time - stores as ISO format strings -->
-<input type="date" [field]="form.eventDate" />
-<input type="time" [field]="form.eventTime" />
+<input type="date" [formField]="form.eventDate" />
+<input type="time" [formField]="form.eventTime" />
 ```
 
 日付文字列をDateオブジェクトに変換する必要がある場合は、フィールドの値を`Date()`に渡すことで変換できます:
@@ -138,7 +138,7 @@ Textareaはテキスト入力と同じように動作します:
 
 ```html
 <!-- Textarea -->
-<textarea [field]="form.message" rows="4"></textarea>
+<textarea [formField]="form.message" rows="4"></textarea>
 ```
 
 ### チェックボックス {#checkboxes}
@@ -148,42 +148,42 @@ Textareaはテキスト入力と同じように動作します:
 ```html
 <!-- Single checkbox -->
 <label>
-  <input type="checkbox" [field]="form.agreeToTerms" />
+  <input type="checkbox" [formField]="form.agreeToTerms" />
   I agree to the terms
 </label>
 ```
 
 #### 複数チェックボックス {#multiple-checkboxes}
 
-複数のオプションがある場合は、それぞれに個別のブール値の`field`を作成します:
+複数のオプションがある場合は、それぞれに個別のブール値の`formField`を作成します:
 
 ```html
 <label>
-  <input type="checkbox" [field]="form.emailNotifications" />
+  <input type="checkbox" [formField]="form.emailNotifications" />
   Email notifications
 </label>
 <label>
-  <input type="checkbox" [field]="form.smsNotifications" />
+  <input type="checkbox" [formField]="form.smsNotifications" />
   SMS notifications
 </label>
 ```
 
 ### ラジオボタン {#radio-buttons}
 
-ラジオボタンはチェックボックスと同様に動作します。ラジオボタンが同じ`[field]`値を使用している限り、シグナルフォームは自動的に同じ`name`属性をすべてのラジオボタンにバインドします:
+ラジオボタンはチェックボックスと同様に動作します。ラジオボタンが同じ`[formField]`値を使用している限り、シグナルフォームは自動的に同じ`name`属性をすべてのラジオボタンにバインドします:
 
 ```html
 <label>
-  <input type="radio" value="free" [field]="form.plan" />
+  <input type="radio" value="free" [formField]="form.plan" />
   Free
 </label>
 <label>
-  <input type="radio" value="premium" [field]="form.plan" />
+  <input type="radio" value="premium" [formField]="form.plan" />
   Premium
 </label>
 ```
 
-ユーザーがラジオボタンを選択すると、フォームの`field`にはそのラジオボタンの`value`属性の値が保存されます。例えば、「Premium」を選択すると、`form.plan().value()`は`"premium"`に設定されます。
+ユーザーがラジオボタンを選択すると、フォームの`formField`にはそのラジオボタンの`value`属性の値が保存されます。例えば、「Premium」を選択すると、`form.plan().value()`は`"premium"`に設定されます。
 
 ### selectドロップダウン {#select-dropdowns}
 
@@ -191,14 +191,14 @@ Select要素は、静的オプションと動的オプションの両方で動
 
 ```angular-html
 <!-- Static options -->
-<select [field]="form.country">
+<select [formField]="form.country">
   <option value="">Select a country</option>
   <option value="us">United States</option>
   <option value="ca">Canada</option>
 </select>
 
 <!-- Dynamic options with @for -->
-<select [field]="form.productId">
+<select [formField]="form.productId">
   <option value="">Select a product</option>
   @for (product of products; track product.id) {
     <option [value]="product.id">{{ product.name }}</option>
@@ -206,7 +206,7 @@ Select要素は、静的オプションと動的オプションの両方で動
 </select>
 ```
 
-NOTE: 複数選択(`<select multiple>`)は、現時点では`[field]`ディレクティブでサポートされていません。
+NOTE: 複数選択(`<select multiple>`)は、現時点では`[formField]`ディレクティブでサポートされていません。
 
 ## バリデーションと状態 {#validation-and-state}
 
diff --git a/adev-ja/src/content/introduction/essentials/signals.en.md b/adev-ja/src/content/introduction/essentials/signals.en.md
index 70375abd3..6d6463749 100644
--- a/adev-ja/src/content/introduction/essentials/signals.en.md
+++ b/adev-ja/src/content/introduction/essentials/signals.en.md
@@ -55,7 +55,7 @@ console.log(firstNameCapitalized()); // JAIME
 
 Use `signal` and `computed` inside your components to create and manage state:
 
-```typescript
+```ts
 @Component({
   /* ... */
 })
diff --git a/adev-ja/src/content/introduction/essentials/signals.md b/adev-ja/src/content/introduction/essentials/signals.md
index 696e3588a..9c53a692d 100644
--- a/adev-ja/src/content/introduction/essentials/signals.md
+++ b/adev-ja/src/content/introduction/essentials/signals.md
@@ -55,7 +55,7 @@ console.log(firstNameCapitalized()); // JAIME
 
 `signal`と`computed`をコンポーネント内で使用して、状態を作成および管理します。
 
-```typescript
+```ts
 @Component({
   /* ... */
 })
diff --git a/adev-ja/src/content/introduction/essentials/templates.en.md b/adev-ja/src/content/introduction/essentials/templates.en.md
index f5828be52..3de848802 100644
--- a/adev-ja/src/content/introduction/essentials/templates.en.md
+++ b/adev-ja/src/content/introduction/essentials/templates.en.md
@@ -13,7 +13,7 @@ You can create a binding to show some dynamic text in a template by using double
 ```angular-ts
 @Component({
   selector: 'user-profile',
-  template: `<h1>Profile for {{userName()}}</h1>`,
+  template: `<h1>Profile for {{ userName() }}</h1>`,
 })
 export class UserProfile {
   userName = signal('pro_programmer_123');
@@ -58,7 +58,7 @@ You can also bind to HTML _attributes_ by prefixing the attribute name with `att
 
 ```angular-html
 <!-- Bind the `role` attribute on the `<ul>` element to value of `listRole`. -->
-<ul [attr.role]="listRole()">
+<ul [attr.role]="listRole()"></ul>
 ```
 
 Angular automatically updates DOM properties and attributes when the bound value changes.
@@ -76,7 +76,9 @@ Angular lets you add event listeners to an element in your template with parenth
 export class UserProfile {
   /* ... */
 
-  cancelSubscription() { /* Your event handling code goes here. */  }
+  cancelSubscription() {
+    /* Your event handling code goes here. */
+  }
 }
 ```
 
@@ -91,7 +93,9 @@ If you need to pass the [event](https://developer.mozilla.org/docs/Web/API/Event
 export class UserProfile {
   /* ... */
 
-  cancelSubscription(event: Event) { /* Your event handling code goes here. */  }
+  cancelSubscription(event: Event) {
+    /* Your event handling code goes here. */
+  }
 }
 ```
 
@@ -129,7 +133,7 @@ You can repeat part of a template multiple times with Angular's `@for` block:
 
 <ul class="user-badge-list">
   @for (badge of badges(); track badge.id) {
-    <li class="user-badge">{{badge.name}}</li>
+    <li class="user-badge">{{ badge.name }}</li>
   }
 </ul>
 ```
diff --git a/adev-ja/src/content/introduction/essentials/templates.md b/adev-ja/src/content/introduction/essentials/templates.md
index 9e71d3588..49b2e9527 100644
--- a/adev-ja/src/content/introduction/essentials/templates.md
+++ b/adev-ja/src/content/introduction/essentials/templates.md
@@ -13,7 +13,7 @@ Angularでは、*バインディング*によって、コンポーネントの
 ```angular-ts
 @Component({
   selector: 'user-profile',
-  template: `<h1>Profile for {{userName()}}</h1>`,
+  template: `<h1>Profile for {{ userName() }}</h1>`,
 })
 export class UserProfile {
   userName = signal('pro_programmer_123');
@@ -58,7 +58,7 @@ export class UserProfile {
 
 ```angular-html
 <!-- `<ul>`要素の`role`属性を`listRole`の値にバインドします。 -->
-<ul [attr.role]="listRole()">
+<ul [attr.role]="listRole()"></ul>
 ```
 
 バインドされた値が変更されると、AngularはDOMプロパティと属性を自動的に更新します。
@@ -76,7 +76,9 @@ Angularを使用すると、括弧を使用してテンプレート内の要素
 export class UserProfile {
   /* ... */
 
-  cancelSubscription() { /* イベント処理コードをここに記述します。 */  }
+  cancelSubscription() {
+    /* イベント処理コードをここに記述します。 */
+  }
 }
 ```
 
@@ -91,7 +93,9 @@ export class UserProfile {
 export class UserProfile {
   /* ... */
 
-  cancelSubscription(event: Event) { /* イベント処理コードをここに記述します。 */  }
+  cancelSubscription(event: Event) {
+    /* イベント処理コードをここに記述します。 */
+  }
 }
 ```
 
@@ -129,7 +133,7 @@ Angularの`@for`ブロックを使用して、テンプレートの一部を複
 
 <ul class="user-badge-list">
   @for (badge of badges(); track badge.id) {
-    <li class="user-badge">{{badge.name}}</li>
+    <li class="user-badge">{{ badge.name }}</li>
   }
 </ul>
 ```
diff --git a/adev-ja/src/content/introduction/what-is-angular.en.md b/adev-ja/src/content/introduction/what-is-angular.en.md
index 8fa5ebe4a..b24ce7600 100644
--- a/adev-ja/src/content/introduction/what-is-angular.en.md
+++ b/adev-ja/src/content/introduction/what-is-angular.en.md
@@ -7,7 +7,7 @@
   Maintained by a dedicated team at Google, Angular provides a broad suite of tools, APIs, and
   libraries to simplify and streamline your development workflow. Angular gives you
   a solid platform on which to build fast, reliable applications that scale with both the size of
-  your team and the size of your codebase.
+  your team and the size of your codebase. Angular.dev is the official home for Angular documentation.
 </div>
 
 <docs-nav-card title="Want to see some code?" iconImgSrc="adev/src/assets/icons/star.svg">
diff --git a/adev-ja/src/content/introduction/what-is-angular.md b/adev-ja/src/content/introduction/what-is-angular.md
index 32a0463c9..7b0a2fca0 100644
--- a/adev-ja/src/content/introduction/what-is-angular.md
+++ b/adev-ja/src/content/introduction/what-is-angular.md
@@ -7,7 +7,7 @@
   Googleの専門チームによって管理されているAngularは、開発ワークフローを簡素化および効率化するための幅広いツール、API、
   ライブラリのスイートを提供します。Angularは、チームの規模とコードベースの規模の両方に合わせて拡張できる、
   高速で信頼性の高いアプリケーションを構築するための堅実なプラットフォームを
-  提供します。
+  提供します。Angular.devはAngularドキュメントの公式ホームです。
 </div>
 
 <docs-nav-card title="コードを見たいですか？" iconImgSrc="adev/src/assets/icons/star.svg">

From c793188f36093d98751c3b796c63606214ece3d3 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:03:17 +0900
Subject: [PATCH 06/55] fix(docs): migrate reference docs

- Update class names (remove Component suffix)
- Update file names (remove .component)
- Fix code block formatting
- Update link URLs
- Update release schedule table
---
 .../src/content/reference/errors/NG0203.en.md |  2 +-
 .../src/content/reference/errors/NG0203.md    |  2 +-
 .../src/content/reference/errors/NG0300.en.md | 19 ++++----
 .../src/content/reference/errors/NG0300.md    | 19 ++++----
 .../src/content/reference/errors/NG0403.en.md |  6 +--
 .../src/content/reference/errors/NG0403.md    |  6 +--
 .../src/content/reference/errors/NG0500.en.md | 12 ++---
 .../src/content/reference/errors/NG0500.md    |  2 +-
 .../src/content/reference/errors/NG0503.en.md | 13 ++---
 .../src/content/reference/errors/NG0503.md    | 13 ++---
 .../src/content/reference/errors/NG0504.en.md | 17 ++-----
 .../src/content/reference/errors/NG0504.md    | 21 +++------
 .../src/content/reference/errors/NG0506.en.md |  6 +--
 .../src/content/reference/errors/NG0506.md    |  6 +--
 .../content/reference/errors/NG05104.en.md    | 12 +++--
 .../src/content/reference/errors/NG05104.md   | 12 +++--
 .../src/content/reference/errors/NG0912.en.md |  8 ++--
 .../src/content/reference/errors/NG0912.md    |  8 ++--
 .../src/content/reference/errors/NG0913.en.md |  2 +-
 .../src/content/reference/errors/NG0913.md    |  2 +-
 .../src/content/reference/errors/NG0955.en.md | 24 +++++++---
 .../src/content/reference/errors/NG0955.md    | 28 +++++++----
 .../src/content/reference/errors/NG0956.en.md | 24 +++++-----
 .../src/content/reference/errors/NG0956.md    | 28 +++++------
 .../src/content/reference/errors/NG3003.en.md | 31 ++++++------
 .../src/content/reference/errors/NG3003.md    | 47 +++++++++----------
 adev-ja/src/content/reference/releases.en.md  | 10 ++--
 adev-ja/src/content/reference/releases.md     | 16 +++----
 adev-ja/src/content/reference/roadmap.en.md   |  2 +-
 adev-ja/src/content/reference/roadmap.md      |  2 +-
 30 files changed, 200 insertions(+), 200 deletions(-)

diff --git a/adev-ja/src/content/reference/errors/NG0203.en.md b/adev-ja/src/content/reference/errors/NG0203.en.md
index 78a519595..d0e6e5056 100644
--- a/adev-ja/src/content/reference/errors/NG0203.en.md
+++ b/adev-ja/src/content/reference/errors/NG0203.en.md
@@ -39,7 +39,7 @@ Calls to the [`inject`](api/core/inject) function outside of the class creation
 
 ```typescript
 @Component({ ... })
-export class CarComponent {
+export class Car {
   ngOnInit() {
     // ERROR: too late, the component instance was already created
     const engine = inject(Engine);
diff --git a/adev-ja/src/content/reference/errors/NG0203.md b/adev-ja/src/content/reference/errors/NG0203.md
index fad7b7a7f..86f5d1519 100644
--- a/adev-ja/src/content/reference/errors/NG0203.md
+++ b/adev-ja/src/content/reference/errors/NG0203.md
@@ -39,7 +39,7 @@ providers: [
 
 ```typescript
 @Component({ ... })
-export class CarComponent {
+export class Car {
   ngOnInit() {
     // ERROR: 遅すぎる、コンポーネントインスタンスはすでに作成されています
     const engine = inject(Engine);
diff --git a/adev-ja/src/content/reference/errors/NG0300.en.md b/adev-ja/src/content/reference/errors/NG0300.en.md
index 18d2f261d..602c07a12 100644
--- a/adev-ja/src/content/reference/errors/NG0300.en.md
+++ b/adev-ja/src/content/reference/errors/NG0300.en.md
@@ -11,26 +11,25 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: '[stroked-button]',
-  templateUrl: './stroked-button.component.html',
+  templateUrl: './stroked-button.html',
 })
-export class StrokedBtnComponent {}
+export class StrokedBtn {}
 
 @Component({
   selector: '[raised-button]',
-  templateUrl: './raised-button.component.html',
+  templateUrl: './raised-button.html',
 })
-export class RaisedBtnComponent {}
+export class RaisedBtn {}
 
 @Component({
   selector: 'app-root',
   template: `
+    <!-- This node has 2 selectors: stroked-button and raised-button, and both match a different component: StrokedBtnComponent, and RaisedBtnComponent , so NG0300 will be raised  -->
 
-  <!-- This node has 2 selectors: stroked-button and raised-button, and both match a different component: StrokedBtnComponent, and RaisedBtnComponent , so NG0300 will be raised  -->
-
-<button stroked-button  raised-button></button>
-`,
+    <button stroked-button raised-button></button>
+  `,
 })
-export class AppComponent {}
+export class App {}
 ```
 
 ## Debugging the error
@@ -48,4 +47,4 @@ Use the element name from the error message to search for places where you're us
 
 Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect.
 
-If you're having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](style-guide#component-selectors) for your selectors to prevent collisions.
+If you're having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](style-guide#choosing-component-selectors) for your selectors to prevent collisions.
diff --git a/adev-ja/src/content/reference/errors/NG0300.md b/adev-ja/src/content/reference/errors/NG0300.md
index a39dca9c8..532a051d6 100644
--- a/adev-ja/src/content/reference/errors/NG0300.md
+++ b/adev-ja/src/content/reference/errors/NG0300.md
@@ -11,26 +11,25 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: '[stroked-button]',
-  templateUrl: './stroked-button.component.html',
+  templateUrl: './stroked-button.html',
 })
-export class StrokedBtnComponent {}
+export class StrokedBtn {}
 
 @Component({
   selector: '[raised-button]',
-  templateUrl: './raised-button.component.html',
+  templateUrl: './raised-button.html',
 })
-export class RaisedBtnComponent {}
+export class RaisedBtn {}
 
 @Component({
   selector: 'app-root',
   template: `
+    <!-- このノードには、stroked-buttonとraised-buttonの2つのセレクターがあり、どちらも異なるコンポーネントに一致するため、StrokedBtnComponentとRaisedBtnComponent、NG0300が発生します。 -->
 
-  <!-- このノードには、stroked-buttonとraised-buttonの2つのセレクターがあり、どちらも異なるコンポーネントに一致するため、StrokedBtnComponentとRaisedBtnComponent、NG0300が発生します。 -->
-
-<button stroked-button  raised-button></button>
-`,
+    <button stroked-button raised-button></button>
+  `,
 })
-export class AppComponent {}
+export class App {}
 ```
 
 ## エラーのデバッグ
@@ -48,4 +47,4 @@ export class AppComponent {}
 
 各コンポーネントが一意のCSSセレクターを持つことを確認します。これにより、Angularは期待するコンポーネントをレンダリングします。
 
-このセレクタータグ名を持つ複数のコンポーネントが見つからない場合は、Angular Materialなどのインポートされたコンポーネントライブラリのコンポーネントを確認します。衝突を回避するために、セレクターの[ベストプラクティス](style-guide#component-selectors)に従っていることを確認してください。
+このセレクタータグ名を持つ複数のコンポーネントが見つからない場合は、Angular Materialなどのインポートされたコンポーネントライブラリのコンポーネントを確認します。衝突を回避するために、セレクターの[ベストプラクティス](style-guide#choosing-component-selectors)に従っていることを確認してください。
diff --git a/adev-ja/src/content/reference/errors/NG0403.en.md b/adev-ja/src/content/reference/errors/NG0403.en.md
index a78c1d99c..2e5ca2c13 100644
--- a/adev-ja/src/content/reference/errors/NG0403.en.md
+++ b/adev-ja/src/content/reference/errors/NG0403.en.md
@@ -4,13 +4,13 @@ This error means that an NgModule that was used for bootstrapping an application
 
 The error happens when the NgModule `bootstrap` property is missing (or is an empty array) in the `@NgModule` annotation and there is no `ngDoBootstrap` lifecycle hook defined on that NgModule class.
 
-More information about the bootstrapping process can be found in [this guide](guide/ngmodules/bootstrapping).
+More information about the bootstrapping process can be found in [this guide](guide/ngmodules/overview).
 
 The following examples will trigger the error.
 
 ```typescript
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [App],
   imports: [BrowserModule, AppRoutingModule],
   providers: [],
 })
@@ -22,7 +22,7 @@ platformBrowser().bootstrapModule(AppModule);
 
 ```typescript
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [App],
   imports: [BrowserModule, AppRoutingModule],
   providers: [],
   bootstrap: [],
diff --git a/adev-ja/src/content/reference/errors/NG0403.md b/adev-ja/src/content/reference/errors/NG0403.md
index 72b330649..ba7da5354 100644
--- a/adev-ja/src/content/reference/errors/NG0403.md
+++ b/adev-ja/src/content/reference/errors/NG0403.md
@@ -4,13 +4,13 @@
 
 このエラーは、NgModuleの `bootstrap` プロパティが `@NgModule` アノテーション内で欠落しているか（または空の配列であるか）、そのNgModuleクラスに `ngDoBootstrap` ライフサイクルフックが定義されていない場合に発生します。
 
-ブートストラッププロセスの詳細については、[このガイド](guide/ngmodules/bootstrapping)をご覧ください。
+ブートストラッププロセスの詳細については、[このガイド](guide/ngmodules/overview)をご覧ください。
 
 次の例は、エラーをトリガーします。
 
 ```typescript
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [App],
   imports: [BrowserModule, AppRoutingModule],
   providers: [],
 })
@@ -22,7 +22,7 @@ platformBrowser().bootstrapModule(AppModule);
 
 ```typescript
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [App],
   imports: [BrowserModule, AppRoutingModule],
   providers: [],
   bootstrap: [],
diff --git a/adev-ja/src/content/reference/errors/NG0500.en.md b/adev-ja/src/content/reference/errors/NG0500.en.md
index 6e12d348e..386f9fb35 100644
--- a/adev-ja/src/content/reference/errors/NG0500.en.md
+++ b/adev-ja/src/content/reference/errors/NG0500.en.md
@@ -13,7 +13,7 @@ The following example will trigger the error.
   selector: 'app-example',
   template: '<div><span>world</span></div>',
 })
-export class ExampleComponent {
+export class Example {
   hostElement = inject(ElementRef).nativeElement;
 
   ngOnInit() {
@@ -22,11 +22,11 @@ export class ExampleComponent {
     newNode.innerHTML = 'Hello';
 
     // Insert the <p> before the first element. Since Angular has no information
-   // about the <p> element, it will be looking for the <div> element at the first
-   // element position instead. As a result, a hydration mismatch error would be
-   // thrown. Instead, update component's template to create the <p> element.
-   this.hostElement.insertBefore(newNode, this.hostElement.firstChild);
- }
+    // about the <p> element, it will be looking for the <div> element at the first
+    // element position instead. As a result, a hydration mismatch error would be
+    // thrown. Instead, update component's template to create the <p> element.
+    this.hostElement.insertBefore(newNode, this.hostElement.firstChild);
+  }
 }
 ```
 
diff --git a/adev-ja/src/content/reference/errors/NG0500.md b/adev-ja/src/content/reference/errors/NG0500.md
index fbe9f16be..c4147b7bb 100644
--- a/adev-ja/src/content/reference/errors/NG0500.md
+++ b/adev-ja/src/content/reference/errors/NG0500.md
@@ -13,7 +13,7 @@
   selector: 'app-example',
   template: '<div><span>world</span></div>',
 })
-export class ExampleComponent {
+export class Example {
   hostElement = inject(ElementRef).nativeElement;
 
   ngOnInit() {
diff --git a/adev-ja/src/content/reference/errors/NG0503.en.md b/adev-ja/src/content/reference/errors/NG0503.en.md
index 51a8b8d76..285f379d7 100644
--- a/adev-ja/src/content/reference/errors/NG0503.en.md
+++ b/adev-ja/src/content/reference/errors/NG0503.en.md
@@ -9,18 +9,15 @@ The following examples will trigger the error.
 ```angular-ts
 @Component({
   selector: 'dynamic',
-  template: `
-  <ng-content />
-`,
+  template: `<ng-content />`,
 })
-class DynamicComponent {
-}
+class CardWrapper {}
 
 @Component({
   selector: 'app',
   template: `<div #target></div>`,
 })
-class SimpleComponent {
+class DynamicCard {
   @ViewChild('target', {read: ViewContainerRef}) vcr!: ViewContainerRef;
   envInjector = inject(EnvironmentInjector);
 
@@ -30,9 +27,9 @@ class SimpleComponent {
     // In this test we create DOM nodes outside of Angular context
     // (i.e. not using Angular APIs) and try to content-project them.
     // This is an unsupported pattern and an exception will be thrown.
-    const compRef = createComponent(DynamicComponent, {
+    const compRef = createComponent(CardWrapper, {
       environmentInjector: this.envInjector,
-      projectableNodes: [[div, p]]
+      projectableNodes: [[div, p]],
     });
   }
 }
diff --git a/adev-ja/src/content/reference/errors/NG0503.md b/adev-ja/src/content/reference/errors/NG0503.md
index 7b2423c7f..dcf582ad3 100644
--- a/adev-ja/src/content/reference/errors/NG0503.md
+++ b/adev-ja/src/content/reference/errors/NG0503.md
@@ -9,18 +9,15 @@
 ```typescript
 @Component({
   selector: 'dynamic',
-  template: `
-  <ng-content />
-`,
+  template: `<ng-content />`,
 })
-class DynamicComponent {
-}
+class CardWrapper {}
 
 @Component({
   selector: 'app',
   template: `<div #target></div>`,
 })
-class SimpleComponent {
+class DynamicCard {
   @ViewChild('target', {read: ViewContainerRef}) vcr!: ViewContainerRef;
   envInjector = inject(EnvironmentInjector);
 
@@ -30,9 +27,9 @@ class SimpleComponent {
     // このテストでは、Angularのコンテキスト外（つまり、Angular APIを使用せずに）DOMノードを作成し、
     // それらをコンテンツ投影しようとします。
     // これはサポートされていないパターンであり、例外がスローされます。
-    const compRef = createComponent(DynamicComponent, {
+    const compRef = createComponent(CardWrapper, {
       environmentInjector: this.envInjector,
-      projectableNodes: [[div, p]]
+      projectableNodes: [[div, p]],
     });
   }
 }
diff --git a/adev-ja/src/content/reference/errors/NG0504.en.md b/adev-ja/src/content/reference/errors/NG0504.en.md
index 61a9ecbd3..8cab32b3d 100644
--- a/adev-ja/src/content/reference/errors/NG0504.en.md
+++ b/adev-ja/src/content/reference/errors/NG0504.en.md
@@ -15,18 +15,14 @@ In this example, the `ngSkipHydration` attribute is applied to a `<div>` using h
   selector: '[dir]',
   host: {ngSkipHydration: 'true'},
 })
-class Dir {
-}
+class Dir {}
 
 @Component({
   selector: 'app',
   imports: [Dir],
-  template: `
-    <div dir></div>
-  `,
+  template: ` <div dir></div> `,
 })
-class SimpleComponent {
-}
+class Simple {}
 ```
 
 ## Example 2
@@ -37,12 +33,9 @@ Since the `<div>` doesn't act as a component host node, Angular will throw an er
 ```angular-ts
 @Component({
   selector: 'app',
-  template: `
-    <div ngSkipHydration></div>
-  `,
+  template: ` <div ngSkipHydration></div> `,
 })
-class SimpleComponent {
-}
+class Simple {}
 ```
 
 ## Debugging the error
diff --git a/adev-ja/src/content/reference/errors/NG0504.md b/adev-ja/src/content/reference/errors/NG0504.md
index 0fb06abe3..fdc70f21c 100644
--- a/adev-ja/src/content/reference/errors/NG0504.md
+++ b/adev-ja/src/content/reference/errors/NG0504.md
@@ -10,23 +10,19 @@
 
 この例では、`ngSkipHydration` 属性は、ディレクティブのホストバインディングを使用して `<div>` に適用されています。`<div>` はコンポーネントホストノードとして機能しないため、Angularはエラーをスローします。
 
-```typescript
+```angular-ts
 @Directive({
   selector: '[dir]',
   host: {ngSkipHydration: 'true'},
 })
-class Dir {
-}
+class Dir {}
 
 @Component({
   selector: 'app',
   imports: [Dir],
-  template: `
-    <div dir></div>
-  `,
+  template: ` <div dir></div> `,
 })
-class SimpleComponent {
-}
+class Simple {}
 ```
 
 ## 例 2
@@ -34,15 +30,12 @@ class SimpleComponent {
 この例では、`ngSkipHydration` はテンプレートを介して属性として `<div>` に適用されています。
 `<div>` はコンポーネントホストノードとして機能しないため、Angularはエラーをスローします。
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app',
-  template: `
-    <div ngSkipHydration></div>
-  `,
+  template: ` <div ngSkipHydration></div> `,
 })
-class SimpleComponent {
-}
+class Simple {}
 ```
 
 ## エラーのデバッグ
diff --git a/adev-ja/src/content/reference/errors/NG0506.en.md b/adev-ja/src/content/reference/errors/NG0506.en.md
index 9c3760c68..1c57898e7 100644
--- a/adev-ja/src/content/reference/errors/NG0506.en.md
+++ b/adev-ja/src/content/reference/errors/NG0506.en.md
@@ -25,7 +25,7 @@ If one of these functions is called during the initialization phase of the appli
   selector: 'app',
   template: ``,
 })
-class SimpleComponent {
+class Simple {
   constructor() {
     setInterval(() => { ... }, 1000)
 
@@ -39,7 +39,7 @@ class SimpleComponent {
 If these functions must be called during the initialization phase, invoking them outside the Angular zone resolves the problem:
 
 ```typescript
-class SimpleComponent {
+class Simple {
   constructor() {
     const ngZone = inject(NgZone);
 
@@ -59,7 +59,7 @@ Some third-party libraries can also produce long-running asynchronous tasks, whi
 You can run a code that sets up asynchronous tasks once an application becomes stable:
 
 ```typescript
-class SimpleComponent {
+class Simple {
   constructor() {
     const applicationRef = inject(ApplicationRef);
 
diff --git a/adev-ja/src/content/reference/errors/NG0506.md b/adev-ja/src/content/reference/errors/NG0506.md
index 1c56d50bf..008ab6fbe 100644
--- a/adev-ja/src/content/reference/errors/NG0506.md
+++ b/adev-ja/src/content/reference/errors/NG0506.md
@@ -25,7 +25,7 @@ zone.jsを使用するアプリケーションでは、安定性の遅延に寄
   selector: 'app',
   template: ``,
 })
-class SimpleComponent {
+class Simple {
   constructor() {
     setInterval(() => { ... }, 1000)
 
@@ -39,7 +39,7 @@ class SimpleComponent {
 これらの関数を初期化フェーズ中に呼び出す必要がある場合、Angularゾーンの外で呼び出すと、問題は解決します。
 
 ```typescript
-class SimpleComponent {
+class Simple {
   constructor() {
     const ngZone = inject(NgZone);
 
@@ -59,7 +59,7 @@ class SimpleComponent {
 アプリケーションが安定状態になったときに非同期タスクを設定するコードを実行できます。
 
 ```typescript
-class SimpleComponent {
+class Simple {
   constructor() {
     const applicationRef = inject(ApplicationRef);
 
diff --git a/adev-ja/src/content/reference/errors/NG05104.en.md b/adev-ja/src/content/reference/errors/NG05104.en.md
index a651faac8..5081a568f 100644
--- a/adev-ja/src/content/reference/errors/NG05104.en.md
+++ b/adev-ja/src/content/reference/errors/NG05104.en.md
@@ -13,19 +13,21 @@ This issue occurs when the selector mismatches the tag
   selector: 'my-app',
   ...
 })
-export class AppComponent {}
+export class App {}
 ```
 
-```angular-html
+<!-- prettier-ignore -->
+```html
 <html>
-    <app-root></app-root> <!-- Doesn't match the selector -->
+  <app-root></app-root> <!-- Doesn't match the selector -->
 </html>
 ```
 
 Replace the tag with the correct one:
 
-```angular-html
+<!-- prettier-ignore -->
+```html
 <html>
-    <my-app></my-app> <!-- OK -->
+  <my-app></my-app> <!-- OK -->
 </html>
 ```
diff --git a/adev-ja/src/content/reference/errors/NG05104.md b/adev-ja/src/content/reference/errors/NG05104.md
index 21f858fe5..7400e1996 100644
--- a/adev-ja/src/content/reference/errors/NG05104.md
+++ b/adev-ja/src/content/reference/errors/NG05104.md
@@ -13,19 +13,21 @@
   selector: 'my-app',
   ...
 })
-export class AppComponent {}
+export class App {}
 ```
 
-```angular-html
+<!-- prettier-ignore -->
+```html
 <html>
-    <app-root></app-root> <!-- セレクターと一致しません -->
+  <app-root></app-root> <!-- セレクターと一致しません -->
 </html>
 ```
 
 タグを正しいタグに置き換えてください。
 
-```angular-html
+<!-- prettier-ignore -->
+```html
 <html>
-    <my-app></my-app> <!-- OK -->
+  <my-app></my-app> <!-- OK -->
 </html>
 ```
diff --git a/adev-ja/src/content/reference/errors/NG0912.en.md b/adev-ja/src/content/reference/errors/NG0912.en.md
index 24ca46aac..71a14b212 100644
--- a/adev-ja/src/content/reference/errors/NG0912.en.md
+++ b/adev-ja/src/content/reference/errors/NG0912.en.md
@@ -16,13 +16,13 @@ To avoid issues that might be caused by the component ID collision, it's recomme
   selector: 'my-component',
   template: 'complex-template',
 })
-class SomeComponent {}
+class Some {}
 
 @Component({
   selector: 'my-component',
   template: 'empty-template',
 })
-class SomeMockedComponent {}
+class SomeMocked {}
 ```
 
 Having these two components defined will trigger an ID generation collision and during development a warning will be displayed.
@@ -40,7 +40,7 @@ The problem can be resolved using one of the solutions below:
   selector: 'my-component:not(p)',
   template: 'empty-template',
 })
-class SomeMockedComponent {}
+class SomeMocked {}
 ```
 
 1. Add an extra host attribute to one of the components.
@@ -51,5 +51,5 @@ class SomeMockedComponent {}
   template: 'complex-template',
   host: {'some-binding': 'some-value'},
 })
-class SomeComponent {}
+class Some {}
 ```
diff --git a/adev-ja/src/content/reference/errors/NG0912.md b/adev-ja/src/content/reference/errors/NG0912.md
index 80e3692dc..624a12dfd 100644
--- a/adev-ja/src/content/reference/errors/NG0912.md
+++ b/adev-ja/src/content/reference/errors/NG0912.md
@@ -16,13 +16,13 @@
   selector: 'my-component',
   template: 'complex-template',
 })
-class SomeComponent {}
+class Some {}
 
 @Component({
   selector: 'my-component',
   template: 'empty-template',
 })
-class SomeMockedComponent {}
+class SomeMocked {}
 ```
 
 これらの2つのコンポーネントを定義すると、ID生成の衝突が発生し、開発中に警告が表示されます。
@@ -40,7 +40,7 @@ class SomeMockedComponent {}
   selector: 'my-component:not(p)',
   template: 'empty-template',
 })
-class SomeMockedComponent {}
+class SomeMocked {}
 ```
 
 1. コンポーネントのいずれかに追加のホスト属性を追加します。
@@ -51,5 +51,5 @@ class SomeMockedComponent {}
   template: 'complex-template',
   host: {'some-binding': 'some-value'},
 })
-class SomeComponent {}
+class Some {}
 ```
diff --git a/adev-ja/src/content/reference/errors/NG0913.en.md b/adev-ja/src/content/reference/errors/NG0913.en.md
index 96f2c0fae..5fe21d9fb 100644
--- a/adev-ja/src/content/reference/errors/NG0913.en.md
+++ b/adev-ja/src/content/reference/errors/NG0913.en.md
@@ -21,7 +21,7 @@ Use the image URL provided in the console warning to find the `<img>` element in
 ### Ways to fix lazy-loaded LCP element
 
 - Change the `loading` attribute to a different value such as `"eager"`.
-- Switch to use Angular's built-in image directive ([`NgOptimizedImage`](/dev/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](/guide/image-optimization#mark-images-as-priority).
+- Switch to use Angular's built-in image directive ([`NgOptimizedImage`](/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](/guide/image-optimization#mark-images-as-priority).
 
 ### Disabling Image Performance Warnings
 
diff --git a/adev-ja/src/content/reference/errors/NG0913.md b/adev-ja/src/content/reference/errors/NG0913.md
index c73604f67..506a73068 100644
--- a/adev-ja/src/content/reference/errors/NG0913.md
+++ b/adev-ja/src/content/reference/errors/NG0913.md
@@ -21,7 +21,7 @@
 ### 遅延読み込みされたLCP要素を修正する方法
 
 - `loading`属性を `"eager"`などの別の値に変更します。
-- 自動的に[LCP画像を優先する](/guide/image-optimization#mark-images-as-priority)Angularの組み込み画像ディレクティブ([`NgOptimizedImage`](/dev/api/common/NgOptimizedImage))を使用するように切り替えます。
+- 自動的に[LCP画像を優先する](/guide/image-optimization#mark-images-as-priority)Angularの組み込み画像ディレクティブ([`NgOptimizedImage`](/api/common/NgOptimizedImage))を使用するように切り替えます。
 
 ### 画像パフォーマンス警告を無効にする方法
 
diff --git a/adev-ja/src/content/reference/errors/NG0955.en.md b/adev-ja/src/content/reference/errors/NG0955.en.md
index 82359d94c..a9067f7bb 100644
--- a/adev-ja/src/content/reference/errors/NG0955.en.md
+++ b/adev-ja/src/content/reference/errors/NG0955.en.md
@@ -4,10 +4,16 @@ A track expression specified in the `@for` loop evaluated to duplicated keys for
 
 ```angular-ts
 @Component({
-    template: `@for (item of items; track item.value) {{{item.value}}}`,
+  template: `@for (item of items; track item.value) {
+    {{ item.value }}
+  }`,
 })
-class TestComponent {
-    items = [{key: 1, value: 'a'}, {key: 2, value: 'b'}, {key: 3, value: 'a'}];
+class Test {
+  items = [
+    {key: 1, value: 'a'},
+    {key: 2, value: 'b'},
+    {key: 3, value: 'a'},
+  ];
 }
 ```
 
@@ -23,9 +29,15 @@ Change the tracking expression such that it uniquely identifies an item in a col
 
 ```angular-ts
 @Component({
-    template: `@for (item of items; track item.key) {{{item.value}}}`,
+  template: `@for (item of items; track item.key) {
+    {{ item.value }}
+  }`,
 })
-class TestComponent {
-    items = [{key: 1, value: 'a'}, {key: 2, value: 'b'}, {key: 3, value: 'a'}];
+class Test {
+  items = [
+    {key: 1, value: 'a'},
+    {key: 2, value: 'b'},
+    {key: 3, value: 'a'},
+  ];
 }
 ```
diff --git a/adev-ja/src/content/reference/errors/NG0955.md b/adev-ja/src/content/reference/errors/NG0955.md
index dbf8893bd..8ca97d882 100644
--- a/adev-ja/src/content/reference/errors/NG0955.md
+++ b/adev-ja/src/content/reference/errors/NG0955.md
@@ -2,12 +2,18 @@
 
 `@for` ループで指定されたトラック式が、特定のコレクションに対して重複するキーを評価しました。例：
 
-```typescript
+```angular-ts
 @Component({
-    template: `@for (item of items; track item.value) {{{item.value}}}`,
+  template: `@for (item of items; track item.value) {
+    {{ item.value }}
+  }`,
 })
-class TestComponent {
-    items = [{key: 1, value: 'a'}, {key: 2, value: 'b'}, {key: 3, value: 'a'}];
+class Test {
+  items = [
+    {key: 1, value: 'a'},
+    {key: 2, value: 'b'},
+    {key: 3, value: 'a'},
+  ];
 }
 ```
 
@@ -21,11 +27,17 @@ class TestComponent {
 
 トラック式を、コレクション内のアイテムを一意に識別するように変更してください。上記で説明した例では、正しいトラック式は、一意の `key` プロパティ（`item.key`）を使用します。
 
-```typescript
+```angular-ts
 @Component({
-    template: `@for (item of items; track item.key) {{{item.value}}}`,
+  template: `@for (item of items; track item.key) {
+    {{ item.value }}
+  }`,
 })
-class TestComponent {
-    items = [{key: 1, value: 'a'}, {key: 2, value: 'b'}, {key: 3, value: 'a'}];
+class Test {
+  items = [
+    {key: 1, value: 'a'},
+    {key: 2, value: 'b'},
+    {key: 3, value: 'a'},
+  ];
 }
 ```
diff --git a/adev-ja/src/content/reference/errors/NG0956.en.md b/adev-ja/src/content/reference/errors/NG0956.en.md
index 2fd046c05..5ddd955a7 100644
--- a/adev-ja/src/content/reference/errors/NG0956.en.md
+++ b/adev-ja/src/content/reference/errors/NG0956.en.md
@@ -7,20 +7,20 @@ The identity track expression specified in the `@for` loop caused re-creation of
   template: `
     <button (click)="toggleAllDone()">All done!</button>
     <ul>
-    @for (todo of todos; track todo) {
-      <li>{{todo.task}}</li>
-    }
+      @for (todo of todos; track todo) {
+        <li>{{ todo.task }}</li>
+      }
     </ul>
   `,
 })
 export class App {
   todos = [
-    { id: 0, task: 'understand trackBy', done: false },
-    { id: 1, task: 'use proper tracking expression', done: false },
+    {id: 0, task: 'understand trackBy', done: false},
+    {id: 1, task: 'use proper tracking expression', done: false},
   ];
 
   toggleAllDone() {
-    this.todos = this.todos.map(todo => ({ ...todo, done: true }));
+    this.todos = this.todos.map((todo) => ({...todo, done: true}));
   }
 }
 ```
@@ -38,20 +38,20 @@ Change the tracking expression such that it uniquely identifies an item in a col
   template: `
     <button (click)="toggleAllDone()">All done!</button>
     <ul>
-    @for (todo of todos; track todo.id) {
-      <li>{{todo.task}}</li>
-    }
+      @for (todo of todos; track todo.id) {
+        <li>{{ todo.task }}</li>
+      }
     </ul>
   `,
 })
 export class App {
   todos = [
-    { id: 0, task: 'understand trackBy', done: false },
-    { id: 1, task: 'use proper tracking expression', done: false },
+    {id: 0, task: 'understand trackBy', done: false},
+    {id: 1, task: 'use proper tracking expression', done: false},
   ];
 
   toggleAllDone() {
-    this.todos = this.todos.map(todo => ({ ...todo, done: true }));
+    this.todos = this.todos.map((todo) => ({...todo, done: true}));
   }
 }
 ```
diff --git a/adev-ja/src/content/reference/errors/NG0956.md b/adev-ja/src/content/reference/errors/NG0956.md
index 52284b3c1..f6df9fca9 100644
--- a/adev-ja/src/content/reference/errors/NG0956.md
+++ b/adev-ja/src/content/reference/errors/NG0956.md
@@ -2,25 +2,25 @@
 
 `@for` ループで指定されたアイデンティティトラック式が、_すべての_アイテムに対応するDOMの再作成を引き起こしました。これは、イミュータブルなデータ構造を扱う際に発生する一般的な操作で、非常に高価です。例：
 
-```typescript
+```angular-ts
 @Component({
   template: `
     <button (click)="toggleAllDone()">All done!</button>
     <ul>
-    @for (todo of todos; track todo) {
-      <li>{{todo.task}}</li>
-    }
+      @for (todo of todos; track todo) {
+        <li>{{ todo.task }}</li>
+      }
     </ul>
   `,
 })
 export class App {
   todos = [
-    { id: 0, task: 'understand trackBy', done: false },
-    { id: 1, task: 'use proper tracking expression', done: false },
+    {id: 0, task: 'understand trackBy', done: false},
+    {id: 1, task: 'use proper tracking expression', done: false},
   ];
 
   toggleAllDone() {
-    this.todos = this.todos.map(todo => ({ ...todo, done: true }));
+    this.todos = this.todos.map((todo) => ({...todo, done: true}));
   }
 }
 ```
@@ -33,25 +33,25 @@ DOMツリーを再作成すると、高いパフォーマンスペナルティ
 
 アイテムのオブジェクトアイデンティティに関係なく、コレクション内のアイテムをユニークに識別するようにトラック式を変更します。説明した例では、正しいトラック式はユニークな `id` プロパティ（`item.id`）を使用します。
 
-```typescript
+```angular-ts
 @Component({
   template: `
     <button (click)="toggleAllDone()">All done!</button>
     <ul>
-    @for (todo of todos; track todo.id) {
-      <li>{{todo.task}}</li>
-    }
+      @for (todo of todos; track todo.id) {
+        <li>{{ todo.task }}</li>
+      }
     </ul>
   `,
 })
 export class App {
   todos = [
-    { id: 0, task: 'understand trackBy', done: false },
-    { id: 1, task: 'use proper tracking expression', done: false },
+    {id: 0, task: 'understand trackBy', done: false},
+    {id: 1, task: 'use proper tracking expression', done: false},
   ];
 
   toggleAllDone() {
-    this.todos = this.todos.map(todo => ({ ...todo, done: true }));
+    this.todos = this.todos.map((todo) => ({...todo, done: true}));
   }
 }
 ```
diff --git a/adev-ja/src/content/reference/errors/NG3003.en.md b/adev-ja/src/content/reference/errors/NG3003.en.md
index 37fa75e20..ea29b6dbe 100644
--- a/adev-ja/src/content/reference/errors/NG3003.en.md
+++ b/adev-ja/src/content/reference/errors/NG3003.en.md
@@ -1,42 +1,41 @@
 # Import Cycle Detected
 
 A component, directive, or pipe that is referenced by this component would require the compiler to add an import that would lead to a cycle of imports.
-For example, consider a scenario where a `ParentComponent` references a `ChildComponent` in its template:
+For example, consider a scenario where a `Parent` references a `Child` in its template:
 
-```angular-ts {header:"parent.component.ts"}
+```angular-ts {header:"parent.ts"}
 import {Component} from '@angular/core';
-import {ChildComponent} from './child.component';
+import {Child} from './child';
 
 @Component({
   selector: 'app-parent',
-  imports: [ChildComponent],
+  imports: [Child],
   template: '<app-child/>',
 })
-export class ParentComponent {}
+export class Parent {}
 ```
 
-```angular-ts {header:"child.component.ts"}
+```angular-ts {header:"child.ts"}
 import {Component, inject} from '@angular/core';
-import {ParentComponent} from './parent.component';
+import {Parent} from './parent';
 
 @Component({
   selector: 'app-child',
   template: 'The child!',
 })
-export class ChildComponent {
-  private parent = inject(ParentComponent);
+export class Child {
+  private parent = inject(Parent);
 }
 ```
 
-There is already an import from `child.component.ts` to `parent.component.ts` since the `ChildComponent` references the `ParentComponent` in its constructor.
-
+There is already an import from `child.ts` to `parent.ts` since the `Child` references the `Parent` in its constructor.
 HELPFUL: The parent component's template contains `<child></child>`.
-The generated code for this template must therefore contain a reference to the `ChildComponent` class.
-In order to make this reference, the compiler would have to add an import from `parent.component.ts` to `child.component.ts`, which would cause an import cycle:
+The generated code for this template must therefore contain a reference to the `Child` class.
+In order to make this reference, the compiler would have to add an import from `parent.ts` to `child.ts`, which would cause an import cycle:
 
 ```text
 
-parent.component.ts -> child.component.ts -> parent.component.ts
+parent.ts -> child.ts -> parent.ts
 
 ```
 
@@ -58,8 +57,8 @@ For example:
 
 ```text {hideCopy}
 
-The component ChildComponent is used in the template but importing it would create a cycle:
-/parent.component.ts -> /child.component.ts -> /parent.component.ts
+The component Child is used in the template but importing it would create a cycle:
+/parent.ts -> /child.ts -> /parent.ts
 
 ```
 
diff --git a/adev-ja/src/content/reference/errors/NG3003.md b/adev-ja/src/content/reference/errors/NG3003.md
index 7d3c21f6a..6c4c75398 100644
--- a/adev-ja/src/content/reference/errors/NG3003.md
+++ b/adev-ja/src/content/reference/errors/NG3003.md
@@ -1,44 +1,43 @@
 # Import Cycle Detected
 
 コンポーネント、ディレクティブ、またはパイプが、このコンポーネントによって参照されている場合、コンパイラはインポートを追加する必要があり、インポートの循環が発生します。
-たとえば、`ParentComponent`がテンプレートで`ChildComponent`を参照しているシナリオを考えてみます。
+たとえば、`Parent`がテンプレートで`Child`を参照しているシナリオを考えてみます。
 
-<docs-code header="parent.component.ts" language="angular-ts">
+```angular-ts {header:"parent.ts"}
 import {Component} from '@angular/core';
-import {ChildComponent} from './child.component';
+import {Child} from './child';
 
 @Component({
-selector: 'app-parent',
-imports: [ChildComponent],
-template: '<app-child/>',
+  selector: 'app-parent',
+  imports: [Child],
+  template: '<app-child/>',
 })
-export class ParentComponent {}
-</docs-code>
+export class Parent {}
+```
 
-<docs-code header="child.component.ts" language="angular-ts">
+```angular-ts {header:"child.ts"}
 import {Component, inject} from '@angular/core';
-import {ParentComponent} from './parent.component';
+import {Parent} from './parent';
 
 @Component({
-selector: 'app-child',
-template: 'The child!',
+  selector: 'app-child',
+  template: 'The child!',
 })
-export class ChildComponent {
-private parent = inject(ParentComponent);
+export class Child {
+  private parent = inject(Parent);
 }
-</docs-code>
-
-`ChildComponent`はコンストラクターで`ParentComponent`を参照しているため、`child.component.ts`から`parent.component.ts`へのインポートがすでに存在しています。
+```
 
+`Child`はコンストラクターで`Parent`を参照しているため、`child.ts`から`parent.ts`へのインポートがすでに存在しています。
 HELPFUL: 親コンポーネントのテンプレートには`<child></child>`が含まれています。
-このテンプレートの生成されたコードには、`ChildComponent`クラスへの参照を含める必要があります。
-この参照をするために、コンパイラは`parent.component.ts`から`child.component.ts`へのインポートを追加する必要があり、これがインポートの循環の原因となります。
+このテンプレートの生成されたコードには、`Child`クラスへの参照を含める必要があります。
+この参照をするために、コンパイラは`parent.ts`から`child.ts`へのインポートを追加する必要があり、これがインポートの循環の原因となります。
 
-<docs-code language="text">
+```text
 
-parent.component.ts -> child.component.ts -> parent.component.ts
+parent.ts -> child.ts -> parent.ts
 
-</docs-code>
+```
 
 ## リモートスコープ
 
@@ -58,8 +57,8 @@ NgModuleを使用している場合、循環を作成するインポートを追
 
 ```text {hideCopy}
 
-コンポーネントChildComponentはテンプレートで使用されていますが、インポートすると循環が発生します。
-/parent.component.ts -> /child.component.ts -> /parent.component.ts
+コンポーネントChildはテンプレートで使用されていますが、インポートすると循環が発生します。
+/parent.ts -> /child.ts -> /parent.ts
 
 ```
 
diff --git a/adev-ja/src/content/reference/releases.en.md b/adev-ja/src/content/reference/releases.en.md
index e8eef849b..a37513901 100644
--- a/adev-ja/src/content/reference/releases.en.md
+++ b/adev-ja/src/content/reference/releases.en.md
@@ -72,15 +72,13 @@ HELPFUL: Approximate dates are offered as general guidance and are subject to ch
 
 ### Release schedule
 
-Release schedule for upcoming versions is TBA.
+<!-- Release schedule for upcoming versions is TBA. -->
 
-<!--
 | Version | Date               |
 | :------ | :----------------- |
-| v21.1   | Week of TBD |
-| v21.2   | Week of TBD |
-| v22.0   | Week of TBD |
--->
+| v21.1   | Week of 2026-01-12 |
+| v21.2   | Week of 2026-02-23 |
+| v22.0   | Week of 2026-05-18 |
 
 ### Support window
 
diff --git a/adev-ja/src/content/reference/releases.md b/adev-ja/src/content/reference/releases.md
index ca83690aa..48e6f5b63 100644
--- a/adev-ja/src/content/reference/releases.md
+++ b/adev-ja/src/content/reference/releases.md
@@ -72,15 +72,13 @@ HELPFUL: 概算の日付は一般的なガイダンスとして提供されて
 
 ### リリーススケジュール {#release-schedule}
 
-今後のバージョンのリリーススケジュールは未定です。
-
-<!--
-| バージョン | 日付        |
-| :--------- | :---------- |
-| v21.1      | Week of TBD |
-| v21.2      | Week of TBD |
-| v22.0      | Week of TBD |
--->
+<!-- 今後のバージョンのリリーススケジュールは未定です。 -->
+
+| バージョン | 日付               |
+| :--------- | :----------------- |
+| v21.1      | Week of 2026-01-12 |
+| v21.2      | Week of 2026-02-23 |
+| v22.0      | Week of 2026-05-18 |
 
 ### サポート期間 {#support-window}
 
diff --git a/adev-ja/src/content/reference/roadmap.en.md b/adev-ja/src/content/reference/roadmap.en.md
index 924448533..238452d58 100644
--- a/adev-ja/src/content/reference/roadmap.en.md
+++ b/adev-ja/src/content/reference/roadmap.en.md
@@ -156,7 +156,7 @@ To provide better customization of our Angular Material components and enable Ma
 
 In v17.2 we shared experimental support for Angular Material 3 and in v18 we graduated it to stable.
 </docs-card>
-<docs-card title="Introduce deferred loading" link="Completed in Q2 2024" href="https://next.angular.dev/guide/defer">
+<docs-card title="Introduce deferred loading" link="Completed in Q2 2024" href="https://next.angular.dev/guide/templates/defer">
 In v17 we shipped deferrable views in developer preview, which provide an ergonomic API for deferred code loading. In v18 we enabled deferrable views for library developers and graduated the API to stable.
 </docs-card>
 <docs-card title="iframe support in Angular DevTools" link="Completed in Q2 2024" href="">
diff --git a/adev-ja/src/content/reference/roadmap.md b/adev-ja/src/content/reference/roadmap.md
index e99303dd4..2bd020624 100644
--- a/adev-ja/src/content/reference/roadmap.md
+++ b/adev-ja/src/content/reference/roadmap.md
@@ -156,7 +156,7 @@ Angular Materialコンポーネントのカスタマイズを向上させ、Mate
 
 v17.2では、Angular Material 3の実験的なサポートを共有し、v18では安定版に卒業しました。
   </docs-card>
-  <docs-card title="遅延読み込みを導入する" link="2024年第2四半期に完了" href="https://next.angular.dev/guide/defer">
+  <docs-card title="遅延読み込みを導入する" link="2024年第2四半期に完了" href="https://next.angular.dev/guide/templates/defer">
 v17では、遅延コード読み込みのための使い慣れたAPIを提供する、開発者プレビューで遅延表示を提供しました。v18では、ライブラリ開発者向けの遅延表示を有効にし、APIを安定版に卒業させました。
   </docs-card>
   <docs-card title="Angular DevToolsのiframeサポート" link="2024年第2四半期に完了" href="">

From ed801f2b3e376c92b456cbffde239e6646d2d1b5 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:25:45 +0900
Subject: [PATCH 07/55] fix(docs): add new error codes to overview

---
 adev-ja/src/content/reference/errors/overview.en.md | 8 ++++++++
 adev-ja/src/content/reference/errors/overview.md    | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/adev-ja/src/content/reference/errors/overview.en.md b/adev-ja/src/content/reference/errors/overview.en.md
index 00a821988..7892d2e12 100644
--- a/adev-ja/src/content/reference/errors/overview.en.md
+++ b/adev-ja/src/content/reference/errors/overview.en.md
@@ -8,6 +8,9 @@
 | `NG0200`  | [Circular Dependency in DI](errors/NG0200)                                           |
 | `NG0201`  | [No Provider Found](errors/NG0201)                                                   |
 | `NG0203`  | [`inject()` must be called from an injection context](errors/NG0203)                 |
+| `NG0204`  | [Invalid Injection Token](errors/NG0204)                                             |
+| `NG0205`  | [Injector has already been destroyed](errors/NG0205)                                 |
+| `NG0207`  | [EnvironmentProviders in wrong context](errors/NG0207)                               |
 | `NG0209`  | [Invalid multi provider](errors/NG0209)                                              |
 | `NG0300`  | [Selector Collision](errors/NG0300)                                                  |
 | `NG0301`  | [Export Not Found](errors/NG0301)                                                    |
@@ -22,10 +25,15 @@
 | `NG0505`  | [No hydration info in server response](errors/NG0505)                                |
 | `NG0506`  | [NgZone remains unstable](errors/NG0506)                                             |
 | `NG0507`  | [HTML content was altered after SSR](errors/NG0507)                                  |
+| `NG0602`  | [Disallowed function call inside reactive context](errors/NG0602)                    |
 | `NG0750`  | [@defer dependencies failed to load](errors/NG0750)                                  |
+| `NG0751`  | [@defer behavior when HMR is enabled](errors/NG0751)                                 |
 | `NG0910`  | [Unsafe bindings on an iframe element](errors/NG0910)                                |
 | `NG0912`  | [Component ID generation collision](errors/NG0912)                                   |
+| `NG0913`  | [Runtime Performance Warnings](errors/NG0913)                                        |
 | `NG0919`  | [Circular Dependency Detected](errors/NG0919)                                        |
+| `NG0950`  | [Required input is accessed before a value is set](errors/NG0950)                    |
+| `NG0951`  | [Child query result is required but no value is available](errors/NG0951)            |
 | `NG0955`  | [Track expression resulted in duplicated keys for a given collection](errors/NG0955) |
 | `NG0956`  | [Tracking expression caused re-creation of the DOM structure](errors/NG0956)         |
 | `NG01101` | [Wrong Async Validator Return Type](errors/NG01101)                                  |
diff --git a/adev-ja/src/content/reference/errors/overview.md b/adev-ja/src/content/reference/errors/overview.md
index c07307666..efab0ebf9 100644
--- a/adev-ja/src/content/reference/errors/overview.md
+++ b/adev-ja/src/content/reference/errors/overview.md
@@ -8,6 +8,9 @@
 | `NG0200`  | [Circular Dependency in DI](errors/NG0200)                                           |
 | `NG0201`  | [No Provider Found](errors/NG0201)                                                   |
 | `NG0203`  | [`inject()` must be called from an injection context](errors/NG0203)                 |
+| `NG0204`  | [Invalid Injection Token](errors/NG0204)                                             |
+| `NG0205`  | [Injector has already been destroyed](errors/NG0205)                                 |
+| `NG0207`  | [EnvironmentProviders in wrong context](errors/NG0207)                               |
 | `NG0209`  | [Invalid multi provider](errors/NG0209)                                              |
 | `NG0300`  | [Selector Collision](errors/NG0300)                                                  |
 | `NG0301`  | [Export Not Found](errors/NG0301)                                                    |
@@ -22,10 +25,15 @@
 | `NG0505`  | [No hydration info in server response](errors/NG0505)                                |
 | `NG0506`  | [NgZone remains unstable](errors/NG0506)                                             |
 | `NG0507`  | [HTML content was altered after SSR](errors/NG0507)                                  |
+| `NG0602`  | [Disallowed function call inside reactive context](errors/NG0602)                    |
 | `NG0750`  | [@defer dependencies failed to load](errors/NG0750)                                  |
+| `NG0751`  | [@defer behavior when HMR is enabled](errors/NG0751)                                 |
 | `NG0910`  | [Unsafe bindings on an iframe element](errors/NG0910)                                |
 | `NG0912`  | [Component ID generation collision](errors/NG0912)                                   |
+| `NG0913`  | [Runtime Performance Warnings](errors/NG0913)                                        |
 | `NG0919`  | [Circular Dependency Detected](errors/NG0919)                                        |
+| `NG0950`  | [Required input is accessed before a value is set](errors/NG0950)                    |
+| `NG0951`  | [Child query result is required but no value is available](errors/NG0951)            |
 | `NG0955`  | [Track expression resulted in duplicated keys for a given collection](errors/NG0955) |
 | `NG0956`  | [Tracking expression caused re-creation of the DOM structure](errors/NG0956)         |
 | `NG01101` | [Wrong Async Validator Return Type](errors/NG01101)                                  |

From 1260ee76d1c313e8b0b1cafe4ab47b2c22bbb855 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:36:31 +0900
Subject: [PATCH 08/55] fix(docs): migrate deferrable-views tutorial

---
 .../steps/3-defer-triggers/README.en.md                | 10 ++++------
 .../deferrable-views/steps/3-defer-triggers/README.md  | 10 ++++------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/adev-ja/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.en.md b/adev-ja/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.en.md
index ec65aa884..a9689e27e 100644
--- a/adev-ja/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.en.md
+++ b/adev-ja/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.en.md
@@ -63,9 +63,8 @@ Next, update the template to include a button with the label "Show all comments"
 <button type="button" #showComments>Show all comments</button>
 
 @defer (on hover) {
-<article-comments />
+  <article-comments />
 } @placeholder (minimum 1s) {
-
   <p>Placeholder for comments</p>
 } @loading (minimum 1s; after 500ms) {
   <p>Loading comments...</p>
@@ -74,7 +73,7 @@ Next, update the template to include a button with the label "Show all comments"
 }
 ```
 
-NOTE: for more information on [template variables check the documentation](/guide/templates/reference-variables).
+NOTE: for more information on [template variables check the documentation](/guide/templates/variables#declaring-a-template-reference-variable).
 
 </docs-step>
 
@@ -85,9 +84,8 @@ Update the `@defer` block in the template to use the `on interaction` trigger. P
 <button type="button" #showComments>Show all comments</button>
 
 @defer (on hover; on interaction(showComments)) {
-<article-comments />
+  <article-comments />
 } @placeholder (minimum 1s) {
-
   <p>Placeholder for comments</p>
 } @loading (minimum 1s; after 500ms) {
   <p>Loading comments...</p>
@@ -105,5 +103,5 @@ You can reload the page to try out different triggers to render the comments sec
 </docs-step>
 </docs-workflow>
 
-If you would like to learn more, check out the documentation for [Deferrable View](/guide/defer).
+If you would like to learn more, check out the documentation for [Deferrable View](/guide/templates/defer).
 Keep learning to unlock more of Angular's great features.
diff --git a/adev-ja/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md b/adev-ja/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
index d8cb6d711..ecd86d912 100644
--- a/adev-ja/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
+++ b/adev-ja/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
@@ -63,9 +63,8 @@
 <button type="button" #showComments>Show all comments</button>
 
 @defer (on hover) {
-<article-comments />
+  <article-comments />
 } @placeholder (minimum 1s) {
-
   <p>Placeholder for comments</p>
 } @loading (minimum 1s; after 500ms) {
   <p>Loading comments...</p>
@@ -74,7 +73,7 @@
 }
 ```
 
-NOTE: [テンプレート変数に関する詳細については、ドキュメントを参照してください](/guide/templates/reference-variables)。
+NOTE: [テンプレート変数に関する詳細については、ドキュメントを参照してください](/guide/templates/variables#declaring-a-template-reference-variable)。
 
 </docs-step>
 
@@ -85,9 +84,8 @@ NOTE: [テンプレート変数に関する詳細については、ドキュメ
 <button type="button" #showComments>Show all comments</button>
 
 @defer (on hover; on interaction(showComments)) {
-<article-comments />
+  <article-comments />
 } @placeholder (minimum 1s) {
-
   <p>Placeholder for comments</p>
 } @loading (minimum 1s; after 500ms) {
   <p>Loading comments...</p>
@@ -105,5 +103,5 @@ NOTE: [テンプレート変数に関する詳細については、ドキュメ
 </docs-step>
 </docs-workflow>
 
-詳細については、[遅延可能ビュー](/guide/defer)のドキュメントを参照してください。
+詳細については、[遅延可能ビュー](/guide/templates/defer)のドキュメントを参照してください。
 Angularの優れた機能をさらに活用するために、学習を続けてください。

From 3da496eda04b030be97398f0cdd7193e4211e543 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:40:30 +0900
Subject: [PATCH 09/55] fix(docs): migrate learn-angular tutorials

---
 .../steps/10-deferrable-views/README.en.md      |  2 +-
 .../steps/10-deferrable-views/README.md         |  2 +-
 .../steps/11-optimizing-images/README.en.md     |  7 ++++---
 .../steps/11-optimizing-images/README.md        |  7 ++++---
 .../steps/13-define-a-route/README.en.md        |  2 +-
 .../steps/13-define-a-route/README.md           |  2 +-
 .../steps/14-routerLink/README.en.md            |  2 +-
 .../learn-angular/steps/14-routerLink/README.md |  2 +-
 .../steps/17-reactive-forms/README.en.md        |  4 +---
 .../steps/17-reactive-forms/README.md           |  4 +---
 .../learn-angular/steps/22-pipes/README.en.md   |  2 +-
 .../learn-angular/steps/22-pipes/README.md      |  2 +-
 .../steps/23-pipes-format-data/README.en.md     | 17 +++++++----------
 .../steps/23-pipes-format-data/README.md        | 17 +++++++----------
 .../steps/3-composing-components/README.en.md   |  7 ++++---
 .../steps/3-composing-components/README.md      |  7 ++++---
 .../steps/4-control-flow-if/README.en.md        |  7 +++++--
 .../steps/4-control-flow-if/README.md           |  7 +++++--
 .../steps/6-property-binding/README.en.md       |  4 ++--
 .../steps/6-property-binding/README.md          |  4 ++--
 .../steps/7-event-handling/README.en.md         |  1 +
 .../steps/7-event-handling/README.md            |  1 +
 22 files changed, 56 insertions(+), 54 deletions(-)

diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md
index 3e7f5bf8a..6441ff359 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.en.md
@@ -144,4 +144,4 @@ In the activity, you've learned how to use deferrable views in your applications
 
 There's even more you can do with them, like different triggers, prefetching, and `@error` blocks.
 
-If you would like to learn more, check out the [documentation for Deferrable views](guide/defer).
+If you would like to learn more, check out the [documentation for Deferrable views](/guide/templates/defer).
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
index b730b1b48..7bdb16108 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md
@@ -144,4 +144,4 @@ NOTE: 詳しくは、[詳細ガイドの @defer を使った遅延読み込み](
 
 さまざまなトリガー、プリフェッチ、`@error` ブロックなど、遅延可能ビューでできることは他にもたくさんあります。
 
-詳細については、[遅延可能ビューのドキュメント](guide/defer)をご覧ください。
+詳細については、[遅延可能ビューのドキュメント](/guide/templates/defer)をご覧ください。
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md
index 7e683d7f5..4d7b8b2db 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.en.md
@@ -38,7 +38,7 @@ import { NgOptimizedImage } from '@angular/common';
 template: `     ...
     <li>
       Static Image:
-      <img ngSrc="/assets/logo.svg" alt="Angular logo" width="32" height="32" />
+      <img ngSrc="/logo.svg" alt="Angular logo" width="32" height="32" />
     </li>
     <li>
       Dynamic Image:
@@ -59,7 +59,8 @@ Note that in the above code example, each image has both `width` and `height` at
 In situations where you can't or don't want to specify a static `height` and `width` for images, you can use [the `fill` attribute](https://web.dev/articles/cls) to tell the image to act like a "background image", filling its containing element:
 
 ```angular-html
-<div class="image-container"> //Container div has 'position: "relative"'
+// Container div has 'position: "relative"'
+<div class="image-container">
   <img ngSrc="www.example.com/image.png" fill />
 </div>
 ```
@@ -83,7 +84,7 @@ One of the most important optimizations for loading performance is to prioritize
 `NgOptimizedImage` allows you to specify an [image loader](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage), which tells the directive how to format URLs for your images. Using a loader allows you to define your images with short, relative URLs:
 
 ```ts
-providers: [provideImgixLoader('https://my.base.url/')];
+providers: [provideImgixLoader('https://my.base.url/')],
 ```
 
 Final URL will be 'https://my.base.url/image.png'
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
index b9cb34ad5..2bdbba37a 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
@@ -38,7 +38,7 @@ import { NgOptimizedImage } from '@angular/common';
 template: `     ...
     <li>
       静的画像:
-      <img ngSrc="/assets/logo.svg" alt="Angular ロゴ" width="32" height="32" />
+      <img ngSrc="/logo.svg" alt="Angular ロゴ" width="32" height="32" />
     </li>
     <li>
       動的画像:
@@ -59,7 +59,8 @@ imports: [NgOptimizedImage],
 画像に対して静的な `height` と `width` を指定できない場合、または指定したくない場合は、[fill 属性](https://web.dev/articles/cls)を使用します。画像を「背景画像」のように動作させ、そのコンテナ要素を塗りつぶすようにできます。
 
 ```angular-html
-<div class="image-container"> // コンテナ div は 'position: "relative"'
+// コンテナ div は 'position: "relative"'
+<div class="image-container">
   <img ngSrc="www.example.com/image.png" fill />
 </div>
 ```
@@ -83,7 +84,7 @@ NOTE: `fill` 画像が正しくレンダリングされるためには、その
 `NgOptimizedImage` では、[画像ローダー](guide/image-optimization#configuring-an-image-loader-for-ngoptimizedimage) を指定できます。これは、ディレクティブに画像のURLをどのようにフォーマットするかを指示します。ローダーを使用すると、画像を短く、相対的なURLで定義できます。
 
 ```ts
-providers: [provideImgixLoader('https://my.base.url/')];
+providers: [provideImgixLoader('https://my.base.url/')],
 ```
 
 最終的なURLは 'https://my.base.url/image.png' になります。
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md
index 82ba5708c..768283ec8 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.en.md
@@ -2,7 +2,7 @@
 
 Now that you've set up the app to use Angular Router, you need to define the routes.
 
-NOTE: Learn more about [defining a basic route in the in-depth guide](/guide/routing/common-router-tasks#defining-a-basic-route).
+NOTE: Learn more about [defining a basic route in the in-depth guide](/guide/routing/define-routes).
 
 In this activity, you'll learn how to add and configure routes with your app.
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
index 82aebdd46..bff718084 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
@@ -2,7 +2,7 @@
 
 Angular Routerを使用するようにアプリケーションを設定したので、次にルートを定義する必要があります。
 
-NOTE: [基本的なルートの定義方法についての詳細ガイド](/guide/routing/common-router-tasks#defining-a-basic-route)もご覧ください。
+NOTE: [基本的なルートの定義方法についての詳細ガイド](/guide/routing/define-routes)もご覧ください。
 
 このアクティビティでは、アプリケーションにルートを追加して構成する方法について学びます。
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md
index 523135ebb..7e12c4e80 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.en.md
@@ -2,7 +2,7 @@
 
 In the app's current state, the entire page refreshes when we click on an internal link that exists within the app. While this may not seem significant with a small app, this can have performance implications for larger pages with more content where users have to redownload assets and run calculations again.
 
-NOTE: Learn more about [adding routes to your application in the in-depth guide](/guide/routing/common-router-tasks#add-your-routes-to-your-application).
+NOTE: Learn more about [adding routes to your application in the in-depth guide](/guide/routing/define-routes#adding-the-router-to-your-application).
 
 In this activity, you'll learn how to leverage the `RouterLink` directive to make the most use of Angular Router.
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.md
index 1592f72a7..157a4d585 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/14-routerLink/README.md
@@ -2,7 +2,7 @@
 
 アプリケーションの現在の状態では、アプリケーション内に存在する内部リンクをクリックすると、ページ全体がリフレッシュされます。これは小さなアプリケーションではそれほど重要ではないように思えるかもしれませんが、ユーザーがアセットを再ダウンロードして計算をやり直す必要がある、より多くのコンテンツを持つ大きなページでは、パフォーマンスに影響を与える可能性があります。
 
-NOTE: [アプリケーションにルートを追加する方法についての詳細ガイド](/guide/routing/common-router-tasks#add-your-routes-to-your-application)をご覧ください。
+NOTE: [アプリケーションにルートを追加する方法についての詳細ガイド](/guide/routing/define-routes#adding-the-router-to-your-application)をご覧ください。
 
 このアクティビティでは、Angular Routerを最大限活用するために、`RouterLink`ディレクティブを利用する方法を学習します。
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md
index 295938dc6..e42c67847 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.en.md
@@ -111,9 +111,7 @@ You have access to the form values, now it is time to handle the submission even
 Angular has an event handler for this specific purpose called `ngSubmit`. Update the form element to call the `handleSubmit` method when the form is submitted.
 
 ```angular-html {highlight:[3]}
-<form
-  [formGroup]="profileForm"
-  (ngSubmit)="handleSubmit()">
+<form [formGroup]="profileForm" (ngSubmit)="handleSubmit()"></form>
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md
index 06b79d004..0efa1e19c 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md
@@ -111,9 +111,7 @@ handleSubmit() {
 Angularには、`ngSubmit`というこの特定の目的に合わせたイベントハンドラーがあります。フォーム要素を更新して、フォームが送信されたときに`handleSubmit`メソッドを呼び出します。
 
 ```angular-html {highlight:[3]}
-<form
-  [formGroup]="profileForm"
-  (ngSubmit)="handleSubmit()">
+<form [formGroup]="profileForm" (ngSubmit)="handleSubmit()"></form>
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md
index 0af63ff42..33334d0c7 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.en.md
@@ -52,7 +52,7 @@ Next, update `@Component()` decorator `imports` to include a reference to `Lower
 Finally, in `app.ts` update the template to include the `lowercase` pipe:
 
 ```angular-html
-template: `{{username | lowercase }}`
+template: `{{ username | lowercase }}`
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.md
index f63dfac4b..8e1311c1b 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/22-pipes/README.md
@@ -52,7 +52,7 @@ import {LowerCasePipe} from '@angular/common';
 最後に、`app.ts` のテンプレートを更新して、`lowercase` パイプを含めます。
 
 ```angular-html
-template: `{{username | lowercase }}`
+template: `{{ username | lowercase }}`
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md
index a07ce0d0a..677b75be6 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.en.md
@@ -11,7 +11,7 @@ In this activity, you will work with some pipes and pipe parameters.
 To pass parameters to a pipe, use the `:` syntax followed by the parameter value. Here's an example:
 
 ```angular-html
-template: `{{ date | date:'medium' }}`;
+template: `{{ date | date: 'medium' }}`;
 ```
 
 The output is `Jun 15, 2015, 9:43:11 PM`.
@@ -25,9 +25,8 @@ Time to customize some pipe output:
 In `app.ts`, update the template to include parameter for the `decimal` pipe.
 
 ```angular-html {highlight:[3]}
-template: `
-  ...
-  <li>Number with "decimal" {{ num | number:"3.2-2" }}</li>
+template: ` ...
+<li>Number with "decimal" {{ num | number: '3.2-2' }}</li>
 `
 ```
 
@@ -40,9 +39,8 @@ NOTE: What's that format? The parameter for the `DecimalPipe` is called `digitsI
 Now, update the template to use the `date` pipe.
 
 ```angular-html {highlight:[3]}
-template: `
-  ...
-  <li>Date with "date" {{ birthday | date: 'medium' }}</li>
+template: ` ...
+<li>Date with "date" {{ birthday | date: 'medium' }}</li>
 `
 ```
 
@@ -55,9 +53,8 @@ For extra fun, try some different parameters for `date`. More information can be
 For your last task, update the template to use the `currency` pipe.
 
 ```angular-html {highlight:[3]}
-template: `
-  ...
-  <li>Currency with "currency" {{ cost | currency }}</li>
+template: ` ...
+<li>Currency with "currency" {{ cost | currency }}</li>
 `
 ```
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md
index c1fe19ce9..6f02b035a 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md
@@ -11,7 +11,7 @@ NOTE: 詳しくは、[パイプによるデータのフォーマットに関す
 パイプにパラメーターを渡すには、`:`構文の後にパラメーター値を記述します。例を以下に示します。
 
 ```angular-html
-template: `{{ date | date:'medium' }}`;
+template: `{{ date | date: 'medium' }}`;
 ```
 
 出力は `Jun 15, 2015, 9:43:11 PM` となります。
@@ -25,9 +25,8 @@ template: `{{ date | date:'medium' }}`;
 `app.ts` のテンプレートを更新して、`decimal` パイプのパラメーターを含めます。
 
 ```ts {highlight:[3]}
-template: `
-  ...
-  <li>Number with "decimal" {{ num | number:"3.2-2" }}</li>
+template: ` ...
+<li>Number with "decimal" {{ num | number: '3.2-2' }}</li>
 `
 ```
 
@@ -40,9 +39,8 @@ NOTE: このフォーマットは何でしょう？`DecimalPipe` のパラメー
 次に、テンプレートを更新して `date` パイプを使用します。
 
 ```ts {highlight:[3]}
-template: `
-  ...
-  <li>Date with "date" {{ birthday | date: 'medium' }}</li>
+template: ` ...
+<li>Date with "date" {{ birthday | date: 'medium' }}</li>
 `
 ```
 
@@ -55,9 +53,8 @@ template: `
 最後の作業として、テンプレートを更新して `currency` パイプを使用します。
 
 ```ts {highlight:[3]}
-template: `
-  ...
-  <li>Currency with "currency" {{ cost | currency }}</li>
+template: ` ...
+<li>Currency with "currency" {{ cost | currency }}</li>
 `
 ```
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md
index 56eb71a28..eb67d0fb9 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.en.md
@@ -18,8 +18,7 @@ In this example, there are two components `User` and `App`.
 Update the `App` template to include a reference to the `User` which uses the selector `app-user`. Be sure to add `User` to the imports array of `App`, this makes it available for use in the `App` template.
 
 ```angular-html
-template: `<app-user />`,
-imports: [User]
+template: `<app-user />`, imports: [User]
 ```
 
 The component now displays the message `Username: youngTech`. You can update the template code to include more markup.
@@ -29,7 +28,9 @@ The component now displays the message `Username: youngTech`. You can update the
 Because you can use any HTML markup that you want in a template, try updating the template for `App` to also include more HTML elements. This example will add a `<section>` element as the parent of the `<app-user>` element.
 
 ```angular-html
-template: `<section><app-user /></section>`,
+template: `
+<section><app-user /></section>
+`,
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
index c6da624a8..ecea81b50 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
@@ -18,8 +18,7 @@ NOTE: [エッセンシャルガイドのコンポーネントの使用方法](/e
 `App` テンプレートを更新して、`app-user`セレクターを使用する `User` への参照を含めます。`App` のインポート配列に `User` を追加してください。これにより、`App` テンプレートで使用できるようになります。
 
 ```angular-html
-template: `<app-user />`,
-imports: [User]
+template: `<app-user />`, imports: [User]
 ```
 
 コンポーネントは、`Username: youngTech` というメッセージを表示するようになりました。テンプレートコードを更新して、さらにマークアップを含めることができます。
@@ -29,7 +28,9 @@ imports: [User]
 テンプレートでは任意のHTMLマークアップを使用できるため、`App`のテンプレートを更新して、さらにHTML要素を含めてみてください。この例では、`<app-user>` 要素の親として `<section>` 要素を追加します。
 
 ```angular-html
-template: `<section><app-user /></section>`,
+template: `
+<section><app-user /></section>
+`,
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md
index e9e7bb572..c0ff4ec97 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.en.md
@@ -51,8 +51,11 @@ Here's an example:
 
 ```angular-html
 template: `
-  @if (isServerRunning) { ... }
-  @else { ... }
+@if (isServerRunning) {
+  ...
+} @else {
+  ...
+}
 `;
 ```
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md
index 0002c9f62..435bbbf22 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md
@@ -51,8 +51,11 @@ Angularは現在、`@else`構文を使用してelseケースを定義するた
 
 ```angular-html
 template: `
-  @if (isServerRunning) { ... }
-  @else { ... }
+@if (isServerRunning) {
+  ...
+} @else {
+  ...
+}
 `;
 ```
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md
index b4458ab9a..8d47c7874 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.en.md
@@ -13,7 +13,7 @@ In this activity, you'll learn how to use property binding in templates.
 To bind to an element's attribute, wrap the attribute name in square brackets. Here's an example:
 
 ```angular-html
-<img alt="photo" [src]="imageURL">
+<img alt="photo" [src]="imageURL" />
 ```
 
 In this example, the value of the `src` attribute will be bound to the class property `imageURL`. Whatever value `imageURL` has will be set as the `src` attribute of the `img` tag.
@@ -47,4 +47,4 @@ Next, bind the `contentEditable` attribute of the `div` to the `isEditable` prop
 
 The div is now editable. Nice work 👍
 
-Property binding is one of Angular's many powerful features. If you'd like to learn more checkout [the Angular documentation](guide/templates/property-binding).
+Property binding is one of Angular's many powerful features. If you'd like to learn more checkout [the Angular documentation](guide/templates/binding#css-class-and-style-property-bindings).
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.md
index 12632463f..dc14289fe 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/6-property-binding/README.md
@@ -13,7 +13,7 @@ NOTE: 詳しくは、[エッセンシャルガイドの動的なプロパティ
 要素の属性にバインドするには、属性名を角括弧で囲みます。例を以下に示します。
 
 ```angular-html
-<img alt="photo" [src]="imageURL">
+<img alt="photo" [src]="imageURL" />
 ```
 
 この例では、`src`属性の値はクラスプロパティ`imageURL`にバインドされます。`imageURL`が持つ値は、`img`タグの`src`属性として設定されます。
@@ -47,4 +47,4 @@ export class App {
 
 これで、divは編集可能になりました。すばらしいですね👍
 
-プロパティバインディングは、Angularの強力な機能の1つです。詳細については、[Angularドキュメント](guide/templates/property-binding)をご覧ください。
+プロパティバインディングは、Angularの強力な機能の1つです。詳細については、[Angularドキュメント](guide/templates/binding#css-class-and-style-property-bindings)をご覧ください。
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md
index f36da4ae0..5c5cbfb39 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.en.md
@@ -42,6 +42,7 @@ showSecretMessage() {
 <docs-step title="Bind to the template event">
 Update the template code in `app.ts` to bind to the `mouseover` event of the `section` element.
 
+<!-- prettier-ignore -->
 ```angular-html
 <section (mouseover)="showSecretMessage()">
 ```
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.md
index d298b6cd6..5c5ddbc35 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/7-event-handling/README.md
@@ -42,6 +42,7 @@ showSecretMessage() {
 <docs-step title="テンプレートイベントにバインド">
 `app.t`のテンプレートコードを更新し、`section`要素の`mouseover`イベントにバインドします。
 
+<!-- prettier-ignore -->
 ```angular-html
 <section (mouseover)="showSecretMessage()">
 ```

From e2aa1328742b0de645d109112c7e5e7a05c10eda Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:40:53 +0900
Subject: [PATCH 10/55] fix(docs): migrate signal-forms tutorials

---
 .../tutorials/signal-forms/intro/README.en.md |  2 +-
 .../tutorials/signal-forms/intro/README.md    |  2 +-
 .../2-connect-form-template/README.en.md      | 28 +++++++++----------
 .../steps/2-connect-form-template/README.md   | 28 +++++++++----------
 .../steps/3-add-validation/README.en.md       |  2 +-
 .../steps/3-add-validation/README.md          |  2 +-
 .../steps/4-display-errors/README.en.md       |  4 +--
 .../steps/4-display-errors/README.md          |  4 +--
 .../steps/5-add-submission/README.en.md       |  2 +-
 .../steps/5-add-submission/README.md          |  2 +-
 .../steps/6-next-steps/README.en.md           |  2 +-
 .../signal-forms/steps/6-next-steps/README.md |  2 +-
 12 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md b/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md
index 943de65bb..b5fa5ef1e 100644
--- a/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md
+++ b/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md
@@ -2,7 +2,7 @@
 
 This interactive tutorial will teach you how to build reactive forms using Angular's experimental Signal Forms API.
 
-IMPORTANT: Signal Forms is currently [experimental](reference/releases#experimental). The API may change before stabilizing. Check the [official documentation](guide/forms/signal-forms) for the latest updates.
+IMPORTANT: Signal Forms is currently [experimental](reference/releases#experimental). The API may change before stabilizing. Check the [official documentation](guide/forms/signals/overview) for the latest updates.
 
 ## How to use this tutorial
 
diff --git a/adev-ja/src/content/tutorials/signal-forms/intro/README.md b/adev-ja/src/content/tutorials/signal-forms/intro/README.md
index d0a66f9ca..ed4af40f9 100644
--- a/adev-ja/src/content/tutorials/signal-forms/intro/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/intro/README.md
@@ -2,7 +2,7 @@
 
 このインタラクティブなチュートリアルでは、Angularの実験的なシグナルフォームAPIを使用してリアクティブフォームを構築する方法を学びます。
 
-IMPORTANT: シグナルフォームは現在[実験的](reference/releases#experimental)です。安定化する前にAPIが変更される可能性があります。最新の更新については[公式ドキュメント](guide/forms/signal-forms)を確認してください。
+IMPORTANT: シグナルフォームは現在[実験的](reference/releases#experimental)です。安定化する前にAPIが変更される可能性があります。最新の更新については[公式ドキュメント](guide/forms/signals/overview)を確認してください。
 
 ## このチュートリアルの使い方 {#how-to-use-this-tutorial}
 
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md
index de371dc11..e72b9d32a 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.en.md
@@ -1,11 +1,11 @@
 # Connect your form to the template
 
-Now, you need to connect your form to the template using the `[field]` directive. This creates two-way data binding between your form model and the input elements.
+Now, you need to connect your form to the template using the `[formField]` directive. This creates two-way data binding between your form model and the input elements.
 
 In this lesson, you'll learn how to:
 
-- Import the `Field` directive
-- Use the `[field]` directive to bind form fields to inputs
+- Import the `FormField` directive
+- Use the `[formField]` directive to bind form fields to inputs
 - Connect text inputs and checkboxes to your form
 - Display form field values in the template
 
@@ -15,17 +15,17 @@ Let's wire up the template!
 
 <docs-workflow>
 
-<docs-step title="Import the Field directive">
-Import the `Field` directive from `@angular/forms/signals` and add it to your component's imports array:
+<docs-step title="Import the FormField directive">
+Import the `FormField` directive from `@angular/forms/signals` and add it to your component's imports array:
 
 ```ts
-import { form, Field } from '@angular/forms/signals';
+import { form, FormField } from '@angular/forms/signals';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [Field],
+  imports: [FormField],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 ```
@@ -33,29 +33,29 @@ import { form, Field } from '@angular/forms/signals';
 </docs-step>
 
 <docs-step title="Bind the email field">
-In your template, add the `[field]` directive to the email input:
+In your template, add the `[formField]` directive to the email input:
 
 ```html
-<input type="email" [field]="loginForm.email" />
+<input type="email" [formField]="loginForm.email" />
 ```
 
 The `loginForm.email` expression accesses the email field from your form.
 </docs-step>
 
 <docs-step title="Bind the password field">
-Add the `[field]` directive to the password input:
+Add the `[formField]` directive to the password input:
 
 ```html
-<input type="password" [field]="loginForm.password" />
+<input type="password" [formField]="loginForm.password" />
 ```
 
 </docs-step>
 
 <docs-step title="Bind the checkbox field">
-Add the `[field]` directive to the checkbox input:
+Add the `[formField]` directive to the checkbox input:
 
 ```html
-<input type="checkbox" [field]="loginForm.rememberMe" />
+<input type="checkbox" [formField]="loginForm.rememberMe" />
 ```
 
 </docs-step>
@@ -74,6 +74,6 @@ Form field values are signals, so the displayed values update automatically as y
 
 </docs-workflow>
 
-Great work! You've connected your form to the template and displayed the form values. The `[field]` directive handles two-way data binding automatically - as you type, the `loginModel` signal updates, and the displayed values update immediately.
+Great work! You've connected your form to the template and displayed the form values. The `[formField]` directive handles two-way data binding automatically - as you type, the `loginModel` signal updates, and the displayed values update immediately.
 
 Next, you'll learn [how to add validation to your form](/tutorials/signal-forms/3-add-validation)!
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
index cf1969a73..d8ad7b4ad 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
@@ -1,11 +1,11 @@
 # フォームをテンプレートに接続
 
-次に、`[field]` ディレクティブを使用してフォームをテンプレートに接続する必要があります。これにより、フォームモデルと入力要素の間に双方向データバインディングが作成されます。
+次に、`[formField]` ディレクティブを使用してフォームをテンプレートに接続する必要があります。これにより、フォームモデルと入力要素の間に双方向データバインディングが作成されます。
 
 このレッスンでは、次の方法を学びます:
 
-- `Field` ディレクティブをインポート
-- `[field]` ディレクティブを使用してフォームフィールドを入力にバインド
+- `FormField` ディレクティブをインポート
+- `[formField]` ディレクティブを使用してフォームフィールドを入力にバインド
 - テキスト入力とチェックボックスをフォームに接続
 - テンプレートにフォームフィールド値を表示
 
@@ -15,17 +15,17 @@
 
 <docs-workflow>
 
-<docs-step title="Fieldディレクティブをインポート">
-`@angular/forms/signals` から `Field` ディレクティブをインポートし、コンポーネントのimports配列に追加します:
+<docs-step title="FormFieldディレクティブをインポート">
+`@angular/forms/signals` から `FormField` ディレクティブをインポートし、コンポーネントのimports配列に追加します:
 
 ```ts
-import { form, Field } from '@angular/forms/signals';
+import { form, FormField } from '@angular/forms/signals';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.html',
   styleUrl: './app.css',
-  imports: [Field],
+  imports: [FormField],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 ```
@@ -33,29 +33,29 @@ import { form, Field } from '@angular/forms/signals';
 </docs-step>
 
 <docs-step title="emailフィールドをバインド">
-テンプレートで、email入力に `[field]` ディレクティブを追加します:
+テンプレートで、email入力に `[formField]` ディレクティブを追加します:
 
 ```html
-<input type="email" [field]="loginForm.email" />
+<input type="email" [formField]="loginForm.email" />
 ```
 
 `loginForm.email` 式は、フォームからemailフィールドにアクセスします。
 </docs-step>
 
 <docs-step title="passwordフィールドをバインド">
-password入力に `[field]` ディレクティブを追加します:
+password入力に `[formField]` ディレクティブを追加します:
 
 ```html
-<input type="password" [field]="loginForm.password" />
+<input type="password" [formField]="loginForm.password" />
 ```
 
 </docs-step>
 
 <docs-step title="checkboxフィールドをバインド">
-checkbox入力に `[field]` ディレクティブを追加します:
+checkbox入力に `[formField]` ディレクティブを追加します:
 
 ```html
-<input type="checkbox" [field]="loginForm.rememberMe" />
+<input type="checkbox" [formField]="loginForm.rememberMe" />
 ```
 
 </docs-step>
@@ -74,6 +74,6 @@ checkbox入力に `[field]` ディレクティブを追加します:
 
 </docs-workflow>
 
-すばらしい! フォームをテンプレートに接続し、フォーム値を表示しました。`[field]` ディレクティブは双方向データバインディングを自動的に処理します - 入力すると、`loginModel` シグナルが更新され、表示される値が即座に更新されます。
+すばらしい! フォームをテンプレートに接続し、フォーム値を表示しました。`[formField]` ディレクティブは双方向データバインディングを自動的に処理します - 入力すると、`loginModel` シグナルが更新され、表示される値が即座に更新されます。
 
 次に、[フォームにバリデーションを追加する方法](/tutorials/signal-forms/3-add-validation)を学びます!
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.en.md
index c90742750..911633123 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.en.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.en.md
@@ -18,7 +18,7 @@ Let's add validation!
 Import the `required` and `email` validators from `@angular/forms/signals`:
 
 ```ts
-import {form, Field, required, email} from '@angular/forms/signals';
+import {form, FormField, required, email} from '@angular/forms/signals';
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
index ebdff78c9..5be243ffc 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
@@ -18,7 +18,7 @@
 `@angular/forms/signals` から `required` と `email` バリデーターをインポートします:
 
 ```ts
-import {form, Field, required, email} from '@angular/forms/signals';
+import {form, FormField, required, email} from '@angular/forms/signals';
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md
index 39facf6ee..f5b4e95e9 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.en.md
@@ -21,7 +21,7 @@ Below the email input, add conditional error display. This will only show errors
 ```angular-html
 <label>
   Email
-  <input type="email" [field]="loginForm.email" />
+  <input type="email" [formField]="loginForm.email" />
 </label>
 @if (loginForm.email().invalid() && loginForm.email().touched()) {
   <div class="error">
@@ -41,7 +41,7 @@ Below the password input, add the same pattern for password errors:
 ```angular-html
 <label>
   Password
-  <input type="password" [field]="loginForm.password" />
+  <input type="password" [formField]="loginForm.password" />
 </label>
 @if (loginForm.password().invalid() && loginForm.password().touched()) {
   <div class="error">
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
index 6ad1ea5db..a863fc86d 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
@@ -21,7 +21,7 @@ email入力の下に、条件付きエラー表示を追加します。これは
 ```angular-html
 <label>
   Email
-  <input type="email" [field]="loginForm.email" />
+  <input type="email" [formField]="loginForm.email" />
 </label>
 @if (loginForm.email().invalid() && loginForm.email().touched()) {
   <div class="error">
@@ -41,7 +41,7 @@ password入力の下に、passwordエラーの同じパターンを追加しま
 ```angular-html
 <label>
   Password
-  <input type="password" [field]="loginForm.password" />
+  <input type="password" [formField]="loginForm.password" />
 </label>
 @if (loginForm.password().invalid() && loginForm.password().touched()) {
   <div class="error">
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md
index 678062d4e..36f8585f5 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.en.md
@@ -19,7 +19,7 @@ Let's complete the form!
 Import the `submit` function from `@angular/forms/signals`:
 
 ```ts
-import {form, Field, required, email, submit} from '@angular/forms/signals';
+import {form, FormField, required, email, submit} from '@angular/forms/signals';
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
index 04cfb4e68..93817e691 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
@@ -19,7 +19,7 @@
 `@angular/forms/signals` から `submit` 関数をインポートします:
 
 ```ts
-import {form, Field, required, email, submit} from '@angular/forms/signals';
+import {form, FormField, required, email, submit} from '@angular/forms/signals';
 ```
 
 </docs-step>
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md
index d3d8d39a5..86b156c4c 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md
@@ -7,7 +7,7 @@ You've completed the Signal Forms tutorial and built a complete login form from
 Throughout this tutorial, you learned the fundamentals of Angular Signal Forms:
 
 1. **Form Models** - Creating type-safe form data with signals and the `form()` function
-2. **Field Binding** - Using the `[field]` directive for two-way data binding and displaying the field with `value()`
+2. **Field Binding** - Using the `[formField]` directive for two-way data binding and displaying the field with `value()`
 3. **Validation** - Applying built-in validators (such as `required()`, `email()`) with custom messages
 4. **Error Display** - Showing validation errors conditionally based on field state
 5. **Form Submission** - Handling form submission with the `submit()` function
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
index d700d107d..ba1e73722 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
@@ -7,7 +7,7 @@
 このチュートリアル全体を通して、Angularシグナルフォームの基礎を学びました:
 
 1. **フォームモデル** - シグナルと `form()` 関数を使用した型安全なフォームデータの作成
-2. **フィールドバインディング** - 双方向データバインディングのための `[field]` ディレクティブの使用と、`value()` によるフィールドの表示
+2. **フィールドバインディング** - 双方向データバインディングのための `[formField]` ディレクティブの使用と、`value()` によるフィールドの表示
 3. **バリデーション** - カスタムメッセージを使用した組み込みバリデーター（`required()`、`email()` など）の適用
 4. **エラー表示** - フィールドの状態に基づいたバリデーションエラーの条件付き表示
 5. **フォーム送信** - `submit()` 関数を使用したフォーム送信の処理

From cc67d7888c5d7012b609d2b4b1a652c70a253b8a Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:41:14 +0900
Subject: [PATCH 11/55] fix(docs): migrate signals tutorials

---
 .../README.en.md                               |  2 +-
 .../README.md                                  |  2 +-
 .../README.en.md                               |  4 ++--
 .../README.md                                  |  4 ++--
 .../README.en.md                               |  3 ++-
 .../README.md                                  |  3 ++-
 .../README.en.md                               | 18 ++++++------------
 .../8-using-signals-with-directives/README.md  | 18 ++++++------------
 8 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.en.md b/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.en.md
index 82b786717..0a67202cd 100644
--- a/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.en.md
+++ b/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.en.md
@@ -1,6 +1,6 @@
 # Deriving state with computed signals
 
-Now that you've learned [how to create and update signals](/tutorials/signals/1-creating-and-updating-your-first-signal), let's learn about computed signals. Computed signals are derived values that automatically update when their dependencies change. They're perfect for creating reactive calculations based on other signals.
+Now that you've learned [how to create and update signals](/tutorials/signals/1-creating-your-first-signal), let's learn about computed signals. Computed signals are derived values that automatically update when their dependencies change. They're perfect for creating reactive calculations based on other signals.
 
 In this activity, you'll learn how to use the `computed()` function to create derived state that updates automatically when the underlying signals change.
 
diff --git a/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md b/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
index ca53b2616..5df945373 100644
--- a/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
+++ b/adev-ja/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
@@ -1,6 +1,6 @@
 # 算出シグナルで状態を派生させる
 
-[シグナルの作成と更新方法](/tutorials/signals/1-creating-and-updating-your-first-signal)を学んだところで、算出シグナルについて学びましょう。算出シグナルは、依存関係が変更されると自動的に更新される派生値です。他のシグナルに基づいてリアクティブな計算を作成するのに最適です。
+[シグナルの作成と更新方法](/tutorials/signals/1-creating-your-first-signal)を学んだところで、算出シグナルについて学びましょう。算出シグナルは、依存関係が変更されると自動的に更新される派生値です。他のシグナルに基づいてリアクティブな計算を作成するのに最適です。
 
 このアクティビティでは、`computed()`関数を使用して、基になるシグナルが変更されたときに自動的に更新される派生状態を作成する方法を学びます。
 
diff --git a/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.en.md b/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.en.md
index 9c78d2f94..cc7bb569a 100644
--- a/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.en.md
+++ b/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.en.md
@@ -15,7 +15,7 @@ Add `resource` to your existing imports and import the fake API function.
 // Add resource to existing imports
 import {Component, signal, computed, resource, ChangeDetectionStrategy} from '@angular/core';
 // Import mock API function
-import {loadUser} from './user-api';
+import {getUserData} from './user-api';
 ```
 
 </docs-step>
@@ -28,7 +28,7 @@ userId = signal(1);
 
 userResource = resource({
   params: () => ({id: this.userId()}),
-  loader: (params) => loadUser(params.params.id),
+  loader: (params) => getUserData(params.params.id),
 });
 ```
 
diff --git a/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md b/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md
index 72c0222b2..211bce385 100644
--- a/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md
+++ b/adev-ja/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md
@@ -15,7 +15,7 @@
 // Add resource to existing imports
 import {Component, signal, computed, resource, ChangeDetectionStrategy} from '@angular/core';
 // Import mock API function
-import {loadUser} from './user-api';
+import {getUserData} from './user-api';
 ```
 
 </docs-step>
@@ -28,7 +28,7 @@ userId = signal(1);
 
 userResource = resource({
   params: () => ({id: this.userId()}),
-  loader: (params) => loadUser(params.params.id),
+  loader: (params) => getUserData(params.params.id),
 });
 ```
 
diff --git a/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.en.md b/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.en.md
index e532f9e78..fe785da71 100644
--- a/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.en.md
+++ b/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.en.md
@@ -31,7 +31,8 @@ Update the template in `product-card` to display the signal input values.
 <div class="product-card">
   <h3>{{ name() }}</h3>
   <p class="price">\${{ price() }}</p>
-  <p class="status">Status:
+  <p class="status">
+    Status:
     @if (available()) {
       Available
     } @else {
diff --git a/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md b/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md
index 86432467b..2bd7f886e 100644
--- a/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md
+++ b/adev-ja/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md
@@ -31,7 +31,8 @@ available = input<boolean>(true);
 <div class="product-card">
   <h3>{{ name() }}</h3>
   <p class="price">\${{ price() }}</p>
-  <p class="status">Status:
+  <p class="status">
+    Status:
     @if (available()) {
       Available
     } @else {
diff --git a/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.en.md b/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.en.md
index f5e03e542..296764274 100644
--- a/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.en.md
+++ b/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.en.md
@@ -78,21 +78,15 @@ Update the app template to demonstrate the reactive directive:
 
 ```angular-html
 template: `
-  <div>
-    <h1>Directive with Signals</h1>
+<div>
+  <h1>Directive with Signals</h1>
 
-    <div highlight color="yellow" [intensity]="0.2">
-      Hover me - Yellow highlight
-    </div>
+  <div highlight color="yellow" [intensity]="0.2">Hover me - Yellow highlight</div>
 
-    <div highlight color="blue" [intensity]="0.4">
-      Hover me - Blue highlight
-    </div>
+  <div highlight color="blue" [intensity]="0.4">Hover me - Blue highlight</div>
 
-    <div highlight color="green" [intensity]="0.6">
-      Hover me - Green highlight
-    </div>
-  </div>
+  <div highlight color="green" [intensity]="0.6">Hover me - Green highlight</div>
+</div>
 `,
 ```
 
diff --git a/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md b/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
index b1634f096..80cd6c82f 100644
--- a/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
+++ b/adev-ja/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
@@ -78,21 +78,15 @@ export class HighlightDirective {
 
 ```angular-html
 template: `
-  <div>
-    <h1>Directive with Signals</h1>
+<div>
+  <h1>Directive with Signals</h1>
 
-    <div highlight color="yellow" [intensity]="0.2">
-      Hover me - Yellow highlight
-    </div>
+  <div highlight color="yellow" [intensity]="0.2">Hover me - Yellow highlight</div>
 
-    <div highlight color="blue" [intensity]="0.4">
-      Hover me - Blue highlight
-    </div>
+  <div highlight color="blue" [intensity]="0.4">Hover me - Blue highlight</div>
 
-    <div highlight color="green" [intensity]="0.6">
-      Hover me - Green highlight
-    </div>
-  </div>
+  <div highlight color="green" [intensity]="0.6">Hover me - Green highlight</div>
+</div>
 `,
 ```
 

From 7fabc05df39006312b29db423295e0c0decdf2b9 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:55:50 +0900
Subject: [PATCH 12/55] fix(docs): migrate guide/components (formatting)

---
 .../src/content/guide/components/advanced-configuration.en.md   | 2 +-
 adev-ja/src/content/guide/components/advanced-configuration.md  | 2 +-
 adev-ja/src/content/guide/components/selectors.en.md            | 2 +-
 adev-ja/src/content/guide/components/selectors.md               | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/adev-ja/src/content/guide/components/advanced-configuration.en.md b/adev-ja/src/content/guide/components/advanced-configuration.en.md
index 4e71034ee..875e44eba 100644
--- a/adev-ja/src/content/guide/components/advanced-configuration.en.md
+++ b/adev-ja/src/content/guide/components/advanced-configuration.en.md
@@ -40,7 +40,7 @@ import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 @Component({
   ...,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: '<some-unknown-component></some-unknown-component>'
+  template: '<some-unknown-component />'
 })
 export class ComponentWithCustomElements { }
 ```
diff --git a/adev-ja/src/content/guide/components/advanced-configuration.md b/adev-ja/src/content/guide/components/advanced-configuration.md
index ffc6d52d9..d33a1340e 100644
--- a/adev-ja/src/content/guide/components/advanced-configuration.md
+++ b/adev-ja/src/content/guide/components/advanced-configuration.md
@@ -40,7 +40,7 @@ import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 @Component({
   ...,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: '<some-unknown-component></some-unknown-component>'
+  template: '<some-unknown-component />'
 })
 export class ComponentWithCustomElements { }
 ```
diff --git a/adev-ja/src/content/guide/components/selectors.en.md b/adev-ja/src/content/guide/components/selectors.en.md
index 8539c7f18..a04926ba0 100644
--- a/adev-ja/src/content/guide/components/selectors.en.md
+++ b/adev-ja/src/content/guide/components/selectors.en.md
@@ -140,7 +140,7 @@ without extra work. This is especially valuable for ARIA attributes such as `ari
 Angular does not report errors when it encounters custom attributes that don't match an available
 component. When using components with attribute selectors, consumers may forget to import the
 component or its NgModule, resulting in the component not rendering.
-See [Importing and using components](guide/components/importing) for more information.
+See [Importing and using components](guide/components#imports-in-the-component-decorator) for more information.
 
 Components that define attribute selectors should use lowercase, dash-case attributes. You can
 follow the same prefixing recommendation described above.
diff --git a/adev-ja/src/content/guide/components/selectors.md b/adev-ja/src/content/guide/components/selectors.md
index 9e0654c4d..f08313f6f 100644
--- a/adev-ja/src/content/guide/components/selectors.md
+++ b/adev-ja/src/content/guide/components/selectors.md
@@ -140,7 +140,7 @@ export class YouTubeUploadButton { }
 Angularは、使用可能なコンポーネントと一致しないカスタム属性に出会ってもエラーを報告しません。
 属性セレクターを使用してコンポーネントを使用する場合、
 利用者はコンポーネントまたはそのNgModuleをインポートし忘れることがあり、その結果、コンポーネントがレンダリングされません。
-詳細については、[コンポーネントのインポートと使用](guide/components/importing) を参照してください。
+詳細については、[コンポーネントのインポートと使用](guide/components#imports-in-the-component-decorator) を参照してください。
 
 属性セレクターを定義するコンポーネントは、小文字、ダッシュ区切りの属性を使用する必要があります。
 上記で説明したプレフィックスの推奨事項に従うことができます。

From 5dd1f9068517545e85d13b36fdd8bb0d04a49072 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:56:25 +0900
Subject: [PATCH 13/55] fix(docs): migrate guide/directives (link + text)

---
 adev-ja/src/content/guide/directives/attribute-directives.en.md | 2 +-
 adev-ja/src/content/guide/directives/attribute-directives.md    | 2 +-
 adev-ja/src/content/guide/directives/overview.en.md             | 2 +-
 adev-ja/src/content/guide/directives/overview.md                | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/adev-ja/src/content/guide/directives/attribute-directives.en.md b/adev-ja/src/content/guide/directives/attribute-directives.en.md
index e07205484..f5af756de 100644
--- a/adev-ja/src/content/guide/directives/attribute-directives.en.md
+++ b/adev-ja/src/content/guide/directives/attribute-directives.en.md
@@ -121,7 +121,7 @@ This section guides you through configuring your application so the developer ca
    <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="mouse-enter"/>
 
 3. To bind to the `AppComponent.color` and fall back to "violet" as the default color, add the following HTML.
-   In this case, the `defaultColor` binding doesn't use square brackets, `[]`, because it is static.
+   In this case, the `defaultColor` binding doesn't use square brackets, `[]`, because the value is a static string, not a dynamic expression.
 
    <docs-code header="app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="defaultColor"/>
 
diff --git a/adev-ja/src/content/guide/directives/attribute-directives.md b/adev-ja/src/content/guide/directives/attribute-directives.md
index f4ec819d2..dc35f294b 100644
--- a/adev-ja/src/content/guide/directives/attribute-directives.md
+++ b/adev-ja/src/content/guide/directives/attribute-directives.md
@@ -122,7 +122,7 @@ HELPFUL: ハンドラーは、ホストDOM要素`el`に色を設定するヘル
    <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="mouse-enter"/>
 
 3. `AppComponent.color`にバインドし、デフォルトカラーとして「violet」を使用するには、次のHTMLを追加します。
-   この場合、`defaultColor`バインディングは、静的であるため、角括弧`[]`を使用しません。
+   この場合、`defaultColor`バインディングは、動的な式ではなく静的な文字列であるため、角括弧`[]`を使用しません。
 
    <docs-code header="app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="defaultColor"/>
 
diff --git a/adev-ja/src/content/guide/directives/overview.en.md b/adev-ja/src/content/guide/directives/overview.en.md
index ed218a3f1..287f986e2 100644
--- a/adev-ja/src/content/guide/directives/overview.en.md
+++ b/adev-ja/src/content/guide/directives/overview.en.md
@@ -32,7 +32,7 @@ HELPFUL: Built-in directives use only public APIs. They do not have special acce
 
 Add or remove multiple CSS classes simultaneously with `ngClass`.
 
-HELPFUL: To add or remove a _single_ class, use [class binding](guide/templates/class-binding) rather than `NgClass`.
+HELPFUL: To add or remove a _single_ class, use [class binding](/guide/templates/binding#css-class-and-style-property-bindings) rather than `NgClass`.
 
 ### Import `NgClass` in the component
 
diff --git a/adev-ja/src/content/guide/directives/overview.md b/adev-ja/src/content/guide/directives/overview.md
index 1b23d2ac9..0058c3ed1 100644
--- a/adev-ja/src/content/guide/directives/overview.md
+++ b/adev-ja/src/content/guide/directives/overview.md
@@ -32,7 +32,7 @@ HELPFUL: 組み込みディレクティブは、公開APIのみを使用しま
 
 `ngClass` を使用して、複数のCSSクラスを同時に追加または削除します。
 
-HELPFUL: _単一の_ クラスを追加または削除するには、`NgClass` ではなく [クラスバインディング](guide/templates/class-binding) を使用します。
+HELPFUL: _単一の_ クラスを追加または削除するには、`NgClass` ではなく [クラスバインディング](/guide/templates/binding#css-class-and-style-property-bindings) を使用します。
 
 ### コンポーネントに `NgClass` をインポートする
 

From 157f84c9cc943860bf4ce6ea660901bb29ac0fd4 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:56:44 +0900
Subject: [PATCH 14/55] fix(docs): migrate guide/testing/karma (link)

---
 adev-ja/src/content/guide/testing/karma.en.md | 2 +-
 adev-ja/src/content/guide/testing/karma.md    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/adev-ja/src/content/guide/testing/karma.en.md b/adev-ja/src/content/guide/testing/karma.en.md
index 7e640a7b6..95293d793 100644
--- a/adev-ja/src/content/guide/testing/karma.en.md
+++ b/adev-ja/src/content/guide/testing/karma.en.md
@@ -186,7 +186,7 @@ If your tests aren't working as you expect, you can inspect and debug them in th
 
 To debug an application with the Karma test runner:
 
-1.  Reveal the Karma browser window. See [Set up for testing](guide/testing/overview#set-up-for-testing) if you need help with this step.
+1.  Reveal the Karma browser window. See [Set up for testing](guide/testing#set-up-for-testing) if you need help with this step.
 2.  Click the **DEBUG** button to open a new browser tab and re-run the tests.
 3.  Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
 4.  Pick the **Sources** section.
diff --git a/adev-ja/src/content/guide/testing/karma.md b/adev-ja/src/content/guide/testing/karma.md
index c23db04f8..901b9fd07 100644
--- a/adev-ja/src/content/guide/testing/karma.md
+++ b/adev-ja/src/content/guide/testing/karma.md
@@ -186,7 +186,7 @@ NOTE: CI環境において、Karmaでテストを一度だけ実行して正常
 
 Karmaテストランナーでアプリケーションをデバッグするには:
 
-1.  Karmaブラウザウィンドウを表示します。このステップでヘルプが必要な場合は、[テストのセットアップ](guide/testing/overview#set-up-for-testing)を参照してください。
+1.  Karmaブラウザウィンドウを表示します。このステップでヘルプが必要な場合は、[テストのセットアップ](guide/testing#set-up-for-testing)を参照してください。
 2.  **DEBUG**ボタンをクリックして新しいブラウザタブを開き、テストを再実行します。
 3.  ブラウザの**開発者ツール**を開きます。Windowsでは、`Ctrl-Shift-I`を押します。macOSでは、`Command-Option-I`を押します。
 4.  **Sources**セクションを選択します。

From 1283e7c91f4b117c9efdec9f327a20dc946200c7 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:57:06 +0900
Subject: [PATCH 15/55] fix(docs): migrate guide/templates/overview (file name)

---
 adev-ja/src/content/guide/templates/overview.en.md | 2 +-
 adev-ja/src/content/guide/templates/overview.md    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/adev-ja/src/content/guide/templates/overview.en.md b/adev-ja/src/content/guide/templates/overview.en.md
index 2d3b6a78d..b1901c6dc 100644
--- a/adev-ja/src/content/guide/templates/overview.en.md
+++ b/adev-ja/src/content/guide/templates/overview.en.md
@@ -7,7 +7,7 @@ TIP: Check out Angular's [Essentials](essentials/templates) before diving into t
 
 Every Angular component has a **template** that defines the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) that the component renders onto the page. By using templates, Angular is able to automatically keep your page up-to-date as data changes.
 
-Templates are usually found within either the `template` property of a `*.component.ts` file or the `*.component.html` file. To learn more, check out the [in-depth components guide](/guide/components).
+Templates are usually found within either the `template` property of a `*.ts` file or the `*.html` file. To learn more, check out the [in-depth components guide](/guide/components).
 
 ## How do templates work?
 
diff --git a/adev-ja/src/content/guide/templates/overview.md b/adev-ja/src/content/guide/templates/overview.md
index c3e0a7164..ed35f2998 100644
--- a/adev-ja/src/content/guide/templates/overview.md
+++ b/adev-ja/src/content/guide/templates/overview.md
@@ -7,7 +7,7 @@ TIP: この包括的なガイドに進む前に、Angularの[基本概念](essen
 
 すべてのAngularコンポーネントには、コンポーネントがページにレンダリングする[DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)を定義する**テンプレート**があります。テンプレートを使用することで、Angularはデータが変化してもページを自動的に最新の状態に保つことができます。
 
-テンプレートは通常、`*.component.ts`ファイルの`template`プロパティまたは`*.component.html`ファイル内にあります。詳細については、[コンポーネントに関する詳細なガイド](/guide/components)をご覧ください。
+テンプレートは通常、`*.ts`ファイルの`template`プロパティまたは`*.html`ファイル内にあります。詳細については、[コンポーネントに関する詳細なガイド](/guide/components)をご覧ください。
 
 ## テンプレートはどのように動作しますか？
 

From c98907832bd14c3ad8879fa40645caeab74d6d1a Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:58:05 +0900
Subject: [PATCH 16/55] fix(docs): migrate guide/security (text)

---
 adev-ja/src/content/guide/security.en.md | 2 +-
 adev-ja/src/content/guide/security.md    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/adev-ja/src/content/guide/security.en.md b/adev-ja/src/content/guide/security.en.md
index ecee243ee..699631a40 100644
--- a/adev-ja/src/content/guide/security.en.md
+++ b/adev-ja/src/content/guide/security.en.md
@@ -148,7 +148,7 @@ default-src 'self'; style-src 'self' 'nonce-randomNonceGoesHere'; script-src 'se
 
 When serving your Angular application, the server should include a randomly-generated nonce in the HTTP header for each request.
 You must provide this nonce to Angular so that the framework can render `<style>` elements.
-You can set the nonce for Angular in one of two ways:
+You can set the nonce for Angular in one of the following ways:
 
 1. Set the `autoCsp` option to `true` the [workspace configuration](reference/configs/workspace-config#extra-build-and-test-options).
 1. Set the `ngCspNonce` attribute on the root application element as `<app ngCspNonce="randomNonceGoesHere"></app>`. Use this approach if you have access to server-side templating that can add the nonce both to the header and the `index.html` when constructing the response.
diff --git a/adev-ja/src/content/guide/security.md b/adev-ja/src/content/guide/security.md
index 7882d9a20..7bbcb1485 100644
--- a/adev-ja/src/content/guide/security.md
+++ b/adev-ja/src/content/guide/security.md
@@ -148,7 +148,7 @@ default-src 'self'; style-src 'self' 'nonce-randomNonceGoesHere'; script-src 'se
 
 Angularアプリケーションを提供する際、サーバーは各リクエストのHTTPヘッダーに、ランダムに生成されたnonceを含める必要があります。
 このnonceをAngularに提供する必要があります。Angularは、`<style>`要素をレンダリングするためにnonceを使用します。
-Angularのnonceは、次の2つの方法のいずれかで設定できます。
+Angularのnonceは、次のいずれかの方法で設定できます。
 
 1. [ワークスペース構成](reference/configs/workspace-config#extra-build-and-test-options)で`autoCsp`オプションを`true`に設定します。
 1. ルートアプリケーション要素に`ngCspNonce`属性を設定します。`index.html`を作成するときに、ヘッダーと`index.html`の両方にnonceを追加できるサーバー側のテンプレートがある場合は、この方法を使用します。

From 98b385baf45929898fb29c5a62cc589ccdb7bc1f Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 22 Feb 2026 23:59:35 +0900
Subject: [PATCH 17/55] fix(docs): migrate guide/http (class names, formatting)

---
 adev-ja/src/content/guide/http/interceptors.en.md    | 4 ++--
 adev-ja/src/content/guide/http/interceptors.md       | 4 ++--
 adev-ja/src/content/guide/http/making-requests.en.md | 4 ++--
 adev-ja/src/content/guide/http/making-requests.md    | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/adev-ja/src/content/guide/http/interceptors.en.md b/adev-ja/src/content/guide/http/interceptors.en.md
index cb8ae2d7c..556136517 100644
--- a/adev-ja/src/content/guide/http/interceptors.en.md
+++ b/adev-ja/src/content/guide/http/interceptors.en.md
@@ -45,7 +45,7 @@ In order for this interceptor to actually intercept requests, you must configure
 You declare the set of interceptors to use when configuring `HttpClient` through dependency injection, by using the `withInterceptors` feature:
 
 ```ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideHttpClient(withInterceptors([loggingInterceptor, cachingInterceptor]))],
 });
 ```
@@ -275,7 +275,7 @@ export class LoggingInterceptor implements HttpInterceptor {
 DI-based interceptors are configured through a dependency injection multi-provider:
 
 ```ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideHttpClient(
       // DI-based interceptors must be explicitly enabled.
diff --git a/adev-ja/src/content/guide/http/interceptors.md b/adev-ja/src/content/guide/http/interceptors.md
index c85bf21ca..86f89948d 100644
--- a/adev-ja/src/content/guide/http/interceptors.md
+++ b/adev-ja/src/content/guide/http/interceptors.md
@@ -45,7 +45,7 @@ export function loggingInterceptor(
 `HttpClient` を構成するときに使用するインターセプターのセットは、`withInterceptors` 機能を使用して、依存性の注入によって宣言します。
 
 ```ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideHttpClient(withInterceptors([loggingInterceptor, cachingInterceptor]))],
 });
 ```
@@ -275,7 +275,7 @@ export class LoggingInterceptor implements HttpInterceptor {
 DIベースのインターセプターは、依存性の注入のマルチプロバイダーによって構成されます。
 
 ```ts
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideHttpClient(
       // DI ベースのインターセプターは明示的に有効にする必要があります。
diff --git a/adev-ja/src/content/guide/http/making-requests.en.md b/adev-ja/src/content/guide/http/making-requests.en.md
index da3792294..7ba303fe2 100644
--- a/adev-ja/src/content/guide/http/making-requests.en.md
+++ b/adev-ja/src/content/guide/http/making-requests.en.md
@@ -648,7 +648,7 @@ export class UserService {
 Within a component, you can combine `@if` with the `async` pipe to render the UI for the data only after it's finished loading:
 
 ```angular-ts
-import { AsyncPipe } from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   imports: [AsyncPipe],
@@ -659,7 +659,7 @@ import { AsyncPipe } from '@angular/common';
     }
   `,
 })
-export class UserProfileComponent {
+export class UserProfile {
   userId = input.required<string>();
   user$!: Observable<User>;
 
diff --git a/adev-ja/src/content/guide/http/making-requests.md b/adev-ja/src/content/guide/http/making-requests.md
index a1a548fab..88e70561f 100644
--- a/adev-ja/src/content/guide/http/making-requests.md
+++ b/adev-ja/src/content/guide/http/making-requests.md
@@ -648,7 +648,7 @@ export class UserService {
 コンポーネント内で、`@if` を `async` パイプと組み合わせて、データの読み込みが完了した後にのみ、データのUIをレンダリングできます。
 
 ```angular-ts
-import { AsyncPipe } from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
   imports: [AsyncPipe],
@@ -659,7 +659,7 @@ import { AsyncPipe } from '@angular/common';
     }
   `,
 })
-export class UserProfileComponent {
+export class UserProfile {
   userId = input.required<string>();
   user$!: Observable<User>;
 

From 49320cb18f3203fc6d9cd67657834ed8348f204b Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 00:01:19 +0900
Subject: [PATCH 18/55] fix(docs): migrate guide/signals (new section +
 formatting)

---
 .../content/guide/signals/linked-signal.en.md |  6 ++--
 .../content/guide/signals/linked-signal.md    | 10 +++---
 .../src/content/guide/signals/overview.en.md  | 31 ++++++++++++++++++-
 adev-ja/src/content/guide/signals/overview.md | 29 +++++++++++++++++
 4 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/adev-ja/src/content/guide/signals/linked-signal.en.md b/adev-ja/src/content/guide/signals/linked-signal.en.md
index 4743057a5..e8169d3f9 100644
--- a/adev-ja/src/content/guide/signals/linked-signal.en.md
+++ b/adev-ja/src/content/guide/signals/linked-signal.en.md
@@ -22,7 +22,7 @@ In this example, the `selectedOption` defaults to the first option, but changes
 
 **The `linkedSignal` function lets you create a signal to hold some state that is intrinsically _linked_ to some other state.** Revisiting the example above, `linkedSignal` can replace `signal`:
 
-```typescript
+```ts
 @Component({
   /* ... */
 })
@@ -42,7 +42,7 @@ export class ShippingMethodPicker {
 
 The following example shows how the value of a `linkedSignal` can change based on its linked state:
 
-```typescript
+```ts
 const shippingOptions = signal(['Ground', 'Air', 'Sea']);
 const selectedOption = linkedSignal(() => shippingOptions()[0]);
 console.log(selectedOption()); // 'Ground'
@@ -60,7 +60,7 @@ In some cases, the computation for a `linkedSignal` needs to account for the pre
 
 In the example above, `selectedOption` always updates back to the first option when `shippingOptions` changes. You may, however, want to preserve the user's selection if their selected option is still somewhere in the list. To accomplish this, you can create a `linkedSignal` with a separate _source_ and _computation_:
 
-```typescript
+```ts
 interface ShippingMethod {
   id: number;
   name: string;
diff --git a/adev-ja/src/content/guide/signals/linked-signal.md b/adev-ja/src/content/guide/signals/linked-signal.md
index 8840ce411..be1bcd787 100644
--- a/adev-ja/src/content/guide/signals/linked-signal.md
+++ b/adev-ja/src/content/guide/signals/linked-signal.md
@@ -2,7 +2,7 @@
 
 `signal`関数は、Angularコードで状態を保持するために使用できます。この状態は、他の状態に依存することがあります。例えば、ユーザーが注文の配送方法を選択できるコンポーネントを考えてみましょう。
 
-```typescript
+```ts
 @Component({
   /* ... */
 })
@@ -22,7 +22,7 @@ export class ShippingMethodPicker {
 
 **`linkedSignal`関数は、本質的に他の状態に_リンク_された状態を保持するシグナルを作成できます。**上記の例を再考すると、`linkedSignal`は`signal`を置き換えることができます。
 
-```typescript
+```ts
 @Component({
   /* ... */
 })
@@ -42,7 +42,7 @@ export class ShippingMethodPicker {
 
 次の例は、`linkedSignal`の値がリンクされた状態に基づいてどのように変化するかを示しています。
 
-```typescript
+```ts
 const shippingOptions = signal(['Ground', 'Air', 'Sea']);
 const selectedOption = linkedSignal(() => shippingOptions()[0]);
 console.log(selectedOption()); // 'Ground'
@@ -60,7 +60,7 @@ console.log(selectedOption()); // 'Email'
 
 上記の例では、`shippingOptions`が変更されると、`selectedOption`は常に最初のオプションに戻って更新されます。しかし、選択したオプションがリスト内にまだ存在する場合は、ユーザーの選択を維持したい場合があります。これを実現するには、別々の*ソース*と*算出*を使用して`linkedSignal`を作成できます。
 
-```typescript
+```ts
 interface ShippingMethod {
   id: number;
   name: string;
@@ -118,7 +118,7 @@ HELPFUL: `previous`パラメーターを使用する場合、`linkedSignal`の
 
 `linkedSignal`は他のシグナルと同様に、カスタムの等価比較関数を設定できます。この関数は、下流の依存関係によって`linkedSignal`の値（計算結果）が変更されたかどうかを判断するために使用されます。
 
-```typescript
+```ts
 const activeUser = signal({id: 123, name: 'Morgan', isAdmin: true});
 
 const activeUserEditCopy = linkedSignal(() => activeUser(), {
diff --git a/adev-ja/src/content/guide/signals/overview.en.md b/adev-ja/src/content/guide/signals/overview.en.md
index cffc09248..3a2387df4 100644
--- a/adev-ja/src/content/guide/signals/overview.en.md
+++ b/adev-ja/src/content/guide/signals/overview.en.md
@@ -186,9 +186,38 @@ effect(() => {
 });
 ```
 
+### Reactive context and async operations
+
+The reactive context is only active for synchronous code. Any signal reads that occur after an asynchronous boundary will not be tracked as dependencies.
+
+```ts {avoid}
+effect(async () => {
+  const data = await fetchUserData();
+  // Reactive context is lost here - theme() won't be tracked
+  console.log(`User: ${data.name}, Theme: ${theme()}`);
+});
+```
+
+To ensure all signal reads are tracked, read signals before the `await`. This includes passing them as arguments to the awaited function, since arguments are evaluated synchronously:
+
+```ts {prefer}
+effect(async () => {
+  const currentTheme = theme(); // Read before await
+  const data = await fetchUserData();
+  console.log(`User: ${data.name}, Theme: ${currentTheme}`);
+});
+```
+
+```ts {prefer}
+effect(async () => {
+  // Also works: signal is read before await (as function argument)
+  await renderContent(docContent());
+});
+```
+
 ## Advanced derivations
 
-While `computed` handles simple readonly derivations, you might find youself needing a writable state that is dependant on other signals.
+While `computed` handles simple readonly derivations, you might find yourself needing a writable state that is dependent on other signals.
 For more information see the [Dependent state with linkedSignal](/guide/signals/linked-signal) guide.
 
 All signal APIs are synchronous— `signal`, `computed`, `input`, etc. However, applications often need to deal with data that is available asynchronously. A `Resource` gives you a way to incorporate async data into your application's signal-based code and still allow you to access its data synchronously. For more information see the [Async reactivity with resources](/guide/signals/resource) guide.
diff --git a/adev-ja/src/content/guide/signals/overview.md b/adev-ja/src/content/guide/signals/overview.md
index c52065d0e..1715e7491 100644
--- a/adev-ja/src/content/guide/signals/overview.md
+++ b/adev-ja/src/content/guide/signals/overview.md
@@ -186,6 +186,35 @@ effect(() => {
 });
 ```
 
+### リアクティブコンテキストと非同期操作 {#reactive-context-and-async-operations}
+
+リアクティブコンテキストは同期コードに対してのみアクティブです。非同期境界の後に発生するシグナルの読み取りは、依存関係として追跡されません。
+
+```ts {avoid}
+effect(async () => {
+  const data = await fetchUserData();
+  // ここではリアクティブコンテキストが失われています - theme()は追跡されません
+  console.log(`User: ${data.name}, Theme: ${theme()}`);
+});
+```
+
+すべてのシグナル読み取りが追跡されるようにするには、`await`の前にシグナルを読み取ります。これには、引数は同期的に評価されるため、awaitされる関数に引数として渡すことも含まれます：
+
+```ts {prefer}
+effect(async () => {
+  const currentTheme = theme(); // awaitの前に読み取る
+  const data = await fetchUserData();
+  console.log(`User: ${data.name}, Theme: ${currentTheme}`);
+});
+```
+
+```ts {prefer}
+effect(async () => {
+  // これも動作します：シグナルはawaitの前に読み取られます（関数引数として）
+  await renderContent(docContent());
+});
+```
+
 ## 高度な派生 {#advanced-derivations}
 
 `computed`はシンプルな読み取り専用の派生を処理しますが、他のシグナルに依存する書き込み可能な状態が必要な場合があります。

From 38911e3f3dd6bcdcd5804afd0dc6fb8b5ba5d03d Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 00:10:09 +0900
Subject: [PATCH 19/55] fix(docs): migrate
 guide/directives/structural-directives (syntax)

---
 .../content/guide/directives/structural-directives.en.md    | 6 +++---
 .../src/content/guide/directives/structural-directives.md   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/adev-ja/src/content/guide/directives/structural-directives.en.md b/adev-ja/src/content/guide/directives/structural-directives.en.md
index 0e696ce22..8751f2b8a 100644
--- a/adev-ja/src/content/guide/directives/structural-directives.en.md
+++ b/adev-ja/src/content/guide/directives/structural-directives.en.md
@@ -31,7 +31,7 @@ Structural directives can be applied directly on an element by prefixing the dir
 You can use this with `SelectDirective` as follows:
 
 ```angular-html
-<p *select="let data from source">The data is: {{data}}</p>
+<p *select="let data; from: source">The data is: {{ data }}</p>
 ```
 
 This example shows the flexibility of structural directive shorthand syntax, which is sometimes called _microsyntax_.
@@ -40,11 +40,11 @@ When used in this way, only the structural directive and its bindings are applie
 
 ```angular-html
 <!-- Shorthand syntax: -->
-<p class="data-view" *select="let data from source">The data is: {{data}}</p>
+<p class="data-view" *select="let data; from: source">The data is: {{ data }}</p>
 
 <!-- Long-form syntax: -->
 <ng-template select let-data [selectFrom]="source">
-  <p class="data-view">The data is: {{data}}</p>
+  <p class="data-view">The data is: {{ data }}</p>
 </ng-template>
 ```
 
diff --git a/adev-ja/src/content/guide/directives/structural-directives.md b/adev-ja/src/content/guide/directives/structural-directives.md
index 32abd0368..f02cef947 100644
--- a/adev-ja/src/content/guide/directives/structural-directives.md
+++ b/adev-ja/src/content/guide/directives/structural-directives.md
@@ -31,7 +31,7 @@ Angularは、構造ディレクティブの省略記法をサポートしてお
 以下は、`SelectDirective`を使用した例です。
 
 ```angular-html
-<p *select="let data from source">The data is: {{data}}</p>
+<p *select="let data; from: source">The data is: {{ data }}</p>
 ```
 
 この例は、構造ディレクティブの省略記法の柔軟性を示しており、これはマイクロシンタックスと呼ばれることもあります。
@@ -40,11 +40,11 @@ Angularは、構造ディレクティブの省略記法をサポートしてお
 
 ```angular-html
 <!-- 省略記法: -->
-<p class="data-view" *select="let data from source">The data is: {{data}}</p>
+<p class="data-view" *select="let data; from: source">The data is: {{ data }}</p>
 
 <!-- 長形式の記法: -->
 <ng-template select let-data [selectFrom]="source">
-  <p class="data-view">The data is: {{data}}</p>
+  <p class="data-view">The data is: {{ data }}</p>
 </ng-template>
 ```
 

From cfdddf93d8332b229071f4f6d5d7ec7cd4a09ca9 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 00:10:38 +0900
Subject: [PATCH 20/55] fix(docs): migrate guide/testing (links)

---
 adev-ja/src/content/guide/testing/migrating-to-vitest.en.md | 2 +-
 adev-ja/src/content/guide/testing/migrating-to-vitest.md    | 2 +-
 adev-ja/src/content/guide/testing/services.en.md            | 4 ++--
 adev-ja/src/content/guide/testing/services.md               | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/adev-ja/src/content/guide/testing/migrating-to-vitest.en.md b/adev-ja/src/content/guide/testing/migrating-to-vitest.en.md
index 6ba0fb7dd..7e34a9317 100644
--- a/adev-ja/src/content/guide/testing/migrating-to-vitest.en.md
+++ b/adev-ja/src/content/guide/testing/migrating-to-vitest.en.md
@@ -228,7 +228,7 @@ If you set `runnerConfig` to `true`, the builder will automatically search for a
 ## `zone.js` based helpers are not supported
 
 The zone.js patches are not applied when running tests with Vitest, there for you won't be able use functions like `fakeAsync`, `flush` or `waitForAsync`.
-To migrate to Vitest you will also need to migrate your tests to native async and Vitest fake timers. See [an example here](/components-scenarios#async-test-with-a-vitest-fake-timers) for fake timers usages with Vitest.
+To migrate to Vitest you will also need to migrate your tests to native async and Vitest fake timers. See [an example here](/guide/testing/components-scenarios#async-test-with-a-vitest-fake-timers) for fake timers usages with Vitest.
 
 ## Bug reports
 
diff --git a/adev-ja/src/content/guide/testing/migrating-to-vitest.md b/adev-ja/src/content/guide/testing/migrating-to-vitest.md
index b2a3ce306..393f25275 100644
--- a/adev-ja/src/content/guide/testing/migrating-to-vitest.md
+++ b/adev-ja/src/content/guide/testing/migrating-to-vitest.md
@@ -228,7 +228,7 @@ IMPORTANT: カスタム設定を使用すると高度なオプションが有効
 ## `zone.js`ベースのヘルパーはサポートされていません {#zonejs-based-helpers-are-not-supported}
 
 Vitestでテストを実行する場合、zone.jsのパッチは適用されないため、`fakeAsync`、`flush`、`waitForAsync`のような関数は使用できません。
-Vitestに移行するには、テストもネイティブasyncとVitestのフェイクタイマーに移行する必要があります。Vitestでのフェイクタイマーの使用例については、[こちらの例](/components-scenarios#async-test-with-a-vitest-fake-timers)を参照してください。
+Vitestに移行するには、テストもネイティブasyncとVitestのフェイクタイマーに移行する必要があります。Vitestでのフェイクタイマーの使用例については、[こちらの例](/guide/testing/components-scenarios#async-test-with-a-vitest-fake-timers)を参照してください。
 
 ## バグレポート {#bug-reports}
 
diff --git a/adev-ja/src/content/guide/testing/services.en.md b/adev-ja/src/content/guide/testing/services.en.md
index 2e7a8c11f..d09cda9a2 100644
--- a/adev-ja/src/content/guide/testing/services.en.md
+++ b/adev-ja/src/content/guide/testing/services.en.md
@@ -47,9 +47,9 @@ As a service _tester_, you must at least think about the first level of service
 ## Angular `TestBed`
 
 The `TestBed` is the most important of the Angular testing utilities.
-The `TestBed` creates a dynamically-constructed Angular _test_ module that emulates an Angular [@NgModule](guide/ngmodules).
+The `TestBed` creates a dynamically-constructed Angular _test_ module that emulates an Angular [@NgModule](guide/ngmodules/overview).
 
-The `TestBed.configureTestingModule()` method takes a metadata object that can have most of the properties of an [@NgModule](guide/ngmodules).
+The `TestBed.configureTestingModule()` method takes a metadata object that can have most of the properties of an [@NgModule](guide/ngmodules/overview).
 
 To test a service, you set the `providers` metadata property with an array of the services that you'll test or mock.
 
diff --git a/adev-ja/src/content/guide/testing/services.md b/adev-ja/src/content/guide/testing/services.md
index 45fcbfe6c..ce04790eb 100644
--- a/adev-ja/src/content/guide/testing/services.md
+++ b/adev-ja/src/content/guide/testing/services.md
@@ -47,9 +47,9 @@ describe('ValueService', () => {
 ## Angular `TestBed` {#angular-testbed}
 
 `TestBed` は、Angularのテストユーティリティの中で最も重要なものです。
-`TestBed` は、Angularの [@NgModule](guide/ngmodules) をエミュレートする、動的に構築されたAngularの _テスト_ モジュールを作成します。
+`TestBed` は、Angularの [@NgModule](guide/ngmodules/overview) をエミュレートする、動的に構築されたAngularの _テスト_ モジュールを作成します。
 
-`TestBed.configureTestingModule()` メソッドは、[@NgModule](guide/ngmodules) のほとんどのプロパティを持つことができるメタデータオブジェクトを受け取ります。
+`TestBed.configureTestingModule()` メソッドは、[@NgModule](guide/ngmodules/overview) のほとんどのプロパティを持つことができるメタデータオブジェクトを受け取ります。
 
 サービスをテストするには、テストまたはモックするサービスの配列を `providers` メタデータプロパティに設定します。
 

From 7b641281a6ef40ef12ff86e4946550e0ebddccd5 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 00:43:35 +0900
Subject: [PATCH 21/55] fix(docs): migrate small changes (formatting, links)

- directive-composition-api: code formatting
- recommendations: link fix (angular.io -> angular.dev)
- ng-container: code formatting (trailing comma, parentheses)
- dom-apis: code formatting (expand {...})
- redirecting-routes: class name change (MenuComponent -> Menu)
- router-reference: link fix, code formatting
- routing-with-urlmatcher: file name changes (.component.* -> .*)
- whitespace: code block format (angular-html -> html)
- defer: internal link fixes, code formatting
- host-elements: code formatting, NOTE addition
---
 .../src/app/features/update/recommendations.en.ts  |  2 +-
 adev-ja/src/app/features/update/recommendations.ts |  2 +-
 .../src/content/guide/components/dom-apis.en.md    |  8 ++++++--
 adev-ja/src/content/guide/components/dom-apis.md   |  8 ++++++--
 .../content/guide/components/host-elements.en.md   | 10 +++++-----
 .../src/content/guide/components/host-elements.md  | 10 +++++-----
 .../directives/directive-composition-api.en.md     |  6 ++----
 .../guide/directives/directive-composition-api.md  |  6 ++----
 .../content/guide/routing/redirecting-routes.en.md |  8 ++++----
 .../content/guide/routing/redirecting-routes.md    |  8 ++++----
 .../content/guide/routing/router-reference.en.md   |  8 +++++---
 .../src/content/guide/routing/router-reference.md  |  8 +++++---
 .../guide/routing/routing-with-urlmatcher.en.md    | 10 +++++-----
 .../guide/routing/routing-with-urlmatcher.md       | 10 +++++-----
 adev-ja/src/content/guide/templates/defer.en.md    | 10 +++++-----
 adev-ja/src/content/guide/templates/defer.md       | 12 ++++++------
 .../src/content/guide/templates/ng-container.en.md |  8 ++++----
 .../src/content/guide/templates/ng-container.md    |  8 ++++----
 .../src/content/guide/templates/whitespace.en.md   | 10 ++++++----
 adev-ja/src/content/guide/templates/whitespace.md  | 14 ++++++++------
 20 files changed, 89 insertions(+), 77 deletions(-)

diff --git a/adev-ja/src/app/features/update/recommendations.en.ts b/adev-ja/src/app/features/update/recommendations.en.ts
index a198a77cf..36286a3c4 100644
--- a/adev-ja/src/app/features/update/recommendations.en.ts
+++ b/adev-ja/src/app/features/update/recommendations.en.ts
@@ -208,7 +208,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'Http',
     action:
-      "If you use the legacy `HttpModule` and the `Http` service, switch to `HttpClientModule` and the `HttpClient` service. HttpClient simplifies the default ergonomics (you don't need to map to JSON anymore) and now supports typed return values and interceptors. Read more on [angular.dev](https://angular.io/guide/http).",
+      "If you use the legacy `HttpModule` and the `Http` service, switch to `HttpClientModule` and the `HttpClient` service. HttpClient simplifies the default ergonomics (you don't need to map to JSON anymore) and now supports typed return values and interceptors. Read more on [angular.dev](https://angular.dev/guide/http).",
   },
   {
     possibleIn: 430,
diff --git a/adev-ja/src/app/features/update/recommendations.ts b/adev-ja/src/app/features/update/recommendations.ts
index a9ed688f9..c35e86ca4 100644
--- a/adev-ja/src/app/features/update/recommendations.ts
+++ b/adev-ja/src/app/features/update/recommendations.ts
@@ -208,7 +208,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'Http',
     action:
-      'レガシーな`HttpModule`と`Http`サービスを使用している場合は、`HttpClientModule`と`HttpClient`サービスに切り替えてください。`HttpClient`はデフォルトの人間工学を簡素化し（JSONにマップする必要がなくなりました）、型付きの戻り値とインターセプターをサポートしています。詳細については、[angular.dev](https://angular.io/guide/http)を参照してください。',
+      'レガシーな`HttpModule`と`Http`サービスを使用している場合は、`HttpClientModule`と`HttpClient`サービスに切り替えてください。`HttpClient`はデフォルトの人間工学を簡素化し（JSONにマップする必要がなくなりました）、型付きの戻り値とインターセプターをサポートしています。詳細については、[angular.dev](https://angular.dev/guide/http)を参照してください。',
   },
   {
     possibleIn: 430,
diff --git a/adev-ja/src/content/guide/components/dom-apis.en.md b/adev-ja/src/content/guide/components/dom-apis.en.md
index 68ac11a68..be1881e7b 100644
--- a/adev-ja/src/content/guide/components/dom-apis.en.md
+++ b/adev-ja/src/content/guide/components/dom-apis.en.md
@@ -7,7 +7,9 @@ directly interact with a component's DOM. Components can inject ElementRef to ge
 component's host element:
 
 ```ts
-@Component({...})
+@Component({
+  /*...*/
+})
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);
@@ -23,7 +25,9 @@ You can use Angular's `afterEveryRender` and `afterNextRender` functions to regi
 callback** that runs when Angular has finished rendering the page.
 
 ```ts
-@Component({...})
+@Component({
+  /*...*/
+})
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);
diff --git a/adev-ja/src/content/guide/components/dom-apis.md b/adev-ja/src/content/guide/components/dom-apis.md
index 49ef8c8b4..8c1ecaf1f 100644
--- a/adev-ja/src/content/guide/components/dom-apis.md
+++ b/adev-ja/src/content/guide/components/dom-apis.md
@@ -7,7 +7,9 @@ Angularは、ほとんどのDOM作成、更新、および削除を自動的に
 コンポーネントは `ElementRef` を注入して、コンポーネントのホスト要素への参照を取得できます。
 
 ```ts
-@Component({...})
+@Component({
+  /*...*/
+})
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);
@@ -23,7 +25,9 @@ Angularの `afterEveryRender` および `afterNextRender` 関数を使用して
 Angularがページのレンダリングを完了したときに実行される **レンダリングコールバック** を登録できます。
 
 ```ts
-@Component({...})
+@Component({
+  /*...*/
+})
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);
diff --git a/adev-ja/src/content/guide/components/host-elements.en.md b/adev-ja/src/content/guide/components/host-elements.en.md
index fc200dac2..082c2e0f6 100644
--- a/adev-ja/src/content/guide/components/host-elements.en.md
+++ b/adev-ja/src/content/guide/components/host-elements.en.md
@@ -10,9 +10,7 @@ The contents of a component's template are rendered inside its host element.
 // Component source
 @Component({
   selector: 'profile-photo',
-  template: `
-    <img src="profile-photo.jpg" alt="Your profile photo" />
-  `,
+  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
 })
 export class ProfilePhoto {}
 ```
@@ -64,6 +62,8 @@ export class CustomSlider {
 }
 ```
 
+NOTE: The global target names that can be used to prefix an event name are `document:`, `window:` and `body:`.
+
 ## The `@HostBinding` and `@HostListener` decorators
 
 You can alternatively bind to the host element by applying the `@HostBinding` and `@HostListener`
@@ -141,7 +141,7 @@ You can set such custom properties on a host element with a [style binding][styl
   /* ... */
   host: {
     '[style.--my-background]': 'color()',
-  }
+  },
 })
 export class MyComponent {
   color = signal('lightgreen');
@@ -157,7 +157,7 @@ Alternatively, it is also possible to set css custom properties on the host elem
 ```angular-ts
 @Component({
   selector: 'my-component',
-  template: `<my-child [style.--my-background]="color()">`,
+  template: `<my-child [style.--my-background]="color()" />`,
 })
 export class MyComponent {
   color = signal('lightgreen');
diff --git a/adev-ja/src/content/guide/components/host-elements.md b/adev-ja/src/content/guide/components/host-elements.md
index f75a056e1..b78c77693 100644
--- a/adev-ja/src/content/guide/components/host-elements.md
+++ b/adev-ja/src/content/guide/components/host-elements.md
@@ -10,9 +10,7 @@ Angularは、コンポーネントのセレクターに一致するすべてのH
 // コンポーネントソース
 @Component({
   selector: 'profile-photo',
-  template: `
-    <img src="profile-photo.jpg" alt="Your profile photo" />
-  `,
+  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
 })
 export class ProfilePhoto {}
 ```
@@ -64,6 +62,8 @@ export class CustomSlider {
 }
 ```
 
+NOTE: イベント名にプレフィックスとして使用できるグローバルターゲット名は `document:`、`window:`、`body:` です。
+
 ## `@HostBinding`および`@HostListener`デコレーター {#the-hostbinding-and-hostlistener-decorators}
 
 クラスメンバーに`@HostBinding`および`@HostListener`デコレーターを適用することにより、
@@ -141,7 +141,7 @@ export class ProfilePhoto { /* ... */ }
   /* ... */
   host: {
     '[style.--my-background]': 'color()',
-  }
+  },
 })
 export class MyComponent {
   color = signal('lightgreen');
@@ -157,7 +157,7 @@ export class MyComponent {
 ```angular-ts
 @Component({
   selector: 'my-component',
-  template: `<my-child [style.--my-background]="color()">`,
+  template: `<my-child [style.--my-background]="color()" />`,
 })
 export class MyComponent {
   color = signal('lightgreen');
diff --git a/adev-ja/src/content/guide/directives/directive-composition-api.en.md b/adev-ja/src/content/guide/directives/directive-composition-api.en.md
index 4dce2bfe6..f6bda5e07 100644
--- a/adev-ja/src/content/guide/directives/directive-composition-api.en.md
+++ b/adev-ja/src/content/guide/directives/directive-composition-api.en.md
@@ -60,8 +60,7 @@ By explicitly specifying the inputs and outputs, consumers of the component with
 bind them in a template:
 
 ```angular-html
-
-<admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()">
+<admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()"></admin-menu>
 ```
 
 Furthermore, you can alias inputs and outputs from `hostDirective` to customize the API of your
@@ -83,8 +82,7 @@ export class AdminMenu {}
 ```
 
 ```angular-html
-
-<admin-menu id="top-menu" (closed)="logMenuClosed()">
+<admin-menu id="top-menu" (closed)="logMenuClosed()"></admin-menu>
 ```
 
 ## Adding directives to another directive
diff --git a/adev-ja/src/content/guide/directives/directive-composition-api.md b/adev-ja/src/content/guide/directives/directive-composition-api.md
index faf9391d6..401047739 100644
--- a/adev-ja/src/content/guide/directives/directive-composition-api.md
+++ b/adev-ja/src/content/guide/directives/directive-composition-api.md
@@ -60,8 +60,7 @@ export class AdminMenu {}
 テンプレートでそれらにバインドできます。
 
 ```angular-html
-
-<admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()">
+<admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()"></admin-menu>
 ```
 
 さらに、`hostDirective` から入力と出力をエイリアスして、
@@ -83,8 +82,7 @@ export class AdminMenu {}
 ```
 
 ```angular-html
-
-<admin-menu id="top-menu" (closed)="logMenuClosed()">
+<admin-menu id="top-menu" (closed)="logMenuClosed()"></admin-menu>
 ```
 
 ## 別のディレクティブにディレクティブを追加する
diff --git a/adev-ja/src/content/guide/routing/redirecting-routes.en.md b/adev-ja/src/content/guide/routing/redirecting-routes.en.md
index b58f60ab4..4eb399e6c 100644
--- a/adev-ja/src/content/guide/routing/redirecting-routes.en.md
+++ b/adev-ja/src/content/guide/routing/redirecting-routes.en.md
@@ -98,7 +98,7 @@ Here is an example where the user is redirected to different menu based on the t
 
 ```ts
 import {Routes} from '@angular/router';
-import {MenuComponent} from './menu/menu.component';
+import {Menu} from './menu';
 
 export const routes: Routes = [
   {
@@ -124,9 +124,9 @@ export const routes: Routes = [
   },
 
   // Destination routes
-  {path: 'restaurant/:location/menu/breakfast', component: MenuComponent},
-  {path: 'restaurant/:location/menu/lunch', component: MenuComponent},
-  {path: 'restaurant/:location/menu/dinner', component: MenuComponent},
+  {path: 'restaurant/:location/menu/breakfast', component: Menu},
+  {path: 'restaurant/:location/menu/lunch', component: Menu},
+  {path: 'restaurant/:location/menu/dinner', component: Menu},
 
   // Default redirect
   {path: '', redirectTo: '/restaurant/downtown/menu', pathMatch: 'full'},
diff --git a/adev-ja/src/content/guide/routing/redirecting-routes.md b/adev-ja/src/content/guide/routing/redirecting-routes.md
index 9ef0a769b..0785e9427 100644
--- a/adev-ja/src/content/guide/routing/redirecting-routes.md
+++ b/adev-ja/src/content/guide/routing/redirecting-routes.md
@@ -98,7 +98,7 @@ export const routes: Routes = [{path: 'news', redirectTo: '/blog', pathMatch: 'f
 
 ```ts
 import {Routes} from '@angular/router';
-import {MenuComponent} from './menu/menu.component';
+import {Menu} from './menu';
 
 export const routes: Routes = [
   {
@@ -124,9 +124,9 @@ export const routes: Routes = [
   },
 
   // Destination routes
-  {path: 'restaurant/:location/menu/breakfast', component: MenuComponent},
-  {path: 'restaurant/:location/menu/lunch', component: MenuComponent},
-  {path: 'restaurant/:location/menu/dinner', component: MenuComponent},
+  {path: 'restaurant/:location/menu/breakfast', component: Menu},
+  {path: 'restaurant/:location/menu/lunch', component: Menu},
+  {path: 'restaurant/:location/menu/dinner', component: Menu},
 
   // Default redirect
   {path: '', redirectTo: '/restaurant/downtown/menu', pathMatch: 'full'},
diff --git a/adev-ja/src/content/guide/routing/router-reference.en.md b/adev-ja/src/content/guide/routing/router-reference.en.md
index 2038c2c4c..9df1c9234 100644
--- a/adev-ja/src/content/guide/routing/router-reference.en.md
+++ b/adev-ja/src/content/guide/routing/router-reference.en.md
@@ -56,7 +56,7 @@ The in-application URLs can be indistinguishable from server URLs.
 Modern HTML5 browsers were the first to support `pushState` which is why many people refer to these URLs as "HTML5 style" URLs.
 
 HELPFUL: HTML5 style navigation is the router default.
-In the [LocationStrategy and browser URL styles](common-router-tasks#locationstrategy-and-browser-url-styles) section, learn why HTML5 style is preferable, how to adjust its behavior, and how to switch to the older hash \(`#`\) style, if necessary.
+In the [LocationStrategy and browser URL styles](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles) section, learn why HTML5 style is preferable, how to adjust its behavior, and how to switch to the older hash \(`#`\) style, if necessary.
 
 You must add a [`<base href>` element](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') to the application's `index.html` for `pushState` routing to work.
 The browser uses the `<base href>` value to prefix relative URLs when referencing CSS files, scripts, and images.
@@ -64,7 +64,9 @@ The browser uses the `<base href>` value to prefix relative URLs when referencin
 Add the `<base>` element just after the `<head>` tag.
 If the `app` folder is the application root, as it is for this application, set the `href` value in `index.html` as shown here.
 
-<docs-code header="index.html (base-href)" path="adev/src/content/examples/router/src/index.html" region="base-href"/>
+```html
+<base href="/" />
+```
 
 ### HTML5 URLs and the `<base href>`
 
@@ -83,7 +85,7 @@ While the router uses the [HTML5 pushState](https://developer.mozilla.org/docs/W
 The preferred way to configure the strategy is to add a [`<base href>` element](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') tag in the `<head>` of the `index.html`.
 
 ```angular-html
-<base href="/">
+<base href="/" />
 ```
 
 Without that tag, the browser might not be able to load resources \(images, CSS, scripts\) when "deep linking" into the application.
diff --git a/adev-ja/src/content/guide/routing/router-reference.md b/adev-ja/src/content/guide/routing/router-reference.md
index 7178fd397..229d93463 100644
--- a/adev-ja/src/content/guide/routing/router-reference.md
+++ b/adev-ja/src/content/guide/routing/router-reference.md
@@ -56,7 +56,7 @@
 最新のHTML5ブラウザが最初に`pushState`をサポートしたため、多くの人がこれらのURLを「HTML5スタイル」URLと呼んでいます。
 
 HELPFUL: HTML5スタイルのナビゲーションはルーターのデフォルトです。
-[LocationStrategyとブラウザURLスタイル](common-router-tasks#locationstrategy-and-browser-url-styles)のセクションで、HTML5スタイルが推奨される理由、その動作を調整する方法、必要に応じて古いハッシュ\(`#`\)スタイルに切り替える方法を学びましょう。
+[LocationStrategyとブラウザURLスタイル](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles)のセクションで、HTML5スタイルが推奨される理由、その動作を調整する方法、必要に応じて古いハッシュ\(`#`\)スタイルに切り替える方法を学びましょう。
 
 `pushState`ルーティングを機能させるには、アプリケーションの`index.html`に[`<base href>`要素](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href')を追加する必要があります。
 ブラウザは、CSSファイル、スクリプト、画像を相対URLで参照する際に、`<base href>`の値をプレフィックスとして使用します。
@@ -64,7 +64,9 @@ HELPFUL: HTML5スタイルのナビゲーションはルーターのデフォル
 `<base>`要素は`<head>`タグの直後に追加します。
 `app`フォルダがこのアプリケーションのアプリケーションルートである場合、`index.html`の`href`値をここに示されているように設定します。
 
-<docs-code header="index.html (base-href)" path="adev/src/content/examples/router/src/index.html" region="base-href"/>
+```html
+<base href="/" />
+```
 
 ### HTML5 URLと`<base href>` {#html5-urls-and-the-base-href}
 
@@ -83,7 +85,7 @@ scheme    authority      path        query   fragment
 この戦略を設定する推奨される方法は、`index.html`の`<head>`に[`<base href>`要素](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href')タグを追加することです。
 
 ```angular-html
-<base href="/">
+<base href="/" />
 ```
 
 そのタグがないと、アプリケーションに「ディープリンク」した場合、ブラウザがリソース（画像、CSS、スクリプト）をロードできない可能性があります。
diff --git a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md
index 04f68bcaf..c161a28f1 100644
--- a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md
+++ b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md
@@ -35,13 +35,13 @@ In addition to the default Angular application framework, you will also create a
    ng generate component profile
    ```
 
-1. In your code editor, locate the file, `profile.component.html` and replace the placeholder content with the following HTML.
+1. In your code editor, locate the file, `profile.html` and replace the placeholder content with the following HTML.
 
-   <docs-code header="profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
+   <docs-code header="profile.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.html"/>
 
-1. In your code editor, locate the file, `app.component.html` and replace the placeholder content with the following HTML.
+1. In your code editor, locate the file, `app.html` and replace the placeholder content with the following HTML.
 
-   <docs-code header="app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
+   <docs-code header="app.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.html"/>
 
 ## Configure your routes for your application
 
@@ -77,7 +77,7 @@ HELPFUL: A custom URL matcher behaves like any other route definition. Define ch
 
 With the custom matcher in place, you can now bind the route parameter in the `profile` component.
 
-In your code editor, open your `profile.component.ts` file and create an `input` matching the `username` parameter.
+In your code editor, open your `profile.ts` file and create an `input` matching the `username` parameter.
 We added the `withComponentInputBinding` feature earlier
 in `provideRouter`. This allows the `Router` to bind information directly to the route components.
 
diff --git a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md
index fe4ae5a97..de32a56e8 100644
--- a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md
+++ b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md
@@ -35,13 +35,13 @@ Angular CLIを使用して、新しいアプリケーション_angular-custom-ro
    ng generate component profile
    ```
 
-1. コードエディタで`profile.component.html`ファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。
+1. コードエディタで`profile.html`ファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。
 
-   <docs-code header="profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
+   <docs-code header="profile.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.html"/>
 
-1. コードエディタで`app.component.html`ファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。
+1. コードエディタで`app.html`ファイルを見つけ、プレースホルダーコンテンツを次のHTMLに置き換えます。
 
-   <docs-code header="app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
+   <docs-code header="app.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.html"/>
 
 ## アプリケーションのルートを構成する
 
@@ -77,7 +77,7 @@ HELPFUL: カスタムURLマッチャーは、他のルート定義と同じよ
 
 カスタムマッチャーが設定されたので、`profile`コンポーネントでルートパラメーターをバインドできます。
 
-コードエディタで`profile.component.ts`ファイルを開き、`username`パラメーターと一致する`input`を作成します。
+コードエディタで`profile.ts`ファイルを開き、`username`パラメーターと一致する`input`を作成します。
 以前、`provideRouter`で`withComponentInputBinding`機能を追加しました。
 これにより、`Router`はルートコンポーネントに直接情報をバインドできます。
 
diff --git a/adev-ja/src/content/guide/templates/defer.en.md b/adev-ja/src/content/guide/templates/defer.en.md
index 79abd3930..cee24edc0 100644
--- a/adev-ja/src/content/guide/templates/defer.en.md
+++ b/adev-ja/src/content/guide/templates/defer.en.md
@@ -33,7 +33,7 @@ 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/templates/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](#controlling-deferred-content-loading-with-triggers) occurs or the `when` condition is met.
 
 By default, a `@defer` block is triggered when the browser state becomes [idle](/guide/templates/defer#idle).
 
@@ -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/templates/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](#controlling-deferred-content-loading-with-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_.
 
@@ -317,11 +317,11 @@ it('should render a defer block in different states', async () => {
       } @loading {
         Loading...
       }
-    `
+    `,
   })
-  class ComponentA {}
+  class ExampleA {}
   // Create component fixture.
-  const componentFixture = TestBed.createComponent(ComponentA);
+  const componentFixture = TestBed.createComponent(ExampleA);
   // Retrieve the list of all defer block fixtures and get the first block.
   const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
   // Renders placeholder state by default.
diff --git a/adev-ja/src/content/guide/templates/defer.md b/adev-ja/src/content/guide/templates/defer.md
index fae7235ed..b9735d92b 100644
--- a/adev-ja/src/content/guide/templates/defer.md
+++ b/adev-ja/src/content/guide/templates/defer.md
@@ -33,7 +33,7 @@ Angularのコンパイラは、`@defer`ブロックで使用される各コン
 
 ### `@defer`
 
-これは、遅延読み込みされるコンテンツのセクションを定義するプライマリブロックです。これは最初はレンダリングされません。遅延コンテンツは、指定された[トリガー](/guide/templates/defer#triggers)が発生するか、`when`条件が満たされたときに読み込まれてレンダリングされます。
+これは、遅延読み込みされるコンテンツのセクションを定義するプライマリブロックです。これは最初はレンダリングされません。遅延コンテンツは、指定された[トリガー](#controlling-deferred-content-loading-with-triggers)が発生するか、`when`条件が満たされたときに読み込まれてレンダリングされます。
 
 デフォルトでは、`@defer`ブロックはブラウザの状態が[アイドル](/guide/templates/defer#idle)になるとトリガーされます。
 
@@ -57,7 +57,7 @@ Angularのコンパイラは、`@defer`ブロックで使用される各コン
 }
 ```
 
-オプションですが、特定のトリガーでは、`@placeholder`または[テンプレート参照変数](/guide/templates/variables#template-reference-variables)のいずれかの存在が必要になる場合があります。詳細については、[トリガー](/guide/templates/defer#triggers)セクションを参照してください。
+オプションですが、特定のトリガーでは、`@placeholder`または[テンプレート参照変数](/guide/templates/variables#template-reference-variables)のいずれかの存在が必要になる場合があります。詳細については、[トリガー](#controlling-deferred-content-loading-with-triggers)セクションを参照してください。
 
 Angularは、読み込みが完了すると、プレースホルダーコンテンツをメインコンテンツに置き換えます。プレースホルダーセクションには、プレーンHTML、コンポーネント、ディレクティブ、パイプなど、あらゆるコンテンツを使用できます。_プレースホルダーブロックの依存関係は先に読み込まれます_。
 
@@ -315,13 +315,13 @@ it('さまざまな状態で`@defer`ブロックをレンダリングする', as
       } @placeholder {
         プレースホルダー
       } @loading {
-        読み込み中...
+        Loading...
       }
-    `
+    `,
   })
-  class ComponentA {}
+  class ExampleA {}
   // コンポーネントのfixtureを作成します。
-  const componentFixture = TestBed.createComponent(ComponentA);
+  const componentFixture = TestBed.createComponent(ExampleA);
   // すべての`@defer`ブロックのfixtureを取得し、最初のブロックを取得します。
   const deferBlockFixture = (await componentFixture.getDeferBlocks())[0];
   // デフォルトでプレースホルダー状態をレンダリングします。
diff --git a/adev-ja/src/content/guide/templates/ng-container.en.md b/adev-ja/src/content/guide/templates/ng-container.en.md
index 22895c151..4359ea648 100644
--- a/adev-ja/src/content/guide/templates/ng-container.en.md
+++ b/adev-ja/src/content/guide/templates/ng-container.en.md
@@ -37,11 +37,11 @@ You can use Angular's built-in `NgComponentOutlet` directive to dynamically rend
   template: `
     <h2>Your profile</h2>
     <ng-container [ngComponentOutlet]="profileComponent()" />
-  `
+  `,
 })
 export class UserProfile {
   isAdmin = input(false);
-  profileComponent = computed(() => this.isAdmin() ? AdminProfile : BasicUserProfile);
+  profileComponent = computed(() => (this.isAdmin() ? AdminProfile : BasicUserProfile));
 }
 ```
 
@@ -59,13 +59,13 @@ You can use Angular's built-in `NgTemplateOutlet` directive to dynamically rende
 
     <ng-template #admin>This is the admin profile</ng-template>
     <ng-template #basic>This is the basic profile</ng-template>
-  `
+  `,
 })
 export class UserProfile {
   isAdmin = input(false);
   adminTemplate = viewChild('admin', {read: TemplateRef});
   basicTemplate = viewChild('basic', {read: TemplateRef});
-  profileTemplate = computed(() => this.isAdmin() ? this.adminTemplate() : this.basicTemplate());
+  profileTemplate = computed(() => (this.isAdmin() ? this.adminTemplate() : this.basicTemplate()));
 }
 ```
 
diff --git a/adev-ja/src/content/guide/templates/ng-container.md b/adev-ja/src/content/guide/templates/ng-container.md
index 2bbd85772..0c728cbe8 100644
--- a/adev-ja/src/content/guide/templates/ng-container.md
+++ b/adev-ja/src/content/guide/templates/ng-container.md
@@ -37,11 +37,11 @@ Angularの組み込みの `NgComponentOutlet` ディレクティブを使用し
   template: `
     <h2>Your profile</h2>
     <ng-container [ngComponentOutlet]="profileComponent()" />
-  `
+  `,
 })
 export class UserProfile {
   isAdmin = input(false);
-  profileComponent = computed(() => this.isAdmin() ? AdminProfile : BasicUserProfile);
+  profileComponent = computed(() => (this.isAdmin() ? AdminProfile : BasicUserProfile));
 }
 ```
 
@@ -59,13 +59,13 @@ Angularの組み込みの `NgTemplateOutlet` ディレクティブを使用し
 
     <ng-template #admin>This is the admin profile</ng-template>
     <ng-template #basic>This is the basic profile</ng-template>
-  `
+  `,
 })
 export class UserProfile {
   isAdmin = input(false);
   adminTemplate = viewChild('admin', {read: TemplateRef});
   basicTemplate = viewChild('basic', {read: TemplateRef});
-  profileTemplate = computed(() => this.isAdmin() ? this.adminTemplate() : this.basicTemplate());
+  profileTemplate = computed(() => (this.isAdmin() ? this.adminTemplate() : this.basicTemplate()));
 }
 ```
 
diff --git a/adev-ja/src/content/guide/templates/whitespace.en.md b/adev-ja/src/content/guide/templates/whitespace.en.md
index 21886c586..ac258face 100644
--- a/adev-ja/src/content/guide/templates/whitespace.en.md
+++ b/adev-ja/src/content/guide/templates/whitespace.en.md
@@ -6,19 +6,20 @@ By default, Angular templates do not preserve whitespace that the framework cons
 
 Most developers prefer to format their templates with newlines and indentation to make the template readable:
 
-```angular-html
+```html
 <section>
   <h3>User profile</h3>
   <label>
     User name
-    <input>
+    <input />
   </label>
 </section>
 ```
 
 This template contains whitespace between all of the elements. The following snippet shows the same HTML with each whitespace character replaced with the hash (`#`) character to highlight how much whitespace is present:
 
-```angular-html
+<!-- prettier-ignore>
+```html
 <!-- Total Whitespace: 20 -->
 <section>###<h3>User profile</h3>###<label>#####User name#####<input>###</label>#</section>
 ```
@@ -29,7 +30,8 @@ Preserving the whitespace as written in the template would result in many unnece
 
 When your web browser renders HTML on a page, it collapses multiple consecutive whitespace characters to a single character:
 
-```angular-html
+<!-- prettier-ignore -->
+```html
 <!-- What it looks like in the template -->
 <p>Hello         world</p>
 ```
diff --git a/adev-ja/src/content/guide/templates/whitespace.md b/adev-ja/src/content/guide/templates/whitespace.md
index 811404a52..b0178e84c 100644
--- a/adev-ja/src/content/guide/templates/whitespace.md
+++ b/adev-ja/src/content/guide/templates/whitespace.md
@@ -6,20 +6,21 @@
 
 ほとんどの開発者は、テンプレートを読みやすくするために、改行とインデントでテンプレートをフォーマットすることを好みます。
 
-```angular-html
+```html
 <section>
   <h3>User profile</h3>
   <label>
     User name
-    <input>
+    <input />
   </label>
 </section>
 ```
 
 このテンプレートには、すべての要素間に空白が含まれています。次のスニペットは、同じHTMLで、存在する空白をすべてハッシュ（`#`）文字に置き換えたもので、どのくらいの空白が存在するかを示しています。
 
-```angular-html
-<!-- 全体の空白: 20 -->
+<!-- prettier-ignore>
+```html
+<!-- Total Whitespace: 20 -->
 <section>###<h3>User profile</h3>###<label>#####User name#####<input>###</label>#</section>
 ```
 
@@ -29,8 +30,9 @@
 
 WebブラウザがページにHTMLをレンダリングする場合、連続する複数の空白文字を1つの文字に折り畳みます。
 
-```angular-html
-<!-- テンプレートでの表示 -->
+<!-- prettier-ignore -->
+```html
+<!-- What it looks like in the template -->
 <p>Hello         world</p>
 ```
 

From f83293d70f0d6559ec7378219c14b065fbc80604 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 00:53:07 +0900
Subject: [PATCH 22/55] fix(docs): migrate small changes (components, aria,
 forms, animations)

- lifecycle: code formatting
- accordion: code formatting
- menu: remove focusFirstItem method (API change)
- forms/signals/overview: Field -> FormField, link fix
- incremental-hydration: class name, link fix, spacing
- form-validation: code formatting, class name fix
- enter-and-leave: new section + content addition
- grid: code formatting
---
 .../content/guide/animations/enter-and-leave.en.md   | 12 +++++++++++-
 .../src/content/guide/animations/enter-and-leave.md  | 10 ++++++++++
 adev-ja/src/content/guide/aria/accordion.en.md       |  6 ++----
 adev-ja/src/content/guide/aria/accordion.md          |  6 ++----
 adev-ja/src/content/guide/aria/grid.en.md            | 12 +++++++-----
 adev-ja/src/content/guide/aria/grid.md               | 12 +++++++-----
 adev-ja/src/content/guide/aria/menu.en.md            |  7 +++----
 adev-ja/src/content/guide/aria/menu.md               |  7 +++----
 adev-ja/src/content/guide/components/lifecycle.en.md |  6 ++++--
 adev-ja/src/content/guide/components/lifecycle.md    |  6 ++++--
 .../src/content/guide/forms/form-validation.en.md    | 10 +++++-----
 adev-ja/src/content/guide/forms/form-validation.md   | 10 +++++-----
 .../src/content/guide/forms/signals/overview.en.md   |  8 ++++----
 adev-ja/src/content/guide/forms/signals/overview.md  |  8 ++++----
 .../src/content/guide/incremental-hydration.en.md    |  8 ++++----
 adev-ja/src/content/guide/incremental-hydration.md   |  8 ++++----
 16 files changed, 79 insertions(+), 57 deletions(-)

diff --git a/adev-ja/src/content/guide/animations/enter-and-leave.en.md b/adev-ja/src/content/guide/animations/enter-and-leave.en.md
index 2a994183a..73be130a0 100644
--- a/adev-ja/src/content/guide/animations/enter-and-leave.en.md
+++ b/adev-ja/src/content/guide/animations/enter-and-leave.en.md
@@ -45,7 +45,7 @@ You can use `animate.leave` to animate elements as they _leave_ the DOM. You can
 
 When the animation completes, Angular automatically removes the animated element from the DOM.
 
-NOTE: When using multiple keyframe animations or transition properties on a an element, Angular waits to remove the element only _after_ the longest of those animations has completed.
+NOTE: When using multiple keyframe animations or transition properties on an element, Angular waits to remove the element only _after_ the longest of those animations has completed.
 
 `animate.leave` can also be used with signals, and other bindings. You can use `animate.leave` with a single class or multiple classes. Either specify it as a simple string with spaces or a string array.
 
@@ -55,6 +55,16 @@ NOTE: When using multiple keyframe animations or transition properties on a an e
     <docs-code header="leave-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css"/>
 </docs-code-multifile>
 
+### Element removal order matters
+
+There is some nuance to how `animate.leave` animations are run and when an animation will occur. `animate.leave` works if it is placed on the element that is being removed. However, `animate.leave` will **not** animate if it is on an element that is a _descendent_ of the element being removed. This is because when a parent node is removed, it takes the entire sub tree with it, and since there are no animations on that parent node, it will be removed immediately. This means there's no element to animate away with `animate.leave`. You will need to consider this in your usage of `animate.leave`.
+
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.ts">
+    <docs-code header="leave.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.ts" />
+    <docs-code header="leave.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.html" />
+    <docs-code header="leave.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.css"/>
+</docs-code-multifile>
+
 ## Event Bindings, Functions, and Third-party Libraries
 
 Both `animate.enter` and `animate.leave` support event binding syntax that allows for function calls. You can use this syntax to call a function in your component code or utilize third-party animation libraries, like [GSAP](https://gsap.com/), [anime.js](https://animejs.com/), or any other JavaScript animation library.
diff --git a/adev-ja/src/content/guide/animations/enter-and-leave.md b/adev-ja/src/content/guide/animations/enter-and-leave.md
index 243f06d66..8191fb972 100644
--- a/adev-ja/src/content/guide/animations/enter-and-leave.md
+++ b/adev-ja/src/content/guide/animations/enter-and-leave.md
@@ -55,6 +55,16 @@ NOTE: 要素に複数のキーフレームアニメーションまたはtransiti
     <docs-code header="leave-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css"/>
 </docs-code-multifile>
 
+### 要素の削除順序が重要 {#element-removal-order-matters}
+
+`animate.leave`アニメーションの実行方法とアニメーションが発生するタイミングには、いくつかの微妙な点があります。`animate.leave`は、削除される要素に配置されている場合に機能します。ただし、`animate.leave`は、削除される要素の_子孫_の要素にある場合はアニメーション**しません**。これは、親ノードが削除されると、サブツリー全体が一緒に削除され、その親ノードにアニメーションがないため、即座に削除されるためです。これは、`animate.leave`でアニメーション化する要素がないことを意味します。`animate.leave`の使用においてこのことを考慮する必要があります。
+
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.ts">
+    <docs-code header="leave.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.ts" />
+    <docs-code header="leave.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.html" />
+    <docs-code header="leave.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-parent.css"/>
+</docs-code-multifile>
+
 ## イベントバインディング、関数、およびサードパーティライブラリ {#event-bindings-functions-and-third-party-libraries}
 
 `animate.enter`と`animate.leave`はどちらも、関数呼び出しを可能にするイベントバインディング構文をサポートしています。この構文を使用して、コンポーネントコード内の関数を呼び出したり、[GSAP](https://gsap.com/)、[anime.js](https://animejs.com/)などのサードパーティのアニメーションライブラリ、またはその他のJavaScriptアニメーションライブラリを利用したり可能です。
diff --git a/adev-ja/src/content/guide/aria/accordion.en.md b/adev-ja/src/content/guide/aria/accordion.en.md
index 2588aeeb4..4a27dc5e0 100644
--- a/adev-ja/src/content/guide/aria/accordion.en.md
+++ b/adev-ja/src/content/guide/aria/accordion.en.md
@@ -145,13 +145,11 @@ Use the `ngAccordionContent` directive on an `ng-template` to defer rendering co
 ```angular-html
 <div ngAccordionGroup>
   <div>
-    <button ngAccordionTrigger panelId="item-1">
-      Trigger Text
-    </button>
+    <button ngAccordionTrigger panelId="item-1">Trigger Text</button>
     <div ngAccordionPanel panelId="item-1">
       <ng-template ngAccordionContent>
         <!-- This content only renders when the panel first opens -->
-        <img src="large-image.jpg" alt="Description">
+        <img src="large-image.jpg" alt="Description" />
         <app-expensive-component />
       </ng-template>
     </div>
diff --git a/adev-ja/src/content/guide/aria/accordion.md b/adev-ja/src/content/guide/aria/accordion.md
index 8c7ec0611..df3d224cf 100644
--- a/adev-ja/src/content/guide/aria/accordion.md
+++ b/adev-ja/src/content/guide/aria/accordion.md
@@ -145,13 +145,11 @@ NOTE: `multiExpandable`入力はデフォルトで`true`です。単一展開の
 ```angular-html
 <div ngAccordionGroup>
   <div>
-    <button ngAccordionTrigger panelId="item-1">
-      Trigger Text
-    </button>
+    <button ngAccordionTrigger panelId="item-1">Trigger Text</button>
     <div ngAccordionPanel panelId="item-1">
       <ng-template ngAccordionContent>
         <!-- このコンテンツは、パネルが最初に開かれたときにのみレンダリングされます -->
-        <img src="large-image.jpg" alt="Description">
+        <img src="large-image.jpg" alt="Description" />
         <app-expensive-component />
       </ng-template>
     </div>
diff --git a/adev-ja/src/content/guide/aria/grid.en.md b/adev-ja/src/content/guide/aria/grid.en.md
index 2b162aee1..e91a02a4b 100644
--- a/adev-ja/src/content/guide/aria/grid.en.md
+++ b/adev-ja/src/content/guide/aria/grid.en.md
@@ -135,11 +135,13 @@ Instead of tabbing through each button, users navigate with arrow keys and only
 Enable selection with `[enableSelection]="true"` and configure how focus and selection interact.
 
 ```angular-html
-<table ngGrid
-       [enableSelection]="true"
-       [selectionMode]="'explicit'"
-       [multi]="true"
-       [focusMode]="'roving'">
+<table
+  ngGrid
+  [enableSelection]="true"
+  [selectionMode]="'explicit'"
+  [multi]="true"
+  [focusMode]="'roving'"
+>
   <tr ngGridRow>
     <td ngGridCell>Cell 1</td>
     <td ngGridCell>Cell 2</td>
diff --git a/adev-ja/src/content/guide/aria/grid.md b/adev-ja/src/content/guide/aria/grid.md
index 88aa28ebf..e1d47fb85 100644
--- a/adev-ja/src/content/guide/aria/grid.md
+++ b/adev-ja/src/content/guide/aria/grid.md
@@ -135,11 +135,13 @@
 `[enableSelection]="true"`で選択を有効にし、フォーカスと選択がどのように相互作用するかを設定します。
 
 ```angular-html
-<table ngGrid
-       [enableSelection]="true"
-       [selectionMode]="'explicit'"
-       [multi]="true"
-       [focusMode]="'roving'">
+<table
+  ngGrid
+  [enableSelection]="true"
+  [selectionMode]="'explicit'"
+  [multi]="true"
+  [focusMode]="'roving'"
+>
   <tr ngGridRow>
     <td ngGridCell>Cell 1</td>
     <td ngGridCell>Cell 2</td>
diff --git a/adev-ja/src/content/guide/aria/menu.en.md b/adev-ja/src/content/guide/aria/menu.en.md
index 444325cfd..fe69c67c6 100644
--- a/adev-ja/src/content/guide/aria/menu.en.md
+++ b/adev-ja/src/content/guide/aria/menu.en.md
@@ -190,10 +190,9 @@ The container directive for menu items.
 
 #### Methods
 
-| Method           | Parameters | Description                        |
-| ---------------- | ---------- | ---------------------------------- |
-| `close`          | none       | Closes the menu                    |
-| `focusFirstItem` | none       | Moves focus to the first menu item |
+| Method  | Parameters | Description     |
+| ------- | ---------- | --------------- |
+| `close` | none       | Closes the menu |
 
 ### MenuBar
 
diff --git a/adev-ja/src/content/guide/aria/menu.md b/adev-ja/src/content/guide/aria/menu.md
index c9bbe9140..b0f1e8966 100644
--- a/adev-ja/src/content/guide/aria/menu.md
+++ b/adev-ja/src/content/guide/aria/menu.md
@@ -190,10 +190,9 @@
 
 #### メソッド {#methods}
 
-| Method           | Parameters | Description                        |
-| ---------------- | ---------- | ---------------------------------- |
-| `close`          | none       | メニューを閉じます |
-| `focusFirstItem` | none       | 最初のメニューアイテムにフォーカスを移動します |
+| Method  | Parameters | Description     |
+| ------- | ---------- | --------------- |
+| `close` | none       | メニューを閉じます |
 
 ### MenuBar {#menubar}
 
diff --git a/adev-ja/src/content/guide/components/lifecycle.en.md b/adev-ja/src/content/guide/components/lifecycle.en.md
index 177fc5a96..b74ef898c 100644
--- a/adev-ja/src/content/guide/components/lifecycle.en.md
+++ b/adev-ja/src/content/guide/components/lifecycle.en.md
@@ -256,7 +256,9 @@ next phase.
 ```ts
 import {Component, ElementRef, afterNextRender} from '@angular/core';
 
-@Component({...})
+@Component({
+  /*...*/
+})
 export class UserProfile {
   private prevPadding = 0;
   private elementHeight = 0;
@@ -281,7 +283,7 @@ export class UserProfile {
         if (didWrite) {
           this.elementHeight = nativeElement.getBoundingClientRect().height;
         }
-      }
+      },
     });
   }
 }
diff --git a/adev-ja/src/content/guide/components/lifecycle.md b/adev-ja/src/content/guide/components/lifecycle.md
index 514e989cd..8f02a019c 100644
--- a/adev-ja/src/content/guide/components/lifecycle.md
+++ b/adev-ja/src/content/guide/components/lifecycle.md
@@ -256,7 +256,9 @@ AngularでDOMを操作する方法については、[DOM API の使用](guide/co
 ```ts
 import {Component, ElementRef, afterNextRender} from '@angular/core';
 
-@Component({...})
+@Component({
+  /*...*/
+})
 export class UserProfile {
   private prevPadding = 0;
   private elementHeight = 0;
@@ -281,7 +283,7 @@ export class UserProfile {
         if (didWrite) {
           this.elementHeight = nativeElement.getBoundingClientRect().height;
         }
-      }
+      },
     });
   }
 }
diff --git a/adev-ja/src/content/guide/forms/form-validation.en.md b/adev-ja/src/content/guide/forms/form-validation.en.md
index ca5aad51d..07d9d9d67 100644
--- a/adev-ja/src/content/guide/forms/form-validation.en.md
+++ b/adev-ja/src/content/guide/forms/form-validation.en.md
@@ -250,9 +250,9 @@ A common UI pattern is to show a spinner while the async validation is being per
 The following example shows how to achieve this in a template-driven form.
 
 ```angular-html
-<input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator>
+<input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator />
 
-@if(model.pending) {
+@if (model.pending) {
   <app-spinner />
 }
 ```
@@ -278,7 +278,7 @@ interface ActorsService {
 In a real world application, the `ActorsService` would be responsible for making an HTTP request to the actor database to check if the role is available.
 From the validator's point of view, the actual implementation of the service is not important, so the example can just code against the `ActorsService` interface.
 
-As the validation begins, the `UnambiguousRoleValidator` delegates to the `ActorsService` `isRoleTaken()` method with the current control value.
+As the validation begins, the `UniqueRoleValidator` delegates to the `ActorsService` `isRoleTaken()` method with the current control value.
 At this point the control is marked as `pending` and remains in this state until the observable chain returned from the `validate()` method completes.
 
 The `isRoleTaken()` method dispatches an HTTP request that checks if the role is available, and returns `Observable<boolean>` as the result.
@@ -300,7 +300,7 @@ To use an async validator in reactive forms, begin by injecting the validator in
 
 Then, pass the validator function directly to the `FormControl` to apply it.
 
-In the following example, the `validate` function of `UnambiguousRoleValidator` is applied to `roleControl` by passing it to the control's `asyncValidators` option and binding it to the instance of `UnambiguousRoleValidator` that was injected into `ActorFormReactiveComponent`.
+In the following example, the `validate` function of `UniqueRoleValidator` is applied to `roleControl` by passing it to the control's `asyncValidators` option and binding it to the instance of `UniqueRoleValidator` that was injected into `ActorFormReactiveComponent`.
 The value of `asyncValidators` can be either a single async validator function, or an array of functions.
 To learn more about `FormControl` options, see the [AbstractControlOptions](api/forms/AbstractControlOptions) API reference.
 
@@ -330,7 +330,7 @@ You can delay updating the form validity by changing the `updateOn` property fro
 With template-driven forms, set the property in the template.
 
 ```angular-html
-<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">
+<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}" />
 ```
 
 With reactive forms, set the property in the `FormControl` instance.
diff --git a/adev-ja/src/content/guide/forms/form-validation.md b/adev-ja/src/content/guide/forms/form-validation.md
index 740a7b4bc..06aca2471 100644
--- a/adev-ja/src/content/guide/forms/form-validation.md
+++ b/adev-ja/src/content/guide/forms/form-validation.md
@@ -250,9 +250,9 @@ const actorForm = new FormGroup(
 次の例は、テンプレート駆動フォームでこれを実現する方法を示しています。
 
 ```angular-html
-<input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator>
+<input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator />
 
-@if(model.pending) {
+@if (model.pending) {
   <app-spinner />
 }
 ```
@@ -278,7 +278,7 @@ interface ActorsService {
 実際のアプリケーションでは、`ActorsService`は、アクターデータベースにHTTPリクエストを送信して役割が利用可能かどうかを確認する役割を担います。
 バリデーターの観点から、サービスの実際の実装は重要でないため、例では`ActorsService`インターフェースに対してのみコードを作成できます。
 
-検証が始まると、`UnambiguousRoleValidator`は、現在のコントロール値で`ActorsService`の`isRoleTaken()`メソッドに委任します。
+検証が始まると、`UniqueRoleValidator`は、現在のコントロール値で`ActorsService`の`isRoleTaken()`メソッドに委任します。
 この時点で、コントロールは`pending`としてマークされ、`validate()`メソッドから返されるObservableチェーンが完了するまで、この状態を維持します。
 
 `isRoleTaken()`メソッドは、役割が利用可能かどうかを確認するHTTPリクエストをディスパッチし、結果として`Observable<boolean>`を返します。
@@ -300,7 +300,7 @@ interface ActorsService {
 
 次に、バリデーター関数を`FormControl`に直接渡して、適用します。
 
-次の例では、`UnambiguousRoleValidator`の`validate`関数が、`roleControl`に適用されています。この関数をコントロールの`asyncValidators`オプションに渡し、`ActorFormReactiveComponent`に注入された`UnambiguousRoleValidator`のインスタンスにバインドしています。
+次の例では、`UniqueRoleValidator`の`validate`関数が、`roleControl`に適用されています。この関数をコントロールの`asyncValidators`オプションに渡し、`ActorFormReactiveComponent`に注入された`UniqueRoleValidator`のインスタンスにバインドしています。
 `asyncValidators`の値は、単一の非同期バリデーター関数、または関数の配列にできます。
 `FormControl`オプションの詳細については、[AbstractControlOptions](api/forms/AbstractControlOptions) APIリファレンスを参照してください。
 
@@ -330,7 +330,7 @@ interface ActorsService {
 テンプレート駆動フォームでは、テンプレートでプロパティを設定します。
 
 ```angular-html
-<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">
+<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}" />
 ```
 
 リアクティブフォームでは、`FormControl`インスタンスでプロパティを設定します。
diff --git a/adev-ja/src/content/guide/forms/signals/overview.en.md b/adev-ja/src/content/guide/forms/signals/overview.en.md
index c9fd61f1b..903fb578f 100644
--- a/adev-ja/src/content/guide/forms/signals/overview.en.md
+++ b/adev-ja/src/content/guide/forms/signals/overview.en.md
@@ -32,15 +32,15 @@ Signal Forms require:
 Signal Forms are already included in the `@angular/forms` package. Import the necessary functions and directives from `@angular/forms/signals`:
 
 ```ts
-import {form, Field, required, email} from '@angular/forms/signals';
+import {form, FormField, required, email} from '@angular/forms/signals';
 ```
 
-The `Field` directive must be imported into any component that binds form fields to HTML inputs:
+The `FormField` directive must be imported into any component that binds form fields to HTML inputs:
 
 ```ts
 @Component({
   // ...
-  imports: [Field],
+  imports: [FormField],
 })
 ```
 
@@ -51,7 +51,7 @@ To learn more about how Signal Forms work, check out the following guides:
 <docs-pill-row>
   <docs-pill href="essentials/signal-forms" title="Signal forms essentials" />
   <docs-pill href="guide/forms/signals/models" title="Form models" />
-  <docs-pill href="guide/forms/signals/designing-your-form-model" title="Designing your form model" />
+  <docs-pill href="guide/forms/signals/model-design" title="Designing your form model" />
   <docs-pill href="guide/forms/signals/field-state-management" title="Field state management" />
   <docs-pill href="guide/forms/signals/validation" title="Validation" />
   <docs-pill href="guide/forms/signals/custom-controls" title="Custom controls" />
diff --git a/adev-ja/src/content/guide/forms/signals/overview.md b/adev-ja/src/content/guide/forms/signals/overview.md
index 83a6ed63e..0eae7b7d8 100644
--- a/adev-ja/src/content/guide/forms/signals/overview.md
+++ b/adev-ja/src/content/guide/forms/signals/overview.md
@@ -32,15 +32,15 @@ NOTE: テンプレート駆動フォームやリアクティブフォームか
 シグナルフォームはすでに`@angular/forms`パッケージに含まれています。`@angular/forms/signals`から必要な関数とディレクティブをインポートします:
 
 ```ts
-import {form, Field, required, email} from '@angular/forms/signals';
+import {form, FormField, required, email} from '@angular/forms/signals';
 ```
 
-`Field`ディレクティブは、フォームフィールドをHTML入力にバインドするすべてのコンポーネントにインポートする必要があります:
+`FormField`ディレクティブは、フォームフィールドをHTML入力にバインドするすべてのコンポーネントにインポートする必要があります:
 
 ```ts
 @Component({
   // ...
-  imports: [Field],
+  imports: [FormField],
 })
 ```
 
@@ -51,7 +51,7 @@ import {form, Field, required, email} from '@angular/forms/signals';
 <docs-pill-row>
   <docs-pill href="essentials/signal-forms" title="Signal forms essentials" />
   <docs-pill href="guide/forms/signals/models" title="Form models" />
-  <docs-pill href="guide/forms/signals/designing-your-form-model" title="Designing your form model" />
+  <docs-pill href="guide/forms/signals/model-design" title="Designing your form model" />
   <docs-pill href="guide/forms/signals/field-state-management" title="Field state management" />
   <docs-pill href="guide/forms/signals/validation" title="Validation" />
   <docs-pill href="guide/forms/signals/custom-controls" title="Custom controls" />
diff --git a/adev-ja/src/content/guide/incremental-hydration.en.md b/adev-ja/src/content/guide/incremental-hydration.en.md
index dab1cb49b..a4f5606bd 100644
--- a/adev-ja/src/content/guide/incremental-hydration.en.md
+++ b/adev-ja/src/content/guide/incremental-hydration.en.md
@@ -22,7 +22,7 @@ import {
 } from '@angular/platform-browser';
 ...
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideClientHydration(withIncrementalHydration())]
 });
 ```
@@ -31,7 +31,7 @@ Incremental Hydration depends on and enables [event replay](guide/hydration#capt
 
 ## How does incremental hydration work?
 
-Incremental hydration builds on top of full-application [hydration](guide/hydration), [deferrable views](guide/defer), and [event replay](guide/hydration#capturing-and-replaying-events). With incremental hydration, you can add additional triggers to `@defer` blocks that define incremental hydration boundaries. Adding a `hydrate` trigger to a defer block tells Angular that it should load that defer block's dependencies during server-side rendering and render the main template rather than the `@placeholder`. When client-side rendering, the dependencies are still deferred, and the defer block content stays dehydrated until its `hydrate` trigger fires. That trigger tells the defer block to fetch its dependencies and hydrate the content. Any browser events, specifically those that match listeners registered in your component, that are triggered by the user prior to hydration are queued up and replayed once the hydration process is complete.
+Incremental hydration builds on top of full-application [hydration](guide/hydration), [deferrable views](/guide/templates/defer), and [event replay](guide/hydration#capturing-and-replaying-events). With incremental hydration, you can add additional triggers to `@defer` blocks that define incremental hydration boundaries. Adding a `hydrate` trigger to a defer block tells Angular that it should load that defer block's dependencies during server-side rendering and render the main template rather than the `@placeholder`. When client-side rendering, the dependencies are still deferred, and the defer block content stays dehydrated until its `hydrate` trigger fires. That trigger tells the defer block to fetch its dependencies and hydrate the content. Any browser events, specifically those that match listeners registered in your component, that are triggered by the user prior to hydration are queued up and replayed once the hydration process is complete.
 
 ## Controlling hydration of content with triggers
 
@@ -175,7 +175,7 @@ Hydrate triggers are additional triggers that are used alongside regular trigger
 ```angular-html
 @defer (on idle; hydrate on interaction) {
   <example-cmp />
-} @placeholder{
+} @placeholder {
   <div>Example Placeholder</div>
 }
 ```
@@ -194,7 +194,7 @@ Angular's component and dependency system is hierarchical, which means hydrating
   } @placeholder {
     <div>Child placeholder</div>
   }
-} @placeholder{
+} @placeholder {
   <div>Parent Placeholder</div>
 }
 ```
diff --git a/adev-ja/src/content/guide/incremental-hydration.md b/adev-ja/src/content/guide/incremental-hydration.md
index 3f3bf9039..dc83c2202 100644
--- a/adev-ja/src/content/guide/incremental-hydration.md
+++ b/adev-ja/src/content/guide/incremental-hydration.md
@@ -22,7 +22,7 @@ import {
 } from '@angular/platform-browser';
 ...
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideClientHydration(withIncrementalHydration())]
 });
 ```
@@ -31,7 +31,7 @@ bootstrapApplication(AppComponent, {
 
 ## インクリメンタルハイドレーションの動作方法
 
-インクリメンタルハイドレーションは、完全なアプリケーション[ハイドレーション](guide/hydration)、[遅延可能ビュー](guide/defer)、および[イベントリプレイ](guide/hydration#capturing-and-replaying-events)を基盤として構築されています。インクリメンタルハイドレーションを使用すると、インクリメンタルハイドレーションの境界を定義する`@defer`ブロックに追加のトリガーを追加できます。`defer`ブロックに`hydrate`トリガーを追加すると、Angularはサーバーサイドレンダリング中にその`defer`ブロックの依存関係をロードし、`@placeholder`ではなくメインテンプレートをレンダリングする必要があることを認識します。クライアントサイドレンダリングの場合、依存関係はまだ遅延され、`hydrate`トリガーが起動するまで`defer`ブロックのコンテンツは非ハイドレーション状態のままです。そのトリガーは、`defer`ブロックに依存関係を取得してコンテンツをハイドレーションするよう指示します。ハイドレーションの前にユーザーによってトリガーされたブラウザイベント、特にコンポーネントに登録されたリスナーと一致するイベントは、キューに入れられ、ハイドレーションプロセスが完了すると再生されます。
+インクリメンタルハイドレーションは、完全なアプリケーション[ハイドレーション](guide/hydration)、[遅延可能ビュー](/guide/templates/defer)、および[イベントリプレイ](guide/hydration#capturing-and-replaying-events)を基盤として構築されています。インクリメンタルハイドレーションを使用すると、インクリメンタルハイドレーションの境界を定義する`@defer`ブロックに追加のトリガーを追加できます。`defer`ブロックに`hydrate`トリガーを追加すると、Angularはサーバーサイドレンダリング中にその`defer`ブロックの依存関係をロードし、`@placeholder`ではなくメインテンプレートをレンダリングする必要があることを認識します。クライアントサイドレンダリングの場合、依存関係はまだ遅延され、`hydrate`トリガーが起動するまで`defer`ブロックのコンテンツは非ハイドレーション状態のままです。そのトリガーは、`defer`ブロックに依存関係を取得してコンテンツをハイドレーションするよう指示します。ハイドレーションの前にユーザーによってトリガーされたブラウザイベント、特にコンポーネントに登録されたリスナーと一致するイベントは、キューに入れられ、ハイドレーションプロセスが完了すると再生されます。
 
 ## トリガーによるコンテンツのハイドレーション制御
 
@@ -175,7 +175,7 @@ NOTE: `hydrate never`を使用すると、指定された`@defer`ブロックの
 ```angular-html
 @defer (on idle; hydrate on interaction) {
   <example-cmp />
-} @placeholder{
+} @placeholder {
   <div>Example Placeholder</div>
 }
 ```
@@ -194,7 +194,7 @@ Angularのコンポーネントと依存関係のシステムは階層的であ
   } @placeholder {
     <div>Child placeholder</div>
   }
-} @placeholder{
+} @placeholder {
   <div>Parent Placeholder</div>
 }
 ```

From 113d08c78f621be5e9374555d20b04b60cc7f8f8 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 00:56:23 +0900
Subject: [PATCH 23/55] fix(docs): migrate components, routing, testing changes

- content-projection: code formatting
- styling: code formatting
- hydration: class name changes (AppComponent -> App)
- route-transition-animations: link fixes, API change
- components-scenarios: typo fixes, link fix, formatting
---
 .../guide/components/content-projection.en.md      | 12 +++++++++---
 .../content/guide/components/content-projection.md | 12 +++++++++---
 adev-ja/src/content/guide/components/styling.en.md | 12 ++++++++----
 adev-ja/src/content/guide/components/styling.md    | 14 +++++++++-----
 adev-ja/src/content/guide/hydration.en.md          | 12 ++++++------
 adev-ja/src/content/guide/hydration.md             | 12 ++++++------
 .../routing/route-transition-animations.en.md      | 12 +++++++-----
 .../guide/routing/route-transition-animations.md   | 12 +++++++-----
 .../guide/testing/components-scenarios.en.md       | 12 ++++++------
 .../content/guide/testing/components-scenarios.md  | 12 ++++++------
 10 files changed, 73 insertions(+), 49 deletions(-)

diff --git a/adev-ja/src/content/guide/components/content-projection.en.md b/adev-ja/src/content/guide/components/content-projection.en.md
index 3fe55711f..f11feb7f7 100644
--- a/adev-ja/src/content/guide/components/content-projection.en.md
+++ b/adev-ja/src/content/guide/components/content-projection.en.md
@@ -10,7 +10,9 @@ example, you may want to create a custom card component:
   selector: 'custom-card',
   template: '<div class="card-shadow"> <!-- card content goes here --> </div>',
 })
-export class CustomCard {/* ... */}
+export class CustomCard {
+  /* ... */
+}
 ```
 
 **You can use the `<ng-content>` element as a placeholder to mark where content should go**:
@@ -20,7 +22,9 @@ export class CustomCard {/* ... */}
   selector: 'custom-card',
   template: '<div class="card-shadow"> <ng-content/> </div>',
 })
-export class CustomCard {/* ... */}
+export class CustomCard {
+  /* ... */
+}
 ```
 
 TIP: `<ng-content>` works similarly
@@ -40,7 +44,9 @@ rendered, or **projected**, at the location of that `<ng-content>`:
     </div>
   `,
 })
-export class CustomCard {/* ... */}
+export class CustomCard {
+  /* ... */
+}
 ```
 
 ```angular-html
diff --git a/adev-ja/src/content/guide/components/content-projection.md b/adev-ja/src/content/guide/components/content-projection.md
index 1e84cc6cc..ff4496994 100644
--- a/adev-ja/src/content/guide/components/content-projection.md
+++ b/adev-ja/src/content/guide/components/content-projection.md
@@ -10,7 +10,9 @@ TIP: このガイドは、すでに [基本ガイド](essentials) を読んだ
   selector: 'custom-card',
   template: '<div class="card-shadow"> <!-- card content goes here --> </div>',
 })
-export class CustomCard {/* ... */}
+export class CustomCard {
+  /* ... */
+}
 ```
 
 **`<ng-content>`要素は、コンテンツを配置する場所を示すプレースホルダーとして使用できます**:
@@ -20,7 +22,9 @@ export class CustomCard {/* ... */}
   selector: 'custom-card',
   template: '<div class="card-shadow"> <ng-content/> </div>',
 })
-export class CustomCard {/* ... */}
+export class CustomCard {
+  /* ... */
+}
 ```
 
 TIP: `<ng-content>`は、
@@ -40,7 +44,9 @@ Angular固有の機能も備えています。
     </div>
   `,
 })
-export class CustomCard {/* ... */}
+export class CustomCard {
+  /* ... */
+}
 ```
 
 ```angular-html
diff --git a/adev-ja/src/content/guide/components/styling.en.md b/adev-ja/src/content/guide/components/styling.en.md
index 0f00e7485..0355304f2 100644
--- a/adev-ja/src/content/guide/components/styling.en.md
+++ b/adev-ja/src/content/guide/components/styling.en.md
@@ -7,10 +7,14 @@ Components can optionally include CSS styles that apply to that component's DOM:
 ```angular-ts {highlight:[4]}
 @Component({
   selector: 'profile-photo',
-  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
-  styles: ` img { border-radius: 50%; } `,
+  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
+  styles: `
+    img {
+      border-radius: 50%;
+    }
+  `,
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 You can also choose to write your styles in separate files:
@@ -21,7 +25,7 @@ You can also choose to write your styles in separate files:
   templateUrl: 'profile-photo.html',
   styleUrl: 'profile-photo.css',
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 When Angular compiles your component, these styles are emitted with your component's JavaScript
diff --git a/adev-ja/src/content/guide/components/styling.md b/adev-ja/src/content/guide/components/styling.md
index a685843ad..50253433a 100644
--- a/adev-ja/src/content/guide/components/styling.md
+++ b/adev-ja/src/content/guide/components/styling.md
@@ -7,10 +7,14 @@ TIP: このガイドでは、すでに[基本概念のガイド](essentials)を
 ```angular-ts {highlight:[4]}
 @Component({
   selector: 'profile-photo',
-  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
-  styles: ` img { border-radius: 50%; } `,
+  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
+  styles: `
+    img {
+      border-radius: 50%;
+    }
+  `,
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 また、別のファイルにスタイルを記述できます。
@@ -21,7 +25,7 @@ export class ProfilePhoto { }
   templateUrl: 'profile-photo.html',
   styleUrl: 'profile-photo.css',
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 Angularがコンポーネントをコンパイルすると、これらのスタイルはコンポーネントのJavaScript出力と共に発行されます。
@@ -44,7 +48,7 @@ CSSを出力するすべてのツールと連携します。
   ...,
   encapsulation: ViewEncapsulation.None,
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 ### ViewEncapsulation.Emulated
diff --git a/adev-ja/src/content/guide/hydration.en.md b/adev-ja/src/content/guide/hydration.en.md
index e9e71a0a6..2201aa889 100644
--- a/adev-ja/src/content/guide/hydration.en.md
+++ b/adev-ja/src/content/guide/hydration.en.md
@@ -29,7 +29,7 @@ import {
 } from '@angular/platform-browser';
 ...
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideClientHydration()]
 });
 ```
@@ -41,9 +41,9 @@ import {provideClientHydration} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
 @NgModule({
-  declarations: [AppComponent],
-  exports: [AppComponent],
-  bootstrap: [AppComponent],
+  declarations: [App],
+  exports: [App],
+  bootstrap: [App],
   providers: [provideClientHydration()],
 })
 export class AppModule {}
@@ -183,7 +183,7 @@ import {provideStabilityDebugging} from '@angular/core';
 import {bootstrapApplication} from '@angular/platform-browser';
 import 'zone.js/plugins/task-tracking'; // Use if you have Zone.js with `provideZoneChangeDetection`
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideStabilityDebugging()],
 });
 ```
@@ -206,7 +206,7 @@ import {
 } from '@angular/platform-browser';
 ...
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideClientHydration(withI18nSupport())]
 });
 ```
diff --git a/adev-ja/src/content/guide/hydration.md b/adev-ja/src/content/guide/hydration.md
index db78050ae..3e61a2065 100644
--- a/adev-ja/src/content/guide/hydration.md
+++ b/adev-ja/src/content/guide/hydration.md
@@ -29,7 +29,7 @@ import {
 } from '@angular/platform-browser';
 ...
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideClientHydration()]
 });
 ```
@@ -41,9 +41,9 @@ import {provideClientHydration} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
 @NgModule({
-  declarations: [AppComponent],
-  exports: [AppComponent],
-  bootstrap: [AppComponent],
+  declarations: [App],
+  exports: [App],
+  bootstrap: [App],
   providers: [provideClientHydration()],
 })
 export class AppModule {}
@@ -183,7 +183,7 @@ import {provideStabilityDebugging} from '@angular/core';
 import {bootstrapApplication} from '@angular/platform-browser';
 import 'zone.js/plugins/task-tracking'; // `provideZoneChangeDetection` でZone.jsを使用している場合に使用
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideStabilityDebugging()],
 });
 ```
@@ -206,7 +206,7 @@ import {
 } from '@angular/platform-browser';
 ...
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideClientHydration(withI18nSupport())]
 });
 ```
diff --git a/adev-ja/src/content/guide/routing/route-transition-animations.en.md b/adev-ja/src/content/guide/routing/route-transition-animations.en.md
index bacb0b8e1..4f7cafacc 100644
--- a/adev-ja/src/content/guide/routing/route-transition-animations.en.md
+++ b/adev-ja/src/content/guide/routing/route-transition-animations.en.md
@@ -1,6 +1,6 @@
 # Route transition animations
 
-Route transition animations enhance user experience by providing smooth visual transitions when navigating between different views in your Angular application. [Angular Router](/guide/routing/overview) includes built-in support for the browser's View Transitions API, enabling seamless animations between route changes in supported browsers.
+Route transition animations enhance user experience by providing smooth visual transitions when navigating between different views in your Angular application. [Angular Router](/guide/routing) includes built-in support for the browser's View Transitions API, enabling seamless animations between route changes in supported browsers.
 
 HELPFUL: The Router's native View Transitions integration is currently in [developer preview](/reference/releases#developer-preview). Native View Transitions are a relatively new browser feature with limited support across all browsers.
 
@@ -27,7 +27,7 @@ For more details about the browser API, see the [Chrome Explainer](https://devel
 
 Angular Router integrates view transitions into the navigation lifecycle to create seamless route changes. During navigation, the Router:
 
-1. **Completes navigation preparation** - Route matching, [lazy loading](/guide/routing/define-routes#lazily-loaded-components), [guards](/guide/routing/route-guards), and [resolvers](/guide/routing/data-resolvers) execute
+1. **Completes navigation preparation** - Route matching, [lazy loading](/guide/routing/define-routes#lazily-loaded-components-and-routes), [guards](/guide/routing/route-guards), and [resolvers](/guide/routing/data-resolvers) execute
 2. **Initiates the view transition** - Router calls `startViewTransition` when routes are ready for activation
 3. **Updates the DOM** - Router activates new routes and deactivates old ones within the transition callback
 4. **Finalizes the transition** - The transition Promise resolves when Angular completes rendering
@@ -104,7 +104,7 @@ Here's an example that adds a rotation effect to a counter element:
 }
 ```
 
-IMPORTANT: Define view transition animations in your global styles file, not in component styles. Angular's [view encapsulation](/guide/components/styling#view-encapsulation) scopes component styles, which prevents them from targeting the transition pseudo-elements correctly.
+IMPORTANT: Define view transition animations in your global styles file, not in component styles. Angular's [view encapsulation](/guide/components/styling#style-scoping) scopes component styles, which prevents them from targeting the transition pseudo-elements correctly.
 
 [Try the updated “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
 
@@ -122,7 +122,7 @@ Use this callback to customize transition behavior based on navigation context.
 
 ```ts
 import {inject} from '@angular/core';
-import {Router, withViewTransitions} from '@angular/router';
+import {Router, withViewTransitions, isActive} from '@angular/router';
 
 withViewTransitions({
   onViewTransitionCreated: ({transition}) => {
@@ -137,7 +137,9 @@ withViewTransitions({
       queryParams: 'ignored',
     };
 
-    if (router.isActive(targetUrl, config)) {
+    const isTargetRouteCurrent = isActive(targetUrl, router, config);
+
+    if (isTargetRouteCurrent()) {
       transition.skipTransition();
     }
   },
diff --git a/adev-ja/src/content/guide/routing/route-transition-animations.md b/adev-ja/src/content/guide/routing/route-transition-animations.md
index 4eace7481..7103f41b4 100644
--- a/adev-ja/src/content/guide/routing/route-transition-animations.md
+++ b/adev-ja/src/content/guide/routing/route-transition-animations.md
@@ -1,6 +1,6 @@
 # ルート遷移アニメーション
 
-ルート遷移アニメーションは、Angularアプリケーション内の異なるビュー間を移動する際にスムーズな視覚的遷移を提供することで、ユーザー体験を向上させます。[Angular Router](/guide/routing/overview)は、ブラウザのView Transitions APIの組み込みサポートを含んでおり、サポートされているブラウザでルート変更間のシームレスなアニメーションを可能にします。
+ルート遷移アニメーションは、Angularアプリケーション内の異なるビュー間を移動する際にスムーズな視覚的遷移を提供することで、ユーザー体験を向上させます。[Angular Router](/guide/routing)は、ブラウザのView Transitions APIの組み込みサポートを含んでおり、サポートされているブラウザでルート変更間のシームレスなアニメーションを可能にします。
 
 HELPFUL: RouterのネイティブView Transitions統合は現在[デベロッパープレビュー](/reference/releases#developer-preview)中です。ネイティブView Transitionsは比較的新しいブラウザ機能であり、すべてのブラウザでのサポートは限られています。
 
@@ -27,7 +27,7 @@ document.startViewTransition(async () => {
 
 Angular Routerは、シームレスなルート変更を作成するために、ナビゲーションライフサイクルにビュー遷移を統合します。ナビゲーション中、Routerは以下を行います。
 
-1. **ナビゲーションの準備を完了する** - ルートのマッチング、[遅延ロード](/guide/routing/define-routes#lazily-loaded-components)、[ガード](/guide/routing/route-guards)、および[リゾルバー](/guide/routing/data-resolvers)が実行されます
+1. **ナビゲーションの準備を完了する** - ルートのマッチング、[遅延ロード](/guide/routing/define-routes#lazily-loaded-components-and-routes)、[ガード](/guide/routing/route-guards)、および[リゾルバー](/guide/routing/data-resolvers)が実行されます
 2. **ビュー遷移を開始する** - ルートがアクティベーションの準備ができたときに、Routerは`startViewTransition`を呼び出します
 3. **DOMを更新する** - Routerは、遷移コールバック内で新しいルートをアクティブ化し、古いルートを非アクティブ化します
 4. **遷移を完了する** - Angularがレンダリングを完了すると、遷移Promiseが解決されます
@@ -104,7 +104,7 @@ CSSを使用してビューのトランジションをカスタマイズし、
 }
 ```
 
-IMPORTANT: ビューのトランジションアニメーションは、コンポーネントスタイルではなく、グローバルスタイルファイルで定義してください。Angularの[ビューカプセル化](/guide/components/styling#view-encapsulation)はコンポーネントスタイルをスコープするため、トランジション擬似要素を正しくターゲットできなくなります。
+IMPORTANT: ビューのトランジションアニメーションは、コンポーネントスタイルではなく、グローバルスタイルファイルで定義してください。Angularの[ビューカプセル化](/guide/components/styling#style-scoping)はコンポーネントスタイルをスコープするため、トランジション擬似要素を正しくターゲットできなくなります。
 
 [StackBlitzで更新された「count」の例を試す](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
 
@@ -122,7 +122,7 @@ IMPORTANT: ビューのトランジションアニメーションは、コンポ
 
 ```ts
 import {inject} from '@angular/core';
-import {Router, withViewTransitions} from '@angular/router';
+import {Router, withViewTransitions, isActive} from '@angular/router';
 
 withViewTransitions({
   onViewTransitionCreated: ({transition}) => {
@@ -137,7 +137,9 @@ withViewTransitions({
       queryParams: 'ignored',
     };
 
-    if (router.isActive(targetUrl, config)) {
+    const isTargetRouteCurrent = isActive(targetUrl, router, config);
+
+    if (isTargetRouteCurrent()) {
       transition.skipTransition();
     }
   },
diff --git a/adev-ja/src/content/guide/testing/components-scenarios.en.md b/adev-ja/src/content/guide/testing/components-scenarios.en.md
index a2699bd4b..193691d35 100644
--- a/adev-ja/src/content/guide/testing/components-scenarios.en.md
+++ b/adev-ja/src/content/guide/testing/components-scenarios.en.md
@@ -357,7 +357,7 @@ Unlike the real `getQuote()` method, this spy bypasses the server and returns a
 
 ### Async test with a Vitest fake timers
 
-To mock async functions like `setTimeout` or `Promise`s, you can leverage Vitest fake timers to controle whenever the fire.
+To mock async functions like `setTimeout` or `Promise`s, you can leverage Vitest fake timers to control whenever they fire.
 
 ```ts
 it('should display error when TwainQuotes service fails', async () => {
@@ -392,7 +392,7 @@ it('should display error when TwainQuotes service fails', async () => {
 
 ### More async tests
 
-With the stubbe service returning async observables, most of your tests will have to be async as well.
+With the stubbed service returning async observables, most of your tests will have to be async as well.
 
 Here's a test that demonstrates the data flow you'd expect in the real world.
 
@@ -419,7 +419,7 @@ it('should show quote after getQuote', async () => {
 
     const fixture = TestBed.createComponent(TwainComponent);
     const twainQuotes = TestBed.inject(TwainQuotes) as MockTwainQuotes;
-    await vi.runAllTimersAsync(); // render before the quote is recieved
+    await vi.runAllTimersAsync(); // render before the quote is received
 
     const quoteEl = fixture.nativeElement.querySelector('.twain');
     expect(quoteEl.textContent).toBe('...');
@@ -464,7 +464,7 @@ The `DashboardHero` component is embedded in the `Dashboard` component template
 
 ```angular-html
 @for (hero of heroes; track hero) {
-  <dashboard-hero class="col-1-4" [hero]="hero" (selected)="gotoDetail($event)"/>
+  <dashboard-hero class="col-1-4" [hero]="hero" (selected)="gotoDetail($event)" />
 }
 ```
 
@@ -1176,8 +1176,8 @@ Focus on the `overrideComponent` method.
 });
 ```
 
-It takes two arguments: the component type to override (`HeroDetail`) and an override metadata object.
-The [override metadata object](guide/testing/utility-apis#metadata-override-object) is a generic defined as follows:
+It takes two arguments: the component type to override \(`HeroDetail`\) and an override metadata object.
+The [override metadata object](/guide/testing/utility-apis#testbed-class-summary) is a generic defined as follows:
 
 ```ts
 type MetadataOverride<T> = {
diff --git a/adev-ja/src/content/guide/testing/components-scenarios.md b/adev-ja/src/content/guide/testing/components-scenarios.md
index 2c1571bb2..8e492ed0d 100644
--- a/adev-ja/src/content/guide/testing/components-scenarios.md
+++ b/adev-ja/src/content/guide/testing/components-scenarios.md
@@ -357,7 +357,7 @@ TestBed.configureTestingModule({
 
 ### Vitestのフェイクタイマーを使用した非同期テスト {#async-test-with-a-vitest-fake-timers}
 
-`setTimeout`や`Promise`のような非同期関数をモックするには、Vitestのフェイクタイマーを活用して発火のタイミングを制御できます。
+`setTimeout`や`Promise`のような非同期関数をモックするには、Vitestのフェイクタイマーを活用して発火タイミングを制御できます。
 
 ```ts
 it('should display error when TwainQuotes service fails', async () => {
@@ -392,7 +392,7 @@ it('should display error when TwainQuotes service fails', async () => {
 
 ### その他の非同期テスト {#more-async-tests}
 
-スタブサービスが非同期Observableを返す場合、テストのほとんども非同期である必要があります。
+スタブされたサービスが非同期Observableを返す場合、テストのほとんども非同期である必要があります。
 
 ここに、実世界で想定されるデータフローを示すテストがあります。
 
@@ -419,7 +419,7 @@ it('should show quote after getQuote', async () => {
 
     const fixture = TestBed.createComponent(TwainComponent);
     const twainQuotes = TestBed.inject(TwainQuotes) as MockTwainQuotes;
-    await vi.runAllTimersAsync(); // render before the quote is recieved
+    await vi.runAllTimersAsync(); // render before the quote is received
 
     const quoteEl = fixture.nativeElement.querySelector('.twain');
     expect(quoteEl.textContent).toBe('...');
@@ -464,7 +464,7 @@ IMPORTANT: `fakeAsync`はVitestテストランナーでは使用できません
 
 ```angular-html
 @for (hero of heroes; track hero) {
-  <dashboard-hero class="col-1-4" [hero]="hero" (selected)="gotoDetail($event)"/>
+  <dashboard-hero class="col-1-4" [hero]="hero" (selected)="gotoDetail($event)" />
 }
 ```
 
@@ -1176,8 +1176,8 @@ beforeEach(async () => {
 });
 ```
 
-これは2つの引数を取ります。オーバーライドするコンポーネント型（`HeroDetail`）と、オーバーライドメタデータオブジェクトです。
-[オーバーライドメタデータオブジェクト](guide/testing/utility-apis#metadata-override-object)は、次のように定義されたジェネリックです。
+これは2つの引数を取ります。オーバーライドするコンポーネント型\(`HeroDetail`\)と、オーバーライドメタデータオブジェクトです。
+[オーバーライドメタデータオブジェクト](/guide/testing/utility-apis#testbed-class-summary)は、次のように定義されたジェネリックです。
 
 ```ts
 type MetadataOverride<T> = {

From b5b0ef6b40e241ae362b08571b6dd6e9f25db8e7 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 01:04:37 +0900
Subject: [PATCH 24/55] fix(docs): migrate di, aria, elements, zoneless changes

- di/creating-and-using-services: code formatting, class name
- di/lightweight-injection-tokens: code formatting, link fix
- di/overview: code formatting, class name
- aria/listbox: new content (selection modes examples)
- elements: text fixes, file name changes, link fix
- zoneless: v21 default changes, TestBed section update
---
 adev-ja/src/content/guide/aria/listbox.en.md  | 19 +++++++++++----
 adev-ja/src/content/guide/aria/listbox.md     | 19 +++++++++++----
 .../di/creating-and-using-services.en.md      | 12 ++++------
 .../guide/di/creating-and-using-services.md   | 12 ++++------
 .../di/lightweight-injection-tokens.en.md     | 13 +++++-----
 .../guide/di/lightweight-injection-tokens.md  | 13 +++++-----
 adev-ja/src/content/guide/di/overview.en.md   | 16 ++++++-------
 adev-ja/src/content/guide/di/overview.md      | 16 ++++++-------
 adev-ja/src/content/guide/elements.en.md      | 24 +++++++++----------
 adev-ja/src/content/guide/elements.md         | 22 ++++++++---------
 adev-ja/src/content/guide/zoneless.en.md      | 19 ++++++++++-----
 adev-ja/src/content/guide/zoneless.md         | 19 ++++++++++-----
 12 files changed, 117 insertions(+), 87 deletions(-)

diff --git a/adev-ja/src/content/guide/aria/listbox.en.md b/adev-ja/src/content/guide/aria/listbox.en.md
index d7a753a2d..38238eb3e 100644
--- a/adev-ja/src/content/guide/aria/listbox.en.md
+++ b/adev-ja/src/content/guide/aria/listbox.en.md
@@ -110,10 +110,21 @@ With `orientation="horizontal"`, left and right arrow keys navigate between opti
 
 Listbox supports two selection modes that control when items become selected.
 
-<!-- <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/modes/app/app.ts">
-  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/modes/app/app.ts" />
-  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/modes/app/app.html" />
-</docs-code-multifile> -->
+The `'follow'` mode automatically selects the focused item, providing faster interaction when selection changes frequently. The `'explicit'` mode requires Space or Enter to confirm selection, preventing accidental changes while navigating. Dropdown patterns typically use `'follow'` mode for single selection.
+
+#### Explicit
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.ts">
+  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.ts" />
+  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.html" />
+</docs-code-multifile>
+
+#### Follow
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/modes/app/follow/app.ts">
+  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/modes/app/follow/app.ts" />
+  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/modes/app/follow/app.html" />
+</docs-code-multifile>
 
 | Mode         | Description                                                                                            |
 | ------------ | ------------------------------------------------------------------------------------------------------ |
diff --git a/adev-ja/src/content/guide/aria/listbox.md b/adev-ja/src/content/guide/aria/listbox.md
index e16c3ec50..e5621c4e7 100644
--- a/adev-ja/src/content/guide/aria/listbox.md
+++ b/adev-ja/src/content/guide/aria/listbox.md
@@ -110,10 +110,21 @@ Angularのリストボックスは、以下の機能を備えた完全にアク
 
 リストボックスは、アイテムがいつ選択されるかを制御する2つの選択モードをサポートしています。
 
-<!-- <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/modes/app/app.ts">
-  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/modes/app/app.ts" />
-  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/modes/app/app.html" />
-</docs-code-multifile> -->
+`'follow'`モードはフォーカスされたアイテムを自動的に選択し、選択が頻繁に変わる場合により速いインタラクションを提供します。`'explicit'`モードは選択を確定するためにSpaceキーまたはEnterキーが必要で、ナビゲーション中の意図しない変更を防ぎます。ドロップダウンパターンでは、通常、単一選択のために`'follow'`モードが使用されます。
+
+#### Explicit
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.ts">
+  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.ts" />
+  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/modes/app/explicit/app.html" />
+</docs-code-multifile>
+
+#### Follow
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/modes/app/follow/app.ts">
+  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/modes/app/follow/app.ts" />
+  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/modes/app/follow/app.html" />
+</docs-code-multifile>
 
 | モード       | 説明                                                                                   |
 | ------------ | -------------------------------------------------------------------------------------- |
diff --git a/adev-ja/src/content/guide/di/creating-and-using-services.en.md b/adev-ja/src/content/guide/di/creating-and-using-services.en.md
index d7b1486f6..a9cdc0532 100644
--- a/adev-ja/src/content/guide/di/creating-and-using-services.en.md
+++ b/adev-ja/src/content/guide/di/creating-and-using-services.en.md
@@ -51,21 +51,19 @@ Once you've created a service with `providedIn: 'root'`, you can inject it anywh
 ### Injecting into a component
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { BasicDataStore } from './basic-data-store';
+import {Component, inject} from '@angular/core';
+import {BasicDataStore} from './basic-data-store';
 
 @Component({
   selector: 'app-example',
   template: `
     <div>
       <p>{{ dataStore.getData() }}</p>
-      <button (click)="dataStore.addData('More data')">
-        Add more data
-      </button>
+      <button (click)="dataStore.addData('More data')">Add more data</button>
     </div>
-  `
+  `,
 })
-export class ExampleComponent {
+export class Example {
   dataStore = inject(BasicDataStore);
 }
 ```
diff --git a/adev-ja/src/content/guide/di/creating-and-using-services.md b/adev-ja/src/content/guide/di/creating-and-using-services.md
index 02236a8ff..742fcc229 100644
--- a/adev-ja/src/content/guide/di/creating-and-using-services.md
+++ b/adev-ja/src/content/guide/di/creating-and-using-services.md
@@ -51,21 +51,19 @@ export class BasicDataStore {
 ### コンポーネントへの注入 {#injecting-into-a-component}
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { BasicDataStore } from './basic-data-store';
+import {Component, inject} from '@angular/core';
+import {BasicDataStore} from './basic-data-store';
 
 @Component({
   selector: 'app-example',
   template: `
     <div>
       <p>{{ dataStore.getData() }}</p>
-      <button (click)="dataStore.addData('More data')">
-        Add more data
-      </button>
+      <button (click)="dataStore.addData('More data')">Add more data</button>
     </div>
-  `
+  `,
 })
-export class ExampleComponent {
+export class Example {
   dataStore = inject(BasicDataStore);
 }
 ```
diff --git a/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md b/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md
index a4f13143d..588c36762 100644
--- a/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md
+++ b/adev-ja/src/content/guide/di/lightweight-injection-tokens.en.md
@@ -22,11 +22,10 @@ To prevent the retention of unused components, your library should use the light
 To better explain the condition under which token retention occurs, consider a library that provides a library-card component.
 This component contains a body and can contain an optional header:
 
-```angular-html
-
-<lib-card>;
-<lib-header>…</lib-header>;
-</lib-card>;
+```html
+<lib-card>
+  <lib-header>…</lib-header>
+</lib-card>
 ```
 
 In a likely implementation, the `<lib-card>` component uses `contentChild` or `contentChildren` to get `<lib-header>` and `<lib-body>`, as in the following:
@@ -91,7 +90,7 @@ Although tokens used only as type specifiers are removed when converted to JavaS
 When using `inject(CustomOther)`, `CustomOther` is passed as a value argument.
 The token is now in a value position, which causes the tree-shaker to keep the reference.
 
-HELPFUL: Libraries should use [tree-shakable providers](guide/di/dependency-injection#providing-dependency) for all services, providing dependencies at the root level rather than in components or modules.
+HELPFUL: Libraries should use [tree-shakable providers](guide/di/defining-dependency-providers) for all services, providing dependencies at the root level rather than in components or modules.
 
 ## Using lightweight injection tokens
 
@@ -144,7 +143,7 @@ This lets the parent communicate with the child, if it is present, in a type-saf
 For example, the `LibCard` now queries `LibHeaderToken` rather than `LibHeader`.
 The following example shows how the pattern lets `LibCard` communicate with the `LibHeader` without actually referring to `LibHeader`:
 
-```ts {highlight: [[2],[9],[11],[19]]}
+```ts {highlight: [[2],[7],[11],[19]]}
 abstract class LibHeaderToken {
   abstract doSomething(): void;
 }
diff --git a/adev-ja/src/content/guide/di/lightweight-injection-tokens.md b/adev-ja/src/content/guide/di/lightweight-injection-tokens.md
index 71ca7f279..d00a32ea4 100644
--- a/adev-ja/src/content/guide/di/lightweight-injection-tokens.md
+++ b/adev-ja/src/content/guide/di/lightweight-injection-tokens.md
@@ -22,11 +22,10 @@ Angularがインジェクショントークンを格納する方法により、
 トークン保持が発生する状況をより明確に説明するために、ライブラリカードコンポーネントを提供するライブラリを検討してください。
 このコンポーネントには本体が含まれており、オプションでヘッダーを含めることができます。
 
-```angular-html
-
-<lib-card>;
-<lib-header>…</lib-header>;
-</lib-card>;
+```html
+<lib-card>
+  <lib-header>…</lib-header>
+</lib-card>
 ```
 
 一般的な実装では、 `<lib-card>` コンポーネントは、次の例のように `contentChild` または `contentChildren` を使用して `<lib-header>` と `<lib-body>` を取得します。
@@ -91,7 +90,7 @@ class MyComponent {
 これらは実質的に `constructor(@Optional() other: OtherComponent)` を `constructor(@Optional() @Inject(OtherComponent) other)` に変更されます。
 トークンはこれで値位置にあるため、ツリーシェーカーは参照を保持します。
 
-HELPFUL: ライブラリは、[ツリーシェイク可能なプロバイダー](guide/di/dependency-injection#providing-dependency) をすべてのサービスに使用し、コンポーネントやモジュールではなく、ルートレベルで依存関係を提供する必要があります。
+HELPFUL: ライブラリは、[ツリーシェイク可能なプロバイダー](guide/di/defining-dependency-providers) をすべてのサービスに使用し、コンポーネントやモジュールではなく、ルートレベルで依存関係を提供する必要があります。
 
 ## 軽量インジェクショントークンの使用
 
@@ -144,7 +143,7 @@ class LibCardComponent {
 たとえば、 `LibCardComponent` はこれで `LibHeaderComponent` ではなく `LibHeaderToken` をクエリします。
 次の例は、パターンにより `LibCardComponent` が `LibHeaderComponent` を実際に参照せずに `LibHeaderComponent` と通信する方法を示しています。
 
-```ts {highlight: [[2],[9],[11],[19]]}
+```ts {highlight: [[2],[7],[11],[19]]}
 abstract class LibHeaderToken {
   abstract doSomething(): void;
 }
diff --git a/adev-ja/src/content/guide/di/overview.en.md b/adev-ja/src/content/guide/di/overview.en.md
index cb0829d21..879dd8e8a 100644
--- a/adev-ja/src/content/guide/di/overview.en.md
+++ b/adev-ja/src/content/guide/di/overview.en.md
@@ -69,17 +69,15 @@ You can inject dependencies using Angular's `inject()` function.
 Here is an example of a navigation bar that injects `AnalyticsLogger` and Angular `Router` service to allow users to navigate to a different page while tracking the event.
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { Router } from '@angular/router';
-import { AnalyticsLogger } from './analytics-logger';
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
+import {AnalyticsLogger} from './analytics-logger';
 
 @Component({
   selector: 'app-navbar',
-  template: `
-    <a href="#" (click)="navigateToDetail($event)">Detail Page</a>
-  `,
+  template: `<a href="#" (click)="navigateToDetail($event)">Detail Page</a>`,
 })
-export class NavbarComponent {
+export class Navbar {
   private router = inject(Router);
   private analytics = inject(AnalyticsLogger);
 
@@ -96,7 +94,9 @@ export class NavbarComponent {
 You can inject dependencies during construction of a component, directive, or service. The call to [`inject`](/api/core/inject) can appear in either the `constructor` or in a field initializer. Here are some common examples:
 
 ```ts
-@Component({...})
+@Component({
+  /*...*/
+})
 export class MyComponent {
   // ✅ In class field initializer
   private service = inject(MyService);
diff --git a/adev-ja/src/content/guide/di/overview.md b/adev-ja/src/content/guide/di/overview.md
index e2964a7e4..4503768c0 100644
--- a/adev-ja/src/content/guide/di/overview.md
+++ b/adev-ja/src/content/guide/di/overview.md
@@ -69,17 +69,15 @@ Angularの `inject()` 関数を使用して依存関係を注入できます。
 次は、`AnalyticsLogger` とAngularの `Router` サービスを注入して、イベントを追跡しながらユーザーが別のページに移動できるようにするナビゲーションバーの例です。
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { Router } from '@angular/router';
-import { AnalyticsLogger } from './analytics-logger';
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
+import {AnalyticsLogger} from './analytics-logger';
 
 @Component({
   selector: 'app-navbar',
-  template: `
-    <a href="#" (click)="navigateToDetail($event)">Detail Page</a>
-  `,
+  template: `<a href="#" (click)="navigateToDetail($event)">Detail Page</a>`,
 })
-export class NavbarComponent {
+export class Navbar {
   private router = inject(Router);
   private analytics = inject(AnalyticsLogger);
 
@@ -96,7 +94,9 @@ export class NavbarComponent {
 コンポーネント、ディレクティブ、またはサービスの構築中に依存関係を注入できます。[`inject`](/api/core/inject) の呼び出しは、`constructor` またはフィールドイニシャライザーのいずれかに配置できます。一般的な例をいくつか示します。
 
 ```ts
-@Component({...})
+@Component({
+  /*...*/
+})
 export class MyComponent {
   // ✅ クラスフィールドイニシャライザー内
   private service = inject(MyService);
diff --git a/adev-ja/src/content/guide/elements.en.md b/adev-ja/src/content/guide/elements.en.md
index 90bb9d2e3..44daf9eec 100644
--- a/adev-ja/src/content/guide/elements.en.md
+++ b/adev-ja/src/content/guide/elements.en.md
@@ -63,7 +63,7 @@ One regular Angular component and a second one using the custom element.
 ### Mapping
 
 A custom element _hosts_ an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs.
-Component properties and logic maps directly into HTML attributes and the browser's event system.
+Component properties and logic map directly into HTML attributes and the browser's event system.
 
 - The creation API parses the component looking for input properties, and defines corresponding attributes for the custom element.
   It transforms the property names to make them compatible with custom elements, which do not recognize case distinctions.
@@ -71,10 +71,10 @@ Component properties and logic maps directly into HTML attributes and the browse
   For example, for a component with `inputProp = input({alias: 'myInputProp'})`, the corresponding custom element defines an attribute `my-input-prop`.
 
 - Component outputs are dispatched as HTML [Custom Events](https://developer.mozilla.org/docs/Web/API/CustomEvent), with the name of the custom event matching the output name.
-  For example, for a component `with valueChanged = output()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property.
+  For example, for a component with `valueChanged = output()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property.
   If you provide an alias, that value is used; for example, `clicks = output<string>({alias: 'myClick'});` results in dispatch events with the name "myClick".
 
-For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events).
+For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#creating_custom_events).
 
 ## Example: A Popup Service
 
@@ -85,20 +85,20 @@ Using an Angular custom element makes the process simpler and more transparent,
 
 The following Popup Service example application defines a component that you can either load dynamically or convert to a custom element.
 
-| Files                | Details                                                                                                                                                                                                                      |
-| :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `popup.component.ts` | Defines a simple pop-up element that displays an input message, with some animation and styling.                                                                                                                             |
-| `popup.service.ts`   | Creates an injectable service that provides two different ways to invoke the `PopupComponent`; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method.        |
-| `app.component.ts`   | Defines the application's root component, which uses the `PopupService` to add the pop-up to the DOM at run time. When the application runs, the root component's constructor converts `PopupComponent` to a custom element. |
+| Files              | Details                                                                                                                                                                                                             |
+| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `popup.ts`         | Defines a simple pop-up element that displays an input message, with some animation and styling.                                                                                                                    |
+| `popup.service.ts` | Creates an injectable service that provides two different ways to invoke the `Popup`; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method.        |
+| `app.ts`           | Defines the application's root component, which uses the `PopupService` to add the pop-up to the DOM at run time. When the application runs, the root component's constructor converts `Popup` to a custom element. |
 
 For comparison, the demo shows both methods.
 One button adds the popup using the dynamic-loading method, and the other uses the custom element.
 The result is the same, but the preparation is different.
 
 <docs-code-multifile>
-    <docs-code header="popup.component.ts" path="adev/src/content/examples/elements/src/app/popup.component.ts"/>
+    <docs-code language="angular-ts" header="popup.ts" path="adev/src/content/examples/elements/src/app/popup.ts"/>
     <docs-code header="popup.service.ts" path="adev/src/content/examples/elements/src/app/popup.service.ts"/>
-    <docs-code header="app.component.ts" path="adev/src/content/examples/elements/src/app/app.component.ts"/>
+    <docs-code header="app.ts" path="adev/src/content/examples/elements/src/app/app.ts"/>
 </docs-code-multifile>
 
 ## Typings for custom elements
@@ -119,7 +119,7 @@ Assume you create a `my-dialog` custom element based on the following component:
 ```ts
 @Component(/* ... */)
 class MyDialog {
-  content = input(string);
+  content = input('');
 }
 ```
 
@@ -164,5 +164,5 @@ document.querySelector('my-other-element'); //--> NgElement & WithProperties<{fo
 
 Care should be taken when destroying and then re-attaching custom elements created with `@angular/elements` due to issues with the [disconnect()](https://github.com/angular/angular/issues/38778) callback. Cases where you may run into this issue are:
 
-- Rendering a component in an `ng-if` or `ng-repeat` in `AngularJs`
+- Rendering a component in an `ng-if` or `ng-repeat` in `AngularJS`
 - Manually detaching and re-attaching an element to the DOM
diff --git a/adev-ja/src/content/guide/elements.md b/adev-ja/src/content/guide/elements.md
index e09c66fbe..564ddd8ec 100644
--- a/adev-ja/src/content/guide/elements.md
+++ b/adev-ja/src/content/guide/elements.md
@@ -63,7 +63,7 @@ IMPORTANT: コンポーネントのセレクターをカスタム要素のタグ
 ### マッピング {#mapping}
 
 カスタム要素はAngularコンポーネントを_ホスト_し、コンポーネントで定義されたデータとロジック、および標準のDOM API間のブリッジを提供します。
-コンポーネントのプロパティとロジックは、HTML属性とブラウザのイベントシステムに直接マッピングされます。
+コンポーネントのプロパティとロジックは、HTML属性とブラウザのイベントシステムに直接マップされます。
 
 - 作成APIは、入力プロパティを探してコンポーネントを解析し、カスタム要素に対応する属性を定義します。
   プロパティ名をカスタム要素と互換性があるように変換します。カスタム要素は大文字と小文字の区別を認識しません。
@@ -72,9 +72,9 @@ IMPORTANT: コンポーネントのセレクターをカスタム要素のタグ
 
 - コンポーネントの出力はHTMLの[カスタムイベント](https://developer.mozilla.org/docs/Web/API/CustomEvent)としてディスパッチされ、カスタムイベントの名前は出力名と一致します。
   例えば、`valueChanged = output()`を持つコンポーネントの場合、対応するカスタム要素は"valueChanged"という名前のイベントをディスパッチし、出力されたデータはイベントの`detail`プロパティに格納されます。
-  エイリアスを提供した場合、その値が使用されます。`clicks = output<string>({alias: 'myClick'});`は"myClick"という名前のディスパッチイベントを生成します。
+  エイリアスを提供した場合、その値が使用されます。例えば、`clicks = output<string>({alias: 'myClick'});`は"myClick"という名前のディスパッチイベントを生成します。
 
-詳細については、Webコンポーネントのドキュメントの[カスタムイベントの作成](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events)を参照してください。
+詳細については、Webコンポーネントのドキュメントの[カスタムイベントの作成](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#creating_custom_events)を参照してください。
 
 ## 例: Popupサービス {#example-a-popup-service}
 
@@ -85,20 +85,20 @@ Angularカスタム要素を使用すると、必要なインフラストラク
 
 以下のPopupサービス例のアプリケーションは、動的にロードするかカスタム要素に変換できるコンポーネントを定義しています。
 
-| ファイル                 | 詳細                                                                                                                                                                                                                         |
-| :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `popup.component.ts`  | 入力メッセージを表示するシンプルなポップアップ要素を、アニメーションとスタイル付きで定義します。                                                                                                                             |
-| `popup.service.ts`    | `PopupComponent`を呼び出す2つの異なる方法を提供する注入可能サービスを作成します。動的コンポーネントとして、またはカスタム要素として。動的読み込み方式には、より多くのセットアップが必要であることに注目してください。        |
-| `app.component.ts`    | `PopupService`を使用して実行時にDOMにポップアップを追加する、アプリケーションのルートコンポーネントを定義します。アプリケーションの実行時、ルートコンポーネントのコンストラクターは`PopupComponent`をカスタム要素に変換します。 |
+| ファイル              | 詳細                                                                                                                                                                                                               |
+| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `popup.ts`         | 入力メッセージを表示するシンプルなポップアップ要素を、アニメーションとスタイル付きで定義します。                                                                                                                    |
+| `popup.service.ts` | `Popup`を呼び出す2つの異なる方法を提供する注入可能サービスを作成します。動的コンポーネントとして、またはカスタム要素として。動的読み込み方式には、より多くのセットアップが必要であることに注目してください。        |
+| `app.ts`           | `PopupService`を使用して実行時にDOMにポップアップを追加する、アプリケーションのルートコンポーネントを定義します。アプリケーションの実行時、ルートコンポーネントのコンストラクターは`Popup`をカスタム要素に変換します。 |
 
 比較のため、デモでは両方の方法を示しています。
 一方のボタンは動的読み込み方式を使用してポップアップを追加し、もう一方はカスタム要素を使用します。
 結果は同じですが、準備が異なります。
 
 <docs-code-multifile>
-    <docs-code header="popup.component.ts" path="adev/src/content/examples/elements/src/app/popup.component.ts"/>
+    <docs-code language="angular-ts" header="popup.ts" path="adev/src/content/examples/elements/src/app/popup.ts"/>
     <docs-code header="popup.service.ts" path="adev/src/content/examples/elements/src/app/popup.service.ts"/>
-    <docs-code header="app.component.ts" path="adev/src/content/examples/elements/src/app/app.component.ts"/>
+    <docs-code header="app.ts" path="adev/src/content/examples/elements/src/app/app.ts"/>
 </docs-code-multifile>
 
 ## カスタム要素の型定義 {#typings-for-custom-elements}
@@ -119,7 +119,7 @@ Angularで作成されたカスタム要素は`NgElement`（これはさらに`H
 ```ts
 @Component(/* ... */)
 class MyDialog {
-  content = input(string);
+  content = input('');
 }
 ```
 
diff --git a/adev-ja/src/content/guide/zoneless.en.md b/adev-ja/src/content/guide/zoneless.en.md
index cf3516c16..1f953b699 100644
--- a/adev-ja/src/content/guide/zoneless.en.md
+++ b/adev-ja/src/content/guide/zoneless.en.md
@@ -11,12 +11,17 @@ The main advantages to removing ZoneJS as a dependency are:
 
 ## Enabling Zoneless in an application
 
-```typescript
-// standalone bootstrap
+Zoneless is the default in Angular v21+ so you do not need to do anything to enable it. You should verify that `provideZoneChangeDetection` is not used anywhere to override the default configuration.
+
+If you are using Angular v20, enable zoneless change detection by adding `provideZonelessChangeDetection()` at bootstrap:
+
+```ts {header: 'standalone bootstrap'}
 bootstrapApplication(MyApp, {providers: [provideZonelessChangeDetection()]});
+```
 
-// NgModule bootstrap
+```ts {header: 'NgModule bootstrap'}
 platformBrowser().bootstrapModule(AppModule);
+
 @NgModule({
   providers: [provideZonelessChangeDetection()],
 })
@@ -122,12 +127,14 @@ an ongoing Router navigation and an incomplete `HttpClient` request.
 
 ### Using Zoneless in `TestBed`
 
-The zoneless provider function can also be used with `TestBed` to help
-ensure the components under test are compatible with a Zoneless
-Angular application.
+`TestBed` uses Zone-based change detection by default when `zone.js` is loaded via the `polyfills`.
+
+If `zone.js` is not present, `TestBed` runs zoneless by default. To force zoneless mode when `zone.js` is loaded, add `provideZonelessChangeDetection()`:
 
 ```typescript
 TestBed.configureTestingModule({
+  // Optional: include the provider to force the testing environment
+  // uses the same zoneless behavior as a zoneless application.
   providers: [provideZonelessChangeDetection()],
 });
 
diff --git a/adev-ja/src/content/guide/zoneless.md b/adev-ja/src/content/guide/zoneless.md
index 3adff1750..8c95885d5 100644
--- a/adev-ja/src/content/guide/zoneless.md
+++ b/adev-ja/src/content/guide/zoneless.md
@@ -11,12 +11,17 @@ ZoneJSを依存関係として削除する主な利点は次のとおりです
 
 ## アプリケーションでZonelessを有効にする
 
-```typescript
-// スタンドアロン ブートストラップ
+Angular v21以降、Zonelessがデフォルトなので、有効にするための特別な操作は不要です。デフォルト設定を上書きする`provideZoneChangeDetection`がどこでも使用されていないことを確認してください。
+
+Angular v20を使用している場合は、ブートストラップ時に`provideZonelessChangeDetection()`を追加してZoneless変更検知を有効にします:
+
+```ts {header: 'スタンドアロン ブートストラップ'}
 bootstrapApplication(MyApp, {providers: [provideZonelessChangeDetection()]});
+```
 
-// NgModule ブートストラップ
+```ts {header: 'NgModule ブートストラップ'}
 platformBrowser().bootstrapModule(AppModule);
+
 @NgModule({
   providers: [provideZonelessChangeDetection()],
 })
@@ -122,12 +127,14 @@ readonly myObservableState = someObservable.pipe(pendingUntilEvent());
 
 ### `TestBed`でZonelessを使用する
 
-Zonelessプロバイダー関数は、`TestBed`でも使用して、
-テスト対象のコンポーネントがZoneless Angularアプリケーションと
-互換性があることを確認できます。
+`TestBed`は、`polyfills`経由で`zone.js`がロードされている場合、デフォルトでZoneベースの変更検知を使用します。
+
+`zone.js`が存在しない場合、`TestBed`はデフォルトでZonelessで実行されます。`zone.js`がロードされている場合にZonelessモードを強制するには、`provideZonelessChangeDetection()`を追加します:
 
 ```typescript
 TestBed.configureTestingModule({
+  // オプション: テスト環境がZonelessアプリケーションと
+  // 同じZoneless動作を使用することを強制するプロバイダーを含めます。
   providers: [provideZonelessChangeDetection()],
 });
 

From 0e47bb4cd2e5008730cc39e3027580d61460bb49 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 08:46:49 +0900
Subject: [PATCH 25/55] fix(docs): migrate routing docs changes

- common-router-tasks, customizing-route-behavior, data-resolvers
- define-routes, lifecycle-and-events, navigate-to-routes
- read-route-state (including new isActive section)
- route-guards, show-routes-with-outlets, testing
---
 .../guide/routing/common-router-tasks.en.md   |  27 ++--
 .../guide/routing/common-router-tasks.md      |  29 ++---
 .../routing/customizing-route-behavior.en.md  |  42 +++----
 .../routing/customizing-route-behavior.md     |  38 +++---
 .../guide/routing/data-resolvers.en.md        |  40 +++---
 .../content/guide/routing/data-resolvers.md   |  40 +++---
 .../content/guide/routing/define-routes.en.md |  66 +++++-----
 .../content/guide/routing/define-routes.md    |  66 +++++-----
 .../guide/routing/lifecycle-and-events.en.md  |  36 +++---
 .../guide/routing/lifecycle-and-events.md     |  36 +++---
 .../guide/routing/navigate-to-routes.en.md    |  30 ++---
 .../guide/routing/navigate-to-routes.md       |  30 ++---
 .../guide/routing/read-route-state.en.md      | 116 +++++++++++-------
 .../content/guide/routing/read-route-state.md | 116 +++++++++++-------
 .../content/guide/routing/route-guards.en.md  |  18 +--
 .../src/content/guide/routing/route-guards.md |  18 +--
 .../routing/show-routes-with-outlets.en.md    |  57 ++++-----
 .../guide/routing/show-routes-with-outlets.md |  49 ++++----
 .../src/content/guide/routing/testing.en.md   |  78 +++++-------
 adev-ja/src/content/guide/routing/testing.md  |  78 +++++-------
 20 files changed, 529 insertions(+), 481 deletions(-)

diff --git a/adev-ja/src/content/guide/routing/common-router-tasks.en.md b/adev-ja/src/content/guide/routing/common-router-tasks.en.md
index 61c29c5ea..743028df8 100644
--- a/adev-ja/src/content/guide/routing/common-router-tasks.en.md
+++ b/adev-ja/src/content/guide/routing/common-router-tasks.en.md
@@ -62,18 +62,18 @@ If you want to use the parent components route info you will need to set the rou
 
 ## Displaying a 404 page
 
-To display a 404 page, set up a [wildcard route](guide/routing/common-router-tasks#setting-up-wildcard-routes) with the `component` property set to the component you'd like to use for your 404 page as follows:
+To display a 404 page, set up a [wildcard route](guide/routing/define-routes#wildcards) with the `component` property set to the component you'd like to use for your 404 page as follows:
 
 ```ts
 const routes: Routes = [
-  {path: 'first-component', component: FirstComponent},
-  {path: 'second-component', component: SecondComponent},
-  {path: '**', component: PageNotFoundComponent}, // Wildcard route for a 404 page
+  {path: 'first-component', component: First},
+  {path: 'second-component', component: Second},
+  {path: '**', component: PageNotFound}, // Wildcard route for a 404 page
 ];
 ```
 
 The last route with the `path` of `**` is a wildcard route.
-The router selects this route if the requested URL doesn't match any of the paths earlier in the list and sends the user to the `PageNotFoundComponent`.
+The router selects this route if the requested URL doesn't match any of the paths earlier in the list and sends the user to the `PageNotFound`.
 
 ## Link parameters array
 
@@ -92,14 +92,15 @@ The following is a two-element array when specifying a route parameter:
 
 ```angular-html
 <a [routerLink]="['/hero', hero.id]">
-  <span class="badge">{{ hero.id }}</span>{{ hero.name }}
+  <span class="badge">{{ hero.id }}</span
+  >{{ hero.name }}
 </a>
 ```
 
 Provide optional route parameters in an object, as in `{ foo: 'foo' }`:
 
 ```angular-html
-<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
+<a [routerLink]="['/crisis-center', {foo: 'foo'}]">Crisis Center</a>
 ```
 
 This syntax passes matrix parameters, which are optional parameters associated with a specific URL segment. Learn more about [matrix parameters](/guide/routing/read-route-state#matrix-parameters).
@@ -118,7 +119,7 @@ Review the following:
 - The first item in the array identifies the parent route \(`/crisis-center`\)
 - There are no parameters for this parent route
 - There is no default for the child route so you need to pick one
-- You're navigating to the `CrisisListComponent`, whose route path is `/`, but you don't need to explicitly add the slash
+- You're navigating to the `CrisisList`, whose route path is `/`, but you don't need to explicitly add the slash
 
 Consider the following router link that navigates from the root of the application down to the Dragon Crisis:
 
@@ -133,7 +134,7 @@ Consider the following router link that navigates from the root of the applicati
 - You added the `id` of the Dragon Crisis as the second item in the array \(`1`\)
 - The resulting path is `/crisis-center/1`
 
-You could also redefine the `AppComponent` template with Crisis Center routes exclusively:
+You could also redefine the `App` template with Crisis Center routes exclusively:
 
 ```angular-ts
 @Component({
@@ -141,13 +142,13 @@ You could also redefine the `AppComponent` template with Crisis Center routes ex
     <h1 class="title">Angular Router</h1>
     <nav>
       <a [routerLink]="['/crisis-center']">Crisis Center</a>
-      <a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>
+      <a [routerLink]="['/crisis-center/1', {foo: 'foo'}]">Dragon Crisis</a>
       <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
     </nav>
     <router-outlet />
-  `
+  `,
 })
-export class AppComponent {}
+export class App {}
 ```
 
 In summary, you can write applications with one, two or more levels of routing.
@@ -184,4 +185,4 @@ The router supports both styles with two `LocationStrategy` providers:
 The `RouterModule.forRoot()` function sets the `LocationStrategy` to the `PathLocationStrategy`, which makes it the default strategy.
 You also have the option of switching to the `HashLocationStrategy` with an override during the bootstrapping process.
 
-HELPFUL: For more information on providers and the bootstrap process, see [Dependency Injection](guide/di/dependency-injection-providers).
+HELPFUL: For more information on providers and the bootstrap process, see [Dependency Injection](guide/di/defining-dependency-providers).
diff --git a/adev-ja/src/content/guide/routing/common-router-tasks.md b/adev-ja/src/content/guide/routing/common-router-tasks.md
index e58eba4c5..0dcdccf65 100644
--- a/adev-ja/src/content/guide/routing/common-router-tasks.md
+++ b/adev-ja/src/content/guide/routing/common-router-tasks.md
@@ -62,18 +62,18 @@ NOTE: 静的なルートデータ、解決されたルートデータ、パス
 
 ## 404 ページの表示 {#displaying-a-404-page}
 
-404ページを表示するには、[ワイルドカードルート](guide/routing/common-router-tasks#setting-up-wildcard-routes) を設定します。このルートの `component` プロパティは、404ページに使用したいコンポーネントに設定します。
+404ページを表示するには、[ワイルドカードルート](guide/routing/define-routes#wildcards) を設定します。このルートの `component` プロパティは、404ページに使用したいコンポーネントに設定します。
 
 ```ts
 const routes: Routes = [
-  {path: 'first-component', component: FirstComponent},
-  {path: 'second-component', component: SecondComponent},
-  {path: '**', component: PageNotFoundComponent}, // Wildcard route for a 404 page
+  {path: 'first-component', component: First},
+  {path: 'second-component', component: Second},
+  {path: '**', component: PageNotFound}, // Wildcard route for a 404 page
 ];
 ```
 
 `path` が `**` の最後のルートは、ワイルドカードルートです。
-ルーターは、要求されたURLがリストの先頭にあるパスと一致しない場合、このルートを選択し、ユーザーを `PageNotFoundComponent` にルーティングします。
+ルーターは、要求されたURLがリストの先頭にあるパスと一致しない場合、このルートを選択し、ユーザーを `PageNotFound` にルーティングします。
 
 ## リンクパラメータ配列 {#link-parameters-array}
 
@@ -92,14 +92,15 @@ const routes: Routes = [
 
 ```angular-html
 <a [routerLink]="['/hero', hero.id]">
-  <span class="badge">{{ hero.id }}</span>{{ hero.name }}
+  <span class="badge">{{ hero.id }}</span
+  >{{ hero.name }}
 </a>
 ```
 
 オプションのルートパラメータは、`{ foo: 'foo' }` のようにオブジェクトで指定します。
 
 ```angular-html
-<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
+<a [routerLink]="['/crisis-center', {foo: 'foo'}]">Crisis Center</a>
 ```
 
 この構文はマトリックスパラメータを渡します。これは、特定のURLセグメントに関連付けられたオプションのパラメータです。[マトリックスパラメータ](/guide/routing/read-route-state#matrix-parameters)の詳細をご覧ください。
@@ -118,9 +119,9 @@ const routes: Routes = [
 - 配列の最初の項目は、親ルート \(`/crisis-center`\) を識別します
 - この親ルートのパラメータはありません
 - 子ルートのデフォルトがないため、1つを選択する必要があります
-- `CrisisListComponent` にナビゲートしており、そのルートパスは `/` ですが、スラッシュを明示的に追加する必要はありません
+- `CrisisList` にナビゲートしており、そのルートパスは `/` ですが、スラッシュを明示的に追加する必要はありません
 
-危機センターのルートを排他的に使用して、`AppComponent` テンプレートを再定義できます。
+危機センターのルートを排他的に使用して、`App` テンプレートを再定義できます。
 
 ```angular-html
 <a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>
@@ -133,7 +134,7 @@ const routes: Routes = [
 - 配列の2番目の項目として、Dragon Crisisの `id` を追加しました。
 - 結果のパスは `/crisis-center/1` です。
 
-また、`AppComponent`テンプレートを危機センターのルート専用に再定義できます：
+また、`App`テンプレートを危機センターのルート専用に再定義できます：
 
 ```angular-ts
 @Component({
@@ -141,13 +142,13 @@ const routes: Routes = [
     <h1 class="title">Angular Router</h1>
     <nav>
       <a [routerLink]="['/crisis-center']">Crisis Center</a>
-      <a [routerLink]="['/crisis-center/1', { foo: 'foo' }]">Dragon Crisis</a>
+      <a [routerLink]="['/crisis-center/1', {foo: 'foo'}]">Dragon Crisis</a>
       <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
     </nav>
     <router-outlet />
-  `
+  `,
 })
-export class AppComponent {}
+export class App {}
 ```
 
 要約すると、ルーティングが1レベル、2レベル、または複数レベルのアプリケーションを作成できます。
@@ -184,4 +185,4 @@ localhost:3002/src/#/crisis-center
 `RouterModule.forRoot()` 関数は、`LocationStrategy` を `PathLocationStrategy` に設定します。これにより、デフォルトの戦略になります。
 ブートストラッププロセス中にオーバーライドを使用して、`HashLocationStrategy` に切り替えることもできます。
 
-HELPFUL: プロバイダーとブートストラッププロセスの詳細については、[依存性の注入](guide/di/dependency-injection-providers) を参照してください。
+HELPFUL: プロバイダーとブートストラッププロセスの詳細については、[依存性の注入](guide/di/defining-dependency-providers) を参照してください。
diff --git a/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md b/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md
index ae063dd42..9c082aae9 100644
--- a/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md
+++ b/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md
@@ -78,7 +78,7 @@ export const routes: Routes = [
 @Component({
   /* ... */
 })
-export class CustomerComponent {
+export class Customer {
   private route = inject(ActivatedRoute);
 
   orgId = this.route.parent?.parent?.snapshot.params['orgId'];
@@ -97,7 +97,7 @@ Using `'always'` ensures matrix parameters, route data, and resolved values are
 @Component({
   /* ... */
 })
-export class CustomerComponent {
+export class Customer {
   private route = inject(ActivatedRoute);
 
   // All parent parameters are available directly
@@ -224,7 +224,7 @@ When implementing a custom `RouteReuseStrategy`, you may need to manually destro
 Since `DetachedRouteHandle` is an opaque type, you cannot call a destroy method directly on it. Instead, use the `destroyDetachedRouteHandle` function provided by the Router.
 
 ```ts
-import { destroyDetachedRouteHandle } from '@angular/router';
+import {destroyDetachedRouteHandle} from '@angular/router';
 
 // ... inside your strategy
 if (this.handles.size > MAX_CACHE_SIZE) {
@@ -245,12 +245,10 @@ By default, Angular does not destroy the injectors of detached routes, even if t
 To enable automatic cleanup of unused route injectors, you can use the `withExperimentalAutoCleanupInjectors` feature in your router configuration. This feature checks which routes are currently stored by the strategy after navigations and destroys the injectors of any detached routes that are not currently stored by the reuse strategy.
 
 ```ts
-import { provideRouter, withExperimentalAutoCleanupInjectors } from '@angular/router';
+import {provideRouter, withExperimentalAutoCleanupInjectors} from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes, withExperimentalAutoCleanupInjectors())
-  ]
+  providers: [provideRouter(routes, withExperimentalAutoCleanupInjectors())],
 };
 ```
 
@@ -298,17 +296,17 @@ Routes can opt into reuse behavior through route configuration metadata. This ap
 export const routes: Routes = [
   {
     path: 'products',
-    component: ProductListComponent,
+    component: ProductList,
     data: {reuse: true}, // Component state persists across navigations
   },
   {
     path: 'products/:id',
-    component: ProductDetailComponent,
+    component: ProductDetail,
     // No reuse flag - component recreates on each navigation
   },
   {
     path: 'search',
-    component: SearchComponent,
+    component: Search,
     data: {reuse: true}, // Preserves search results and filter state
   },
 ];
@@ -516,7 +514,7 @@ export function versionMatcher(segments: UrlSegment[]): UrlMatchResult | null {
 export const routes: Routes = [
   {
     matcher: versionMatcher,
-    component: DocumentationComponent,
+    component: Documentation,
   },
   {
     path: 'latest/docs',
@@ -528,8 +526,8 @@ export const routes: Routes = [
 The component receives the extracted parameters through route inputs:
 
 ```angular-ts
-import { Component, input, inject } from '@angular/core';
-import { resource } from '@angular/core';
+import {Component, input, inject} from '@angular/core';
+import {resource} from '@angular/core';
 
 @Component({
   selector: 'app-documentation',
@@ -541,12 +539,12 @@ import { resource } from '@angular/core';
     } @else if (documentation.value(); as docs) {
       <article>{{ docs.content }}</article>
     }
-  `
+  `,
 })
-export class DocumentationComponent {
+export class Documentation {
   // Route parameters are automatically bound to signal inputs
-  version = input.required<string>();  // Receives the version parameter
-  section = input.required<string>();  // Receives the section parameter
+  version = input.required<string>(); // Receives the version parameter
+  section = input.required<string>(); // Receives the section parameter
 
   private docsService = inject(DocumentationService);
 
@@ -557,13 +555,13 @@ export class DocumentationComponent {
 
       return {
         version: this.version(),
-        section: this.section()
-      }
+        section: this.section(),
+      };
     },
-    loader: ({ params }) => {
+    loader: ({params}) => {
       return this.docsService.loadDocumentation(params.version, params.section);
-    }
-  })
+    },
+  });
 }
 ```
 
diff --git a/adev-ja/src/content/guide/routing/customizing-route-behavior.md b/adev-ja/src/content/guide/routing/customizing-route-behavior.md
index aae7263fb..d28704d0e 100644
--- a/adev-ja/src/content/guide/routing/customizing-route-behavior.md
+++ b/adev-ja/src/content/guide/routing/customizing-route-behavior.md
@@ -78,7 +78,7 @@ export const routes: Routes = [
 @Component({
   /* ... */
 })
-export class CustomerComponent {
+export class Customer {
   private route = inject(ActivatedRoute);
 
   orgId = this.route.parent?.parent?.snapshot.params['orgId'];
@@ -97,7 +97,7 @@ export class CustomerComponent {
 @Component({
   /* ... */
 })
-export class CustomerComponent {
+export class Customer {
   private route = inject(ActivatedRoute);
 
   // All parent parameters are available directly
@@ -248,9 +248,7 @@ NOTE: `canMatch`ガードが関与している場合、重複したエントリ
 import {provideRouter, withExperimentalAutoCleanupInjectors} from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes, withExperimentalAutoCleanupInjectors())
-  ]
+  providers: [provideRouter(routes, withExperimentalAutoCleanupInjectors())],
 };
 ```
 
@@ -298,17 +296,17 @@ export class CustomRouteReuseStrategy implements RouteReuseStrategy {
 export const routes: Routes = [
   {
     path: 'products',
-    component: ProductListComponent,
+    component: ProductList,
     data: {reuse: true}, // Component state persists across navigations
   },
   {
     path: 'products/:id',
-    component: ProductDetailComponent,
+    component: ProductDetail,
     // No reuse flag - component recreates on each navigation
   },
   {
     path: 'search',
-    component: SearchComponent,
+    component: Search,
     data: {reuse: true}, // Preserves search results and filter state
   },
 ];
@@ -516,7 +514,7 @@ export function versionMatcher(segments: UrlSegment[]): UrlMatchResult | null {
 export const routes: Routes = [
   {
     matcher: versionMatcher,
-    component: DocumentationComponent,
+    component: Documentation,
   },
   {
     path: 'latest/docs',
@@ -528,8 +526,8 @@ export const routes: Routes = [
 コンポーネントは、ルート入力を介して抽出されたパラメーターを受け取ります:
 
 ```angular-ts
-import { Component, input, inject } from '@angular/core';
-import { resource } from '@angular/core';
+import {Component, input, inject} from '@angular/core';
+import {resource} from '@angular/core';
 
 @Component({
   selector: 'app-documentation',
@@ -541,12 +539,12 @@ import { resource } from '@angular/core';
     } @else if (documentation.value(); as docs) {
       <article>{{ docs.content }}</article>
     }
-  `
+  `,
 })
-export class DocumentationComponent {
+export class Documentation {
   // Route parameters are automatically bound to signal inputs
-  version = input.required<string>();  // Receives the version parameter
-  section = input.required<string>();  // Receives the section parameter
+  version = input.required<string>(); // Receives the version parameter
+  section = input.required<string>(); // Receives the section parameter
 
   private docsService = inject(DocumentationService);
 
@@ -557,13 +555,13 @@ export class DocumentationComponent {
 
       return {
         version: this.version(),
-        section: this.section()
-      }
+        section: this.section(),
+      };
     },
-    loader: ({ params }) => {
+    loader: ({params}) => {
       return this.docsService.loadDocumentation(params.version, params.section);
-    }
-  })
+    },
+  });
 }
 ```
 
diff --git a/adev-ja/src/content/guide/routing/data-resolvers.en.md b/adev-ja/src/content/guide/routing/data-resolvers.en.md
index 11eb4d8a9..232d688f5 100644
--- a/adev-ja/src/content/guide/routing/data-resolvers.en.md
+++ b/adev-ja/src/content/guide/routing/data-resolvers.en.md
@@ -76,17 +76,17 @@ You can learn more about the [`resolve` configuration in the API docs](api/route
 You can access the resolved data in a component by accessing the snapshot data from the `ActivatedRoute` using the `signal` function:
 
 ```angular-ts
-import { Component, inject, computed } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { toSignal } from '@angular/core/rxjs-interop';
-import type { User, Settings } from './types';
+import {Component, inject, computed} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {toSignal} from '@angular/core/rxjs-interop';
+import type {User, Settings} from './types';
 
 @Component({
   template: `
     <h1>{{ user().name }}</h1>
     <p>{{ user().email }}</p>
     <div>Theme: {{ settings().theme }}</div>
-  `
+  `,
 })
 export class UserDetail {
   private route = inject(ActivatedRoute);
@@ -113,15 +113,15 @@ bootstrapApplication(App, {
 With this configuration, you can define inputs in your component that match the resolver keys using the `input` function and `input.required` for required inputs:
 
 ```angular-ts
-import { Component, input } from '@angular/core';
-import type { User, Settings } from './types';
+import {Component, input} from '@angular/core';
+import type {User, Settings} from './types';
 
 @Component({
   template: `
     <h1>{{ user().name }}</h1>
     <p>{{ user().email }}</p>
     <div>Theme: {{ settings().theme }}</div>
-  `
+  `,
 })
 export class UserDetail {
   user = input.required<User>();
@@ -186,10 +186,10 @@ export const userResolver: ResolveFn<User> = (route) => {
 You can also handle resolver errors by subscribing to router events and listening for `NavigationError` events. This approach gives you more granular control over error handling and allows you to implement custom error recovery logic.
 
 ```angular-ts
-import { Component, inject, signal } from '@angular/core';
-import { Router, NavigationError } from '@angular/router';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { map } from 'rxjs';
+import {Component, inject, signal} from '@angular/core';
+import {Router, NavigationError} from '@angular/router';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {map} from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -201,7 +201,7 @@ import { map } from 'rxjs';
       </div>
     }
     <router-outlet />
-  `
+  `,
 })
 export class App {
   private router = inject(Router);
@@ -209,20 +209,20 @@ export class App {
 
   private navigationErrors = toSignal(
     this.router.events.pipe(
-      map(event => {
+      map((event) => {
         if (event instanceof NavigationError) {
           this.lastFailedUrl.set(event.url);
 
           if (event.error) {
-            console.error('Navigation error', event.error)
+            console.error('Navigation error', event.error);
           }
 
           return 'Navigation failed. Please try again.';
         }
         return '';
-      })
+      }),
     ),
-    { initialValue: '' }
+    {initialValue: ''},
   );
 
   errorMessage = this.navigationErrors;
@@ -275,8 +275,8 @@ While data resolvers prevent loading states within components, they introduce a
 To improve user experience during resolver execution, you can listen to router events and show loading indicators:
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { Router } from '@angular/router';
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -285,7 +285,7 @@ import { Router } from '@angular/router';
       <div class="loading-bar">Loading...</div>
     }
     <router-outlet />
-  `
+  `,
 })
 export class App {
   private router = inject(Router);
diff --git a/adev-ja/src/content/guide/routing/data-resolvers.md b/adev-ja/src/content/guide/routing/data-resolvers.md
index 2ef979143..0d7acd981 100644
--- a/adev-ja/src/content/guide/routing/data-resolvers.md
+++ b/adev-ja/src/content/guide/routing/data-resolvers.md
@@ -76,17 +76,17 @@ export const routes: Routes = [
 `signal`関数を使用して`ActivatedRoute`からスナップショットデータにアクセスすることで、コンポーネントで解決済みデータにアクセスできます。
 
 ```angular-ts
-import { Component, inject, computed } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { toSignal } from '@angular/core/rxjs-interop';
-import type { User, Settings } from './types';
+import {Component, inject, computed} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {toSignal} from '@angular/core/rxjs-interop';
+import type {User, Settings} from './types';
 
 @Component({
   template: `
     <h1>{{ user().name }}</h1>
     <p>{{ user().email }}</p>
     <div>Theme: {{ settings().theme }}</div>
-  `
+  `,
 })
 export class UserDetail {
   private route = inject(ActivatedRoute);
@@ -113,15 +113,15 @@ bootstrapApplication(App, {
 この設定により、`input`関数と、必須入力には`input.required`を使用して、リゾルバーキーと一致する入力をコンポーネントで定義できます。
 
 ```angular-ts
-import { Component, input } from '@angular/core';
-import type { User, Settings } from './types';
+import {Component, input} from '@angular/core';
+import type {User, Settings} from './types';
 
 @Component({
   template: `
     <h1>{{ user().name }}</h1>
     <p>{{ user().email }}</p>
     <div>Theme: {{ settings().theme }}</div>
-  `
+  `,
 })
 export class UserDetail {
   user = input.required<User>();
@@ -186,10 +186,10 @@ export const userResolver: ResolveFn<User> = (route) => {
 ルーターイベントをサブスクライブし、`NavigationError`イベントをリッスンすることで、リゾルバーのエラーを処理できます。このアプローチにより、エラー処理をよりきめ細かく制御でき、カスタムのエラー回復ロジックを実装できます。
 
 ```angular-ts
-import { Component, inject, signal } from '@angular/core';
-import { Router, NavigationError } from '@angular/router';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { map } from 'rxjs';
+import {Component, inject, signal} from '@angular/core';
+import {Router, NavigationError} from '@angular/router';
+import {toSignal} from '@angular/core/rxjs-interop';
+import {map} from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -201,7 +201,7 @@ import { map } from 'rxjs';
       </div>
     }
     <router-outlet />
-  `
+  `,
 })
 export class App {
   private router = inject(Router);
@@ -209,20 +209,20 @@ export class App {
 
   private navigationErrors = toSignal(
     this.router.events.pipe(
-      map(event => {
+      map((event) => {
         if (event instanceof NavigationError) {
           this.lastFailedUrl.set(event.url);
 
           if (event.error) {
-            console.error('Navigation error', event.error)
+            console.error('Navigation error', event.error);
           }
 
           return 'Navigation failed. Please try again.';
         }
         return '';
-      })
+      }),
     ),
-    { initialValue: '' }
+    {initialValue: ''},
   );
 
   errorMessage = this.navigationErrors;
@@ -275,8 +275,8 @@ export const userResolver: ResolveFn<User | RedirectCommand> = (route) => {
 リゾルバーの実行中のユーザー体験を向上させるには、ルーターイベントをリッスンして読み込みインジケーターを表示できます。
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { Router } from '@angular/router';
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -285,7 +285,7 @@ import { Router } from '@angular/router';
       <div class="loading-bar">Loading...</div>
     }
     <router-outlet />
-  `
+  `,
 })
 export class App {
   private router = inject(Router);
diff --git a/adev-ja/src/content/guide/routing/define-routes.en.md b/adev-ja/src/content/guide/routing/define-routes.en.md
index 420e73976..1e55a6459 100644
--- a/adev-ja/src/content/guide/routing/define-routes.en.md
+++ b/adev-ja/src/content/guide/routing/define-routes.en.md
@@ -9,7 +9,7 @@ In Angular, a **route** is an object that defines which component should render
 Here is a basic example of a route:
 
 ```ts
-import {AdminPage} from './app-admin/app-admin.component';
+import {AdminPage} from './app-admin';
 
 const adminPage = {
   path: 'admin',
@@ -27,8 +27,8 @@ A collection of routes looks like this:
 
 ```ts
 import {Routes} from '@angular/router';
-import {HomePage} from './home-page/home-page.component';
-import {AdminPage} from './about-page/admin-page.component';
+import {HomePage} from './home-page';
+import {AdminPage} from './about-page';
 
 export const routes: Routes = [
   {
@@ -107,8 +107,8 @@ You can also define paths with multiple parameters:
 
 ```ts
 import {Routes} from '@angular/router';
-import {UserProfile} from './user-profile/user-profile.component';
-import {SocialMediaFeed} from './user-profile/social–media-feed.component';
+import {UserProfile} from './user-profile';
+import {SocialMediaFeed} from './social-media-feed';
 
 const routes: Routes = [
   {path: 'user/:id/:social-media', component: SocialMediaFeed},
@@ -127,9 +127,9 @@ When you need to catch all routes for a specific path, the solution is a wildcar
 A common example is defining a Page Not Found component.
 
 ```ts
-import {Home} from './home/home.component';
-import {UserProfile} from './user-profile/user-profile.component';
-import {NotFound} from './not-found/not-found.component';
+import {Home} from './home/home';
+import {UserProfile} from './user-profile';
+import {NotFound} from './not-found';
 
 const routes: Routes = [
   {path: 'home', component: Home},
@@ -150,11 +150,11 @@ The following example shows routes defined from most-specific to least specific:
 
 ```ts
 const routes: Routes = [
-  {path: '', component: HomeComponent}, // Empty path
-  {path: 'users/new', component: NewUserComponent}, // Static, most specific
-  {path: 'users/:id', component: UserDetailComponent}, // Dynamic
-  {path: 'users', component: UsersComponent}, // Static, less specific
-  {path: '**', component: NotFoundComponent}, // Wildcard - always last
+  {path: '', component: Home}, // Empty path
+  {path: 'users/new', component: NewUser}, // Static, most specific
+  {path: 'users/:id', component: UserDetail}, // Dynamic
+  {path: 'users', component: Users}, // Static, less specific
+  {path: '**', component: NotFound}, // Wildcard - always last
 ];
 ```
 
@@ -264,7 +264,7 @@ NOTE: While lazy routes have the upfront performance benefit of reducing the amo
 You can define a route that redirects to another route instead of rendering a component:
 
 ```ts
-import {BlogComponent} from './home/blog.component';
+import {Blog} from './home/blog';
 
 const routes: Routes = [
   {
@@ -273,7 +273,7 @@ const routes: Routes = [
   },
   {
     path: 'blog',
-    component: BlogComponent,
+    component: Blog,
   },
 ];
 ```
@@ -286,19 +286,19 @@ You can associate a **title** with each route. Angular automatically updates the
 
 ```ts
 import {Routes} from '@angular/router';
-import {HomeComponent} from './home/home.component';
-import {AboutComponent} from './about/about.component';
-import {ProductsComponent} from './products/products.component';
+import {Home} from './home';
+import {About} from './about';
+import {Products} from './products';
 
 const routes: Routes = [
   {
     path: '',
-    component: HomeComponent,
+    component: Home,
     title: 'Home Page',
   },
   {
     path: 'about',
-    component: AboutComponent,
+    component: About,
     title: 'About Us',
   },
 ];
@@ -311,7 +311,7 @@ const titleResolver: ResolveFn<string> = (route) => route.queryParams['id'];
 const routes: Routes = [
   ...{
     path: 'products',
-    component: ProductsComponent,
+    component: Products,
     title: titleResolver,
   },
 ];
@@ -366,8 +366,8 @@ export const ROUTES: Route[] = [
     path: 'admin',
     providers: [AdminService, {provide: ADMIN_API_KEY, useValue: '12345'}],
     children: [
-      {path: 'users', component: AdminUsersComponent},
-      {path: 'teams', component: AdminTeamsComponent},
+      {path: 'users', component: AdminUsers},
+      {path: 'teams', component: AdminTeams},
     ],
   },
   // ... other application routes that don't
@@ -391,19 +391,19 @@ You can associate arbitrary static data with a route via the `data` property in
 
 ```ts
 import {Routes} from '@angular/router';
-import {HomeComponent} from './home/home.component';
-import {AboutComponent} from './about/about.component';
-import {ProductsComponent} from './products/products.component';
+import {Home} from './home';
+import {About} from './about';
+import {Products} from './products';
 
 const routes: Routes = [
   {
     path: 'about',
-    component: AboutComponent,
+    component: About,
     data: {analyticsId: '456'},
   },
   {
     path: '',
-    component: HomeComponent,
+    component: Home,
     data: {analyticsId: '123'},
   },
 ];
@@ -429,15 +429,15 @@ You can add child routes to any route definition with the `children` property:
 const routes: Routes = [
   {
     path: 'product/:id',
-    component: ProductComponent,
+    component: Product,
     children: [
       {
         path: 'info',
-        component: ProductInfoComponent,
+        component: ProductInfo,
       },
       {
         path: 'reviews',
-        component: ProductReviewsComponent,
+        component: ProductReviews,
       },
     ],
   },
@@ -448,10 +448,10 @@ The above example defines a route for a product page that allows a user to chang
 
 The `children` property accepts an array of `Route` objects.
 
-To display child routes, the parent component (`ProductComponent` in the example above) includes its own `<router-outlet>`.
+To display child routes, the parent component (`Product` in the example above) includes its own `<router-outlet>`.
 
 ```angular-html
-<!-- ProductComponent -->
+<!-- Product -->
 <article>
   <h1>Product {{ id }}</h1>
   <router-outlet />
diff --git a/adev-ja/src/content/guide/routing/define-routes.md b/adev-ja/src/content/guide/routing/define-routes.md
index 8ac32f271..6e7323120 100644
--- a/adev-ja/src/content/guide/routing/define-routes.md
+++ b/adev-ja/src/content/guide/routing/define-routes.md
@@ -9,7 +9,7 @@ Angularでは、**ルート**は特定のURLパスまたはパターンに対し
 次にルートの基本的な例を示します。
 
 ```ts
-import {AdminPage} from './app-admin/app-admin.component';
+import {AdminPage} from './app-admin';
 
 const adminPage = {
   path: 'admin',
@@ -27,8 +27,8 @@ const adminPage = {
 
 ```ts
 import {Routes} from '@angular/router';
-import {HomePage} from './home-page/home-page.component';
-import {AdminPage} from './about-page/admin-page.component';
+import {HomePage} from './home-page';
+import {AdminPage} from './about-page';
 
 export const routes: Routes = [
   {
@@ -107,8 +107,8 @@ const routes: Routes = [{path: 'user/:id', component: UserProfile}];
 
 ```ts
 import {Routes} from '@angular/router';
-import {UserProfile} from './user-profile/user-profile.component';
-import {SocialMediaFeed} from './user-profile/social–media-feed.component';
+import {UserProfile} from './user-profile';
+import {SocialMediaFeed} from './social-media-feed';
 
 const routes: Routes = [
   {path: 'user/:id/:social-media', component: SocialMediaFeed},
@@ -127,9 +127,9 @@ const routes: Routes = [
 一般的な例は、ページが見つかりませんコンポーネントの定義です。
 
 ```ts
-import {Home} from './home/home.component';
-import {UserProfile} from './user-profile/user-profile.component';
-import {NotFound} from './not-found/not-found.component';
+import {Home} from './home/home';
+import {UserProfile} from './user-profile';
+import {NotFound} from './not-found';
 
 const routes: Routes = [
   {path: 'home', component: Home},
@@ -150,11 +150,11 @@ Tip: ワイルドカードルートは通常、ルート配列の最後に配置
 
 ```ts
 const routes: Routes = [
-  {path: '', component: HomeComponent}, // 空のパス
-  {path: 'users/new', component: NewUserComponent}, // 静的、最も具体的
-  {path: 'users/:id', component: UserDetailComponent}, // 動的
-  {path: 'users', component: UsersComponent}, // 静的、具体的でない
-  {path: '**', component: NotFoundComponent}, // ワイルドカード - 常に最後
+  {path: '', component: Home}, // 空のパス
+  {path: 'users/new', component: NewUser}, // 静的、最も具体的
+  {path: 'users/:id', component: UserDetail}, // 動的
+  {path: 'users', component: Users}, // 静的、具体的でない
+  {path: '**', component: NotFound}, // ワイルドカード - 常に最後
 ];
 ```
 
@@ -264,7 +264,7 @@ NOTE: 遅延ルートは、ユーザーが要求する初期データの量を
 コンポーネントをレンダリングする代わりに、別のルートにリダイレクトするルートを定義できます。
 
 ```ts
-import {BlogComponent} from './home/blog.component';
+import {Blog} from './home/blog';
 
 const routes: Routes = [
   {
@@ -273,7 +273,7 @@ const routes: Routes = [
   },
   {
     path: 'blog',
-    component: BlogComponent,
+    component: Blog,
   },
 ];
 ```
@@ -286,18 +286,19 @@ const routes: Routes = [
 
 ```ts
 import {Routes} from '@angular/router';
-import {HomeComponent} from './home/home.component';
-import {AboutComponent} from './about/about.component';
+import {Home} from './home';
+import {About} from './about';
+import {Products} from './products';
 
 const routes: Routes = [
   {
     path: '',
-    component: HomeComponent,
+    component: Home,
     title: 'Home Page',
   },
   {
     path: 'about',
-    component: AboutComponent,
+    component: About,
     title: 'About Us',
   },
 ];
@@ -310,7 +311,7 @@ const titleResolver: ResolveFn<string> = (route) => route.queryParams['id'];
 const routes: Routes = [
   ...{
     path: 'products',
-    component: ProductsComponent,
+    component: Products,
     title: titleResolver,
   },
 ];
@@ -365,8 +366,8 @@ export const ROUTES: Route[] = [
     path: 'admin',
     providers: [AdminService, {provide: ADMIN_API_KEY, useValue: '12345'}],
     children: [
-      {path: 'users', component: AdminUsersComponent},
-      {path: 'teams', component: AdminTeamsComponent},
+      {path: 'users', component: AdminUsers},
+      {path: 'teams', component: AdminTeams},
     ],
   },
   // ... other application routes that don't
@@ -390,19 +391,19 @@ Angularのプロバイダーと注入に関する詳細については、[依存
 
 ```ts
 import {Routes} from '@angular/router';
-import {HomeComponent} from './home/home.component';
-import {AboutComponent} from './about/about.component';
-import {ProductsComponent} from './products/products.component';
+import {Home} from './home';
+import {About} from './about';
+import {Products} from './products';
 
 const routes: Routes = [
   {
     path: 'about',
-    component: AboutComponent,
+    component: About,
     data: {analyticsId: '456'},
   },
   {
     path: '',
-    component: HomeComponent,
+    component: Home,
     data: {analyticsId: '123'},
   },
 ];
@@ -428,15 +429,15 @@ const routes: Routes = [
 const routes: Routes = [
   {
     path: 'product/:id',
-    component: ProductComponent,
+    component: Product,
     children: [
       {
         path: 'info',
-        component: ProductInfoComponent,
+        component: ProductInfo,
       },
       {
         path: 'reviews',
-        component: ProductReviewsComponent,
+        component: ProductReviews,
       },
     ],
   },
@@ -447,10 +448,10 @@ const routes: Routes = [
 
 `children`プロパティは`Route`オブジェクトの配列を受け入れます。
 
-子ルートを表示するには、親コンポーネント（上記の例では`ProductComponent`）に独自の`<router-outlet>`を含めます。
+子ルートを表示するには、親コンポーネント（上記の例では`Product`）に独自の`<router-outlet>`を含めます。
 
 ```angular-html
-<!-- ProductComponent -->
+<!-- Product -->
 <article>
   <h1>Product {{ id }}</h1>
   <router-outlet />
@@ -462,4 +463,3 @@ const routes: Routes = [
 ## 次のステップ {#next-steps}
 
 [アウトレットでルートのコンテンツを表示する方法](/guide/routing/show-routes-with-outlets)を学びましょう。
-
diff --git a/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md
index c4f713230..8a05cd370 100644
--- a/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md
+++ b/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md
@@ -32,11 +32,13 @@ When you want to run code during specific navigation lifecycle events, you can d
 
 ```ts
 // Example of subscribing to router events
-import { Component, inject, signal, effect } from '@angular/core';
-import { Event, Router, NavigationStart, NavigationEnd } from '@angular/router';
+import {Component, inject, signal, effect} from '@angular/core';
+import {Event, Router, NavigationStart, NavigationEnd} from '@angular/router';
 
-@Component({ ... })
-export class RouterEventsComponent {
+@Component({
+  /*...*/
+})
+export class RouterEvents {
   private readonly router = inject(Router);
 
   constructor() {
@@ -67,7 +69,7 @@ When you need to inspect a Router event sequence, you can enable logging for int
 import {provideRouter, withDebugTracing} from '@angular/router';
 
 const appRoutes: Routes = [];
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideRouter(appRoutes, withDebugTracing())],
 });
 ```
@@ -83,8 +85,8 @@ Router events enable many practical features in real-world applications. Here ar
 Show loading indicators during navigation:
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { Router } from '@angular/router';
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -93,7 +95,7 @@ import { Router } from '@angular/router';
       <div class="loading-bar">Loading...</div>
     }
     <router-outlet />
-  `
+  `,
 })
 export class App {
   private router = inject(Router);
@@ -138,9 +140,15 @@ export class AnalyticsService {
 Handle navigation errors gracefully and provide user feedback:
 
 ```angular-ts
-import { Component, inject, signal } from '@angular/core';
-import { Router, NavigationStart, NavigationError, NavigationCancel, NavigationCancellationCode } from '@angular/router';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {Component, inject, signal} from '@angular/core';
+import {
+  Router,
+  NavigationStart,
+  NavigationError,
+  NavigationCancel,
+  NavigationCancellationCode,
+} from '@angular/router';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-error-handler',
@@ -151,14 +159,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
         <button (click)="dismissError()">Dismiss</button>
       </div>
     }
-  `
+  `,
 })
-export class ErrorHandlerComponent {
+export class ErrorHandler {
   private router = inject(Router);
   readonly errorMessage = signal('');
 
   constructor() {
-    this.router.events.pipe(takeUntilDestroyed()).subscribe(event => {
+    this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
       if (event instanceof NavigationStart) {
         this.errorMessage.set('');
       } else if (event instanceof NavigationError) {
diff --git a/adev-ja/src/content/guide/routing/lifecycle-and-events.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.md
index 3cbd8a52f..4519ee449 100644
--- a/adev-ja/src/content/guide/routing/lifecycle-and-events.md
+++ b/adev-ja/src/content/guide/routing/lifecycle-and-events.md
@@ -32,11 +32,13 @@ Angularルーターは、ナビゲーションライフサイクルを追跡す
 
 ```ts
 // Example of subscribing to router events
-import { Component, inject, signal, effect } from '@angular/core';
-import { Event, Router, NavigationStart, NavigationEnd } from '@angular/router';
+import {Component, inject, signal, effect} from '@angular/core';
+import {Event, Router, NavigationStart, NavigationEnd} from '@angular/router';
 
-@Component({ ... })
-export class RouterEventsComponent {
+@Component({
+  /*...*/
+})
+export class RouterEvents {
   private readonly router = inject(Router);
 
   constructor() {
@@ -67,7 +69,7 @@ NOTE: `@angular/router`の[`Event`](api/router/Event)型は、通常のグロー
 import {provideRouter, withDebugTracing} from '@angular/router';
 
 const appRoutes: Routes = [];
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideRouter(appRoutes, withDebugTracing())],
 });
 ```
@@ -83,8 +85,8 @@ bootstrapApplication(AppComponent, {
 ナビゲーション中にローディングインジケーターを表示します。
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { Router } from '@angular/router';
+import {Component, inject} from '@angular/core';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -93,7 +95,7 @@ import { Router } from '@angular/router';
       <div class="loading-bar">Loading...</div>
     }
     <router-outlet />
-  `
+  `,
 })
 export class App {
   private router = inject(Router);
@@ -138,9 +140,15 @@ export class AnalyticsService {
 ナビゲーションエラーを適切に処理し、ユーザーフィードバックを提供します。
 
 ```angular-ts
-import { Component, inject, signal } from '@angular/core';
-import { Router, NavigationStart, NavigationError, NavigationCancel, NavigationCancellationCode } from '@angular/router';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {Component, inject, signal} from '@angular/core';
+import {
+  Router,
+  NavigationStart,
+  NavigationError,
+  NavigationCancel,
+  NavigationCancellationCode,
+} from '@angular/router';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-error-handler',
@@ -151,14 +159,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
         <button (click)="dismissError()">Dismiss</button>
       </div>
     }
-  `
+  `,
 })
-export class ErrorHandlerComponent {
+export class ErrorHandler {
   private router = inject(Router);
   readonly errorMessage = signal('');
 
   constructor() {
-    this.router.events.pipe(takeUntilDestroyed()).subscribe(event => {
+    this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
       if (event instanceof NavigationStart) {
         this.errorMessage.set('');
       } else if (event instanceof NavigationError) {
diff --git a/adev-ja/src/content/guide/routing/navigate-to-routes.en.md b/adev-ja/src/content/guide/routing/navigate-to-routes.en.md
index f49889f8f..99e5fa9da 100644
--- a/adev-ja/src/content/guide/routing/navigate-to-routes.en.md
+++ b/adev-ja/src/content/guide/routing/navigate-to-routes.en.md
@@ -15,7 +15,7 @@ import {RouterLink} from '@angular/router';
       <a routerLink="/user-profile">User profile</a>
       <a routerLink="/settings">Settings</a>
     </nav>
-  `
+  `,
   imports: [RouterLink],
   ...
 })
@@ -36,7 +36,7 @@ export class App {}
 
 In this example, the first example contains the full path with the protocol (i.e., `https://`) and the root domain (i.e., `angular.dev`) explicitly defined for the essentials page. In contrast, the second example assumes the user is already on the correct root domain for `/essentials`.
 
-Generally speaking, relative URLs are preferred because they are more maintainable across applications because they don’t need to know their absolute position within the routing hierarchy.
+Generally speaking, relative URLs are preferred as they are more maintainable across applications since they don’t need to know their absolute position within the routing hierarchy.
 
 ### How relative URLs work
 
@@ -56,7 +56,7 @@ When you need to define dynamic parameters in a relative URL, use the array synt
 <a [routerLink]="['user', currentUserId]">Current User</a>
 ```
 
-In addition, Angular routing allows you specify whether you want the path to be relative to the current URL or to the root domain based on whether the relative path is prefixed with a forward slash (`/`) or not.
+In addition, Angular routing allows you to specify whether you want the path to be relative to the current URL or to the root domain based on whether the relative path is prefixed with a forward slash (`/`) or not.
 
 For example, if the user is on `example.com/settings`, here is how different relative paths can be defined for various scenarios:
 
@@ -67,7 +67,7 @@ For example, if the user is on `example.com/settings`, here is how different rel
 
 <!-- Navigates to /team/:teamId/user/:userId -->
 <a routerLink="/team/123/user/456">User 456</a>
-<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>”
+<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>
 ```
 
 ## Programmatic navigation to routes
@@ -79,13 +79,11 @@ While `RouterLink` handles declarative navigation in templates, Angular provides
 You can use the `router.navigate()` method to programmatically navigate between routes by specifying a URL path array.
 
 ```angular-ts
-import { Router } from '@angular/router';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
-  template: `
-    <button (click)="navigateToProfile()">View Profile</button>
-  `
+  template: ` <button (click)="navigateToProfile()">View Profile</button> `,
 })
 export class AppDashboard {
   private router = inject(Router);
@@ -99,11 +97,11 @@ export class AppDashboard {
 
     // With query parameters
     this.router.navigate(['/search'], {
-      queryParams: { category: 'books', sort: 'price' }
+      queryParams: {category: 'books', sort: 'price'},
     });
 
     // With matrix parameters
-    this.router.navigate(['/products', { featured: true, onSale: true }]);
+    this.router.navigate(['/products', {featured: true, onSale: true}]);
   }
 }
 ```
@@ -113,33 +111,31 @@ export class AppDashboard {
 You can also build dynamic navigation paths relative to your component’s location in the routing tree using the `relativeTo` option.
 
 ```angular-ts
-import { Router, ActivatedRoute } from '@angular/router';
+import {Router, ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-user-detail',
   template: `
     <button (click)="navigateToEdit()">Edit User</button>
     <button (click)="navigateToParent()">Back to List</button>
-  `
+  `,
 })
-export class UserDetailComponent {
+export class UserDetail {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
 
-  constructor() {}
-
   // Navigate to a sibling route
   navigateToEdit() {
     // From: /users/123
     // To:   /users/123/edit
-    this.router.navigate(['edit'], { relativeTo: this.route });
+    this.router.navigate(['edit'], {relativeTo: this.route});
   }
 
   // Navigate to parent
   navigateToParent() {
     // From: /users/123
     // To:   /users
-    this.router.navigate(['..'], { relativeTo: this.route });
+    this.router.navigate(['..'], {relativeTo: this.route});
   }
 }
 ```
diff --git a/adev-ja/src/content/guide/routing/navigate-to-routes.md b/adev-ja/src/content/guide/routing/navigate-to-routes.md
index 9aab81eed..b4834752e 100644
--- a/adev-ja/src/content/guide/routing/navigate-to-routes.md
+++ b/adev-ja/src/content/guide/routing/navigate-to-routes.md
@@ -15,7 +15,7 @@ import {RouterLink} from '@angular/router';
       <a routerLink="/user-profile">User profile</a>
       <a routerLink="/settings">Settings</a>
     </nav>
-  `
+  `,
   imports: [RouterLink],
   ...
 })
@@ -36,7 +36,7 @@ Angularルーティングにおける**相対URL**は、現在のルートの場
 
 この例では、最初の例は、基本概念ページに対してプロトコル（つまり`https://`）とルートドメイン（つまり`angular.dev`）が明示的に定義された完全なパスを含んでいます。対照的に、2番目の例は、ユーザーがすでに`/essentials`の正しいルートドメインにいることを前提としています。
 
-一般的に、相対URLは、ルーティング階層内での絶対位置を知る必要がないため、アプリケーション全体で保守しやすいため、推奨されます。
+一般的に、相対URLは、ルーティング階層内での絶対位置を知る必要がないため、アプリケーション全体でより保守しやすく、推奨されます。
 
 ### 相対URLの仕組み {#how-relative-urls-work}
 
@@ -56,7 +56,7 @@ HELPFUL: 文字列を渡すのが、相対URLを定義する最も一般的な
 <a [routerLink]="['user', currentUserId]">Current User</a>
 ```
 
-さらに、Angularルーティングでは、相対パスがスラッシュ（`/`）で始まるかどうかによって、パスを現在のURLに対する相対パスにするか、ルートドメインに対する相対パスにするかを指定できます。
+さらに、Angularルーティングでは、相対パスの先頭にスラッシュ（`/`）を付けるかどうかによって、パスを現在のURLに対する相対パスにするか、ルートドメインに対する相対パスにするかを指定できます。
 
 たとえば、ユーザーが`example.com/settings`にいる場合、さまざまなシナリオで異なる相対パスを定義する方法を次に示します。
 
@@ -67,7 +67,7 @@ HELPFUL: 文字列を渡すのが、相対URLを定義する最も一般的な
 
 <!-- Navigates to /team/:teamId/user/:userId -->
 <a routerLink="/team/123/user/456">User 456</a>
-<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>”
+<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>
 ```
 
 ## ルートへのプログラムによるナビゲーション {#programmatic-navigation-to-routes}
@@ -79,13 +79,11 @@ HELPFUL: 文字列を渡すのが、相対URLを定義する最も一般的な
 `router.navigate()`メソッドを使用して、URLパス配列を指定することで、ルート間をプログラムでナビゲートできます。
 
 ```angular-ts
-import { Router } from '@angular/router';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
-  template: `
-    <button (click)="navigateToProfile()">View Profile</button>
-  `
+  template: ` <button (click)="navigateToProfile()">View Profile</button> `,
 })
 export class AppDashboard {
   private router = inject(Router);
@@ -99,11 +97,11 @@ export class AppDashboard {
 
     // With query parameters
     this.router.navigate(['/search'], {
-      queryParams: { category: 'books', sort: 'price' }
+      queryParams: {category: 'books', sort: 'price'},
     });
 
     // With matrix parameters
-    this.router.navigate(['/products', { featured: true, onSale: true }]);
+    this.router.navigate(['/products', {featured: true, onSale: true}]);
   }
 }
 ```
@@ -113,33 +111,31 @@ export class AppDashboard {
 また、`relativeTo`オプションを使用して、ルーティングツリー内のコンポーネントの場所に対する動的なナビゲーションパスを構築できます。
 
 ```angular-ts
-import { Router, ActivatedRoute } from '@angular/router';
+import {Router, ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-user-detail',
   template: `
     <button (click)="navigateToEdit()">Edit User</button>
     <button (click)="navigateToParent()">Back to List</button>
-  `
+  `,
 })
-export class UserDetailComponent {
+export class UserDetail {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
 
-  constructor() {}
-
   // Navigate to a sibling route
   navigateToEdit() {
     // From: /users/123
     // To:   /users/123/edit
-    this.router.navigate(['edit'], { relativeTo: this.route });
+    this.router.navigate(['edit'], {relativeTo: this.route});
   }
 
   // Navigate to parent
   navigateToParent() {
     // From: /users/123
     // To:   /users
-    this.router.navigate(['..'], { relativeTo: this.route });
+    this.router.navigate(['..'], {relativeTo: this.route});
   }
 }
 ```
diff --git a/adev-ja/src/content/guide/routing/read-route-state.en.md b/adev-ja/src/content/guide/routing/read-route-state.en.md
index 6377858ee..5f14761ca 100644
--- a/adev-ja/src/content/guide/routing/read-route-state.en.md
+++ b/adev-ja/src/content/guide/routing/read-route-state.en.md
@@ -7,13 +7,13 @@ Angular Router allows you to read and use information associated with a route to
 `ActivatedRoute` is a service from `@angular/router` that provides all the information associated with the current route.
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import {Component} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-product',
 })
-export class ProductComponent {
+export class Product {
   private activatedRoute = inject(ActivatedRoute);
 
   constructor() {
@@ -42,10 +42,12 @@ Route snapshots contain essential information about the route, including its par
 Here’s an example of how you’d access a route snapshot:
 
 ```angular-ts
-import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
+import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router';
 
-@Component({ ... })
-export class UserProfileComponent {
+@Component({
+  /*...*/
+})
+export class UserProfile {
   readonly userId: string;
   private route = inject(ActivatedRoute);
 
@@ -58,11 +60,11 @@ export class UserProfileComponent {
     // Access multiple route elements
     const snapshot = this.route.snapshot;
     console.log({
-      url: snapshot.url,           // https://www.angular.dev
+      url: snapshot.url, // https://www.angular.dev
       // Route parameters object: {id: '123'}
       params: snapshot.params,
       // Query parameters object: {role: 'admin', status: 'active'}
-      queryParams: snapshot.queryParams,  // Query parameters
+      queryParams: snapshot.queryParams, // Query parameters
     });
   }
 }
@@ -81,25 +83,23 @@ Route parameters allow you to pass data to a component through the URL. This is
 You can [define route parameters](/guide/routing/define-routes#define-url-paths-with-route-parameters) by prefixing the parameter name with a colon (`:`).
 
 ```angular-ts
-import { Routes } from '@angular/router';
-import { ProductComponent } from './product/product.component';
+import {Routes} from '@angular/router';
+import {Product} from './product';
 
-const routes: Routes = [
-  { path: 'product/:id', component: ProductComponent }
-];
+const routes: Routes = [{path: 'product/:id', component: Product}];
 ```
 
 You can access parameters by subscribing to `route.params`.
 
 ```angular-ts
-import { Component, inject, signal } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import {Component, inject, signal} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-product-detail',
   template: `<h1>Product Details: {{ productId() }}</h1>`,
 })
-export class ProductDetailComponent {
+export class ProductDetail {
   productId = signal('');
   private activatedRoute = inject(ActivatedRoute);
 
@@ -120,7 +120,7 @@ export class ProductDetailComponent {
 // Single parameter structure
 // /products?category=electronics
 router.navigate(['/products'], {
-  queryParams: { category: 'electronics' }
+  queryParams: {category: 'electronics'},
 });
 
 // Multiple parameters
@@ -129,17 +129,17 @@ router.navigate(['/products'], {
   queryParams: {
     category: 'electronics',
     sort: 'price',
-    page: 1
-  }
+    page: 1,
+  },
 });
 ```
 
 You can access query parameters with `route.queryParams`.
 
-Here is an example of a `ProductListComponent` that updates the query parameters that affect how it displays a list of products:
+Here is an example of a `ProductList` that updates the query parameters that affect how it displays a list of products:
 
 ```angular-ts
-import { ActivatedRoute, Router } from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-product-list',
@@ -151,15 +151,15 @@ import { ActivatedRoute, Router } from '@angular/router';
       </select>
       <!-- Products list -->
     </div>
-  `
+  `,
 })
-export class ProductListComponent implements OnInit {
+export class ProductList {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
 
   constructor() {
     // Access query parameters reactively
-    this.route.queryParams.subscribe(params => {
+    this.route.queryParams.subscribe((params) => {
       const sort = params['sort'] || 'price';
       const page = Number(params['page']) || 1;
       this.loadProducts(sort, page);
@@ -170,8 +170,8 @@ export class ProductListComponent implements OnInit {
     const sort = (event.target as HTMLSelectElement).value;
     // Update URL with new query parameter
     this.router.navigate([], {
-      queryParams: { sort },
-      queryParamsHandling: 'merge' // Preserve other query parameters
+      queryParams: {sort},
+      queryParamsHandling: 'merge', // Preserve other query parameters
     });
   }
 }
@@ -224,16 +224,21 @@ You can use the `RouterLinkActive` directive to dynamically style navigation ele
 
 ```angular-html
 <nav>
-  <a class="button"
-     routerLink="/about"
-     routerLinkActive="active-button"
-     ariaCurrentWhenActive="page">
+  <a
+    class="button"
+    routerLink="/about"
+    routerLinkActive="active-button"
+    ariaCurrentWhenActive="page"
+  >
     About
-  </a> |
-  <a class="button"
-     routerLink="/settings"
-     routerLinkActive="active-button"
-     ariaCurrentWhenActive="page">
+  </a>
+  |
+  <a
+    class="button"
+    routerLink="/settings"
+    routerLinkActive="active-button"
+    ariaCurrentWhenActive="page"
+  >
     Settings
   </a>
 </nav>
@@ -260,12 +265,8 @@ If you want to define a different value for aria, you’ll need to explicitly se
 By default, `RouterLinkActive` considers any ancestors in the route a match.
 
 ```angular-html
-<a [routerLink]="['/user/jane']" routerLinkActive="active-link">
-  User
-</a>
-<a [routerLink]="['/user/jane/role/admin']" routerLinkActive="active-link">
-  Role
-</a>
+<a [routerLink]="['/user/jane']" routerLinkActive="active-link"> User </a>
+<a [routerLink]="['/user/jane/role/admin']" routerLinkActive="active-link"> Role </a>
 ```
 
 When the user visits `/user/jane/role/admin`, both links would have the `active-link` class.
@@ -275,13 +276,15 @@ When the user visits `/user/jane/role/admin`, both links would have the `active-
 If you only want to apply the class on an exact match, you need to provide the `routerLinkActiveOptions` directive with a configuration object that contains the value `exact: true`.
 
 ```angular-html
-<a [routerLink]="['/user/jane']"
+<a
+  [routerLink]="['/user/jane']"
   routerLinkActive="active-link"
   [routerLinkActiveOptions]="{exact: true}"
 >
   User
 </a>
-<a [routerLink]="['/user/jane/role/admin']"
+<a
+  [routerLink]="['/user/jane/role/admin']"
   routerLinkActive="active-link"
   [routerLinkActiveOptions]="{exact: true}"
 >
@@ -323,3 +326,30 @@ The RouterLinkActive directive can also be applied to an ancestor element in ord
 ```
 
 For more information, check out the [API docs for RouterLinkActive](/api/router/RouterLinkActive).
+
+## Check if a URL is active
+
+The `isActive` function returns a computed signal that tracks whether a given URL is currently active in the router. The signal automatically updates as the router state changes.
+
+```angular-ts
+import {Component, inject} from '@angular/core';
+import {isActive, Router} from '@angular/router';
+
+@Component({
+  template: `
+    <div [class.active]="isSettingsActive()">
+      <h2>Settings</h2>
+    </div>
+  `,
+})
+export class Panel {
+  private router = inject(Router);
+
+  isSettingsActive = isActive('/settings', this.router, {
+    paths: 'subset',
+    queryParams: 'ignored',
+    fragment: 'ignored',
+    matrixParams: 'ignored',
+  });
+}
+```
diff --git a/adev-ja/src/content/guide/routing/read-route-state.md b/adev-ja/src/content/guide/routing/read-route-state.md
index e436570ad..be4580385 100644
--- a/adev-ja/src/content/guide/routing/read-route-state.md
+++ b/adev-ja/src/content/guide/routing/read-route-state.md
@@ -7,13 +7,13 @@ Angularルーターを使用すると、ルートに関連付けられた情報
 `ActivatedRoute`は、現在のルートに関連付けられたすべての情報を提供する`@angular/router`からのサービスです。
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import {Component} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-product',
 })
-export class ProductComponent {
+export class Product {
   private activatedRoute = inject(ActivatedRoute);
 
   constructor() {
@@ -42,10 +42,12 @@ export class ProductComponent {
 ルートスナップショットにアクセスする方法の例を次に示します。
 
 ```angular-ts
-import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
+import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router';
 
-@Component({ ... })
-export class UserProfileComponent {
+@Component({
+  /*...*/
+})
+export class UserProfile {
   readonly userId: string;
   private route = inject(ActivatedRoute);
 
@@ -58,11 +60,11 @@ export class UserProfileComponent {
     // 複数のルート要素にアクセス
     const snapshot = this.route.snapshot;
     console.log({
-      url: snapshot.url,           // https://www.angular.dev
+      url: snapshot.url, // https://www.angular.dev
       // ルートパラメーターオブジェクト: {id: '123'}
       params: snapshot.params,
       // クエリパラメーターオブジェクト: {role: 'admin', status: 'active'}
-      queryParams: snapshot.queryParams,  // クエリパラメーター
+      queryParams: snapshot.queryParams, // クエリパラメーター
     });
   }
 }
@@ -81,25 +83,23 @@ export class UserProfileComponent {
 パラメーター名の前にコロン (`:`) を付けることで、[ルートパラメーターを定義](/guide/routing/define-routes#define-url-paths-with-route-parameters)できます。
 
 ```angular-ts
-import { Routes } from '@angular/router';
-import { ProductComponent } from './product/product.component';
+import {Routes} from '@angular/router';
+import {Product} from './product';
 
-const routes: Routes = [
-  { path: 'product/:id', component: ProductComponent }
-];
+const routes: Routes = [{path: 'product/:id', component: Product}];
 ```
 
 `route.params`を購読することでパラメーターにアクセスできます。
 
 ```angular-ts
-import { Component, inject, signal } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import {Component, inject, signal} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-product-detail',
   template: `<h1>Product Details: {{ productId() }}</h1>`,
 })
-export class ProductDetailComponent {
+export class ProductDetail {
   productId = signal('');
   private activatedRoute = inject(ActivatedRoute);
 
@@ -120,7 +120,7 @@ export class ProductDetailComponent {
 // 単一パラメーターの構造
 // /products?category=electronics
 router.navigate(['/products'], {
-  queryParams: { category: 'electronics' }
+  queryParams: {category: 'electronics'},
 });
 
 // 複数パラメーター
@@ -129,17 +129,17 @@ router.navigate(['/products'], {
   queryParams: {
     category: 'electronics',
     sort: 'price',
-    page: 1
-  }
+    page: 1,
+  },
 });
 ```
 
 `route.queryParams`でクエリパラメーターにアクセスできます。
 
-次に、製品リストの表示方法に影響を与えるクエリパラメーターを更新する`ProductListComponent`の例を示します。
+次に、製品リストの表示方法に影響を与えるクエリパラメーターを更新する`ProductList`の例を示します。
 
 ```angular-ts
-import { ActivatedRoute, Router } from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-product-list',
@@ -151,15 +151,15 @@ import { ActivatedRoute, Router } from '@angular/router';
       </select>
       <!-- Products list -->
     </div>
-  `
+  `,
 })
-export class ProductListComponent implements OnInit {
+export class ProductList {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
 
   constructor() {
     // クエリパラメーターにリアクティブにアクセス
-    this.route.queryParams.subscribe(params => {
+    this.route.queryParams.subscribe((params) => {
       const sort = params['sort'] || 'price';
       const page = Number(params['page']) || 1;
       this.loadProducts(sort, page);
@@ -170,8 +170,8 @@ export class ProductListComponent implements OnInit {
     const sort = (event.target as HTMLSelectElement).value;
     // 新しいクエリパラメーターでURLを更新
     this.router.navigate([], {
-      queryParams: { sort },
-      queryParamsHandling: 'merge' // 他のクエリパラメーターを保持
+      queryParams: {sort},
+      queryParamsHandling: 'merge', // 他のクエリパラメーターを保持
     });
   }
 }
@@ -224,16 +224,21 @@ NOTE: `ActivatedRoute`を使用する代わりに、`withComponentInputBinding`
 
 ```angular-html
 <nav>
-  <a class="button"
-     routerLink="/about"
-     routerLinkActive="active-button"
-     ariaCurrentWhenActive="page">
+  <a
+    class="button"
+    routerLink="/about"
+    routerLinkActive="active-button"
+    ariaCurrentWhenActive="page"
+  >
     About
-  </a> |
-  <a class="button"
-     routerLink="/settings"
-     routerLinkActive="active-button"
-     ariaCurrentWhenActive="page">
+  </a>
+  |
+  <a
+    class="button"
+    routerLink="/settings"
+    routerLinkActive="active-button"
+    ariaCurrentWhenActive="page"
+  >
     Settings
   </a>
 </nav>
@@ -260,12 +265,8 @@ ariaに異なる値を定義したい場合は、`ariaCurrentWhenActive`ディ
 デフォルトでは、`RouterLinkActive`はルート内のすべての祖先を一致と見なします。
 
 ```angular-html
-<a [routerLink]="['/user/jane']" routerLinkActive="active-link">
-  User
-</a>
-<a [routerLink]="['/user/jane/role/admin']" routerLinkActive="active-link">
-  Role
-</a>
+<a [routerLink]="['/user/jane']" routerLinkActive="active-link"> User </a>
+<a [routerLink]="['/user/jane/role/admin']" routerLinkActive="active-link"> Role </a>
 ```
 
 ユーザーが`/user/jane/role/admin`にアクセスすると、両方のリンクに`active-link`クラスが適用されます。
@@ -275,13 +276,15 @@ ariaに異なる値を定義したい場合は、`ariaCurrentWhenActive`ディ
 厳密な一致の場合にのみクラスを適用したい場合は、`routerLinkActiveOptions`ディレクティブに`exact: true`という値を含む設定オブジェクトを提供する必要があります。
 
 ```angular-html
-<a [routerLink]="['/user/jane']"
+<a
+  [routerLink]="['/user/jane']"
   routerLinkActive="active-link"
   [routerLinkActiveOptions]="{exact: true}"
 >
   User
 </a>
-<a [routerLink]="['/user/jane/role/admin']"
+<a
+  [routerLink]="['/user/jane/role/admin']"
   routerLinkActive="active-link"
   [routerLinkActiveOptions]="{exact: true}"
 >
@@ -323,3 +326,30 @@ ariaに異なる値を定義したい場合は、`ariaCurrentWhenActive`ディ
 ```
 
 詳細については、[RouterLinkActiveのAPIドキュメント](/api/router/RouterLinkActive)を参照してください。
+
+## URLがアクティブかどうかを確認する {#check-if-a-url-is-active}
+
+`isActive`関数は、指定されたURLがルーターで現在アクティブかどうかを追跡するcomputedシグナルを返します。シグナルはルーターの状態が変化すると自動的に更新されます。
+
+```angular-ts
+import {Component, inject} from '@angular/core';
+import {isActive, Router} from '@angular/router';
+
+@Component({
+  template: `
+    <div [class.active]="isSettingsActive()">
+      <h2>Settings</h2>
+    </div>
+  `,
+})
+export class Panel {
+  private router = inject(Router);
+
+  isSettingsActive = isActive('/settings', this.router, {
+    paths: 'subset',
+    queryParams: 'ignored',
+    fragment: 'ignored',
+    matrixParams: 'ignored',
+  });
+}
+```
diff --git a/adev-ja/src/content/guide/routing/route-guards.en.md b/adev-ja/src/content/guide/routing/route-guards.en.md
index a08c5e6be..43dc343c9 100644
--- a/adev-ja/src/content/guide/routing/route-guards.en.md
+++ b/adev-ja/src/content/guide/routing/route-guards.en.md
@@ -101,8 +101,8 @@ It has access to the following default arguments:
 It can return the [standard return guard types](#route-guard-return-types).
 
 ```ts
-export const unsavedChangesGuard: CanDeactivateFn<FormComponent> = (
-  component: FormComponent,
+export const unsavedChangesGuard: CanDeactivateFn<Form> = (
+  component: Form,
   currentRoute: ActivatedRouteSnapshot,
   currentState: RouterStateSnapshot,
   nextState: RouterStateSnapshot,
@@ -172,21 +172,21 @@ const routes: Routes = [
   // Basic CanActivate - requires authentication
   {
     path: 'dashboard',
-    component: DashboardComponent,
+    component: Dashboard,
     canActivate: [authGuard],
   },
 
   // Multiple CanActivate guards - requires authentication AND admin role
   {
     path: 'admin',
-    component: AdminComponent,
+    component: Admin,
     canActivate: [authGuard, adminGuard],
   },
 
   // CanActivate + CanDeactivate - protected route with unsaved changes check
   {
     path: 'profile',
-    component: ProfileComponent,
+    component: Profile,
     canActivate: [authGuard],
     canDeactivate: [canDeactivateGuard],
   },
@@ -197,23 +197,23 @@ const routes: Routes = [
     canActivateChild: [authGuard],
     children: [
       // /users/list - PROTECTED
-      {path: 'list', component: UserListComponent},
+      {path: 'list', component: UserList},
       // /users/detail/:id - PROTECTED
-      {path: 'detail/:id', component: UserDetailComponent},
+      {path: 'detail/:id', component: UserDetail},
     ],
   },
 
   // CanMatch - conditionally matches route based on feature flag
   {
     path: 'beta-feature',
-    component: BetaFeatureComponent,
+    component: BetaFeature,
     canMatch: [featureToggleGuard],
   },
 
   // Fallback route if beta feature is disabled
   {
     path: 'beta-feature',
-    component: ComingSoonComponent,
+    component: ComingSoon,
   },
 ];
 ```
diff --git a/adev-ja/src/content/guide/routing/route-guards.md b/adev-ja/src/content/guide/routing/route-guards.md
index b42818a65..6ddfb09cb 100644
--- a/adev-ja/src/content/guide/routing/route-guards.md
+++ b/adev-ja/src/content/guide/routing/route-guards.md
@@ -101,8 +101,8 @@ export const adminChildGuard: CanActivateChildFn = (
 [標準のガード戻り値の型](#route-guard-return-types)を返すことができます。
 
 ```ts
-export const unsavedChangesGuard: CanDeactivateFn<FormComponent> = (
-  component: FormComponent,
+export const unsavedChangesGuard: CanDeactivateFn<Form> = (
+  component: Form,
   currentRoute: ActivatedRouteSnapshot,
   currentState: RouterStateSnapshot,
   nextState: RouterStateSnapshot,
@@ -172,21 +172,21 @@ const routes: Routes = [
   // Basic CanActivate - 認証が必要
   {
     path: 'dashboard',
-    component: DashboardComponent,
+    component: Dashboard,
     canActivate: [authGuard],
   },
 
   // 複数のCanActivateガード - 認証と管理者ロールが必要
   {
     path: 'admin',
-    component: AdminComponent,
+    component: Admin,
     canActivate: [authGuard, adminGuard],
   },
 
   // CanActivate + CanDeactivate - 未保存の変更チェック付き保護ルート
   {
     path: 'profile',
-    component: ProfileComponent,
+    component: Profile,
     canActivate: [authGuard],
     canDeactivate: [canDeactivateGuard],
   },
@@ -197,23 +197,23 @@ const routes: Routes = [
     canActivateChild: [authGuard],
     children: [
       // /users/list - 保護されている
-      {path: 'list', component: UserListComponent},
+      {path: 'list', component: UserList},
       // /users/detail/:id - 保護されている
-      {path: 'detail/:id', component: UserDetailComponent},
+      {path: 'detail/:id', component: UserDetail},
     ],
   },
 
   // CanMatch - 機能フラグに基づいてルートを条件付きでマッチング
   {
     path: 'beta-feature',
-    component: BetaFeatureComponent,
+    component: BetaFeature,
     canMatch: [featureToggleGuard],
   },
 
   // ベータ機能が無効な場合のフォールバックルート
   {
     path: 'beta-feature',
-    component: ComingSoonComponent,
+    component: ComingSoon,
   },
 ];
 ```
diff --git a/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md b/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md
index b46b4ecb1..cec174d98 100644
--- a/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md
+++ b/adev-ja/src/content/guide/routing/show-routes-with-outlets.en.md
@@ -2,9 +2,10 @@
 
 The `RouterOutlet` directive is a placeholder that marks the location where the router should render the component for the current URL.
 
-```angular-html
+```html
 <app-header />
-<router-outlet />  <!-- Angular inserts your route content here -->
+<!-- Angular inserts your route content here -->
+<router-outlet />
 <app-footer />
 ```
 
@@ -15,28 +16,28 @@ import {RouterOutlet} from '@angular/router';
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  templateUrl: './app.html',
+  styleUrl: './app.css',
 })
-export class AppComponent {}
+export class App {}
 ```
 
 In this example, if an application has the following routes defined:
 
 ```ts
 import {Routes} from '@angular/router';
-import {HomeComponent} from './home/home.component';
-import {ProductsComponent} from './products/products.component';
+import {Home} from './home';
+import {Products} from './products';
 
 const routes: Routes = [
   {
     path: '',
-    component: HomeComponent,
+    component: Home,
     title: 'Home Page',
   },
   {
     path: 'products',
-    component: ProductsComponent,
+    component: Products,
     title: 'Our Products',
   },
 ];
@@ -99,16 +100,16 @@ A child route is like any other route, in that it needs both a `path` and a `com
 ```ts
 const routes: Routes = [
   {
-    path: 'settings-component',
-    component: SettingsComponent, // this is the component with the <router-outlet> in the template
+    path: 'settings',
+    component: Settings, // this is the component with the <router-outlet> in the template
     children: [
       {
         path: 'profile', // child route path
-        component: ProfileComponent, // child route component that the router renders
+        component: Profile, // child route component that the router renders
       },
       {
         path: 'security',
-        component: SecurityComponent, // another child route component that the router renders
+        component: Security, // another child route component that the router renders
       },
     ],
   },
@@ -124,8 +125,8 @@ Pages may have multiple outlets— you can assign a name to each outlet to speci
 ```angular-html
 <app-header />
 <router-outlet />
-<router-outlet name='read-more' />
-<router-outlet name='additional-actions' />
+<router-outlet name="read-more" />
+<router-outlet name="additional-actions" />
 <app-footer />
 ```
 
@@ -156,10 +157,10 @@ You can add event listeners with the standard event binding syntax:
 
 ```angular-html
 <router-outlet
-  (activate)='onActivate($event)'
-  (deactivate)='onDeactivate($event)'
-  (attach)='onAttach($event)'
-  (detach)='onDetach($event)'
+  (activate)="onActivate($event)"
+  (deactivate)="onDeactivate($event)"
+  (attach)="onAttach($event)"
+  (detach)="onDetach($event)"
 />
 ```
 
@@ -170,36 +171,36 @@ Check out the [API docs for RouterOutlet](/api/router/RouterOutlet?tab=api) if y
 Passing contextual data to routed components often requires global state or complicated route configurations. To make this easier, each `RouterOutlet` supports a `routerOutletData` input. Routed components and their children can read this data as a signal using the `ROUTER_OUTLET_DATA` injection token, allowing outlet-specific configuration without modifying route definitions.
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
   imports: [RouterOutlet],
   template: `
     <h2>Dashboard</h2>
-    <router-outlet [routerOutletData]="{ layout: 'sidebar' }" />
+    <router-outlet [routerOutletData]="{layout: 'sidebar'}" />
   `,
 })
-export class DashboardComponent {}
+export class Dashboard {}
 ```
 
 The routed component can inject the provided outlet data using `ROUTER_OUTLET_DATA`:
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
-import { ROUTER_OUTLET_DATA } from '@angular/router';
+import {Component, inject} from '@angular/core';
+import {ROUTER_OUTLET_DATA} from '@angular/router';
 
 @Component({
   selector: 'app-stats',
   template: `<p>Stats view (layout: {{ outletData().layout }})</p>`,
 })
-export class StatsComponent {
-  outletData = inject(ROUTER_OUTLET_DATA) as Signal<{ layout: string }>;
+export class Stats {
+  outletData = inject(ROUTER_OUTLET_DATA) as Signal<{layout: string}>;
 }
 ```
 
-When Angular activates the `StatsComponent` in that outlet, it receives `{ layout: 'sidebar' }` as injected data.
+When Angular activates the `Stats` in that outlet, it receives `{ layout: 'sidebar' }` as injected data.
 
 NOTE: When the `routerOutletData` input is unset, the injected value is null by default.
 
diff --git a/adev-ja/src/content/guide/routing/show-routes-with-outlets.md b/adev-ja/src/content/guide/routing/show-routes-with-outlets.md
index 0ccbab5f4..9f128fce0 100644
--- a/adev-ja/src/content/guide/routing/show-routes-with-outlets.md
+++ b/adev-ja/src/content/guide/routing/show-routes-with-outlets.md
@@ -2,9 +2,10 @@
 
 `RouterOutlet`ディレクティブは、ルーターが現在のURLに対応するコンポーネントをレンダリングする場所を示すプレースホルダーです。
 
-```angular-html
+```html
 <app-header />
-<router-outlet />  <!-- Angularはここにルートコンテンツを挿入します -->
+<!-- Angularはここにルートコンテンツを挿入します -->
+<router-outlet />
 <app-footer />
 ```
 
@@ -15,28 +16,28 @@ import {RouterOutlet} from '@angular/router';
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
+  templateUrl: './app.html',
+  styleUrl: './app.css',
 })
-export class AppComponent {}
+export class App {}
 ```
 
 この例では、アプリケーションに次のルートが定義されている場合:
 
 ```ts
 import {Routes} from '@angular/router';
-import {HomeComponent} from './home/home.component';
-import {ProductsComponent} from './products/products.component';
+import {Home} from './home';
+import {Products} from './products';
 
 const routes: Routes = [
   {
     path: '',
-    component: HomeComponent,
+    component: Home,
     title: 'Home Page',
   },
   {
     path: 'products',
-    component: ProductsComponent,
+    component: Products,
     title: 'Our Products',
   },
 ];
@@ -99,16 +100,16 @@ const routes: Routes = [
 ```ts
 const routes: Routes = [
   {
-    path: 'settings-component',
-    component: SettingsComponent, // これはテンプレートに<router-outlet>を持つコンポーネントです
+    path: 'settings',
+    component: Settings, // これはテンプレートに<router-outlet>を持つコンポーネントです
     children: [
       {
         path: 'profile', // 子ルートのパス
-        component: ProfileComponent, // ルーターがレンダリングする子ルートコンポーネント
+        component: Profile, // ルーターがレンダリングする子ルートコンポーネント
       },
       {
         path: 'security',
-        component: SecurityComponent, // ルーターがレンダリングする別の子ルートコンポーネント
+        component: Security, // ルーターがレンダリングする別の子ルートコンポーネント
       },
     ],
   },
@@ -124,8 +125,8 @@ const routes: Routes = [
 ```angular-html
 <app-header />
 <router-outlet />
-<router-outlet name='read-more' />
-<router-outlet name='additional-actions' />
+<router-outlet name="read-more" />
+<router-outlet name="additional-actions" />
 <app-footer />
 ```
 
@@ -156,10 +157,10 @@ Angularは、各ルートで定義された`outlet`プロパティにアウト
 
 ```angular-html
 <router-outlet
-  (activate)='onActivate($event)'
-  (deactivate)='onDeactivate($event)'
-  (attach)='onAttach($event)'
-  (detach)='onDetach($event)'
+  (activate)="onActivate($event)"
+  (deactivate)="onDeactivate($event)"
+  (attach)="onAttach($event)"
+  (detach)="onDetach($event)"
 />
 ```
 
@@ -178,10 +179,10 @@ import {RouterOutlet} from '@angular/router';
   imports: [RouterOutlet],
   template: `
     <h2>Dashboard</h2>
-    <router-outlet [routerOutletData]="{ layout: 'sidebar' }" />
+    <router-outlet [routerOutletData]="{layout: 'sidebar'}" />
   `,
 })
-export class DashboardComponent {}
+export class Dashboard {}
 ```
 
 ルーティングされたコンポーネントは、`ROUTER_OUTLET_DATA`を使用して提供されたアウトレットデータをインジェクトできます。
@@ -194,12 +195,12 @@ import {ROUTER_OUTLET_DATA} from '@angular/router';
   selector: 'app-stats',
   template: `<p>Stats view (layout: {{ outletData().layout }})</p>`,
 })
-export class StatsComponent {
-  outletData = inject(ROUTER_OUTLET_DATA) as Signal<{ layout: string }>;
+export class Stats {
+  outletData = inject(ROUTER_OUTLET_DATA) as Signal<{layout: string}>;
 }
 ```
 
-Angularがそのアウトレット内で`StatsComponent`をアクティブ化すると、インジェクトされたデータとして`{ layout: 'sidebar' }`を受け取ります。
+Angularがそのアウトレット内で`Stats`をアクティブ化すると、インジェクトされたデータとして`{ layout: 'sidebar' }`を受け取ります。
 
 NOTE: `routerOutletData`入力が設定されていない場合、インジェクトされる値はデフォルトでnullです。
 
diff --git a/adev-ja/src/content/guide/routing/testing.en.md b/adev-ja/src/content/guide/routing/testing.en.md
index 8684a7dd1..ac9ba9776 100644
--- a/adev-ja/src/content/guide/routing/testing.en.md
+++ b/adev-ja/src/content/guide/routing/testing.en.md
@@ -18,8 +18,7 @@ Components often rely on route parameters from the URL to fetch data, like a use
 
 The following example shows how to test a `UserProfile` component that displays a user ID from the route.
 
-```ts
-// user-profile.component.spec.ts
+```ts { header: 'user-profile.spec.ts'}
 import {TestBed} from '@angular/core/testing';
 import {Router} from '@angular/router';
 import {RouterTestingHarness} from '@angular/router/testing';
@@ -41,13 +40,12 @@ describe('UserProfile', () => {
 });
 ```
 
-```angular-ts
-// user-profile.component.ts
-import { Component, inject } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+```angular-ts {header: 'user-profile.ts'}
+import {Component, inject} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
-  template: '<h1>User Profile: {{userId}}</h1>'
+  template: '<h1>User Profile: {{userId}}</h1>',
 })
 export class UserProfile {
   private route = inject(ActivatedRoute);
@@ -61,8 +59,8 @@ Route guards control access to routes based on conditions like authentication or
 
 The following example tests an `authGuard` that allows navigation for authenticated users and redirects unauthenticated users to a login page.
 
-```ts
-// auth.guard.spec.ts
+```ts {header: 'auth.guard.spec.ts'}
+import {vi, type Mocked} from 'vitest';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideRouter, Router} from '@angular/router';
 import {authGuard} from './auth.guard';
@@ -71,25 +69,24 @@ import {Component} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 @Component({template: '<h1>Protected Page</h1>'})
-class ProtectedComponent {}
+class Protected {}
 
 @Component({template: '<h1>Login Page</h1>'})
-class LoginComponent {}
+class Login {}
 
 describe('authGuard', () => {
-  let authStore: jasmine.SpyObj<AuthStore>;
+  let authStore: Mocked<AuthStore>;
   let harness: RouterTestingHarness;
 
   async function setup(isAuthenticated: boolean) {
-    authStore = jasmine.createSpyObj('AuthStore', ['isAuthenticated']);
-    authStore.isAuthenticated.and.returnValue(isAuthenticated);
+    authStore = {isAuthenticated: vi.fn().mockReturnValue(isAuthenticated)} as Mocked<AuthStore>;
 
     TestBed.configureTestingModule({
       providers: [
         {provide: AuthStore, useValue: authStore},
         provideRouter([
-          {path: 'protected', component: ProtectedComponent, canActivate: [authGuard]},
-          {path: 'login', component: LoginComponent},
+          {path: 'protected', component: Protected, canActivate: [authGuard]},
+          {path: 'login', component: Login},
         ]),
       ],
     });
@@ -99,22 +96,21 @@ describe('authGuard', () => {
 
   it('allows navigation when user is authenticated', async () => {
     await setup(true);
-    await harness.navigateByUrl('/protected', ProtectedComponent);
+    await harness.navigateByUrl('/protected', Protected);
     // The protected component should render when authenticated
     expect(harness.routeNativeElement?.textContent).toContain('Protected Page');
   });
 
   it('redirects to login when user is not authenticated', async () => {
     await setup(false);
-    await harness.navigateByUrl('/protected', LoginComponent);
+    await harness.navigateByUrl('/protected', Login);
     // The login component should render after redirect
     expect(harness.routeNativeElement?.textContent).toContain('Login Page');
   });
 });
 ```
 
-```ts
-// auth.guard.ts
+```ts {header: 'auth.guard.ts'}
 import {inject} from '@angular/core';
 import {CanActivateFn, Router} from '@angular/router';
 import {AuthStore} from './auth-store';
@@ -132,8 +128,7 @@ Router outlet tests are more of an integration test since you're essentially tes
 
 Here's an example of how to set up a test that verifies different components are displayed for different routes:
 
-```ts
-// app.component.spec.ts
+```ts {header: 'app.spec.ts'}
 import {TestBed} from '@angular/core/testing';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideRouter} from '@angular/router';
@@ -181,10 +176,9 @@ describe('App Router Outlet', () => {
 });
 ```
 
-```angular-ts
-// app.component.ts
-import { Component } from '@angular/core';
-import { RouterOutlet, RouterLink } from '@angular/router';
+```angular-ts {header: 'app.ts'}
+import {Component} from '@angular/core';
+import {RouterOutlet, RouterLink} from '@angular/router';
 
 @Component({
   imports: [RouterOutlet, RouterLink],
@@ -194,7 +188,7 @@ import { RouterOutlet, RouterLink } from '@angular/router';
       <a routerLink="/about">About</a>
     </nav>
     <router-outlet />
-  `
+  `,
 })
 export class App {}
 ```
@@ -211,8 +205,7 @@ You need to verify that:
 
 Here's an example of testing a parent-child route structure:
 
-```ts
-// nested-routes.spec.ts
+```ts {header: 'nested-routes.spec.ts'}
 import {TestBed} from '@angular/core/testing';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideRouter} from '@angular/router';
@@ -247,22 +240,21 @@ describe('Nested Routes', () => {
 });
 ```
 
-```angular-ts
-// nested-components.ts
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+```angular-ts {header: 'nested.ts'}
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
 
 @Component({
   imports: [RouterOutlet],
   template: `
     <h1>Parent Component</h1>
     <router-outlet />
-  `
+  `,
 })
 export class Parent {}
 
 @Component({
-  template: '<h2>Child Component</h2>'
+  template: '<h2>Child Component</h2>',
 })
 export class Child {}
 ```
@@ -275,8 +267,7 @@ Unlike route parameters that are part of the route definition, query parameters
 
 Here's an example of how to test query parameters and fragments:
 
-```ts
-// search.component.spec.ts
+```ts {header: 'search.spec.ts'}
 import {TestBed} from '@angular/core/testing';
 import {Router, provideRouter} from '@angular/router';
 import {RouterTestingHarness} from '@angular/router/testing';
@@ -303,18 +294,17 @@ describe('Search', () => {
 });
 ```
 
-```angular-ts
-// search.component.ts
-import { Component, inject, computed } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { toSignal } from '@angular/core/rxjs-interop';
+```angular-ts {header: 'search.ts'}
+import {Component, inject, computed} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {toSignal} from '@angular/core/rxjs-interop';
 
 @Component({
-  template: '<div>Search term: {{searchTerm()}}</div>'
+  template: '<div>Search term: {{searchTerm()}}</div>',
 })
 export class Search {
   private route = inject(ActivatedRoute);
-  private queryParams = toSignal(this.route.queryParams, { initialValue: {} });
+  private queryParams = toSignal(this.route.queryParams, {initialValue: {}});
 
   searchTerm = computed(() => this.queryParams()['q'] || null);
 }
diff --git a/adev-ja/src/content/guide/routing/testing.md b/adev-ja/src/content/guide/routing/testing.md
index b3977de74..b46e6db00 100644
--- a/adev-ja/src/content/guide/routing/testing.md
+++ b/adev-ja/src/content/guide/routing/testing.md
@@ -18,8 +18,7 @@
 
 以下の例は、ルートからユーザーIDを表示する`UserProfile`コンポーネントをテストする方法を示しています。
 
-```ts
-// user-profile.component.spec.ts
+```ts { header: 'user-profile.spec.ts'}
 import {TestBed} from '@angular/core/testing';
 import {Router} from '@angular/router';
 import {RouterTestingHarness} from '@angular/router/testing';
@@ -41,13 +40,12 @@ describe('UserProfile', () => {
 });
 ```
 
-```angular-ts
-// user-profile.component.ts
-import { Component, inject } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+```angular-ts {header: 'user-profile.ts'}
+import {Component, inject} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
-  template: '<h1>User Profile: {{userId}}</h1>'
+  template: '<h1>User Profile: {{userId}}</h1>',
 })
 export class UserProfile {
   private route = inject(ActivatedRoute);
@@ -61,8 +59,8 @@ export class UserProfile {
 
 以下の例は、認証されたユーザーのナビゲーションを許可し、認証されていないユーザーをログインページにリダイレクトする`authGuard`をテストします。
 
-```ts
-// auth.guard.spec.ts
+```ts {header: 'auth.guard.spec.ts'}
+import {vi, type Mocked} from 'vitest';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideRouter, Router} from '@angular/router';
 import {authGuard} from './auth.guard';
@@ -71,25 +69,24 @@ import {Component} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 
 @Component({template: '<h1>Protected Page</h1>'})
-class ProtectedComponent {}
+class Protected {}
 
 @Component({template: '<h1>Login Page</h1>'})
-class LoginComponent {}
+class Login {}
 
 describe('authGuard', () => {
-  let authStore: jasmine.SpyObj<AuthStore>;
+  let authStore: Mocked<AuthStore>;
   let harness: RouterTestingHarness;
 
   async function setup(isAuthenticated: boolean) {
-    authStore = jasmine.createSpyObj('AuthStore', ['isAuthenticated']);
-    authStore.isAuthenticated.and.returnValue(isAuthenticated);
+    authStore = {isAuthenticated: vi.fn().mockReturnValue(isAuthenticated)} as Mocked<AuthStore>;
 
     TestBed.configureTestingModule({
       providers: [
         {provide: AuthStore, useValue: authStore},
         provideRouter([
-          {path: 'protected', component: ProtectedComponent, canActivate: [authGuard]},
-          {path: 'login', component: LoginComponent},
+          {path: 'protected', component: Protected, canActivate: [authGuard]},
+          {path: 'login', component: Login},
         ]),
       ],
     });
@@ -99,22 +96,21 @@ describe('authGuard', () => {
 
   it('allows navigation when user is authenticated', async () => {
     await setup(true);
-    await harness.navigateByUrl('/protected', ProtectedComponent);
+    await harness.navigateByUrl('/protected', Protected);
     // The protected component should render when authenticated
     expect(harness.routeNativeElement?.textContent).toContain('Protected Page');
   });
 
   it('redirects to login when user is not authenticated', async () => {
     await setup(false);
-    await harness.navigateByUrl('/protected', LoginComponent);
+    await harness.navigateByUrl('/protected', Login);
     // The login component should render after redirect
     expect(harness.routeNativeElement?.textContent).toContain('Login Page');
   });
 });
 ```
 
-```ts
-// auth.guard.ts
+```ts {header: 'auth.guard.ts'}
 import {inject} from '@angular/core';
 import {CanActivateFn, Router} from '@angular/router';
 import {AuthStore} from './auth-store';
@@ -132,8 +128,7 @@ export const authGuard: CanActivateFn = () => {
 
 異なるルートに対して異なるコンポーネントが表示されることを検証するテストを設定する方法の例を以下に示します。
 
-```ts
-// app.component.spec.ts
+```ts {header: 'app.spec.ts'}
 import {TestBed} from '@angular/core/testing';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideRouter} from '@angular/router';
@@ -181,10 +176,9 @@ describe('App Router Outlet', () => {
 });
 ```
 
-```angular-ts
-// app.component.ts
-import { Component } from '@angular/core';
-import { RouterOutlet, RouterLink } from '@angular/router';
+```angular-ts {header: 'app.ts'}
+import {Component} from '@angular/core';
+import {RouterOutlet, RouterLink} from '@angular/router';
 
 @Component({
   imports: [RouterOutlet, RouterLink],
@@ -194,7 +188,7 @@ import { RouterOutlet, RouterLink } from '@angular/router';
       <a routerLink="/about">About</a>
     </nav>
     <router-outlet />
-  `
+  `,
 })
 export class App {}
 ```
@@ -211,8 +205,7 @@ export class App {}
 
 親子のルート構造をテストする例を以下に示します。
 
-```ts
-// nested-routes.spec.ts
+```ts {header: 'nested-routes.spec.ts'}
 import {TestBed} from '@angular/core/testing';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideRouter} from '@angular/router';
@@ -247,22 +240,21 @@ describe('Nested Routes', () => {
 });
 ```
 
-```angular-ts
-// nested-components.ts
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+```angular-ts {header: 'nested.ts'}
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
 
 @Component({
   imports: [RouterOutlet],
   template: `
     <h1>Parent Component</h1>
     <router-outlet />
-  `
+  `,
 })
 export class Parent {}
 
 @Component({
-  template: '<h2>Child Component</h2>'
+  template: '<h2>Child Component</h2>',
 })
 export class Child {}
 ```
@@ -275,8 +267,7 @@ export class Child {}
 
 クエリパラメーターとフラグメントをテストする方法の例を以下に示します。
 
-```ts
-// search.component.spec.ts
+```ts {header: 'search.spec.ts'}
 import {TestBed} from '@angular/core/testing';
 import {Router, provideRouter} from '@angular/router';
 import {RouterTestingHarness} from '@angular/router/testing';
@@ -303,18 +294,17 @@ describe('Search', () => {
 });
 ```
 
-```angular-ts
-// search.component.ts
-import { Component, inject, computed } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { toSignal } from '@angular/core/rxjs-interop';
+```angular-ts {header: 'search.ts'}
+import {Component, inject, computed} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {toSignal} from '@angular/core/rxjs-interop';
 
 @Component({
-  template: '<div>Search term: {{searchTerm()}}</div>'
+  template: '<div>Search term: {{searchTerm()}}</div>',
 })
 export class Search {
   private route = inject(ActivatedRoute);
-  private queryParams = toSignal(this.route.queryParams, { initialValue: {} });
+  private queryParams = toSignal(this.route.queryParams, {initialValue: {}});
 
   searchTerm = computed(() => this.queryParams()['q'] || null);
 }

From de3c3aa197a89557a432f6698f7494e95e01b1bc Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 09:23:08 +0900
Subject: [PATCH 26/55] fix(docs): migrate templates changes

- binding, control-flow, event-listeners, expression-syntax
- ng-content, ng-template, pipes, two-way-binding, variables
- Formatting updates (import spacing, trailing commas)
- ng-template: Add extensive new sections on deferred loading
---
 .../src/content/guide/templates/binding.en.md | 17 ++--
 .../src/content/guide/templates/binding.md    | 17 ++--
 .../guide/templates/control-flow.en.md        | 28 +++---
 .../content/guide/templates/control-flow.md   | 28 +++---
 .../guide/templates/event-listeners.en.md     | 30 +++++--
 .../guide/templates/event-listeners.md        | 30 +++++--
 .../guide/templates/expression-syntax.en.md   | 27 +++---
 .../guide/templates/expression-syntax.md      | 27 +++---
 .../content/guide/templates/ng-content.en.md  | 22 ++---
 .../src/content/guide/templates/ng-content.md | 22 ++---
 .../content/guide/templates/ng-template.en.md | 87 ++++++++++++++++---
 .../content/guide/templates/ng-template.md    | 87 ++++++++++++++++---
 .../src/content/guide/templates/pipes.en.md   | 43 ++++-----
 adev-ja/src/content/guide/templates/pipes.md  | 43 ++++-----
 .../guide/templates/two-way-binding.en.md     | 52 +++++------
 .../guide/templates/two-way-binding.md        | 52 +++++------
 .../content/guide/templates/variables.en.md   | 42 +++++----
 .../src/content/guide/templates/variables.md  | 42 +++++----
 18 files changed, 458 insertions(+), 238 deletions(-)

diff --git a/adev-ja/src/content/guide/templates/binding.en.md b/adev-ja/src/content/guide/templates/binding.en.md
index d3e00f242..27cfc658d 100644
--- a/adev-ja/src/content/guide/templates/binding.en.md
+++ b/adev-ja/src/content/guide/templates/binding.en.md
@@ -13,7 +13,7 @@ You can bind dynamic text in templates with double curly braces, which tells Ang
   `,
   ...
 })
-export class AppComponent {
+export class App {
   theme = 'dark';
 }
 ```
@@ -33,11 +33,11 @@ Bindings that change over time should read values from [signals](/guide/signals)
     <!-- Does not necessarily update when `welcomeMessage` changes. -->
     <p>{{ welcomeMessage }}</p>
 
-    <p>Your color preference is {{ theme() }}.</p> <!-- Always updates when the value of the `name` signal changes. -->
+    <p>Your color preference is {{ theme() }}.</p> <!-- Always updates when the value of the `theme` signal changes. -->
   `
   ...
 })
-export class AppComponent {
+export class App {
   welcomeMessage = "Welcome, enjoy this app that we built for you";
   theme = signal('dark');
 }
@@ -88,13 +88,14 @@ You can bind to directive properties as well.
 
 ```angular-html
 <!-- Bind to the `ngSrc` property of the `NgOptimizedImage` directive  -->
-<img [ngSrc]="profilePhotoUrl()" alt="The current user's profile photo">
+<img [ngSrc]="profilePhotoUrl()" alt="The current user's profile photo" />
 ```
 
 ### Attributes
 
 When you need to set HTML attributes that do not have corresponding DOM properties, such as SVG attributes, you can bind attributes to elements in your template with the `attr.` prefix.
 
+<!-- prettier-ignore -->
 ```angular-html
 <!-- Bind the `role` attribute on the `<ul>` element to the component's `listRole` property. -->
 <ul [attr.role]="listRole()">
@@ -110,7 +111,7 @@ You can also use text interpolation syntax in properties and attributes by using
 
 ```angular-html
 <!-- Binds a value to the `alt` property of the image element's DOM object. -->
-<img src="profile-photo.jpg" alt="Profile photo of {{ firstName() }}" >
+<img src="profile-photo.jpg" alt="Profile photo of {{ firstName() }}" />
 ```
 
 ## CSS class and style property bindings
@@ -121,6 +122,7 @@ Angular supports additional features for binding CSS classes and CSS style prope
 
 You can create a CSS class binding to conditionally add or remove a CSS class on an element based on whether the bound value is [truthy or falsy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
 
+<!-- prettier-ignore -->
 ```angular-html
 <!-- When `isExpanded` is truthy, add the `expanded` CSS class. -->
 <ul [class.expanded]="isExpanded()">
@@ -155,6 +157,7 @@ export class UserProfile {
 
 The above example renders the following DOM:
 
+<!-- prettier-ignore -->
 ```angular-html
 <ul class="full-width outlined"> ... </ul>
 <section class="expandable elevated"> ... </section>
@@ -178,6 +181,7 @@ export class Listbox {
 
 In the example above, Angular renders the `ul` element with all three CSS classes.
 
+<!-- prettier-ignore -->
 ```angular-html
 <ul class="list box expanded">
 ```
@@ -194,6 +198,7 @@ NOTE: Class bindings do not support space-separated class names in a single key.
 
 You can also bind to CSS style properties directly on an element.
 
+<!-- prettier-ignore -->
 ```angular-html
 <!-- Set the CSS `display` property based on the `isExpanded` property. -->
 <section [style.display]="isExpanded() ? 'block' : 'none'">
@@ -201,6 +206,7 @@ You can also bind to CSS style properties directly on an element.
 
 You can further specify units for CSS properties that accept units.
 
+<!-- prettier-ignore -->
 ```angular-html
 <!-- Set the CSS `height` property to a pixel value based on the `sectionHeightInPixels` property. -->
 <section [style.height.px]="sectionHeightInPixels()">
@@ -232,6 +238,7 @@ export class UserProfile {
 
 The above example renders the following DOM.
 
+<!-- prettier-ignore -->
 ```angular-html
 <ul style="display: flex; padding: 8px"> ... </ul>
 <section style="border: 1px solid black; font-weight: bold"> ... </section>
diff --git a/adev-ja/src/content/guide/templates/binding.md b/adev-ja/src/content/guide/templates/binding.md
index 7389a0da8..142b250ec 100644
--- a/adev-ja/src/content/guide/templates/binding.md
+++ b/adev-ja/src/content/guide/templates/binding.md
@@ -13,7 +13,7 @@ Angularでは、**バインディング**によってコンポーネントのテ
   `,
   ...
 })
-export class AppComponent {
+export class App {
   theme = 'dark';
 }
 ```
@@ -33,11 +33,11 @@ export class AppComponent {
     <!-- `welcomeMessage`が変更されても必ずしも更新されるわけではありません。 -->
     <p>{{ welcomeMessage }}</p>
 
-    <p>Your color preference is {{ theme() }}.</p> <!-- `name`シグナルの値が変更されたとき、常に更新されます。 -->
+    <p>Your color preference is {{ theme() }}.</p> <!-- `theme`シグナルの値が変更されたとき、常に更新されます。 -->
   `
   ...
 })
-export class AppComponent {
+export class App {
   welcomeMessage = "Welcome, enjoy this app that we built for you";
   theme = signal('dark');
 }
@@ -88,13 +88,14 @@ HTML要素のDOMインスタンス、[コンポーネント](guide/components)
 
 ```angular-html
 <!-- `NgOptimizedImage`ディレクティブの`ngSrc`プロパティにバインドします  -->
-<img [ngSrc]="profilePhotoUrl()" alt="The current user's profile photo">
+<img [ngSrc]="profilePhotoUrl()" alt="The current user's profile photo" />
 ```
 
 ### 属性 {#attributes}
 
 対応するDOMプロパティを持たないHTML属性(SVG属性など)を設定する必要がある場合は、テンプレート内の要素に属性をバインドするために`attr.`プレフィックスを使用できます。
 
+<!-- prettier-ignore -->
 ```angular-html
 <!-- `<ul>`要素の`role`属性をコンポーネントの`listRole`プロパティにバインドします。 -->
 <ul [attr.role]="listRole()">
@@ -110,7 +111,7 @@ HTML要素のDOMインスタンス、[コンポーネント](guide/components)
 
 ```angular-html
 <!-- 画像要素のDOMオブジェクトの`alt`プロパティに値をバインドします。 -->
-<img src="profile-photo.jpg" alt="Profile photo of {{ firstName() }}" >
+<img src="profile-photo.jpg" alt="Profile photo of {{ firstName() }}" />
 ```
 
 ## CSSクラスとスタイルプロパティのバインディング {#css-class-and-style-property-bindings}
@@ -121,6 +122,7 @@ Angularは、要素にCSSクラスとCSSスタイルプロパティをバイン
 
 CSSクラスバインディングを作成して、バインドされた値が[真偽値](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)かどうかによって、要素にCSSクラスを追加または削除できます。
 
+<!-- prettier-ignore -->
 ```angular-html
 <!-- `isExpanded`が真偽値の場合、`expanded`CSSクラスを追加します。 -->
 <ul [class.expanded]="isExpanded()">
@@ -155,6 +157,7 @@ export class UserProfile {
 
 上記の例は、以下のDOMをレンダリングします。
 
+<!-- prettier-ignore -->
 ```angular-html
 <ul class="full-width outlined"> ... </ul>
 <section class="expandable elevated"> ... </section>
@@ -178,6 +181,7 @@ export class Listbox {
 
 上記の例では、Angularは`ul`要素を3つのCSSクラスすべてでレンダリングします。
 
+<!-- prettier-ignore -->
 ```angular-html
 <ul class="list box expanded">
 ```
@@ -194,6 +198,7 @@ NOTE: クラスバインディングは、単一のキーでスペース区切
 
 要素に直接CSSスタイルプロパティをバインドできます。
 
+<!-- prettier-ignore -->
 ```angular-html
 <!-- `isExpanded`プロパティに基づいてCSSの`display`プロパティを設定します。 -->
 <section [style.display]="isExpanded() ? 'block' : 'none'">
@@ -201,6 +206,7 @@ NOTE: クラスバインディングは、単一のキーでスペース区切
 
 単位を受け付けるCSSプロパティについては、さらに単位を指定できます。
 
+<!-- prettier-ignore -->
 ```angular-html
 <!-- `sectionHeightInPixels`プロパティに基づいてCSSの`height`プロパティをピクセル値に設定します。 -->
 <section [style.height.px]="sectionHeightInPixels()">
@@ -232,6 +238,7 @@ export class UserProfile {
 
 上記の例は、以下のDOMをレンダリングします。
 
+<!-- prettier-ignore -->
 ```angular-html
 <ul style="display: flex; padding: 8px"> ... </ul>
 <section style="border: 1px solid black; font-weight: bold"> ... </section>
diff --git a/adev-ja/src/content/guide/templates/control-flow.en.md b/adev-ja/src/content/guide/templates/control-flow.en.md
index e1a85169f..a8408cc33 100644
--- a/adev-ja/src/content/guide/templates/control-flow.en.md
+++ b/adev-ja/src/content/guide/templates/control-flow.en.md
@@ -8,7 +8,7 @@ The `@if` block conditionally displays its content when its condition expression
 
 ```angular-html
 @if (a > b) {
-  <p>{{a}} is greater than {{b}}</p>
+  <p>{{ a }} is greater than {{ b }}</p>
 }
 ```
 
@@ -16,11 +16,11 @@ If you want to display alternative content, you can do so by providing any numbe
 
 ```angular-html
 @if (a > b) {
-  {{a}} is greater than {{b}}
+  {{ a }} is greater than {{ b }}
 } @else if (b > a) {
-  {{a}} is less than {{b}}
+  {{ a }} is less than {{ b }}
 } @else {
-  {{a}} is equal to {{b}}
+  {{ a }} is equal to {{ b }}
 }
 ```
 
@@ -60,7 +60,15 @@ Select a property that uniquely identifies each item in the `track` expression.
 
 For static collections that never change, you can use `$index` to tell Angular to track each item by its index in the collection.
 
-If no other option is available, you can specify `identity`. This tells Angular to track the item by its reference identity using the triple-equals operator (`===`). Avoid this option whenever possible as it can lead to significantly slower rendering updates, as Angular has no way to map which data item corresponds to which DOM nodes.
+If no other option is available, you can use the item itself as a tracking key. This tells Angular to track the item by its reference identity using the triple-equals operator (`===`). Avoid this option whenever possible as it can lead to significantly slower rendering updates, as Angular has no way to map which data item corresponds to which DOM nodes.
+
+```angular-html
+@for (item of items; track item) {
+  {{ item.name }}
+}
+```
+
+NOTE: Unlike `*ngFor`, the `@for` block prioritizes view reuse. If a tracked property changes but the object reference remains the same, Angular updates the view's bindings (including component inputs) rather than destroying and recreating the entire element.
 
 ### Contextual variables in `@for` blocks
 
@@ -91,9 +99,9 @@ You can optionally include an `@empty` section immediately after the `@for` bloc
 
 ```angular-html
 @for (item of items; track item.name) {
-  <li> {{ item.name }}</li>
+  <li>{{ item.name }}</li>
 } @empty {
-  <li> There are no items. </li>
+  <li>There are no items.</li>
 }
 ```
 
@@ -106,9 +114,7 @@ While the `@if` block is great for most scenarios, the `@switch` block provides
   @case ('admin') {
     <app-admin-dashboard />
   }
-  @case ('reviewer') {
-    <app-reviewer-dashboard />
-  }
+  @case ('reviewer')
   @case ('editor') {
     <app-editor-dashboard />
   }
@@ -122,6 +128,8 @@ The value of the conditional expression is compared to the case expression using
 
 **`@switch` does not have a fallthrough**, so you do not need an equivalent to a `break` or `return` statement in the block.
 
+You can specify multiple conditions for a single block by have consecutive `@case` statements.
+
 You can optionally include a `@default` block. The content of the `@default` block displays if none of the preceding case expressions match the switch value.
 
 If no `@case` matches the expression and there is no `@default` block, nothing is shown.
diff --git a/adev-ja/src/content/guide/templates/control-flow.md b/adev-ja/src/content/guide/templates/control-flow.md
index 6f7059fa8..dc9ab20b7 100644
--- a/adev-ja/src/content/guide/templates/control-flow.md
+++ b/adev-ja/src/content/guide/templates/control-flow.md
@@ -8,7 +8,7 @@ Angularテンプレートは制御フローブロックをサポートしてお
 
 ```angular-html
 @if (a > b) {
-  <p>{{a}} is greater than {{b}}</p>
+  <p>{{ a }} is greater than {{ b }}</p>
 }
 ```
 
@@ -16,11 +16,11 @@ Angularテンプレートは制御フローブロックをサポートしてお
 
 ```angular-html
 @if (a > b) {
-  {{a}} is greater than {{b}}
+  {{ a }} is greater than {{ b }}
 } @else if (b > a) {
-  {{a}} is less than {{b}}
+  {{ a }} is less than {{ b }}
 } @else {
-  {{a}} is equal to {{b}}
+  {{ a }} is equal to {{ b }}
 }
 ```
 
@@ -60,7 +60,15 @@ Angularの `@for` ブロックは、JavaScriptの `continue` や `break` のよ
 
 変更されない静的なコレクションの場合、`$index` を使用して、コレクション内のインデックスで各アイテムを追跡するようにAngularに指示できます。
 
-他のオプションが利用できない場合は、`identity` を指定できます。 これは、Angularに三重等号演算子 (`===`) を使用して参照の同一性でアイテムを追跡するように指示します。 AngularはどのデータアイテムがどのDOMノードに対応するかをマップする方法がないため、可能な限りこのオプションを避けてください。レンダリングの更新が大幅に遅くなる可能性があります。
+他のオプションが利用できない場合は、アイテム自体をトラッキングキーとして使用できます。 これは、Angularに三重等号演算子 (`===`) を使用して参照の同一性でアイテムを追跡するように指示します。 AngularはどのデータアイテムがどのDOMノードに対応するかをマップする方法がないため、可能な限りこのオプションを避けてください。レンダリングの更新が大幅に遅くなる可能性があります。
+
+```angular-html
+@for (item of items; track item) {
+  {{ item.name }}
+}
+```
+
+NOTE: `*ngFor`とは異なり、`@for`ブロックはビューの再利用を優先します。トラッキングされたプロパティが変更されても、オブジェクト参照が同じままである場合、Angularは要素全体を破棄して再作成するのではなく、ビューのバインディング（コンポーネント入力を含む）を更新します。
 
 ### `@for` ブロックのコンテキスト変数
 
@@ -91,9 +99,9 @@ Angularの `@for` ブロックは、JavaScriptの `continue` や `break` のよ
 
 ```angular-html
 @for (item of items; track item.name) {
-  <li> {{ item.name }}</li>
+  <li>{{ item.name }}</li>
 } @empty {
-  <li> There are no items. </li>
+  <li>There are no items.</li>
 }
 ```
 
@@ -106,9 +114,7 @@ Angularの `@for` ブロックは、JavaScriptの `continue` や `break` のよ
   @case ('admin') {
     <app-admin-dashboard />
   }
-  @case ('reviewer') {
-    <app-reviewer-dashboard />
-  }
+  @case ('reviewer')
   @case ('editor') {
     <app-editor-dashboard />
   }
@@ -122,6 +128,8 @@ Angularの `@for` ブロックは、JavaScriptの `continue` や `break` のよ
 
 **`@switch` にはフォールスルーはありません**。そのため、ブロックに `break` や `return` ステートメントに相当するものは必要ありません。
 
+連続した`@case`ステートメントを使用することで、単一のブロックに複数の条件を指定できます。
+
 オプションで `@default` ブロックを含めることができます。 `@default` ブロックのコンテンツは、前のケース式のいずれもスイッチ値と一致しない場合に表示されます。
 
 `@case` が式と一致せず、`@default` ブロックがない場合は、何も表示されません。
diff --git a/adev-ja/src/content/guide/templates/event-listeners.en.md b/adev-ja/src/content/guide/templates/event-listeners.en.md
index 344d29b94..151677be7 100644
--- a/adev-ja/src/content/guide/templates/event-listeners.en.md
+++ b/adev-ja/src/content/guide/templates/event-listeners.en.md
@@ -13,7 +13,7 @@ When you want to add event listeners to an HTML element, you wrap the event with
   `,
   ...
 })
-export class AppComponent{
+export class App{
   updateField(): void {
     console.log('Field is updated!');
   }
@@ -35,7 +35,7 @@ In every template event listener, Angular provides a variable named `$event` tha
   `,
   ...
 })
-export class AppComponent {
+export class App {
   updateField(event: KeyboardEvent): void {
     console.log(`The user pressed: ${event.key}`);
   }
@@ -53,7 +53,7 @@ When you want to capture specific keyboard events for a specific key, you might
   `,
   ...
 })
-export class AppComponent {
+export class App {
   updateField(event: KeyboardEvent): void {
     if (event.key === 'Enter') {
       console.log('The user pressed enter in the text field.');
@@ -71,7 +71,7 @@ However, since this is a common scenario, Angular lets you filter the events by
   `,
   ...
 })
-export class AppComponent{
+export class App{
   updateField(event: KeyboardEvent): void {
     console.log('The user pressed enter in the text field.');
   }
@@ -98,6 +98,22 @@ Angular also allows you to specify [Code values for keyboard events](https://dev
 
 This can be useful for handling keyboard events consistently across different operating systems. For example, when using the Alt key on MacOS devices, the `key` property reports the key based on the character already modified by the Alt key. This means that a combination like Alt + S reports a `key` value of `'ß'`. The `code` property, however, corresponds to the physical or virtual button pressed rather than the character produced.
 
+## Listening on global targets
+
+Global target names can be used to prefix an event. The 3 supported global targets are `window`, `document` and `body`.
+
+```angular-ts
+@Component({
+  /* ... */
+  host: {
+    'window:click': 'onWindowClick()',
+    'document:click': 'onDocumentClick()',
+    'body:click': 'onBodyClick()',
+  },
+})
+export class MyView {}
+```
+
 ## Preventing event default behavior
 
 If your event handler should replace the native browser behavior, you can use the event object's [`preventDefault` method](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault):
@@ -109,7 +125,7 @@ If your event handler should replace the native browser behavior, you can use th
   `,
   ...
 })
-export class AppComponent{
+export class App{
   showOverlay(event: PointerEvent): void {
     event.preventDefault();
     console.log('Show overlay without updating the URL!');
@@ -173,10 +189,10 @@ Register your custom plugin using the `EVENT_MANAGER_PLUGINS` token in your appl
 ```ts
 import {bootstrapApplication} from '@angular/platform-browser';
 import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
-import {AppComponent} from './app/app.component';
+import {App} from './app';
 import {DebounceEventPlugin} from './debounce-event-plugin';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     {
       provide: EVENT_MANAGER_PLUGINS,
diff --git a/adev-ja/src/content/guide/templates/event-listeners.md b/adev-ja/src/content/guide/templates/event-listeners.md
index 6ee264ab3..2257069f6 100644
--- a/adev-ja/src/content/guide/templates/event-listeners.md
+++ b/adev-ja/src/content/guide/templates/event-listeners.md
@@ -13,7 +13,7 @@ HTML要素にイベントリスナーを追加する場合は、イベントを
   `,
   ...
 })
-export class AppComponent{
+export class App{
   updateField(): void {
     console.log('Field is updated!');
   }
@@ -35,7 +35,7 @@ Angularは、すべてのテンプレートイベントリスナーで、イベ
   `,
   ...
 })
-export class AppComponent {
+export class App {
   updateField(event: KeyboardEvent): void {
     console.log(`The user pressed: ${event.key}`);
   }
@@ -53,7 +53,7 @@ export class AppComponent {
   `,
   ...
 })
-export class AppComponent {
+export class App {
   updateField(event: KeyboardEvent): void {
     if (event.key === 'Enter') {
       console.log('The user pressed enter in the text field.');
@@ -71,7 +71,7 @@ export class AppComponent {
   `,
   ...
 })
-export class AppComponent{
+export class App{
   updateField(event: KeyboardEvent): void {
     console.log('The user pressed enter in the text field.');
   }
@@ -98,6 +98,22 @@ Angularでは、組み込みの `code` サフィックスを提供すること
 
 これは、異なるオペレーティングシステム間でキーボードイベントを一貫して処理する場合に役立ちます。たとえば、MacOSデバイスでAltキーを使用する場合、`key` プロパティはAltキーで既に修飾された文字に基づいてキーを報告します。これは、Alt + Sのような組み合わせが `'ß'` の `key` 値を報告することを意味します。ただし、`code` プロパティは、生成された文字ではなく、押された物理的なまたは仮想的なボタンに対応します。
 
+## グローバルターゲットのリスニング {#listening-on-global-targets}
+
+グローバルターゲット名を使用してイベントのプレフィックスを付けることができます。サポートされている3つのグローバルターゲットは、`window`、`document`、`body`です。
+
+```angular-ts
+@Component({
+  /* ... */
+  host: {
+    'window:click': 'onWindowClick()',
+    'document:click': 'onDocumentClick()',
+    'body:click': 'onBodyClick()',
+  },
+})
+export class MyView {}
+```
+
 ## イベントのデフォルト動作の防止 {#preventing-event-default-behavior}
 
 イベントハンドラーがネイティブのブラウザ動作を置き換える必要がある場合は、イベントオブジェクトの [`preventDefault` メソッド](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)を使用できます。
@@ -109,7 +125,7 @@ Angularでは、組み込みの `code` サフィックスを提供すること
   `,
   ...
 })
-export class AppComponent{
+export class App{
   showOverlay(event: PointerEvent): void {
     event.preventDefault();
     console.log('Show overlay without updating the URL!');
@@ -173,10 +189,10 @@ export class DebounceEventPlugin extends EventManagerPlugin {
 ```ts
 import {bootstrapApplication} from '@angular/platform-browser';
 import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
-import {AppComponent} from './app/app.component';
+import {App} from './app';
 import {DebounceEventPlugin} from './debounce-event-plugin';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     {
       provide: EVENT_MANAGER_PLUGINS,
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 dc0a8afd7..b0d32c28d 100644
--- a/adev-ja/src/content/guide/templates/expression-syntax.en.md
+++ b/adev-ja/src/content/guide/templates/expression-syntax.en.md
@@ -8,16 +8,17 @@ Angular supports a subset of [literal values](https://developer.mozilla.org/en-U
 
 ### Supported value literals
 
-| Literal type    | Example values                  |
-| --------------- | ------------------------------- |
-| String          | `'Hello'`, `"World"`            |
-| Boolean         | `true`, `false`                 |
-| Number          | `123`, `3.14`                   |
-| Object          | `{name: 'Alice'}`               |
-| Array           | `['Onion', 'Cheese', 'Garlic']` |
-| null            | `null`                          |
-| Template string | `` `Hello ${name}` ``           |
-| RegExp          | `/\d+/`                         |
+| Literal type           | Example values                  |
+| ---------------------- | ------------------------------- |
+| String                 | `'Hello'`, `"World"`            |
+| Boolean                | `true`, `false`                 |
+| Number                 | `123`, `3.14`                   |
+| Object                 | `{name: 'Alice'}`               |
+| Array                  | `['Onion', 'Cheese', 'Garlic']` |
+| null                   | `null`                          |
+| RegExp                 | `/\d+/`                         |
+| Template string        | `` `Hello ${name}` ``           |
+| Tagged template string | `` tag`Hello ${name}` ``        |
 
 ### Unsupported value literals
 
@@ -64,6 +65,9 @@ Angular supports the following operators from standard JavaScript.
 | Unary Negation                | `-x`                                           |
 | Unary Plus                    | `+y`                                           |
 | Property Accessor             | `person['name']`                               |
+| typeof                        | `typeof 42`                                    |
+| void                          | `void 1`                                       |
+| in                            | `'model' in car`                               |
 | Assignment                    | `a = b`                                        |
 | Addition Assignment           | `a += b`                                       |
 | Subtraction Assignment        | `a -= b`                                       |
@@ -74,6 +78,9 @@ Angular supports the following operators from standard JavaScript.
 | Logical AND Assignment        | `a &&= b`                                      |
 | Logical OR Assignment         | `a \|\|= b`                                    |
 | Nullish Coalescing Assignment | `a ??= b`                                      |
+| Spread in object literals     | `{...obj, foo: 'bar'}`                         |
+| Spread in array literals      | `[...arr, 1, 2, 3]`                            |
+| Rest in function calls        | `fn(...args)`                                  |
 
 Angular expressions additionally also support the following non-standard operators:
 
diff --git a/adev-ja/src/content/guide/templates/expression-syntax.md b/adev-ja/src/content/guide/templates/expression-syntax.md
index 57d6443c6..920890d0b 100644
--- a/adev-ja/src/content/guide/templates/expression-syntax.md
+++ b/adev-ja/src/content/guide/templates/expression-syntax.md
@@ -8,16 +8,17 @@ Angularは、[リテラル値](https://developer.mozilla.org/en-US/docs/Glossary
 
 ### サポートされる値リテラル
 
-| Literal type    | Example values                  |
-| --------------- | ------------------------------- |
-| String          | `'Hello'`, `"World"`            |
-| Boolean         | `true`, `false`                 |
-| Number          | `123`, `3.14`                   |
-| Object          | `{name: 'Alice'}`               |
-| Array           | `['Onion', 'Cheese', 'Garlic']` |
-| null            | `null`                          |
-| Template string | `` `Hello ${name}` ``           |
-| RegExp          | `/\d+/`                         |
+| Literal type           | Example values                  |
+| ---------------------- | ------------------------------- |
+| String                 | `'Hello'`, `"World"`            |
+| Boolean                | `true`, `false`                 |
+| Number                 | `123`, `3.14`                   |
+| Object                 | `{name: 'Alice'}`               |
+| Array                  | `['Onion', 'Cheese', 'Garlic']` |
+| null                   | `null`                          |
+| RegExp                 | `/\d+/`                         |
+| Template string        | `` `Hello ${name}` ``           |
+| Tagged template string | `` tag`Hello ${name}` ``        |
 
 ### サポートされていない値リテラル
 
@@ -64,6 +65,9 @@ Angularは、標準JavaScriptの次の演算子をサポートしています。
 | Unary Negation              | `-x`                                           |
 | Unary Plus                  | `+y`                                           |
 | Property Accessor           | `person['name']`                               |
+| typeof                      | `typeof 42`                                    |
+| void                        | `void 1`                                       |
+| in                          | `'model' in car`                               |
 | 代入                        | `a = b`                                        |
 | 加算代入                    | `a += b`                                       |
 | 減算代入                    | `a -= b`                                       |
@@ -74,6 +78,9 @@ Angularは、標準JavaScriptの次の演算子をサポートしています。
 | 論理積代入                  | `a &&= b`                                      |
 | 論理和代入                  | `a \|\|= b`                                    |
 | Nullish Coalescing Assignment | `a ??= b`                                      |
+| Spread in object literals   | `{...obj, foo: 'bar'}`                         |
+| Spread in array literals    | `[...arr, 1, 2, 3]`                            |
+| Rest in function calls      | `fn(...args)`                                  |
 
 Angular式は、さらに次の非標準の演算子もサポートしています。
 
diff --git a/adev-ja/src/content/guide/templates/ng-content.en.md b/adev-ja/src/content/guide/templates/ng-content.en.md
index 547661841..93713abef 100644
--- a/adev-ja/src/content/guide/templates/ng-content.en.md
+++ b/adev-ja/src/content/guide/templates/ng-content.en.md
@@ -5,33 +5,27 @@
 Here is an example of a `BaseButton` component that accepts any markup from its parent.
 
 ```angular-ts
-// ./base-button/base-button.component.ts
-import { Component } from '@angular/core';
+// ./base-button/base-button.ts
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'button[baseButton]',
-  template: `
-      <ng-content />
-  `,
+  template: `<ng-content />`,
 })
 export class BaseButton {}
 ```
 
 ```angular-ts
-// ./app.component.ts
-import { Component } from '@angular/core';
-import { BaseButton } from './base-button/base-button.component';
+// ./app.ts
+import {Component} from '@angular/core';
+import {BaseButton} from './base-button';
 
 @Component({
   selector: 'app-root',
   imports: [BaseButton],
-  template: `
-    <button baseButton>
-      Next <span class="icon arrow-right"></span>
-    </button>
-  `,
+  template: `<button baseButton>Next <span class="icon arrow-right"></span></button>`,
 })
-export class AppComponent {}
+export class App {}
 ```
 
 For more detail, check out the [`<ng-content>` in-depth guide](/guide/components/content-projection) for other ways you can leverage this pattern.
diff --git a/adev-ja/src/content/guide/templates/ng-content.md b/adev-ja/src/content/guide/templates/ng-content.md
index a7ab710d9..903cce7af 100644
--- a/adev-ja/src/content/guide/templates/ng-content.md
+++ b/adev-ja/src/content/guide/templates/ng-content.md
@@ -5,33 +5,27 @@
 以下は、親からマークアップを受け取る `BaseButton` コンポーネントの例です。
 
 ```angular-ts
-// ./base-button/base-button.component.ts
-import { Component } from '@angular/core';
+// ./base-button/base-button.ts
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'button[baseButton]',
-  template: `
-      <ng-content />
-  `,
+  template: `<ng-content />`,
 })
 export class BaseButton {}
 ```
 
 ```angular-ts
-// ./app.component.ts
-import { Component } from '@angular/core';
-import { BaseButton } from './base-button/base-button.component';
+// ./app.ts
+import {Component} from '@angular/core';
+import {BaseButton} from './base-button';
 
 @Component({
   selector: 'app-root',
   imports: [BaseButton],
-  template: `
-    <button baseButton>
-      Next <span class="icon arrow-right"></span>
-    </button>
-  `,
+  template: `<button baseButton>Next <span class="icon arrow-right"></span></button>`,
 })
-export class AppComponent {}
+export class App {}
 ```
 
 詳細については、[`<ng-content>` の詳細ガイド](/guide/components/content-projection) で、このパターンを活用する他の方法を確認してください。
diff --git a/adev-ja/src/content/guide/templates/ng-template.en.md b/adev-ja/src/content/guide/templates/ng-template.en.md
index a2e10d15e..46601730e 100644
--- a/adev-ja/src/content/guide/templates/ng-template.en.md
+++ b/adev-ja/src/content/guide/templates/ng-template.en.md
@@ -111,7 +111,7 @@ A directive can inject a `TemplateRef` if that directive is applied directly to
 
 ```angular-ts
 @Directive({
-  selector: '[myDirective]'
+  selector: '[myDirective]',
 })
 export class MyDirective {
   private fragment = inject(TemplateRef);
@@ -218,33 +218,100 @@ Each parameter is written as an attribute prefixed with `let-` with a value matc
 
 ```angular-html
 <ng-template let-pizzaTopping="topping">
-  <p>You selected: {{pizzaTopping}}</p>
+  <p>You selected: {{ pizzaTopping }}</p>
 </ng-template>
 ```
 
-### Using `NgTemplateOutlet`
+### Using `NgTemplateOutlet` {#using-ngtemplateoutlet-with-parameters}
 
 You can bind a context object to the `ngTemplateOutletContext` input:
 
 ```angular-html
 <ng-template #myFragment let-pizzaTopping="topping">
-  <p>You selected: {{pizzaTopping}}</p>
+  <p>You selected: {{ pizzaTopping }}</p>
 </ng-template>
 
-<ng-container
-  [ngTemplateOutlet]="myFragment"
-  [ngTemplateOutletContext]="{topping: 'onion'}"
-/>
+<ng-container [ngTemplateOutlet]="myFragment" [ngTemplateOutletContext]="{topping: 'onion'}" />
 ```
 
-### Using `ViewContainerRef`
+### Using `ViewContainerRef` {#using-viewcontainerref-with-parameters}
 
 You can pass a context object as the second argument to `createEmbeddedView`:
 
-```angular-ts
+```ts
 this.viewContainer.createEmbeddedView(this.myFragment, {topping: 'onion'});
 ```
 
+## Providing injectors to template fragments
+
+When you render a template fragment, its injector context comes from the **template declaration's location**, not from where it is rendered. You can override this behavior by providing a custom injector.
+
+### Using `NgTemplateOutlet` {#using-ngtemplateoutlet-with-injectors}
+
+You can pass a custom `Injector` to the `ngTemplateOutletInjector` input:
+
+```angular-ts
+export const THEME_DATA = new InjectionToken<string>('THEME_DATA', {
+  factory: () => 'light',
+});
+
+@Component({
+  selector: 'themed-panel',
+  template: `<div [class]="theme">...</div>`,
+})
+export class ThemedPanel {
+  theme = inject(THEME_DATA);
+}
+
+@Component({
+  selector: 'root',
+  imports: [NgTemplateOutlet, ThemedPanel],
+  template: `
+    <ng-template #myFragment>
+      <themed-panel />
+    </ng-template>
+    <ng-container *ngTemplateOutlet="myFragment; injector: customInjector" />
+  `,
+})
+export class Root {
+  customInjector = Injector.create({
+    providers: [{provide: THEME_DATA, useValue: 'dark'}],
+  });
+}
+```
+
+#### Inheriting the outlet's injector
+
+You can set `ngTemplateOutletInjector` to the string `'outlet'` to make the embedded view inherit its injector from the outlet's location in the DOM instead of from where the template was declared.
+
+```angular-html
+<ng-template #node let-items>
+  <item-component>
+    @for (child of items; track $index) {
+      <ng-container
+        *ngTemplateOutlet="node; context: {$implicit: child.children}; injector: 'outlet'"
+      />
+    }
+  </item-component>
+</ng-template>
+
+<ng-container *ngTemplateOutlet="node; context: {$implicit: topLevelItems}" />
+```
+
+Each recursive rendering of the `node` template inherits the injector from the surrounding `<item-component>`, allowing each nested level to access providers scoped to its parent component.
+
+NOTE: This is useful for building recursive structures or any situation where the rendered template needs access to providers from the component tree at the outlet site.
+
+### Using `ViewContainerRef` {#using-viewcontainerref-with-injectors}
+
+You can pass a custom injector as part of the options object in `createEmbeddedView`:
+
+```ts
+this.viewContainer.createEmbeddedView(this.myFragment, context, {
+  injector: myCustomInjector,
+});
+```
+
 ## Structural directives
 
 A **structural directive** is any directive that:
diff --git a/adev-ja/src/content/guide/templates/ng-template.md b/adev-ja/src/content/guide/templates/ng-template.md
index 34586b0ea..b188d6afa 100644
--- a/adev-ja/src/content/guide/templates/ng-template.md
+++ b/adev-ja/src/content/guide/templates/ng-template.md
@@ -111,7 +111,7 @@ export class ComponentWithFragment {
 
 ```angular-ts
 @Directive({
-  selector: '[myDirective]'
+  selector: '[myDirective]',
 })
 export class MyDirective {
   private fragment = inject(TemplateRef);
@@ -218,33 +218,100 @@ export class MyOutlet {
 
 ```angular-html
 <ng-template let-pizzaTopping="topping">
-  <p>選択したのは: {{pizzaTopping}}</p>
+  <p>選択したのは: {{ pizzaTopping }}</p>
 </ng-template>
 ```
 
-### `NgTemplateOutlet` の使用
+### `NgTemplateOutlet` の使用 {#using-ngtemplateoutlet-with-parameters}
 
 `ngTemplateOutletContext` 入力にコンテキストオブジェクトを結合できます。
 
 ```angular-html
 <ng-template #myFragment let-pizzaTopping="topping">
-  <p>選択したのは: {{pizzaTopping}}</p>
+  <p>選択したのは: {{ pizzaTopping }}</p>
 </ng-template>
 
-<ng-container
-  [ngTemplateOutlet]="myFragment"
-  [ngTemplateOutletContext]="{topping: '玉ねぎ'}"
-/>
+<ng-container [ngTemplateOutlet]="myFragment" [ngTemplateOutletContext]="{topping: '玉ねぎ'}" />
 ```
 
-### `ViewContainerRef` の使用
+### `ViewContainerRef` の使用 {#using-viewcontainerref-with-parameters}
 
 `createEmbeddedView` に対する2番目の引数として、コンテキストオブジェクトを渡すことができます。
 
-```angular-ts
+```ts
 this.viewContainer.createEmbeddedView(this.myFragment, {topping: '玉ねぎ'});
 ```
 
+## テンプレートフラグメントへのインジェクターの提供
+
+テンプレートフラグメントをレンダリングする際、そのインジェクターコンテキストは、レンダリング場所からではなく、**テンプレート宣言の場所**から取得されます。カスタムインジェクターを提供することで、この動作をオーバーライドできます。
+
+### `NgTemplateOutlet` の使用 {#using-ngtemplateoutlet-with-injectors}
+
+カスタム `Injector` を `ngTemplateOutletInjector` 入力に渡すことができます。
+
+```angular-ts
+export const THEME_DATA = new InjectionToken<string>('THEME_DATA', {
+  factory: () => 'light',
+});
+
+@Component({
+  selector: 'themed-panel',
+  template: `<div [class]="theme">...</div>`,
+})
+export class ThemedPanel {
+  theme = inject(THEME_DATA);
+}
+
+@Component({
+  selector: 'root',
+  imports: [NgTemplateOutlet, ThemedPanel],
+  template: `
+    <ng-template #myFragment>
+      <themed-panel />
+    </ng-template>
+    <ng-container *ngTemplateOutlet="myFragment; injector: customInjector" />
+  `,
+})
+export class Root {
+  customInjector = Injector.create({
+    providers: [{provide: THEME_DATA, useValue: 'dark'}],
+  });
+}
+```
+
+#### アウトレットのインジェクターの継承
+
+`ngTemplateOutletInjector` を文字列 `'outlet'` に設定することで、埋め込まれたビューがテンプレートが宣言された場所からではなく、DOM内のアウトレットの場所からインジェクターを継承するようにできます。
+
+```angular-html
+<ng-template #node let-items>
+  <item-component>
+    @for (child of items; track $index) {
+      <ng-container
+        *ngTemplateOutlet="node; context: {$implicit: child.children}; injector: 'outlet'"
+      />
+    }
+  </item-component>
+</ng-template>
+
+<ng-container *ngTemplateOutlet="node; context: {$implicit: topLevelItems}" />
+```
+
+`node` テンプレートの再帰的なレンダリングはそれぞれ、周囲の `<item-component>` からインジェクターを継承するため、各ネストされたレベルは親コンポーネントにスコープされたプロバイダーにアクセスできます。
+
+NOTE: これは、再帰的な構造を構築する場合や、レンダリングされたテンプレートがアウトレットサイトのコンポーネントツリーからのプロバイダーにアクセスする必要がある場合に役立ちます。
+
+### `ViewContainerRef` の使用 {#using-viewcontainerref-with-injectors}
+
+カスタムインジェクターを `createEmbeddedView` のオプションオブジェクトの一部として渡すことができます。
+
+```ts
+this.viewContainer.createEmbeddedView(this.myFragment, context, {
+  injector: myCustomInjector,
+});
+```
+
 ## 構造ディレクティブ
 
 **構造ディレクティブ**とは、次のいずれかの条件を満たすディレクティブです。
diff --git a/adev-ja/src/content/guide/templates/pipes.en.md b/adev-ja/src/content/guide/templates/pipes.en.md
index 61e558c2d..ec8ccf5ce 100644
--- a/adev-ja/src/content/guide/templates/pipes.en.md
+++ b/adev-ja/src/content/guide/templates/pipes.en.md
@@ -9,24 +9,24 @@ NOTE: Angular's pipe syntax deviates from standard JavaScript, which uses the ve
 Here is an example using some built-in pipes that Angular provides:
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
+import {Component} from '@angular/core';
+import {CurrencyPipe, DatePipe, TitleCasePipe} from '@angular/common';
 
 @Component({
   selector: 'app-root',
   imports: [CurrencyPipe, DatePipe, TitleCasePipe],
   template: `
     <main>
-       <!-- Transform the company name to title-case and
+      <!-- Transform the company name to title-case and
        transform the purchasedOn date to a locale-formatted string -->
-<h1>Purchases from {{ company | titlecase }} on {{ purchasedOn | date }}</h1>
+      <h1>Purchases from {{ company | titlecase }} on {{ purchasedOn | date }}</h1>
 
-	    <!-- Transform the amount to a currency-formatted string -->
+      <!-- Transform the amount to a currency-formatted string -->
       <p>Total: {{ amount | currency }}</p>
     </main>
   `,
 })
-export class ShoppingCartComponent {
+export class ShoppingCart {
   amount = 123.45;
   company = 'acme corporation';
   purchasedOn = '2024-07-08';
@@ -91,7 +91,7 @@ Some pipes accept parameters to configure the transformation. To specify a param
 For example, the `DatePipe` is able to take parameters to format the date in a specific way.
 
 ```angular-html
-<p>The event will occur at {{ scheduledOn | date:'hh:mm' }}.</p>
+<p>The event will occur at {{ scheduledOn | date: 'hh:mm' }}.</p>
 ```
 
 Some pipes may accept multiple parameters. You can specify additional parameter values separated by the colon character (`:`).
@@ -99,7 +99,7 @@ Some pipes may accept multiple parameters. You can specify additional parameter
 For example, we can also pass a second optional parameter to control the timezone.
 
 ```angular-html
-<p>The event will occur at {{ scheduledOn | date:'hh:mm':'UTC' }}.</p>
+<p>The event will occur at {{ scheduledOn | date: 'hh:mm' : 'UTC' }}.</p>
 ```
 
 ## How pipes work
@@ -107,8 +107,8 @@ For example, we can also pass a second optional parameter to control the timezon
 Conceptually, pipes are functions that accept an input value and return a transformed value.
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { CurrencyPipe} from '@angular/common';
+import {Component} from '@angular/core';
+import {CurrencyPipe} from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -147,6 +147,7 @@ The pipe operator has higher precedence than the conditional (ternary) operator.
 
 If the same expression were written without parentheses:
 
+<!-- prettier-ignore -->
 ```angular-html
 {{ isAdmin ? 'Access granted' : 'Access denied' | uppercase }}
 ```
@@ -178,7 +179,7 @@ Here is an example of a custom pipe that transforms strings to kebab case:
 
 ```angular-ts
 // kebab-case.pipe.ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'kebabCase',
@@ -195,7 +196,7 @@ export class KebabCasePipe implements PipeTransform {
 When creating a custom pipe, import `Pipe` from the `@angular/core` package and use it as a decorator for the TypeScript class.
 
 ```angular-ts
-import { Pipe } from '@angular/core';
+import {Pipe} from '@angular/core';
 
 @Pipe({
   name: 'myCustomTransformation',
@@ -217,7 +218,7 @@ The naming convention for custom pipes consists of two conventions:
 In addition to the `@Pipe` decorator, custom pipes should always implement the `PipeTransform` interface from `@angular/core`.
 
 ```angular-ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'myCustomTransformation',
@@ -232,14 +233,14 @@ Implementing this interface ensures that your pipe class has the correct structu
 Every transformation is invoked by the `transform` method with the first parameter being the value being passed in and the return value being the transformed value.
 
 ```angular-ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'myCustomTransformation',
 })
 export class MyCustomTransformationPipe implements PipeTransform {
   transform(value: string): string {
-    return `My custom transformation of ${value}.`
+    return `My custom transformation of ${value}.`;
   }
 }
 ```
@@ -249,19 +250,19 @@ export class MyCustomTransformationPipe implements PipeTransform {
 You can add parameters to your transformation by adding additional parameters to the `transform` method:
 
 ```angular-ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'myCustomTransformation',
 })
 export class MyCustomTransformationPipe implements PipeTransform {
   transform(value: string, format: string): string {
-    let msg = `My custom transformation of ${value}.`
+    let msg = `My custom transformation of ${value}.`;
 
     if (format === 'uppercase') {
-      return msg.toUpperCase()
+      return msg.toUpperCase();
     } else {
-      return msg
+      return msg;
     }
   }
 }
@@ -271,10 +272,10 @@ export class MyCustomTransformationPipe implements PipeTransform {
 
 When you want a pipe to detect changes within arrays or objects, it must be marked as an impure function by passing the `pure` flag with a value of `false`.
 
-Avoid creating impure pipes unless absolutely necessary, as they can incur a significant performance penalty if used without care.
+IMPORTANT: Avoid creating impure pipes unless absolutely necessary, as they can incur a significant performance penalty if used without care.
 
 ```angular-ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'joinNamesImpure',
diff --git a/adev-ja/src/content/guide/templates/pipes.md b/adev-ja/src/content/guide/templates/pipes.md
index 4c0bf11e1..39a8e2ec4 100644
--- a/adev-ja/src/content/guide/templates/pipes.md
+++ b/adev-ja/src/content/guide/templates/pipes.md
@@ -9,24 +9,24 @@ NOTE: Angularのパイプ構文は、縦棒文字を[ビット単位のOR演算
 Angularが提供するいくつかの組み込みパイプを使用した例を以下に示します。
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
+import {Component} from '@angular/core';
+import {CurrencyPipe, DatePipe, TitleCasePipe} from '@angular/common';
 
 @Component({
   selector: 'app-root',
   imports: [CurrencyPipe, DatePipe, TitleCasePipe],
   template: `
     <main>
-       <!-- Transform the company name to title-case and
+      <!-- Transform the company name to title-case and
        transform the purchasedOn date to a locale-formatted string -->
-<h1>Purchases from {{ company | titlecase }} on {{ purchasedOn | date }}</h1>
+      <h1>Purchases from {{ company | titlecase }} on {{ purchasedOn | date }}</h1>
 
-	    <!-- Transform the amount to a currency-formatted string -->
+      <!-- Transform the amount to a currency-formatted string -->
       <p>Total: {{ amount | currency }}</p>
     </main>
   `,
 })
-export class ShoppingCartComponent {
+export class ShoppingCart {
   amount = 123.45;
   company = 'acme corporation';
   purchasedOn = '2024-07-08';
@@ -91,7 +91,7 @@ Angularのパイプ演算子は、テンプレート式内で縦棒文字(`|`)
 たとえば、`DatePipe`は、日付を特定の方法でフォーマットするためのパラメータを受け取ることができます。
 
 ```angular-html
-<p>The event will occur at {{ scheduledOn | date:'hh:mm' }}.</p>
+<p>The event will occur at {{ scheduledOn | date: 'hh:mm' }}.</p>
 ```
 
 一部のパイプは、複数のパラメータを受け入れる場合があります。追加のパラメータ値は、コロン文字(`:`)で区切って指定できます。
@@ -99,7 +99,7 @@ Angularのパイプ演算子は、テンプレート式内で縦棒文字(`|`)
 たとえば、タイムゾーンを制御するために、2番目のオプションのパラメータを渡すこともできます。
 
 ```angular-html
-<p>The event will occur at {{ scheduledOn | date:'hh:mm':'UTC' }}.</p>
+<p>The event will occur at {{ scheduledOn | date: 'hh:mm' : 'UTC' }}.</p>
 ```
 
 ## パイプの動作
@@ -107,8 +107,8 @@ Angularのパイプ演算子は、テンプレート式内で縦棒文字(`|`)
 概念的には、パイプは入力値を受け取り、変換された値を返す関数です。
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { CurrencyPipe} from '@angular/common';
+import {Component} from '@angular/core';
+import {CurrencyPipe} from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -147,6 +147,7 @@ export class AppComponent {
 
 同じ式を括弧なしで記述した場合:
 
+<!-- prettier-ignore -->
 ```angular-html
 {{ isAdmin ? 'Access granted' : 'Access denied' | uppercase }}
 ```
@@ -178,7 +179,7 @@ TypeScriptクラスは、さらに`PipeTransform`インターフェースを実
 
 ```angular-ts
 // kebab-case.pipe.ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'kebabCase',
@@ -195,7 +196,7 @@ export class KebabCasePipe implements PipeTransform {
 カスタムパイプを作成する際は、`@angular/core`パッケージから`Pipe`をインポートし、TypeScriptクラスのデコレーターとして使用します。
 
 ```angular-ts
-import { Pipe } from '@angular/core';
+import {Pipe} from '@angular/core';
 
 @Pipe({
   name: 'myCustomTransformation',
@@ -217,7 +218,7 @@ export class MyCustomTransformationPipe {}
 `@Pipe`デコレーターに加えて、カスタムパイプは常に`@angular/core`の`PipeTransform`インターフェースを実装する必要があります。
 
 ```angular-ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'myCustomTransformation',
@@ -232,14 +233,14 @@ export class MyCustomTransformationPipe implements PipeTransform {}
 すべての変換は、最初の引数が渡される値で、戻り値が変換された値である`transform`メソッドによって呼び出されます。
 
 ```angular-ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'myCustomTransformation',
 })
 export class MyCustomTransformationPipe implements PipeTransform {
   transform(value: string): string {
-    return `My custom transformation of ${value}.`
+    return `My custom transformation of ${value}.`;
   }
 }
 ```
@@ -249,19 +250,19 @@ export class MyCustomTransformationPipe implements PipeTransform {
 `transform`メソッドにadditional parametersを追加することで、変換にパラメータを追加できます。
 
 ```angular-ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'myCustomTransformation',
 })
 export class MyCustomTransformationPipe implements PipeTransform {
   transform(value: string, format: string): string {
-    let msg = `My custom transformation of ${value}.`
+    let msg = `My custom transformation of ${value}.`;
 
     if (format === 'uppercase') {
-      return msg.toUpperCase()
+      return msg.toUpperCase();
     } else {
-      return msg
+      return msg;
     }
   }
 }
@@ -271,10 +272,10 @@ export class MyCustomTransformationPipe implements PipeTransform {
 
 パイプで配列またはオブジェクト内の変更を検出する必要がある場合は、`pure`フラグを`false`の値で渡すことで、パイプを不純な関数としてマークする必要があります。
 
-不純なパイプは、本当に必要な場合にのみ作成してください。不純なパイプは、注意深く使用しないと、パフォーマンスに大きな影響を与える可能性があります。
+IMPORTANT: 不純なパイプは、本当に必要な場合にのみ作成してください。不純なパイプは、注意深く使用しないと、パフォーマンスに大きな影響を与える可能性があります。
 
 ```angular-ts
-import { Pipe, PipeTransform } from '@angular/core';
+import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({
   name: 'joinNamesImpure',
diff --git a/adev-ja/src/content/guide/templates/two-way-binding.en.md b/adev-ja/src/content/guide/templates/two-way-binding.en.md
index f102f3dd7..45c0ddc2a 100644
--- a/adev-ja/src/content/guide/templates/two-way-binding.en.md
+++ b/adev-ja/src/content/guide/templates/two-way-binding.en.md
@@ -13,8 +13,8 @@ Developers commonly use two-way binding to keep component data in sync with a fo
 The following example dynamically updates the `firstName` attribute on the page:
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 
 @Component({
   imports: [FormsModule],
@@ -23,9 +23,9 @@ import { FormsModule } from '@angular/forms';
       <h2>Hello {{ firstName }}!</h2>
       <input type="text" [(ngModel)]="firstName" />
     </main>
-  `
+  `,
 })
-export class AppComponent {
+export class App {
   firstName = 'Ada';
 }
 ```
@@ -38,22 +38,22 @@ To use two-way binding with native form controls, you need to:
 
 Once that is set up, Angular will ensure that any updates in the text input will reflect correctly inside of the component state!
 
-Learn more about [`NgModel`](guide/directives#displaying-and-updating-properties-with-ngmodel) in the official docs.
+Learn more about [`NgModel`](/api/forms/NgModel) in the official docs.
 
 ## Two-way binding between components
 
 Leveraging two-way binding between a parent and child component requires more configuration compared to form elements.
 
-Here is an example where the `AppComponent` is responsible for setting the initial count state, but the logic for updating and rendering the UI for the counter primarily resides inside its child `CounterComponent`.
+Here is an example where the `App` is responsible for setting the initial count state, but the logic for updating and rendering the UI for the counter primarily resides inside its child `Counter`.
 
 ```angular-ts
-// ./app.component.ts
-import { Component } from '@angular/core';
-import { CounterComponent } from './counter/counter.component';
+// ./app.ts
+import {Component} from '@angular/core';
+import {Counter} from './counter';
 
 @Component({
   selector: 'app-root',
-  imports: [CounterComponent],
+  imports: [Counter],
   template: `
     <main>
       <h1>Counter: {{ initialCount }}</h1>
@@ -61,14 +61,14 @@ import { CounterComponent } from './counter/counter.component';
     </main>
   `,
 })
-export class AppComponent {
+export class App {
   initialCount = 18;
 }
 ```
 
 ```angular-ts
-// './counter/counter.component.ts';
-import { Component, model } from '@angular/core';
+// './counter.ts';
+import {Component, model} from '@angular/core';
 
 @Component({
   selector: 'app-counter',
@@ -78,11 +78,11 @@ import { Component, model } from '@angular/core';
     <button (click)="updateCount(+1)">+</button>
   `,
 })
-export class CounterComponent {
+export class Counter {
   count = model<number>(0);
 
   updateCount(amount: number): void {
-    this.count.update(currentCount => currentCount + amount);
+    this.count.update((currentCount) => currentCount + amount);
   }
 }
 ```
@@ -96,15 +96,17 @@ The child component must contain a `model` property.
 Here is a simplified example:
 
 ```angular-ts
-// './counter/counter.component.ts';
-import { Component, model } from '@angular/core';
+// './counter.ts';
+import {Component, model} from '@angular/core';
 
-@Component({ /* Omitted for brevity */ })
-export class CounterComponent {
+@Component({
+  /* Omitted for brevity */
+})
+export class Counter {
   count = model<number>(0);
 
   updateCount(amount: number): void {
-    this.count.update(currentCount => currentCount + amount);
+    this.count.update((currentCount) => currentCount + amount);
   }
 }
 ```
@@ -117,20 +119,20 @@ The parent component must:
 Here is a simplified example:
 
 ```angular-ts
-// ./app.component.ts
-import { Component } from '@angular/core';
-import { CounterComponent } from './counter/counter.component';
+// ./app.ts
+import {Component} from '@angular/core';
+import {Counter} from './counter';
 
 @Component({
   selector: 'app-root',
-  imports: [CounterComponent],
+  imports: [Counter],
   template: `
     <main>
       <app-counter [(count)]="initialCount"></app-counter>
     </main>
   `,
 })
-export class AppComponent {
+export class App {
   initialCount = 18;
 }
 ```
diff --git a/adev-ja/src/content/guide/templates/two-way-binding.md b/adev-ja/src/content/guide/templates/two-way-binding.md
index f77802cac..c504caf0a 100644
--- a/adev-ja/src/content/guide/templates/two-way-binding.md
+++ b/adev-ja/src/content/guide/templates/two-way-binding.md
@@ -13,8 +13,8 @@
 次の例では、ページの`firstName`属性が動的に更新されます。
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 
 @Component({
   imports: [FormsModule],
@@ -23,9 +23,9 @@ import { FormsModule } from '@angular/forms';
       <h2>Hello {{ firstName }}!</h2>
       <input type="text" [(ngModel)]="firstName" />
     </main>
-  `
+  `,
 })
-export class AppComponent {
+export class App {
   firstName = 'Ada';
 }
 ```
@@ -38,22 +38,22 @@ export class AppComponent {
 
 これらが設定されると、Angularはテキスト入力の更新がコンポーネントの状態に正しく反映されるようにします。
 
-[`NgModel`](guide/directives#displaying-and-updating-properties-with-ngmodel)の詳細については、公式ドキュメントを参照してください。
+[`NgModel`](/api/forms/NgModel)の詳細については、公式ドキュメントを参照してください。
 
 ## コンポーネント間の双方向バインディング
 
 親コンポーネントと子コンポーネント間の双方向バインディングを活用するには、フォーム要素と比較して、より多くの設定が必要です。
 
-ここでは、`AppComponent`が初期カウント状態を設定しますが、カウンターのUIを更新およびレンダリングするためのロジックは、主にその子である`CounterComponent`にある例を示します。
+ここでは、`App`が初期カウント状態を設定しますが、カウンターのUIを更新およびレンダリングするためのロジックは、主にその子である`Counter`にある例を示します。
 
 ```angular-ts
-// ./app.component.ts
-import { Component } from '@angular/core';
-import { CounterComponent } from './counter/counter.component';
+// ./app.ts
+import {Component} from '@angular/core';
+import {Counter} from './counter';
 
 @Component({
   selector: 'app-root',
-  imports: [CounterComponent],
+  imports: [Counter],
   template: `
     <main>
       <h1>Counter: {{ initialCount }}</h1>
@@ -61,14 +61,14 @@ import { CounterComponent } from './counter/counter.component';
     </main>
   `,
 })
-export class AppComponent {
+export class App {
   initialCount = 18;
 }
 ```
 
 ```angular-ts
-// './counter/counter.component.ts';
-import { Component, model } from '@angular/core';
+// './counter.ts';
+import {Component, model} from '@angular/core';
 
 @Component({
   selector: 'app-counter',
@@ -78,11 +78,11 @@ import { Component, model } from '@angular/core';
     <button (click)="updateCount(+1)">+</button>
   `,
 })
-export class CounterComponent {
+export class Counter {
   count = model<number>(0);
 
   updateCount(amount: number): void {
-    this.count.update(currentCount => currentCount + amount);
+    this.count.update((currentCount) => currentCount + amount);
   }
 }
 ```
@@ -96,15 +96,17 @@ export class CounterComponent {
 これは簡略化された例です。
 
 ```angular-ts
-// './counter/counter.component.ts';
-import { Component, model } from '@angular/core';
+// './counter.ts';
+import {Component, model} from '@angular/core';
 
-@Component({ /* Omitted for brevity */ })
-export class CounterComponent {
+@Component({
+  /* Omitted for brevity */
+})
+export class Counter {
   count = model<number>(0);
 
   updateCount(amount: number): void {
-    this.count.update(currentCount => currentCount + amount);
+    this.count.update((currentCount) => currentCount + amount);
   }
 }
 ```
@@ -117,20 +119,20 @@ export class CounterComponent {
 これは簡略化された例です。
 
 ```angular-ts
-// ./app.component.ts
-import { Component } from '@angular/core';
-import { CounterComponent } from './counter/counter.component';
+// ./app.ts
+import {Component} from '@angular/core';
+import {Counter} from './counter';
 
 @Component({
   selector: 'app-root',
-  imports: [CounterComponent],
+  imports: [Counter],
   template: `
     <main>
       <app-counter [(count)]="initialCount"></app-counter>
     </main>
   `,
 })
-export class AppComponent {
+export class App {
   initialCount = 18;
 }
 ```
diff --git a/adev-ja/src/content/guide/templates/variables.en.md b/adev-ja/src/content/guide/templates/variables.en.md
index 986058179..9e8f69d1c 100644
--- a/adev-ja/src/content/guide/templates/variables.en.md
+++ b/adev-ja/src/content/guide/templates/variables.en.md
@@ -8,7 +8,7 @@ Angular's `@let` syntax allows you to define a local variable and re-use it acro
 
 ### Using `@let`
 
-Use `@let` to declare a variable whose value is based on the result of a template expression. Angular automatically keeps the variable's value up-to-date with the given expression, similar to [bindings](./templates/bindings).
+Use `@let` to declare a variable whose value is based on the result of a template expression. Angular automatically keeps the variable's value up-to-date with the given expression, similar to [bindings](/guide/templates/binding).
 
 ```angular-html
 @let name = user.name;
@@ -16,9 +16,10 @@ Use `@let` to declare a variable whose value is based on the result of a templat
 @let data = data$ | async;
 @let pi = 3.14159;
 @let coordinates = {x: 50, y: 100};
-@let longExpression = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ' +
-                      'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
-                      'Ut enim ad minim veniam...';
+@let longExpression =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit ' +
+  'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
+  'Ut enim ad minim veniam...';
 ```
 
 Each `@let` block can declare exactly one variable. You cannot declare multiple variables in the same block with a comma.
@@ -31,12 +32,12 @@ Once you've declared a variable with `@let`, you can reuse it in the same templa
 @let user = user$ | async;
 
 @if (user) {
-  <h1>Hello, {{user.name}}</h1>
-  <user-avatar [photo]="user.photo"/>
+  <h1>Hello, {{ user.name }}</h1>
+  <user-avatar [photo]="user.photo" />
 
   <ul>
     @for (snack of user.favoriteSnacks; track snack.id) {
-      <li>{{snack.name}}</li>
+      <li>{{ snack.name }}</li>
     }
   </ul>
 
@@ -68,20 +69,25 @@ Since `@let` declarations are not hoisted, they **cannot** be accessed by parent
   @let insideDiv = value;
 </div>
 
-{{topLevel}} <!-- Valid -->
-{{insideDiv}} <!-- Valid -->
+<!-- Valid -->
+{{ topLevel }}
+<!-- Valid -->
+{{ insideDiv }}
 
 @if (condition) {
-  {{topLevel + insideDiv}} <!-- Valid -->
+  <!-- Valid -->
+  {{ topLevel + insideDiv }}
 
   @let nested = value;
 
   @if (condition) {
-    {{topLevel + insideDiv + nested}} <!-- Valid -->
+    <!-- Valid -->
+    {{ topLevel + insideDiv + nested }}
   }
 }
 
-{{nested}} <!-- Error, not hoisted from @if -->
+<!-- Error, not hoisted from @if -->
+{{ nested }}
 ```
 
 ### Full syntax
@@ -113,7 +119,7 @@ You can declare a variable on an element in a template by adding an attribute th
 
 ```angular-html
 <!-- Create a template reference variable named "taskInput", referring to the HTMLInputElement. -->
-<input #taskInput placeholder="Enter task name">
+<input #taskInput placeholder="Enter task name" />
 ```
 
 ### Assigning values to template reference variables
@@ -140,7 +146,7 @@ If you declare the variable on any other displayed element, the variable refers
 
 ```angular-html
 <!-- The "taskInput" variable refers to the HTMLInputElement instance. -->
-<input #taskInput placeholder="Enter task name">
+<input #taskInput placeholder="Enter task name" />
 ```
 
 #### Assigning a reference to an Angular directive
@@ -152,14 +158,16 @@ Angular directives may have an `exportAs` property that defines a name by which
   selector: '[dropZone]',
   exportAs: 'dropZone',
 })
-export class DropZone { /* ... */ }
+export class DropZone {
+  /* ... */
+}
 ```
 
 When you declare a template variable on an element, you can assign that variable a directive instance by specifying this `exportAs` name:
 
 ```angular-html
 <!-- The `firstZone` variable refers to the `DropZone` directive instance. -->
-<section dropZone #firstZone="dropZone"> ... </section>
+<section dropZone #firstZone="dropZone">...</section>
 ```
 
 You cannot refer to a directive that does not specify an `exportAs` name.
@@ -171,7 +179,7 @@ In addition to using template variables to read values from another part of the
 When you want to query for a specific element in a template, you can declare a template variable on that element and then query for the element based on the variable name.
 
 ```angular-html
- <input #description value="Original description">
+<input #description value="Original description" />
 ```
 
 ```angular-ts
diff --git a/adev-ja/src/content/guide/templates/variables.md b/adev-ja/src/content/guide/templates/variables.md
index 6b94f3f3d..c33c0b20e 100644
--- a/adev-ja/src/content/guide/templates/variables.md
+++ b/adev-ja/src/content/guide/templates/variables.md
@@ -8,7 +8,7 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 
 ### `@let` の使用方法
 
-`@let` を使用して、テンプレート式の結果に基づいた値を持つ変数を宣言します。 Angularは、[バインディング](./templates/bindings)と同様に、指定された式を使用して変数の値を自動的に最新の状態に保ちます。
+`@let` を使用して、テンプレート式の結果に基づいた値を持つ変数を宣言します。 Angularは、[バインディング](/guide/templates/binding)と同様に、指定された式を使用して変数の値を自動的に最新の状態に保ちます。
 
 ```angular-html
 @let name = user.name;
@@ -16,9 +16,10 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 @let data = data$ | async;
 @let pi = 3.14159;
 @let coordinates = {x: 50, y: 100};
-@let longExpression = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ' +
-                      'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
-                      'Ut enim ad minim veniam...';
+@let longExpression =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit ' +
+  'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
+  'Ut enim ad minim veniam...';
 ```
 
 各`@let`ブロックでは、ちょうど1つの変数を宣言できます。コンマを使用して同じブロックに複数の変数の宣言はできません。
@@ -31,12 +32,12 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 @let user = user$ | async;
 
 @if (user) {
-  <h1>Hello, {{user.name}}</h1>
-  <user-avatar [photo]="user.photo"/>
+  <h1>Hello, {{ user.name }}</h1>
+  <user-avatar [photo]="user.photo" />
 
   <ul>
     @for (snack of user.favoriteSnacks; track snack.id) {
-      <li>{{snack.name}}</li>
+      <li>{{ snack.name }}</li>
     }
   </ul>
 
@@ -68,20 +69,25 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
   @let insideDiv = value;
 </div>
 
-{{topLevel}} <!-- Valid -->
-{{insideDiv}} <!-- Valid -->
+<!-- Valid -->
+{{ topLevel }}
+<!-- Valid -->
+{{ insideDiv }}
 
 @if (condition) {
-  {{topLevel + insideDiv}} <!-- Valid -->
+  <!-- Valid -->
+  {{ topLevel + insideDiv }}
 
   @let nested = value;
 
   @if (condition) {
-    {{topLevel + insideDiv + nested}} <!-- Valid -->
+    <!-- Valid -->
+    {{ topLevel + insideDiv + nested }}
   }
 }
 
-{{nested}} <!-- Error, not hoisted from @if -->
+<!-- Error, not hoisted from @if -->
+{{ nested }}
 ```
 
 ### 構文全体
@@ -113,7 +119,7 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 
 ```angular-html
 <!-- "taskInput" という名前のテンプレート参照変数を、HTMLInputElementに関連付ける -->
-<input #taskInput placeholder="Enter task name">
+<input #taskInput placeholder="Enter task name" />
 ```
 
 ### テンプレート参照変数に値を代入する
@@ -140,7 +146,7 @@ Angularは、変数が宣言されている要素に基づいて、テンプレ
 
 ```angular-html
 <!-- "taskInput" 変数は、HTMLInputElement インスタンスを参照します。 -->
-<input #taskInput placeholder="Enter task name">
+<input #taskInput placeholder="Enter task name" />
 ```
 
 #### Angularディレクティブへの参照を代入する
@@ -152,14 +158,16 @@ Angularディレクティブには、テンプレートでディレクティブ
   selector: '[dropZone]',
   exportAs: 'dropZone',
 })
-export class DropZone { /* ... */ }
+export class DropZone {
+  /* ... */
+}
 ```
 
 要素にテンプレート変数を宣言する場合、この `exportAs` 名を指定することで、変数にディレクティブインスタンスを代入できます。
 
 ```angular-html
 <!-- `firstZone` 変数は、`DropZone` ディレクティブインスタンスを参照します。 -->
-<section dropZone #firstZone="dropZone"> ... </section>
+<section dropZone #firstZone="dropZone">...</section>
 ```
 
 `exportAs` 名を指定していないディレクティブは参照できません。
@@ -171,7 +179,7 @@ export class DropZone { /* ... */ }
 テンプレート内の特定の要素をクエリする場合は、その要素にテンプレート変数を宣言し、変数名に基づいて要素をクエリできます。
 
 ```angular-html
- <input #description value="Original description">
+<input #description value="Original description" />
 ```
 
 ```angular-ts

From c9b7620b27529268399e953514de745201da0f9d Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 09:24:07 +0900
Subject: [PATCH 27/55] fix(docs): migrate components changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- anatomy-of-components, inheritance, inputs, queries
- programmatic-rendering: Add new sections (+178 lines)
- Component name simplification (e.g., UserDetailComponent → UserDetail)
---
 .../components/anatomy-of-components.en.md    |  24 ++-
 .../guide/components/anatomy-of-components.md |  26 +--
 .../guide/components/inheritance.en.md        |  30 +--
 .../content/guide/components/inheritance.md   |  30 +--
 .../src/content/guide/components/inputs.en.md |  28 +--
 .../src/content/guide/components/inputs.md    |  32 ++--
 .../components/programmatic-rendering.en.md   | 178 +++++++++++++++---
 .../components/programmatic-rendering.md      | 178 +++++++++++++++---
 .../content/guide/components/queries.en.md    |  66 ++++---
 .../src/content/guide/components/queries.md   |  30 ++-
 10 files changed, 459 insertions(+), 163 deletions(-)

diff --git a/adev-ja/src/content/guide/components/anatomy-of-components.en.md b/adev-ja/src/content/guide/components/anatomy-of-components.en.md
index c9732799a..1bb8e6ae9 100644
--- a/adev-ja/src/content/guide/components/anatomy-of-components.en.md
+++ b/adev-ja/src/content/guide/components/anatomy-of-components.en.md
@@ -14,9 +14,9 @@ You provide Angular-specific information for a component by adding a `@Component
 ```angular-ts {highlight: [1, 2, 3, 4]}
 @Component({
   selector: 'profile-photo',
-  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
+  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 For full details on writing Angular templates, including data binding, event handling, and control flow, see the [Templates guide](guide/templates).
@@ -28,10 +28,14 @@ Components can optionally include a list of CSS styles that apply to that compon
 ```angular-ts {highlight: [4]}
 @Component({
   selector: 'profile-photo',
-  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
-  styles: `img { border-radius: 50%; }`,
+  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
+  styles: `
+    img {
+      border-radius: 50%;
+    }
+  `,
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 By default, a component's styles only affect elements defined in that component's template. See [Styling Components](guide/components/styling) for details on Angular's approach to styling.
@@ -70,7 +74,7 @@ import {ProfilePhoto} from './profile-photo';
 export class UserProfile {}
 ```
 
-By default, Angular components are _standalone_, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules) for details.
+By default, Angular components are _standalone_, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules/overview) for details.
 
 Important: In Angular versions before 19.0.0, the `standalone` option defaults to `false`.
 
@@ -94,13 +98,13 @@ You show a component by creating a matching HTML element in the template of _oth
 @Component({
   selector: 'profile-photo',
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 
 @Component({
-imports: [ProfilePhoto],
-template: `<profile-photo />`
+  imports: [ProfilePhoto],
+  template: `<profile-photo />`,
 })
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 Angular creates an instance of the component for every matching HTML element it encounters. The DOM element that matches a component's selector is referred to as that component's **host element**. The contents of a component's template are rendered inside its host element.
diff --git a/adev-ja/src/content/guide/components/anatomy-of-components.md b/adev-ja/src/content/guide/components/anatomy-of-components.md
index 53464d688..ff31ad1d4 100644
--- a/adev-ja/src/content/guide/components/anatomy-of-components.md
+++ b/adev-ja/src/content/guide/components/anatomy-of-components.md
@@ -14,9 +14,9 @@ TypeScriptクラスの上部に `@Component` [デコレーター](https://www.ty
 ```angular-ts {highlight: [1, 2, 3, 4]}
 @Component({
   selector: 'profile-photo',
-  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
+  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 データバインディング、イベント処理、制御フローなど、Angularテンプレート作成に関する詳細は、[テンプレートガイド](guide/templates)を参照してください。
@@ -28,10 +28,14 @@ export class ProfilePhoto { }
 ```angular-ts {highlight: [4]}
 @Component({
   selector: 'profile-photo',
-  template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
-  styles: `img { border-radius: 50%; }`,
+  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
+  styles: `
+    img {
+      border-radius: 50%;
+    }
+  `,
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 デフォルトでは、コンポーネントのスタイルは、そのコンポーネントのテンプレートで定義された要素にのみ影響を与えます。Angularのスタイリングアプローチの詳細については、[コンポーネントのスタイリング](guide/components/styling)を参照してください。
@@ -70,7 +74,7 @@ import {ProfilePhoto} from './profile-photo';
 export class UserProfile {}
 ```
 
-デフォルトでは、Angularコンポーネントは*スタンドアロン*です。つまり、他のコンポーネントの`imports`配列に直接追加できます。以前のバージョンのAngularで作成されたコンポーネントは、代わりに`@Component`デコレーターで`standalone: false`を指定している場合があります。これらのコンポーネントの場合、代わりにコンポーネントが定義されている`NgModule`をインポートします。詳細は、完全な[`NgModule`ガイド](guide/ngmodules)を参照してください。
+デフォルトでは、Angularコンポーネントは*スタンドアロン*です。つまり、他のコンポーネントの`imports`配列に直接追加できます。以前のバージョンのAngularで作成されたコンポーネントは、代わりに`@Component`デコレーターで`standalone: false`を指定している場合があります。これらのコンポーネントの場合、代わりにコンポーネントが定義されている`NgModule`をインポートします。詳細は、完全な[`NgModule`ガイド](guide/ngmodules/overview)を参照してください。
 
 IMPORTANT: 19.0.0より前のAngularバージョンでは、`standalone`オプションはデフォルトで`false`です。
 
@@ -83,7 +87,7 @@ IMPORTANT: 19.0.0より前のAngularバージョンでは、`standalone`オプ
   selector: 'profile-photo',
   ...
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 ```
 
 Angularがサポートするセレクターの種類と、セレクターの選択に関するガイダンスについては、[コンポーネントセレクター](guide/components/selectors)を参照してください。
@@ -94,13 +98,13 @@ _他の_コンポーネントのテンプレートで一致するHTML要素を
 @Component({
   selector: 'profile-photo',
 })
-export class ProfilePhoto { }
+export class ProfilePhoto {}
 
 @Component({
-imports: [ProfilePhoto],
-template: `<profile-photo />`
+  imports: [ProfilePhoto],
+  template: `<profile-photo />`,
 })
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 Angularは、遭遇する一致するHTML要素ごとにコンポーネントのインスタンスを作成します。コンポーネントのセレクターと一致するDOM要素は、そのコンポーネントの**ホスト要素**と呼ばれます。コンポーネントのテンプレートの内容はそのホスト要素内にレンダリングされます。
diff --git a/adev-ja/src/content/guide/components/inheritance.en.md b/adev-ja/src/content/guide/components/inheritance.en.md
index b11af7e58..78dbda57c 100644
--- a/adev-ja/src/content/guide/components/inheritance.en.md
+++ b/adev-ja/src/content/guide/components/inheritance.en.md
@@ -12,7 +12,9 @@ export class ListboxBase {
   value: string;
 }
 
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class CustomListbox extends ListboxBase {
   // CustomListbox inherits the `value` property.
 }
@@ -27,9 +29,7 @@ host bindings, inputs, outputs, lifecycle methods.
 ```angular-ts
 @Component({
   selector: 'base-listbox',
-  template: `
-    ...
-  `,
+  template: ` ... `,
   host: {
     '(keydown)': 'handleKey($event)',
   },
@@ -43,9 +43,7 @@ export class ListboxBase {
 
 @Component({
   selector: 'custom-listbox',
-  template: `
-    ...
-  `,
+  template: ` ... `,
   host: {
     '(click)': 'focusActiveOption()',
   },
@@ -70,12 +68,16 @@ and their own.
 If a base class injects dependencies as constructor parameters, the child class must explicitly class these dependencies to `super`.
 
 ```ts
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class ListboxBase {
-  constructor(private element: ElementRef) { }
+  constructor(private element: ElementRef) {}
 }
 
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class CustomListbox extends ListboxBase {
   constructor(element: ElementRef) {
     super(element);
@@ -90,7 +92,9 @@ implements `ngOnInit` _overrides_ the base class's implementation. If you want t
 class's lifecycle method, explicitly call the method with `super`:
 
 ```ts
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class ListboxBase {
   protected isInitialized = false;
   ngOnInit() {
@@ -98,7 +102,9 @@ export class ListboxBase {
   }
 }
 
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class CustomListbox extends ListboxBase {
   override ngOnInit() {
     super.ngOnInit();
diff --git a/adev-ja/src/content/guide/components/inheritance.md b/adev-ja/src/content/guide/components/inheritance.md
index 426d2e690..6b815c5b5 100644
--- a/adev-ja/src/content/guide/components/inheritance.md
+++ b/adev-ja/src/content/guide/components/inheritance.md
@@ -12,7 +12,9 @@ export class ListboxBase {
   value: string;
 }
 
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class CustomListbox extends ListboxBase {
   // CustomListboxは`value`プロパティを継承します。
 }
@@ -27,9 +29,7 @@ export class CustomListbox extends ListboxBase {
 ```angular-ts
 @Component({
   selector: 'base-listbox',
-  template: `
-    ...
-  `,
+  template: ` ... `,
   host: {
     '(keydown)': 'handleKey($event)',
   },
@@ -43,9 +43,7 @@ export class ListboxBase {
 
 @Component({
   selector: 'custom-listbox',
-  template: `
-    ...
-  `,
+  template: ` ... `,
   host: {
     '(click)': 'focusActiveOption()',
   },
@@ -70,12 +68,16 @@ export class CustomListbox extends ListboxBase {
 もし基底クラスがコンストラクターのパラメーターとして依存性を注入している場合、子クラスではその依存性を明示的にsuper()に渡す必要があります。
 
 ```ts
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class ListboxBase {
-  constructor(private element: ElementRef) { }
+  constructor(private element: ElementRef) {}
 }
 
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class CustomListbox extends ListboxBase {
   constructor(element: ElementRef) {
     super(element);
@@ -90,7 +92,9 @@ export class CustomListbox extends ListboxBase {
 基底クラスのライフサイクルメソッドを保持したい場合は、`super`で明示的にメソッドを呼び出します。
 
 ```ts
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class ListboxBase {
   protected isInitialized = false;
   ngOnInit() {
@@ -98,7 +102,9 @@ export class ListboxBase {
   }
 }
 
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class CustomListbox extends ListboxBase {
   override ngOnInit() {
     super.ngOnInit();
diff --git a/adev-ja/src/content/guide/components/inputs.en.md b/adev-ja/src/content/guide/components/inputs.en.md
index 0b2d8236f..0321d2ae5 100644
--- a/adev-ja/src/content/guide/components/inputs.en.md
+++ b/adev-ja/src/content/guide/components/inputs.en.md
@@ -7,7 +7,7 @@ TIP: If you're familiar with other web frameworks, input properties are similar
 When you use a component, you commonly want to pass some data to it. A component specifies the data that it accepts by declaring
 **inputs**:
 
-```ts {highlight:[5]}
+```ts {highlight:[8]}
 import {Component, input} from '@angular/core';
 
 @Component({
@@ -63,7 +63,7 @@ When extending a component class, **inputs are inherited by the child class.**
 
 The `input` function returns an `InputSignal`. You can read the value by calling the signal:
 
-```ts {highlight:[5]}
+```ts {highlight:[11]}
 import {Component, input, computed} from '@angular/core';
 
 @Component({
@@ -84,7 +84,7 @@ Signals created by the `input` function are read-only.
 
 You can declare that an input is `required` by calling `input.required` instead of `input`:
 
-```ts {highlight:[3]}
+```ts {highlight:[6]}
 @Component({
   /*...*/
 })
@@ -176,7 +176,7 @@ _presence_ of the attribute indicates a "true" value. However, Angular's `boolea
 
 You can specify the `alias` option to change the name of an input in templates.
 
-```ts {highlight:[3]}
+```ts {highlight:[5]}
 @Component({
   /*...*/
 })
@@ -273,7 +273,7 @@ See [Custom events with outputs](guide/components/outputs) for more details on o
 
 ### Customizing model inputs
 
-You can mark a model input as required or provide an alias in the same way as a [standard input](guide/signals/inputs).
+You can mark a model input as required or provide an alias in the same way as a [standard input](guide/components/inputs).
 
 Model inputs do not support input transforms.
 
@@ -293,8 +293,10 @@ TIP: While the Angular team recommends using the signal-based `input` function f
 
 You can alternatively declare component inputs by adding the `@Input` decorator to a property:
 
-```ts {highlight:[3]}
-@Component({...})
+```ts {highlight:[5]}
+@Component({
+  /*...*/
+})
 export class CustomSlider {
   @Input() value = 0;
 }
@@ -314,8 +316,10 @@ The `@Input` decorator accepts a config object that lets you change the way that
 
 You can specify the `required` option to enforce that a given input must always have a value.
 
-```ts {highlight:[3]}
-@Component({...})
+```ts {highlight:[5]}
+@Component({
+  /*...*/
+})
 export class CustomSlider {
   @Input({required: true}) value = 0;
 }
@@ -345,8 +349,10 @@ function trimString(value: string | undefined) {
 
 You can specify the `alias` option to change the name of an input in templates.
 
-```ts {highlight:[3]}
-@Component({...})
+```ts {highlight:[5]}
+@Component({
+  /*...*/
+})
 export class CustomSlider {
   @Input({alias: 'sliderValue'}) value = 0;
 }
diff --git a/adev-ja/src/content/guide/components/inputs.md b/adev-ja/src/content/guide/components/inputs.md
index 52574fc20..8556f71f0 100644
--- a/adev-ja/src/content/guide/components/inputs.md
+++ b/adev-ja/src/content/guide/components/inputs.md
@@ -7,7 +7,7 @@ TIP: 他のウェブフレームワークに精通している場合は、入力
 コンポーネントを使用する際に、一般的にいくつかのデータを渡したいことがあります。
 コンポーネントは、**入力**を宣言することで、受け入れるデータを指定します。
 
-```ts {highlight:[5]}
+```ts {highlight:[8]}
 import {Component, input} from '@angular/core';
 
 @Component({
@@ -63,7 +63,7 @@ export class CustomSlider {
 
 `input`関数は`InputSignal`を返します。シグナルを呼び出すことで値を読み取ることができます。
 
-```ts {highlight:[5]}
+```ts {highlight:[11]}
 import {Component, input, computed} from '@angular/core';
 
 @Component({
@@ -84,7 +84,7 @@ export class CustomSlider {
 
 `input`の代わりに`input.required`を呼び出すことで、入力が`required`であることを宣言できます。
 
-```ts {highlight:[3]}
+```ts {highlight:[6]}
 @Component({
   /*...*/
 })
@@ -176,7 +176,7 @@ export class CustomSlider {
 
 `alias`オプションを指定して、テンプレートでの入力の名前を変更できます。
 
-```ts {highlight:[3]}
+```ts {highlight:[5]}
 @Component({
   /*...*/
 })
@@ -273,7 +273,7 @@ export class CustomCheckbox {
 
 ### モデル入力のカスタマイズ
 
-[通常の入力](guide/signals/inputs)と同様に、モデル入力を必須としてマークしたり、エイリアスを提供したりできます。
+[通常の入力](guide/components/inputs)と同様に、モデル入力を必須としてマークしたり、エイリアスを提供したりできます。
 
 モデル入力は入力変換をサポートしません。
 
@@ -293,12 +293,14 @@ TIP: Angularチームは新しいプロジェクトにはシグナルベース
 
 コンポーネント入力を宣言する代わりに、プロパティに`@Input`デコレーターを追加できます。
 
-<docs-code language="ts" highlight="[3]">
-@Component({...})
+```ts {highlight:[5]}
+@Component({
+  /*...*/
+})
 export class CustomSlider {
   @Input() value = 0;
 }
-</docs-code>
+```
 
 入力へのバインディングは、シグナルベースの入力とデコレーターベースの入力の両方で同じです。
 
@@ -314,12 +316,14 @@ export class CustomSlider {
 
 `required`オプションを指定して、特定の入力が常に値を持つ必要があることを強制できます。
 
-<docs-code language="ts" highlight="[3]">
-@Component({...})
+```ts {highlight:[5]}
+@Component({
+  /*...*/
+})
 export class CustomSlider {
   @Input({required: true}) value = 0;
 }
-</docs-code>
+```
 
 すべての必須入力を指定せずにコンポーネントを使用しようとすると、Angularはビルド時にエラーを報告します。
 
@@ -345,8 +349,10 @@ function trimString(value: string | undefined) {
 
 `alias`オプションを指定して、テンプレートでの入力の名前を変更できます。
 
-```ts {highlight:[3]}
-@Component({...})
+```ts {highlight:[5]}
+@Component({
+  /*...*/
+})
 export class CustomSlider {
   @Input({alias: 'sliderValue'}) value = 0;
 }
diff --git a/adev-ja/src/content/guide/components/programmatic-rendering.en.md b/adev-ja/src/content/guide/components/programmatic-rendering.en.md
index f1d2a2f05..93b851af6 100644
--- a/adev-ja/src/content/guide/components/programmatic-rendering.en.md
+++ b/adev-ja/src/content/guide/components/programmatic-rendering.en.md
@@ -20,10 +20,10 @@ chunks automatically and loaded only when necessary, based on the configured tri
 template.
 
 ```angular-ts
-@Component({ ... })
+@Component({/*...*/})
 export class AdminBio { /* ... */ }
 
-@Component({ ... })
+@Component({/*...*/})
 export class StandardBio { /* ... */ }
 
 @Component({
@@ -41,6 +41,144 @@ export class CustomDialog {
 }
 ```
 
+### Passing inputs to dynamically rendered components
+
+You can pass inputs to the dynamically rendered component using the `ngComponentOutletInputs` property. This property accepts an object where keys are input names and values are the input values.
+
+```angular-ts
+@Component({
+  selector: 'user-greeting',
+  template: `
+    <div>
+      <p>User: {{ username() }}</p>
+      <p>Role: {{ role() }}</p>
+    </div>
+  `,
+})
+export class UserGreeting {
+  username = input.required<string>();
+  role = input('guest');
+}
+
+@Component({
+  selector: 'profile-view',
+  imports: [NgComponentOutlet],
+  template: `<ng-container *ngComponentOutlet="greetingComponent; inputs: greetingInputs()" />`,
+})
+export class ProfileView {
+  greetingComponent = UserGreeting;
+  greetingInputs = signal({username: 'ngAwesome', role: 'admin'});
+}
+```
+
+The inputs are updated whenever the `greetingInputs` signal changes, keeping the dynamic component in sync with the parent's state.
+
+### Providing content projection
+
+Use `ngComponentOutletContent` to pass projected content to the dynamically rendered component. This is useful when the dynamic component uses `<ng-content>` to display content.
+
+```angular-ts
+@Component({
+  selector: 'card-wrapper',
+  template: `
+    <div class="card">
+      <ng-content />
+    </div>
+  `,
+})
+export class CardWrapper {}
+
+@Component({
+  imports: [NgComponentOutlet],
+  template: `
+    <ng-container *ngComponentOutlet="cardComponent; content: cardContent()" />
+
+    <ng-template #contentTemplate>
+      <h3>Dynamic Content</h3>
+      <p>This content is projected into the card.</p>
+    </ng-template>
+  `,
+})
+export class DynamicCard {
+  private vcr = inject(ViewContainerRef);
+  cardComponent = CardWrapper;
+
+  private contentTemplate = viewChild<TemplateRef<unknown>>('contentTemplate');
+
+  cardContent = computed(() => {
+    const template = this.contentTemplate();
+    if (!template) return [];
+    // Returns an array of projection slots. Each element represents one <ng-content> slot.
+    // CardWrapper has one <ng-content>, so we return an array with one element.
+    return [this.vcr.createEmbeddedView(template).rootNodes];
+  });
+}
+```
+
+NOTE: Hydration does not support projecting DOM nodes created with native DOM APIs. This causes an [NG0503 error](/errors/NG0503). Use Angular APIs to create projected content or add `ngSkipHydration` to the component.
+
+### Providing injectors
+
+You can provide a custom injector to the dynamically created component using `ngComponentOutletInjector`. This is useful for providing component-specific services or configuration.
+
+```angular-ts
+export const THEME_DATA = new InjectionToken<string>('THEME_DATA', {
+  factory: () => 'light',
+});
+
+@Component({
+  selector: 'themed-panel',
+  template: `<div [class]="theme">...</div>`,
+})
+export class ThemedPanel {
+  theme = inject(THEME_DATA);
+}
+
+@Component({
+  selector: 'dynamic-panel',
+  imports: [NgComponentOutlet],
+  template: `<ng-container *ngComponentOutlet="panelComponent; injector: customInjector" />`,
+})
+export class DynamicPanel {
+  panelComponent = ThemedPanel;
+
+  customInjector = Injector.create({
+    providers: [{provide: THEME_DATA, useValue: 'dark'}],
+  });
+}
+```
+
+### Accessing the component instance
+
+You can access the dynamically created component's instance using the directive's `exportAs` feature:
+
+```angular-ts
+@Component({
+  selector: 'counter',
+  template: `<p>Count: {{ count() }}</p>`,
+})
+export class Counter {
+  count = signal(0);
+  increment() {
+    this.count.update((c) => c + 1);
+  }
+}
+
+@Component({
+  imports: [NgComponentOutlet],
+  template: `
+    <ng-container [ngComponentOutlet]="counterComponent" #outlet="ngComponentOutlet" />
+
+    <button (click)="outlet.componentInstance?.increment()">Increment</button>
+  `,
+})
+export class CounterHost {
+  counterComponent = Counter;
+}
+```
+
+NOTE: The `componentInstance` property is `null` before the component is rendered.
+
 See the [NgComponentOutlet API reference](api/common/NgComponentOutlet) for more information on the
 directive's capabilities.
 
@@ -57,9 +195,7 @@ DOM as the next sibling of the component or directive that injected the `ViewCon
 ```angular-ts
 @Component({
   selector: 'leaf-content',
-  template: `
-    This is the leaf content
-  `,
+  template: `This is the leaf content`,
 })
 export class LeafContent {}
 
@@ -75,9 +211,7 @@ export class OuterContainer {}
 
 @Component({
   selector: 'inner-item',
-  template: `
-    <button (click)="loadContent()">Load content</button>
-  `,
+  template: `<button (click)="loadContent()">Load content</button>`,
 })
 export class InnerItem {
   private viewContainer = inject(ViewContainerRef);
@@ -153,20 +287,20 @@ To simplify this, both `createComponent` and `ViewContainerRef.createComponent`
 By contrast, the standalone `createComponent` API does not attach the new component to any existing view or DOM location — it returns a `ComponentRef` and gives you explicit control over where to place the component’s host element.
 
 ```angular-ts
-import { Component, input, model, output } from "@angular/core";
+import {Component, input, model, output} from '@angular/core';
 
 @Component({
   selector: 'app-warning',
   template: `
-      @if(isExpanded()) {
-        <section>
-            <p>Warning: Action needed!</p>
-            <button (click)="close.emit(true)">Close</button>
-        </section>
-      }
-  `
+    @if (isExpanded()) {
+      <section>
+        <p>Warning: Action needed!</p>
+        <button (click)="close.emit(true)">Close</button>
+      </section>
+    }
+  `,
 })
-export class AppWarningComponent {
+export class AppWarning {
   readonly canClose = input.required<boolean>();
   readonly isExpanded = model<boolean>();
   readonly close = output<boolean>();
@@ -189,13 +323,13 @@ import {ThemeDirective} from '../theme.directive';
 @Component({
   template: `<ng-container #container />`,
 })
-export class HostComponent {
+export class Host {
   private vcr = inject(ViewContainerRef);
   readonly canClose = signal(true);
   readonly isExpanded = signal(true);
 
   showWarning() {
-    const compRef = this.vcr.createComponent(AppWarningComponent, {
+    const compRef = this.vcr.createComponent(AppWarning, {
       bindings: [
         inputBinding('canClose', this.canClose),
         twoWayBinding('isExpanded', this.isExpanded),
@@ -212,7 +346,7 @@ export class HostComponent {
 }
 ```
 
-In the example above, the dynamic **AppWarningComponent** is created with its `canClose` input bound to a reactive signal, a two-way binding on its `isExpanded` state, and an output listener for `close`. The `FocusTrap` and `ThemeDirective` are attached to the host element via `directives`.
+In the example above, the dynamic **AppWarning** is created with its `canClose` input bound to a reactive signal, a two-way binding on its `isExpanded` state, and an output listener for `close`. The `FocusTrap` and `ThemeDirective` are attached to the host element via `directives`.
 
 ### Popup attached to `document.body` with `createComponent` + `hostElement`
 
@@ -228,7 +362,7 @@ import {
   inputBinding,
   outputBinding,
 } from '@angular/core';
-import {PopupComponent} from './popup.component';
+import {Popup} from './popup';
 
 @Injectable({providedIn: 'root'})
 export class PopupService {
@@ -240,7 +374,7 @@ export class PopupService {
     const host = document.createElement('popup-host');
 
     // Create the component and bind in one call
-    const ref = createComponent(PopupComponent, {
+    const ref = createComponent(Popup, {
       environmentInjector: this.injector,
       hostElement: host,
       bindings: [
diff --git a/adev-ja/src/content/guide/components/programmatic-rendering.md b/adev-ja/src/content/guide/components/programmatic-rendering.md
index 1d7631d64..2c5851e30 100644
--- a/adev-ja/src/content/guide/components/programmatic-rendering.md
+++ b/adev-ja/src/content/guide/components/programmatic-rendering.md
@@ -20,10 +20,10 @@ HELPFUL: 遅延読み込みのユースケース(たとえば、重いコンポ
 構造ディレクティブです。
 
 ```angular-ts
-@Component({ ... })
+@Component({/*...*/})
 export class AdminBio { /* ... */ }
 
-@Component({ ... })
+@Component({/*...*/})
 export class StandardBio { /* ... */ }
 
 @Component({
@@ -41,6 +41,144 @@ export class CustomDialog {
 }
 ```
 
+### 動的にレンダリングされたコンポーネントへのインプットの渡し方
+
+`ngComponentOutletInputs`プロパティを使用して、動的にレンダリングされたコンポーネントにインプットを渡すことができます。このプロパティは、キーがインプット名で値がインプット値であるオブジェクトを受け入れます。
+
+```angular-ts
+@Component({
+  selector: 'user-greeting',
+  template: `
+    <div>
+      <p>User: {{ username() }}</p>
+      <p>Role: {{ role() }}</p>
+    </div>
+  `,
+})
+export class UserGreeting {
+  username = input.required<string>();
+  role = input('guest');
+}
+
+@Component({
+  selector: 'profile-view',
+  imports: [NgComponentOutlet],
+  template: `<ng-container *ngComponentOutlet="greetingComponent; inputs: greetingInputs()" />`,
+})
+export class ProfileView {
+  greetingComponent = UserGreeting;
+  greetingInputs = signal({username: 'ngAwesome', role: 'admin'});
+}
+```
+
+インプットは`greetingInputs`シグナルが変更されるたびに更新され、動的コンポーネントを親の状態と同期させます。
+
+### コンテンツプロジェクションの提供
+
+`ngComponentOutletContent`を使用して、動的にレンダリングされたコンポーネントにプロジェクトされたコンテンツを渡すことができます。これは、動的コンポーネントが`<ng-content>`を使用してコンテンツを表示する場合に便利です。
+
+```angular-ts
+@Component({
+  selector: 'card-wrapper',
+  template: `
+    <div class="card">
+      <ng-content />
+    </div>
+  `,
+})
+export class CardWrapper {}
+
+@Component({
+  imports: [NgComponentOutlet],
+  template: `
+    <ng-container *ngComponentOutlet="cardComponent; content: cardContent()" />
+
+    <ng-template #contentTemplate>
+      <h3>Dynamic Content</h3>
+      <p>This content is projected into the card.</p>
+    </ng-template>
+  `,
+})
+export class DynamicCard {
+  private vcr = inject(ViewContainerRef);
+  cardComponent = CardWrapper;
+
+  private contentTemplate = viewChild<TemplateRef<unknown>>('contentTemplate');
+
+  cardContent = computed(() => {
+    const template = this.contentTemplate();
+    if (!template) return [];
+    // Returns an array of projection slots. Each element represents one <ng-content> slot.
+    // CardWrapper has one <ng-content>, so we return an array with one element.
+    return [this.vcr.createEmbeddedView(template).rootNodes];
+  });
+}
+```
+
+NOTE: Hydrationは、ネイティブDOM APIで作成されたDOMノードのプロジェクションをサポートしていません。これにより[NG0503エラー](/errors/NG0503)が発生します。Angular APIを使用してプロジェクトされたコンテンツを作成するか、コンポーネントに`ngSkipHydration`を追加してください。
+
+### インジェクターの提供
+
+`ngComponentOutletInjector`を使用して、動的に作成されたコンポーネントにカスタムインジェクターを提供できます。これは、コンポーネント固有のサービスや設定を提供する場合に便利です。
+
+```angular-ts
+export const THEME_DATA = new InjectionToken<string>('THEME_DATA', {
+  factory: () => 'light',
+});
+
+@Component({
+  selector: 'themed-panel',
+  template: `<div [class]="theme">...</div>`,
+})
+export class ThemedPanel {
+  theme = inject(THEME_DATA);
+}
+
+@Component({
+  selector: 'dynamic-panel',
+  imports: [NgComponentOutlet],
+  template: `<ng-container *ngComponentOutlet="panelComponent; injector: customInjector" />`,
+})
+export class DynamicPanel {
+  panelComponent = ThemedPanel;
+
+  customInjector = Injector.create({
+    providers: [{provide: THEME_DATA, useValue: 'dark'}],
+  });
+}
+```
+
+### コンポーネントインスタンスへのアクセス
+
+ディレクティブの`exportAs`機能を使用して、動的に作成されたコンポーネントのインスタンスにアクセスできます。
+
+```angular-ts
+@Component({
+  selector: 'counter',
+  template: `<p>Count: {{ count() }}</p>`,
+})
+export class Counter {
+  count = signal(0);
+  increment() {
+    this.count.update((c) => c + 1);
+  }
+}
+
+@Component({
+  imports: [NgComponentOutlet],
+  template: `
+    <ng-container [ngComponentOutlet]="counterComponent" #outlet="ngComponentOutlet" />
+
+    <button (click)="outlet.componentInstance?.increment()">Increment</button>
+  `,
+})
+export class CounterHost {
+  counterComponent = Counter;
+}
+```
+
+NOTE: `componentInstance`プロパティは、コンポーネントがレンダリングされる前は`null`です。
+
 ディレクティブの機能の詳細については、[NgComponentOutlet APIリファレンス](api/common/NgComponentOutlet)を
 参照してください。
 
@@ -57,9 +195,7 @@ export class CustomDialog {
 ```angular-ts
 @Component({
   selector: 'leaf-content',
-  template: `
-    This is the leaf content
-  `,
+  template: `This is the leaf content`,
 })
 export class LeafContent {}
 
@@ -75,9 +211,7 @@ export class OuterContainer {}
 
 @Component({
   selector: 'inner-item',
-  template: `
-    <button (click)="loadContent()">Load content</button>
-  `,
+  template: `<button (click)="loadContent()">Load content</button>`,
 })
 export class InnerItem {
   private viewContainer = inject(ViewContainerRef);
@@ -153,20 +287,20 @@ export class AdminSettings {
 コンポーネントのホスト要素を配置する場所を明示的に制御できます。
 
 ```angular-ts
-import { Component, input, model, output } from "@angular/core";
+import {Component, input, model, output} from '@angular/core';
 
 @Component({
   selector: 'app-warning',
   template: `
-      @if(isExpanded()) {
-        <section>
-            <p>Warning: Action needed!</p>
-            <button (click)="close.emit(true)">Close</button>
-        </section>
-      }
-  `
+    @if (isExpanded()) {
+      <section>
+        <p>Warning: Action needed!</p>
+        <button (click)="close.emit(true)">Close</button>
+      </section>
+    }
+  `,
 })
-export class AppWarningComponent {
+export class AppWarning {
   readonly canClose = input.required<boolean>();
   readonly isExpanded = model<boolean>();
   readonly close = output<boolean>();
@@ -189,13 +323,13 @@ import {ThemeDirective} from '../theme.directive';
 @Component({
   template: `<ng-container #container />`,
 })
-export class HostComponent {
+export class Host {
   private vcr = inject(ViewContainerRef);
   readonly canClose = signal(true);
   readonly isExpanded = signal(true);
 
   showWarning() {
-    const compRef = this.vcr.createComponent(AppWarningComponent, {
+    const compRef = this.vcr.createComponent(AppWarning, {
       bindings: [
         inputBinding('canClose', this.canClose),
         twoWayBinding('isExpanded', this.isExpanded),
@@ -212,7 +346,7 @@ export class HostComponent {
 }
 ```
 
-上記の例では、動的な**AppWarningComponent**は、`canClose`インプットがリアクティブシグナルにバインドされ、`isExpanded`状態で双方向バインディングが行われ、`close`のアウトプットリスナーが設定されて作成されます。`FocusTrap`と`ThemeDirective`は、`directives`を介してホスト要素にアタッチされます。
+上記の例では、動的な**AppWarning**は、`canClose`インプットがリアクティブシグナルにバインドされ、`isExpanded`状態で双方向バインディングが行われ、`close`のアウトプットリスナーが設定されて作成されます。`FocusTrap`と`ThemeDirective`は、`directives`を介してホスト要素にアタッチされます。
 
 ### `createComponent` + `hostElement`で`document.body`にアタッチされたポップアップ
 
@@ -228,7 +362,7 @@ import {
   inputBinding,
   outputBinding,
 } from '@angular/core';
-import {PopupComponent} from './popup.component';
+import {Popup} from './popup';
 
 @Injectable({providedIn: 'root'})
 export class PopupService {
@@ -240,7 +374,7 @@ export class PopupService {
     const host = document.createElement('popup-host');
 
     // コンポーネントを作成し、1回の呼び出しでバインド
-    const ref = createComponent(PopupComponent, {
+    const ref = createComponent(Popup, {
       environmentInjector: this.injector,
       hostElement: host,
       bindings: [
diff --git a/adev-ja/src/content/guide/components/queries.en.md b/adev-ja/src/content/guide/components/queries.en.md
index 512067b0f..b76607661 100644
--- a/adev-ja/src/content/guide/components/queries.en.md
+++ b/adev-ja/src/content/guide/components/queries.en.md
@@ -58,7 +58,7 @@ export class CustomCardAction {
 })
 export class CustomCard {
   actions = viewChildren(CustomCardAction);
-  actionsTexts = computed(() => this.actions().map(action => action.text));
+  actionsTexts = computed(() => this.actions().map((action) => action.text));
 }
 ```
 
@@ -89,16 +89,15 @@ export class CustomExpando {
 }
 
 @Component({
-/* ... */
-// CustomToggle is used inside CustomExpando as content.
-template: `
+  /* ... */
+  // CustomToggle is used inside CustomExpando as content.
+  template: `
     <custom-expando>
       <custom-toggle>Show</custom-toggle>
     </custom-expando>
-  `
+  `,
 })
-
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 If the query does not find a result, its value is `undefined`. This may occur if the target element is absent or hidden by `@if`. Angular keeps the result of `contentChild` up to date as your application state changes.
@@ -107,7 +106,7 @@ By default, content queries find only _direct_ children of the component and do
 
 You can also query for multiple results with the `contentChildren` function.
 
-```angular-ts {highlight: [14, 16, 17, 18, 19, 20]}
+```angular-ts {highlight: [14, 15]}
 @Component({
   selector: 'custom-menu-item',
   /*...*/
@@ -120,10 +119,9 @@ export class CustomMenuItem {
   selector: 'custom-menu',
   /*...*/
 })
-
 export class CustomMenu {
   items = contentChildren(CustomMenuItem);
-  itemTexts = computed(() => this.items().map(item => item.text));
+  itemTexts = computed(() => this.items().map((item) => item.text));
 }
 
 @Component({
@@ -133,9 +131,9 @@ export class CustomMenu {
       <custom-menu-item>Cheese</custom-menu-item>
       <custom-menu-item>Tomato</custom-menu-item>
     </custom-menu>
-  `
+  `,
 })
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 `contentChildren` creates a signal with an `Array` of the query results.
@@ -150,7 +148,7 @@ In some cases, especially with `viewChild`, you know with certainty that a speci
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class CustomCard {
   header = viewChild.required(CustomCardHeader);
@@ -175,7 +173,7 @@ a [template reference variable](guide/templates/variables#template-reference-var
   template: `
     <button #save>Save</button>
     <button #cancel>Cancel</button>
-  `
+  `,
 })
 export class ActionBar {
   saveButton = viewChild<ElementRef<HTMLButtonElement>>('save');
@@ -199,9 +197,11 @@ const SUB_ITEM = new InjectionToken<string>('sub-item');
   /*...*/
   providers: [{provide: SUB_ITEM, useValue: 'special-item'}],
 })
-export class SpecialItem { }
+export class SpecialItem {}
 
-@Component({/*...*/})
+@Component({
+  /*...*/
+})
 export class CustomList {
   subItemType = contentChild(SUB_ITEM);
 }
@@ -236,7 +236,7 @@ Developers most commonly use `read` to retrieve `ElementRef` and `TemplateRef`.
 By default, `contentChildren` queries find only _direct_ children of the component and do not traverse into descendants.
 `contentChild` queries do traverse into descendants by default.
 
-```angular-ts {highlight: [13, 14, 15, 16]}
+```angular-ts {highlight: [13, 14, 15, 16, 17]}
 @Component({
   selector: 'custom-expando',
   /*...*/
@@ -254,9 +254,9 @@ export class CustomExpando {
         <custom-toggle>Show</custom-toggle>
       </some-other-component>
     </custom-expando>
-  `
+  `,
 })
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 In the example above, `CustomExpando` cannot find `<custom-toggle>` with `contentChildren` because it is not a direct child of `<custom-expando>`. By setting `descendants: true`, you configure the query to traverse all descendants in the same template. Queries, however, _never_ pierce into components to traverse elements in other templates.
@@ -287,7 +287,7 @@ export class CustomCardHeader {
   selector: 'custom-card',
   template: '<custom-card-header>Visit sunny California!</custom-card-header>',
 })
-export class CustomCard {
+export class CustomCard implements AfterViewInit {
   @ViewChild(CustomCardHeader) header: CustomCardHeader;
 
   ngAfterViewInit() {
@@ -320,11 +320,11 @@ export class CustomCardAction {
     <custom-card-action>Cancel</custom-card-action>
   `,
 })
-export class CustomCard {
+export class CustomCard implements AfterViewInit {
   @ViewChildren(CustomCardAction) actions: QueryList<CustomCardAction>;
 
   ngAfterViewInit() {
-    this.actions.forEach(action => {
+    this.actions.forEach((action) => {
       console.log(action.text);
     });
   }
@@ -337,7 +337,7 @@ export class CustomCard {
 
 You can query for a single result with the `@ContentChild` decorator.
 
-```angular-ts {highlight: [15, 16, 17, 18, 19, 26]}
+```angular-ts {highlight: [14, 16, 17, 18]}
 @Component({
   selector: 'custom-toggle',
   /*...*/
@@ -350,8 +350,7 @@ export class CustomToggle {
   selector: 'custom-expando',
   /*...*/
 })
-
-export class CustomExpando {
+export class CustomExpando implements AfterContentInit {
   @ContentChild(CustomToggle) toggle: CustomToggle;
 
   ngAfterContentInit() {
@@ -365,9 +364,9 @@ export class CustomExpando {
     <custom-expando>
       <custom-toggle>Show</custom-toggle>
     </custom-expando>
-  `
+  `,
 })
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 In this example, the `CustomExpando` component queries for a child `CustomToggle` and accesses the result in `ngAfterContentInit`.
@@ -378,7 +377,7 @@ Angular keeps the result of `@ContentChild` up to date as your application state
 
 You can also query for multiple results with the `@ContentChildren` decorator.
 
-```angular-ts {highlight: [15, 17, 18, 19, 20, 21]}
+```angular-ts {highlight: [14, 16, 17, 18, 19, 20]}
 @Component({
   selector: 'custom-menu-item',
   /*...*/
@@ -391,12 +390,11 @@ export class CustomMenuItem {
   selector: 'custom-menu',
   /*...*/
 })
-
-export class CustomMenu {
+export class CustomMenu implements AfterContentInit {
   @ContentChildren(CustomMenuItem) items: QueryList<CustomMenuItem>;
 
   ngAfterContentInit() {
-    this.items.forEach(item => {
+    this.items.forEach((item) => {
       console.log(item.text);
     });
   }
@@ -409,9 +407,9 @@ export class CustomMenu {
       <custom-menu-item>Cheese</custom-menu-item>
       <custom-menu-item>Tomato</custom-menu-item>
     </custom-menu>
-  `
+  `,
 })
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 `@ContentChildren` creates a `QueryList` object that contains the query results. You can subscribe to changes to the query results over time via the `changes` property.
@@ -429,7 +427,7 @@ All query decorators accept an options object as a second parameter. These optio
   selector: 'custom-card',
   template: '<custom-card-header>Visit sunny California!</custom-card-header>',
 })
-export class CustomCard {
+export class CustomCard implements OnInit {
   @ViewChild(CustomCardHeader, {static: true}) header: CustomCardHeader;
 
   ngOnInit() {
diff --git a/adev-ja/src/content/guide/components/queries.md b/adev-ja/src/content/guide/components/queries.md
index 4be5c09f5..7dd26afef 100644
--- a/adev-ja/src/content/guide/components/queries.md
+++ b/adev-ja/src/content/guide/components/queries.md
@@ -58,7 +58,7 @@ export class CustomCardAction {
 })
 export class CustomCard {
   actions = viewChildren(CustomCardAction);
-  actionsTexts = computed(() => this.actions().map(action => action.text));
+  actionsTexts = computed(() => this.actions().map((action) => action.text));
 }
 ```
 
@@ -89,16 +89,15 @@ export class CustomExpando {
 }
 
 @Component({
-/* ... */
-// CustomToggle is used inside CustomExpando as content.
-template: `
+  /* ... */
+  // CustomToggle is used inside CustomExpando as content.
+  template: `
     <custom-expando>
       <custom-toggle>Show</custom-toggle>
     </custom-expando>
-  `
+  `,
 })
-
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 クエリが結果を見つけられない場合、その値は`undefined`になります。これは、ターゲット要素が存在しないか、`@if`によって非表示になっている場合に発生する可能性があります。Angularは、アプリケーションの状態が変化するにつれて`contentChild`の結果を最新の状態に保ちます。
@@ -107,7 +106,7 @@ export class UserProfile { }
 
 `contentChildren`関数を使用して、複数結果をクエリできます。
 
-```angular-ts {highlight: [14, 16, 17, 18, 19, 20]}
+```angular-ts {highlight: [14, 15]}
 @Component({
   selector: 'custom-menu-item',
   /* ... */
@@ -120,10 +119,9 @@ export class CustomMenuItem {
   selector: 'custom-menu',
   /* ... */
 })
-
 export class CustomMenu {
   items = contentChildren(CustomMenuItem);
-  itemTexts = computed(() => this.items().map(item => item.text));
+  itemTexts = computed(() => this.items().map((item) => item.text));
 }
 
 @Component({
@@ -133,9 +131,9 @@ export class CustomMenu {
       <custom-menu-item>Cheese</custom-menu-item>
       <custom-menu-item>Tomato</custom-menu-item>
     </custom-menu>
-  `
+  `,
 })
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 `contentChildren`は、クエリ結果の`Array`を含むシグナルを作成します。
@@ -150,7 +148,7 @@ export class UserProfile { }
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class CustomCard {
   header = viewChild.required(CustomCardHeader);
@@ -175,7 +173,7 @@ export class CustomCard {
   template: `
     <button #save>Save</button>
     <button #cancel>Cancel</button>
-  `
+  `,
 })
 export class ActionBar {
   saveButton = viewChild<ElementRef<HTMLButtonElement>>('save');
@@ -199,7 +197,7 @@ const SUB_ITEM = new InjectionToken<string>('sub-item');
   /*...*/
   providers: [{provide: SUB_ITEM, useValue: 'special-item'}],
 })
-export class SpecialItem { }
+export class SpecialItem {}
 
 @Component({/*...*/})
 export class CustomList {
@@ -287,7 +285,7 @@ export class CustomCardHeader {
   selector: 'custom-card',
   template: '<custom-card-header>Visit sunny California!</custom-card-header>',
 })
-export class CustomCard {
+export class CustomCard implements AfterViewInit {
   @ViewChild(CustomCardHeader) header: CustomCardHeader;
 
   ngAfterViewInit() {

From aa02521c70a4390479ab68d930ed6482fd1e59b2 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 09:24:43 +0900
Subject: [PATCH 28/55] fix(docs): migrate forms/signals changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- custom-controls, field-state-management, models, validation
- Field → FormField directive rename
- Import formatting, trailing commas
- validation: Add validateTree() section
---
 .../guide/forms/signals/custom-controls.en.md | 138 ++++----
 .../guide/forms/signals/custom-controls.md    | 136 ++++----
 .../signals/field-state-management.en.md      | 208 ++++++------
 .../forms/signals/field-state-management.md   | 208 ++++++------
 .../content/guide/forms/signals/models.en.md  |  62 ++--
 .../src/content/guide/forms/signals/models.md |  50 +--
 .../guide/forms/signals/validation.en.md      | 306 +++++++++--------
 .../content/guide/forms/signals/validation.md | 312 ++++++++++--------
 8 files changed, 752 insertions(+), 668 deletions(-)

diff --git a/adev-ja/src/content/guide/forms/signals/custom-controls.en.md b/adev-ja/src/content/guide/forms/signals/custom-controls.en.md
index 163aee9bc..30df0a45f 100644
--- a/adev-ja/src/content/guide/forms/signals/custom-controls.en.md
+++ b/adev-ja/src/content/guide/forms/signals/custom-controls.en.md
@@ -4,7 +4,7 @@ NOTE: This guide assumes familiarity with [Signal Forms essentials](essentials/s
 
 The browser's built-in form controls (like input, select, textarea) handle common cases, but applications often need specialized inputs. A date picker with calendar UI, a rich text editor with formatting toolbar, or a tag selector with autocomplete all require custom implementations.
 
-Signal Forms works with any component that implements specific interfaces. A **control interface** defines the properties and signals that allow your component to communicate with the form system. When your component implements one of these interfaces, the `[field]` directive automatically connects your control to form state, validation, and data binding.
+Signal Forms works with any component that implements specific interfaces. A **control interface** defines the properties and signals that allow your component to communicate with the form system. When your component implements one of these interfaces, the `[formField]` directive automatically connects your control to form state, validation, and data binding.
 
 ## Creating a basic custom control
 
@@ -15,8 +15,8 @@ Let's start with a minimal implementation and add features as needed.
 A basic custom input only needs to implement the `FormValueControl` interface and define the required `value` model signal.
 
 ```angular-ts
-import { Component, model } from '@angular/core';
-import { FormValueControl } from '@angular/forms/signals';
+import {Component, model} from '@angular/core';
+import {FormValueControl} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-basic-input',
@@ -41,21 +41,17 @@ export class BasicInput implements FormValueControl<string> {
 
 A checkbox-style control needs two things:
 
-1. Implement the `FormCheckboxControl` interface so the `Field` directive will recognize it as a form control
+1. Implement the `FormCheckboxControl` interface so the `FormField` directive will recognize it as a form control
 2. Provide a `checked` model signal
 
 ```angular-ts
-import { Component, model, ChangeDetectionStrategy } from '@angular/core';
-import { FormCheckboxControl } from '@angular/forms/signals';
+import {Component, model, ChangeDetectionStrategy} from '@angular/core';
+import {FormCheckboxControl} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-basic-toggle',
   template: `
-    <button
-      type="button"
-      [class.active]="checked()"
-      (click)="toggle()"
-    >
+    <button type="button" [class.active]="checked()" (click)="toggle()">
       <span class="toggle-slider"></span>
     </button>
   `,
@@ -66,41 +62,36 @@ export class BasicToggle implements FormCheckboxControl {
   checked = model<boolean>(false);
 
   toggle() {
-    this.checked.update(val => !val);
+    this.checked.update((val) => !val);
   }
 }
 ```
 
 ### Using your custom control
 
-Once you've created a control, you can use it anywhere you would use a built-in input by adding the `Field` directive to it:
+Once you've created a control, you can use it anywhere you would use a built-in input by adding the `FormField` directive to it:
 
 ```angular-ts
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { form, Field, required } from '@angular/forms/signals';
-import { BasicInput } from './basic-input';
-import { BasicToggle } from './basic-toggle';
+import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
+import {form, FormField, required} from '@angular/forms/signals';
+import {BasicInput} from './basic-input';
+import {BasicToggle} from './basic-toggle';
 
 @Component({
-  imports: [Field, BasicInput, BasicToggle],
+  imports: [FormField, BasicInput, BasicToggle],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Email
-        <app-basic-input [field]="registrationForm.email" />
+        <app-basic-input [formField]="registrationForm.email" />
       </label>
 
       <label>
         Accept terms
-        <app-basic-toggle [field]="registrationForm.acceptTerms" />
+        <app-basic-toggle [formField]="registrationForm.acceptTerms" />
       </label>
 
-      <button
-        type="submit"
-        [disabled]="registrationForm().invalid()"
-      >
-        Register
-      </button>
+      <button type="submit" [disabled]="registrationForm().invalid()">Register</button>
     </form>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -108,19 +99,19 @@ import { BasicToggle } from './basic-toggle';
 export class Registration {
   registrationModel = signal({
     email: '',
-    acceptTerms: false
+    acceptTerms: false,
   });
 
   registrationForm = form(this.registrationModel, (schemaPath) => {
-    required(schemaPath.email, { message: 'Email is required' });
-    required(schemaPath.acceptTerms, { message: 'You must accept the terms' });
+    required(schemaPath.email, {message: 'Email is required'});
+    required(schemaPath.acceptTerms, {message: 'You must accept the terms'});
   });
 }
 ```
 
 NOTE: The schema callback parameter (`schemaPath` in these examples) is a `SchemaPathTree` object that provides paths to all fields in your form. You can name this parameter anything you like.
 
-The `[field]` directive works identically for custom controls and built-in inputs. Signal Forms treats them the same - validation runs, state updates, and data binding works automatically.
+The `[formField]` directive works identically for custom controls and built-in inputs. Signal Forms treats them the same - validation runs, state updates, and data binding works automatically.
 
 ## Understanding control interfaces
 
@@ -135,7 +126,7 @@ The `BasicInput` and `BasicToggle` components you created implement specific con
 `FormValueControl` is the interface for most input types - text inputs, number inputs, date pickers, select dropdowns, and any control that edits a single value. When your component implements this interface:
 
 - **Required property**: Your component must provide a `value` model signal
-- **What the Field directive does**: Binds the form field's value to your control's `value` signal
+- **What the FormField directive does**: Binds the form field's value to your control's `value` signal
 
 IMPORTANT: Controls implementing `FormValueControl` must NOT have a `checked` property
 
@@ -144,7 +135,7 @@ IMPORTANT: Controls implementing `FormValueControl` must NOT have a `checked` pr
 `FormCheckboxControl` is the interface for checkbox-like controls - toggles, switches, and any control that represents a boolean on/off state. When your component implements this interface:
 
 - **Required property**: Your component must provide a `checked` model signal
-- **What the Field directive does**: Binds the form field's value to your control's `checked` signal
+- **What the FormField directive does**: Binds the form field's value to your control's `checked` signal
 
 IMPORTANT: Controls implementing `FormCheckboxControl` must NOT have a `value` property
 
@@ -208,23 +199,23 @@ Receive validation constraint values from the form:
 
 The "[Adding state signals](#adding-state-signals)" section below shows how to implement these properties in your controls.
 
-### How the Field directive works
+### How the FormField directive works
 
-The `[field]` directive detects which interface your control implements and automatically binds the appropriate signals:
+The `[formField]` directive detects which interface your control implements and automatically binds the appropriate signals:
 
 ```angular-ts
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { form, Field, required } from '@angular/forms/signals';
-import { CustomInput } from './custom-input';
-import { CustomToggle } from './custom-toggle';
+import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
+import {form, FormField, required} from '@angular/forms/signals';
+import {CustomInput} from './custom-input';
+import {CustomToggle} from './custom-toggle';
 
 @Component({
   selector: 'app-my-form',
-  imports: [Field, CustomInput, CustomToggle],
+  imports: [FormField, CustomInput, CustomToggle],
   template: `
-    <form>
-      <app-custom-input [field]="userForm.username" />
-      <app-custom-toggle [field]="userForm.subscribe" />
+    <form novalidate>
+      <app-custom-input [formField]="userForm.username" />
+      <app-custom-toggle [formField]="userForm.subscribe" />
     </form>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -232,18 +223,18 @@ import { CustomToggle } from './custom-toggle';
 export class MyForm {
   formModel = signal({
     username: '',
-    subscribe: false
+    subscribe: false,
   });
 
   userForm = form(this.formModel, (schemaPath) => {
-    required(schemaPath.username, { message: 'Username is required' });
+    required(schemaPath.username, {message: 'Username is required'});
   });
 }
 ```
 
 TIP: For complete coverage of creating and managing form models, see the [Form Models guide](guide/forms/signals/models).
 
-When you bind `[field]="userForm.username"`, the Field directive:
+When you bind `[formField]="userForm.username"`, the FormField directive:
 
 1. Detects your control implements `FormValueControl`
 2. Internally accesses `userForm.username().value()` and binds it to your control's `value` model signal
@@ -257,9 +248,8 @@ The minimal controls shown above work, but they don't respond to form state. You
 Here's a comprehensive example that implements common state properties:
 
 ```angular-ts
-import { Component, model, input, ChangeDetectionStrategy } from '@angular/core';
-import { FormValueControl } from '@angular/forms/signals';
-import type { ValidationError, DisabledReason } from '@angular/forms/signals';
+import {Component, model, input, ChangeDetectionStrategy} from '@angular/core';
+import {FormValueControl, WithOptionalFieldTree, ValidationError, DisabledReason} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-stateful-input',
@@ -310,40 +300,40 @@ export class StatefulInput implements FormValueControl<string> {
   readonly = input<boolean>(false);
   hidden = input<boolean>(false);
   invalid = input<boolean>(false);
-  errors = input<readonly ValidationError.WithField[]>([]);
+  errors = input<readonly WithOptionalFieldTree<ValidationError>[]>([]);
 }
 ```
 
 As a result, you can use the control with validation and state management:
 
 ```angular-ts
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { form, Field, required, email } from '@angular/forms/signals';
-import { StatefulInput } from './stateful-input';
+import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
+import {form, FormField, required, email} from '@angular/forms/signals';
+import {StatefulInput} from './stateful-input';
 
 @Component({
-  imports: [Field, StatefulInput],
+  imports: [FormField, StatefulInput],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Email
-        <app-stateful-input [field]="loginForm.email" />
+        <app-stateful-input [formField]="loginForm.email" />
       </label>
     </form>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Login {
-  loginModel = signal({ email: '' });
+  loginModel = signal({email: ''});
 
   loginForm = form(this.loginModel, (schemaPath) => {
-    required(schemaPath.email, { message: 'Email is required' });
-    email(schemaPath.email, { message: 'Enter a valid email address' });
+    required(schemaPath.email, {message: 'Email is required'});
+    email(schemaPath.email, {message: 'Enter a valid email address'});
   });
 }
 ```
 
-When the user types an invalid email, the Field directive automatically updates `invalid()` and `errors()`. Your control can display the validation feedback.
+When the user types an invalid email, the FormField directive automatically updates `invalid()` and `errors()`. Your control can display the validation feedback.
 
 ### Signal types for state properties
 
@@ -356,8 +346,9 @@ Controls sometimes display values differently than the form model stores them -
 Use `linkedSignal()` (from `@angular/core`) to transform the model value for display, and handle input events to parse user input back to the storage format:
 
 ```angular-ts
-import { ChangeDetectionStrategy, Component, linkedSignal, model } from '@angular/core';
-import { FormValueControl } from '@angular/forms/signals';
+import {formatCurrency} from '@angular/common';
+import {ChangeDetectionStrategy, Component, linkedSignal, model} from '@angular/core';
+import {FormValueControl} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-currency-input',
@@ -376,7 +367,7 @@ export class CurrencyInput implements FormValueControl<number> {
   readonly value = model.required<number>();
 
   // Stores display value ("1,234.56")
-  readonly displayValue = linkedSignal(() => formatCurrency(this.value()));
+  readonly displayValue = linkedSignal(() => formatCurrency(this.value(), 'en', 'USD'));
 
   // Update the model from the display value.
   updateModel() {
@@ -384,22 +375,17 @@ export class CurrencyInput implements FormValueControl<number> {
   }
 }
 
-// Converts a number to a currency string (e.g. 1234.56 -> "1,234.56").
-function formatCurrency(value: number) {
-  return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-
-// Converts a currency string to a number (e.g. "1,234.56" -> 1234.56).
-function parseCurrency(value: string) {
-  return parseFloat(value.replace(/,/g, ''));
+// Converts a currency string to a number (e.g. "USD1,234.56" -> 1234.56).
+function parseCurrency(value: string): number {
+  return parseFloat(value.replace(/^[^\d-]+/, '').replace(/,/g, ''));
 }
 ```
 
 ## Validation integration
 
-Controls display validation state but don't perform validation. Validation happens in the form schema - your control receives `invalid()` and `errors()` signals from the Field directive and displays them (as shown in the StatefulInput example above).
+Controls display validation state but don't perform validation. Validation happens in the form schema - your control receives `invalid()` and `errors()` signals from the FormField directive and displays them (as shown in the StatefulInput example above).
 
-The Field directive also passes validation constraint values like `required`, `min`, `max`, `minLength`, `maxLength`, and `pattern`. Your control can use these to enhance the UI:
+The FormField directive also passes validation constraint values like `required`, `min`, `max`, `minLength`, `maxLength`, and `pattern`. Your control can use these to enhance the UI:
 
 ```ts
 export class NumberInput implements FormValueControl<number> {
@@ -412,11 +398,11 @@ export class NumberInput implements FormValueControl<number> {
 }
 ```
 
-When you add `min()` and `max()` validation rules to the schema, the Field directive passes these values to your control. Use them to apply HTML5 attributes or show constraint hints in your template.
+When you add `min()` and `max()` validation rules to the schema, the FormField directive passes these values to your control. Use them to apply HTML5 attributes or show constraint hints in your template.
 
 IMPORTANT: Don't implement validation logic in your control. Define validation rules in the form schema and let your control display the results:
 
-```typescript
+```ts {avoid}
 // Avoid: Validation in control
 export class BadControl implements FormValueControl<string> {
   value = model<string>('');
@@ -424,7 +410,9 @@ export class BadControl implements FormValueControl<string> {
     return this.value().length >= 8;
   } // Don't do this!
 }
+```
 
+```ts {prefer}
 // Good: Validation in schema, control displays results
 accountForm = form(this.accountModel, (schemaPath) => {
   minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'});
diff --git a/adev-ja/src/content/guide/forms/signals/custom-controls.md b/adev-ja/src/content/guide/forms/signals/custom-controls.md
index 49aebe6ac..951ae37bb 100644
--- a/adev-ja/src/content/guide/forms/signals/custom-controls.md
+++ b/adev-ja/src/content/guide/forms/signals/custom-controls.md
@@ -4,7 +4,7 @@ NOTE: このガイドは、[Signal Formsの基本](essentials/signal-forms)に
 
 ブラウザの組み込みフォームコントロール（`input`、`select`、`textarea`など）は一般的なケースを扱いますが、アプリケーションではしばしば特殊な入力が必要になります。カレンダーUIを持つ日付ピッカー、書式設定ツールバーを持つリッチテキストエディタ、オートコンプリート機能を持つタグセレクターなどは、すべてカスタム実装が必要です。
 
-シグナルフォームは、特定のインターフェースを実装するあらゆるコンポーネントと連携して動作します。**コントロールインターフェース**は、コンポーネントがフォームシステムと通信するためのプロパティとシグナルを定義します。コンポーネントがこれらのインターフェースのいずれかを実装すると、`[field]`ディレクティブが自動的にコントロールをフォームの状態、バリデーション、データバインディングに接続します。
+シグナルフォームは、特定のインターフェースを実装するあらゆるコンポーネントと連携して動作します。**コントロールインターフェース**は、コンポーネントがフォームシステムと通信するためのプロパティとシグナルを定義します。コンポーネントがこれらのインターフェースのいずれかを実装すると、`[formField]`ディレクティブが自動的にコントロールをフォームの状態、バリデーション、データバインディングに接続します。
 
 ## 基本的なカスタムコントロールの作成 {#creating-a-basic-custom-control}
 
@@ -15,8 +15,8 @@ NOTE: このガイドは、[Signal Formsの基本](essentials/signal-forms)に
 基本的なカスタム入力は、`FormValueControl`インターフェースを実装し、必須の`value`モデルシグナルを定義するだけで済みます。
 
 ```angular-ts
-import { Component, model } from '@angular/core';
-import { FormValueControl } from '@angular/forms/signals';
+import {Component, model} from '@angular/core';
+import {FormValueControl} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-basic-input',
@@ -41,21 +41,17 @@ export class BasicInput implements FormValueControl<string> {
 
 チェックボックス形式のコントロールには、次の2つが必要です:
 
-1. `Field`ディレクティブがフォームコントロールとして認識できるように、`FormCheckboxControl`インターフェースを実装する
+1. `FormField`ディレクティブがフォームコントロールとして認識できるように、`FormCheckboxControl`インターフェースを実装する
 2. `checked`モデルシグナルを提供する
 
 ```angular-ts
-import { Component, model, ChangeDetectionStrategy } from '@angular/core';
-import { FormCheckboxControl } from '@angular/forms/signals';
+import {Component, model, ChangeDetectionStrategy} from '@angular/core';
+import {FormCheckboxControl} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-basic-toggle',
   template: `
-    <button
-      type="button"
-      [class.active]="checked()"
-      (click)="toggle()"
-    >
+    <button type="button" [class.active]="checked()" (click)="toggle()">
       <span class="toggle-slider"></span>
     </button>
   `,
@@ -66,41 +62,36 @@ export class BasicToggle implements FormCheckboxControl {
   checked = model<boolean>(false);
 
   toggle() {
-    this.checked.update(val => !val);
+    this.checked.update((val) => !val);
   }
 }
 ```
 
 ### カスタムコントロールの使用 {#using-your-custom-control}
 
-コントロールを作成したら、`Field`ディレクティブを追加することで、組み込みの入力を使用する場所ならどこでも使用できます:
+コントロールを作成したら、`FormField`ディレクティブを追加することで、組み込みの入力を使用する場所ならどこでも使用できます:
 
 ```angular-ts
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { form, Field, required } from '@angular/forms/signals';
-import { BasicInput } from './basic-input';
-import { BasicToggle } from './basic-toggle';
+import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
+import {form, FormField, required} from '@angular/forms/signals';
+import {BasicInput} from './basic-input';
+import {BasicToggle} from './basic-toggle';
 
 @Component({
-  imports: [Field, BasicInput, BasicToggle],
+  imports: [FormField, BasicInput, BasicToggle],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Email
-        <app-basic-input [field]="registrationForm.email" />
+        <app-basic-input [formField]="registrationForm.email" />
       </label>
 
       <label>
         Accept terms
-        <app-basic-toggle [field]="registrationForm.acceptTerms" />
+        <app-basic-toggle [formField]="registrationForm.acceptTerms" />
       </label>
 
-      <button
-        type="submit"
-        [disabled]="registrationForm().invalid()"
-      >
-        Register
-      </button>
+      <button type="submit" [disabled]="registrationForm().invalid()">Register</button>
     </form>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -108,19 +99,19 @@ import { BasicToggle } from './basic-toggle';
 export class Registration {
   registrationModel = signal({
     email: '',
-    acceptTerms: false
+    acceptTerms: false,
   });
 
   registrationForm = form(this.registrationModel, (schemaPath) => {
-    required(schemaPath.email, { message: 'Email is required' });
-    required(schemaPath.acceptTerms, { message: 'You must accept the terms' });
+    required(schemaPath.email, {message: 'Email is required'});
+    required(schemaPath.acceptTerms, {message: 'You must accept the terms'});
   });
 }
 ```
 
 NOTE: スキーマのコールバックパラメータ（この例では`schemaPath`）は、フォーム内のすべてのフィールドへのパスを提供する`SchemaPathTree`オブジェクトです。このパラメータには好きな名前を付けることができます。
 
-`[field]`ディレクティブは、カスタムコントロールと組み込みの入力で同じように動作します。シグナルフォームはそれらを同じように扱います - バリデーションの実行、状態の更新、データバインディングが自動的に機能します。
+`[formField]`ディレクティブは、カスタムコントロールと組み込みの入力で同じように動作します。シグナルフォームはそれらを同じように扱います - バリデーションの実行、状態の更新、データバインディングが自動的に機能します。
 
 ## コントロールインターフェースの理解 {#understanding-control-interfaces}
 
@@ -135,7 +126,7 @@ NOTE: スキーマのコールバックパラメータ（この例では`schemaP
 `FormValueControl`は、テキスト入力、数値入力、日付ピッカー、セレクトドロップダウンなど、単一の値を編集するほとんどの入力タイプのためのインターフェースです。コンポーネントがこのインターフェースを実装する場合：
 
 - **必須プロパティ**: コンポーネントは`value`モデルシグナルを提供する必要があります
-- **Fieldディレクティブの役割**: フォームフィールドの値をコントロールの`value`シグナルにバインドします
+- **FormFieldディレクティブの役割**: フォームフィールドの値をコントロールの`value`シグナルにバインドします
 
 IMPORTANT: `FormValueControl`を実装するコントロールは`checked`プロパティを持ってはいけません
 
@@ -208,23 +199,23 @@ NOTE: `disabledReasons`は`DisabledReason`オブジェクトの配列です。
 
 以下の「[状態シグナルの追加](#adding-state-signals)」セクションでは、これらのプロパティをコントロールに実装する方法を示します。
 
-### Fieldディレクティブの仕組み {#how-the-field-directive-works}
+### FormFieldディレクティブの仕組み {#how-the-formfield-directive-works}
 
 `[field]`ディレクティブは、コントロールがどのインターフェースを実装しているかを検出し、適切なシグナルを自動的にバインドします：
 
 ```angular-ts
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { form, Field, required } from '@angular/forms/signals';
-import { CustomInput } from './custom-input';
-import { CustomToggle } from './custom-toggle';
+import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
+import {form, FormField, required} from '@angular/forms/signals';
+import {CustomInput} from './custom-input';
+import {CustomToggle} from './custom-toggle';
 
 @Component({
   selector: 'app-my-form',
-  imports: [Field, CustomInput, CustomToggle],
+  imports: [FormField, CustomInput, CustomToggle],
   template: `
-    <form>
-      <app-custom-input [field]="userForm.username" />
-      <app-custom-toggle [field]="userForm.subscribe" />
+    <form novalidate>
+      <app-custom-input [formField]="userForm.username" />
+      <app-custom-toggle [formField]="userForm.subscribe" />
     </form>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -232,18 +223,18 @@ import { CustomToggle } from './custom-toggle';
 export class MyForm {
   formModel = signal({
     username: '',
-    subscribe: false
+    subscribe: false,
   });
 
   userForm = form(this.formModel, (schemaPath) => {
-    required(schemaPath.username, { message: 'Username is required' });
+    required(schemaPath.username, {message: 'Username is required'});
   });
 }
 ```
 
 TIP: フォームモデルの作成と管理に関する完全な情報については、[フォームモデルガイド](guide/forms/signals/models)を参照してください。
 
-`[field]="userForm.username"`をバインドすると、Fieldディレクティブは次のようになります：
+`[formField]="userForm.username"`をバインドすると、FormFieldディレクティブは次のようになります:
 
 1. コントロールが`FormValueControl`を実装していることを検出します
 2. 内部で`userForm.username().value()`にアクセスし、それをコントロールの`value`モデルシグナルにバインドします
@@ -257,9 +248,8 @@ TIP: フォームモデルの作成と管理に関する完全な情報につい
 以下は、一般的な状態プロパティを実装する包括的な例です:
 
 ```angular-ts
-import { Component, model, input, ChangeDetectionStrategy } from '@angular/core';
-import { FormValueControl } from '@angular/forms/signals';
-import type { ValidationError, DisabledReason } from '@angular/forms/signals';
+import {Component, model, input, ChangeDetectionStrategy} from '@angular/core';
+import {FormValueControl, WithOptionalFieldTree, ValidationError, DisabledReason} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-stateful-input',
@@ -310,40 +300,40 @@ export class StatefulInput implements FormValueControl<string> {
   readonly = input<boolean>(false);
   hidden = input<boolean>(false);
   invalid = input<boolean>(false);
-  errors = input<readonly ValidationError.WithField[]>([]);
+  errors = input<readonly WithOptionalFieldTree<ValidationError>[]>([]);
 }
 ```
 
 その結果、バリデーションと状態管理を備えたコントロールを使用できます:
 
 ```angular-ts
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { form, Field, required, email } from '@angular/forms/signals';
-import { StatefulInput } from './stateful-input';
+import {Component, signal, ChangeDetectionStrategy} from '@angular/core';
+import {form, FormField, required, email} from '@angular/forms/signals';
+import {StatefulInput} from './stateful-input';
 
 @Component({
-  imports: [Field, StatefulInput],
+  imports: [FormField, StatefulInput],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Email
-        <app-stateful-input [field]="loginForm.email" />
+        <app-stateful-input [formField]="loginForm.email" />
       </label>
     </form>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Login {
-  loginModel = signal({ email: '' });
+  loginModel = signal({email: ''});
 
   loginForm = form(this.loginModel, (schemaPath) => {
-    required(schemaPath.email, { message: 'Email is required' });
-    email(schemaPath.email, { message: 'Enter a valid email address' });
+    required(schemaPath.email, {message: 'Email is required'});
+    email(schemaPath.email, {message: 'Enter a valid email address'});
   });
 }
 ```
 
-ユーザーが無効なメールアドレスを入力すると、`Field`ディレクティブが自動的に`invalid()`と`errors()`を更新します。あなたのコントロールは、そのバリデーションフィードバックを表示できます。
+ユーザーが無効なメールアドレスを入力すると、`FormField`ディレクティブが自動的に`invalid()`と`errors()`を更新します。あなたのコントロールは、そのバリデーションフィードバックを表示できます。
 
 ### 状態プロパティのシグナルタイプ {#signal-types-for-state-properties}
 
@@ -356,8 +346,9 @@ export class Login {
 `@angular/core`の`linkedSignal()`を使用してモデルの値を表示用に変換し、入力イベントを処理してユーザー入力を格納形式にパースして戻します:
 
 ```angular-ts
-import { ChangeDetectionStrategy, Component, linkedSignal, model } from '@angular/core';
-import { FormValueControl } from '@angular/forms/signals';
+import {formatCurrency} from '@angular/common';
+import {ChangeDetectionStrategy, Component, linkedSignal, model} from '@angular/core';
+import {FormValueControl} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-currency-input',
@@ -376,7 +367,7 @@ export class CurrencyInput implements FormValueControl<number> {
   readonly value = model.required<number>();
 
   // 表示値 (「1,234.56」) を格納します
-  readonly displayValue = linkedSignal(() => formatCurrency(this.value()));
+  readonly displayValue = linkedSignal(() => formatCurrency(this.value(), 'en', 'USD'));
 
   // 表示値からモデルを更新します
   updateModel() {
@@ -384,22 +375,17 @@ export class CurrencyInput implements FormValueControl<number> {
   }
 }
 
-// 数値を通貨文字列に変換します (例: 1234.56 -> 「1,234.56」)
-function formatCurrency(value: number) {
-  return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-
-// 通貨文字列を数値に変換します (例: 「1,234.56」 -> 1234.56)
-function parseCurrency(value: string) {
-  return parseFloat(value.replace(/,/g, ''));
+// 通貨文字列を数値に変換します (例: 「USD1,234.56」 -> 1234.56)
+function parseCurrency(value: string): number {
+  return parseFloat(value.replace(/^[^\d-]+/, '').replace(/,/g, ''));
 }
 ```
 
 ## バリデーションの統合 {#validation-integration}
 
-コントロールはバリデーションの状態を表示しますが、バリデーションは実行しません。バリデーションはフォームスキーマで行われます。コントロールは`Field`ディレクティブから`invalid()`と`errors()`シグナルを受け取り、それらを表示します（上記の`StatefulInput`の例で示されているように）。
+コントロールはバリデーションの状態を表示しますが、バリデーションは実行しません。バリデーションはフォームスキーマで行われます。コントロールは`FormField`ディレクティブから`invalid()`と`errors()`シグナルを受け取り、それらを表示します（上記の`StatefulInput`の例で示されているように）。
 
-`Field`ディレクティブは、`required`、`min`、`max`、`minLength`、`maxLength`、`pattern`のようなバリデーション制約の値も渡します。コントロールはこれらを使用してUIを強化できます：
+`FormField`ディレクティブは、`required`、`min`、`max`、`minLength`、`maxLength`、`pattern`のようなバリデーション制約の値も渡します。コントロールはこれらを使用してUIを強化できます:
 
 ```ts
 export class NumberInput implements FormValueControl<number> {
@@ -412,11 +398,11 @@ export class NumberInput implements FormValueControl<number> {
 }
 ```
 
-スキーマに`min()`と`max()`のバリデーションルールを追加すると、`Field`ディレクティブはこれらの値をコントロールに渡します。これらを使用して、HTML5属性を適用したり、テンプレートに制約のヒントを表示したりします。
+スキーマに`min()`と`max()`のバリデーションルールを追加すると、`FormField`ディレクティブはこれらの値をコントロールに渡します。これらを使用して、HTML5属性を適用したり、テンプレートに制約のヒントを表示したりします。
 
-IMPORTANT: コントロールにバリデーションロジックを実装しないでください。バリデーションルールはフォームスキーマで定義し、コントロールにはその結果を表示させるようにしてください：
+IMPORTANT: コントロールにバリデーションロジックを実装しないでください。バリデーションルールはフォームスキーマで定義し、コントロールにはその結果を表示させるようにしてください:
 
-```typescript
+```ts {avoid}
 // 悪い例：コントロール内でのバリデーション
 export class BadControl implements FormValueControl<string> {
   value = model<string>('');
@@ -424,7 +410,9 @@ export class BadControl implements FormValueControl<string> {
     return this.value().length >= 8;
   } // これは行わないでください！
 }
+```
 
+```ts {prefer}
 // 良い例：スキーマでバリデーションし、コントロールは結果を表示
 accountForm = form(this.accountModel, (schemaPath) => {
   minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'});
diff --git a/adev-ja/src/content/guide/forms/signals/field-state-management.en.md b/adev-ja/src/content/guide/forms/signals/field-state-management.en.md
index 093c60390..4107e939d 100644
--- a/adev-ja/src/content/guide/forms/signals/field-state-management.en.md
+++ b/adev-ja/src/content/guide/forms/signals/field-state-management.en.md
@@ -4,21 +4,21 @@ Signal Forms' field state allows you to react to user interactions by providing
 
 ## Understanding field state
 
-When you create a form with the `form()` function, it returns a **field tree** - an object structure that mirrors your form model. Each field in the tree is accessible via dot notation (like `form.email`).
+When you create a form with the [`form()`](api/forms/signals/form) function, it returns a **field tree** - an object structure that mirrors your form model. Each field in the tree is accessible via dot notation (like [`form.email`](api/forms/signals/form#email)).
 
 ### Accessing field state
 
-When you call any field in the field tree as a function (like `form.email()`), it returns a `FieldState` object containing reactive signals that track the field's validation, interaction, and availability state. For example, the `invalid()` signal tells you whether the field has validation errors:
+When you call any field in the field tree as a function (like [`form.email()`](api/forms/signals/form#email)), it returns a `FieldState` object containing reactive signals that track the field's validation, interaction, and availability state. For example, the `invalid()` signal tells you whether the field has validation errors:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, required, email } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required, email} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-registration',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <input type="email" [field]="registrationForm.email" />
+    <input type="email" [formField]="registrationForm.email" />
 
     @if (registrationForm.email().invalid()) {
       <p class="error">Email has validation errors:</p>
@@ -28,18 +28,18 @@ import { form, Field, required, email } from '@angular/forms/signals'
         }
       </ul>
     }
-  `
+  `,
 })
 export class Registration {
   registrationModel = signal({
     email: '',
-    password: ''
-  })
+    password: '',
+  });
 
   registrationForm = form(this.registrationModel, (schemaPath) => {
-    required(schemaPath.email, { message: 'Email is required' })
-    email(schemaPath.email, { message: 'Enter a valid email address' })
-  })
+    required(schemaPath.email, {message: 'Email is required'});
+    email(schemaPath.email, {message: 'Enter a valid email address'});
+  });
 }
 ```
 
@@ -47,7 +47,7 @@ In this example, the template checks `registrationForm.email().invalid()` to det
 
 ### Field state signals
 
-The most commonly used signal is `value()`, a [writable signal](guide/forms/signals/models#updating-models) that provides access to the field's current value:
+The most commonly used signal is `value()`, a `WritableSignal` that provides access to the field's current value:
 
 ```ts
 const emailValue = registrationForm.email().value();
@@ -83,18 +83,19 @@ Use `valid()` and `invalid()` to check validation status:
 ```angular-ts
 @Component({
   template: `
-    <input type="email" [field]="loginForm.email" />
+    <input type="email" [formField]="loginForm.email" />
 
     @if (loginForm.email().invalid()) {
       <p class="error">Email is invalid</p>
-    } @if (loginForm.email().valid()) {
+    }
+    @if (loginForm.email().valid()) {
       <p class="success">Email looks good</p>
     }
-  `
+  `,
 })
 export class Login {
-  loginModel = signal({ email: '', password: '' })
-  loginForm = form(this.loginModel)
+  loginModel = signal({email: '', password: ''});
+  loginForm = form(this.loginModel);
 }
 ```
 
@@ -109,11 +110,11 @@ When checking validity in code, use `invalid()` instead of `!valid()` if you wan
 
 Access the array of validation errors with `errors()`. Each error object contains:
 
-| Property  | Description                                                     |
-| --------- | --------------------------------------------------------------- |
-| `kind`    | The validation rule that failed (such as "required" or "email") |
-| `message` | Optional human-readable error message                           |
-| `field`   | Reference to the `FieldTree` where the error occurred           |
+| Property    | Description                                                     |
+| ----------- | --------------------------------------------------------------- |
+| `kind`      | The validation rule that failed (such as "required" or "email") |
+| `message`   | Optional human-readable error message                           |
+| `fieldTree` | Reference to the `FieldTree` where the error occurred           |
 
 NOTE: The `message` property is optional. Validators can provide custom error messages, but if not specified, you may need to map error `kind` values to your own messages.
 
@@ -122,7 +123,7 @@ Here's an example of how to display errors in your template:
 ```angular-ts
 @Component({
   template: `
-    <input type="email" [field]="loginForm.email" />
+    <input type="email" [formField]="loginForm.email" />
 
     @if (loginForm.email().errors().length > 0) {
       <div class="errors">
@@ -144,7 +145,7 @@ The `pending()` signal indicates async validation is in progress:
 ```angular-ts
 @Component({
   template: `
-    <input type="email" [field]="signupForm.email" />
+    <input type="email" [formField]="signupForm.email" />
 
     @if (signupForm.email().pending()) {
       <p>Checking if email is available...</p>
@@ -176,19 +177,19 @@ The `dirty()` signal becomes `true` when the user modifies an interactive field'
 ```angular-ts
 @Component({
   template: `
-    <form>
-      <input [field]="profileForm.name" />
-      <input [field]="profileForm.bio" />
+    <form novalidate>
+      <input [formField]="profileForm.name" />
+      <input [formField]="profileForm.bio" />
 
       @if (profileForm().dirty()) {
         <p class="warning">You have unsaved changes</p>
       }
     </form>
-  `
+  `,
 })
 export class Profile {
-  profileModel = signal({ name: 'Alice', bio: 'Developer' })
-  profileForm = form(this.profileModel)
+  profileModel = signal({name: 'Alice', bio: 'Developer'});
+  profileForm = form(this.profileModel);
 }
 ```
 
@@ -222,14 +223,14 @@ The `disabled()` signal indicates whether a field accepts user input. Disabled f
 
 ```angular-ts
 import { Component, signal } from '@angular/core'
-import { form, Field, disabled } from '@angular/forms/signals'
+import { form, FormField, disabled } from '@angular/forms/signals'
 
 @Component({
   selector: 'app-order',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <!-- TIP: The `[field]` directive automatically binds the `disabled` attribute based on the field's `disabled()` state, so you don't need to manually add `[disabled]="field().disabled()"` -->
-    <input [field]="orderForm.couponCode" />
+    <!-- TIP: The `[formField]` directive automatically binds the `disabled` attribute based on the field's `disabled()` state, so you don't need to manually add `[disabled]="field().disabled()"` -->
+    <input [formField]="orderForm.couponCode" />
 
     @if (orderForm.couponCode().disabled()) {
       <p class="info">Coupon code is only available for orders over $50</p>
@@ -264,35 +265,35 @@ Disabled fields don't contribute to the parent form's validation state. Even if
 The `hidden()` signal indicates whether a field is conditionally hidden. Use `hidden()` with `@if` to show or hide fields based on conditions:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, hidden } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, hidden} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-profile',
-  imports: [Field],
+  imports: [FormField],
   template: `
     <label>
-      <input type="checkbox" [field]="profileForm.isPublic" />
+      <input type="checkbox" [formField]="profileForm.isPublic" />
       Make profile public
     </label>
 
     @if (!profileForm.publicUrl().hidden()) {
       <label>
         Public URL
-        <input [field]="profileForm.publicUrl" />
+        <input [formField]="profileForm.publicUrl" />
       </label>
     }
-  `
+  `,
 })
 export class Profile {
   profileModel = signal({
     isPublic: false,
-    publicUrl: ''
-  })
+    publicUrl: '',
+  });
 
-  profileForm = form(this.profileModel, schemaPath => {
-    hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic))
-  })
+  profileForm = form(this.profileModel, (schemaPath) => {
+    hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic));
+  });
 }
 ```
 
@@ -303,37 +304,37 @@ Hidden fields don't participate in validation. If a required field is hidden, it
 The `readonly()` signal indicates whether a field is readonly. Readonly fields display their value but users cannot edit them:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, readonly } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, readonly} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-account',
-  imports: [Field],
+  imports: [FormField],
   template: `
     <label>
       Username (cannot be changed)
-      <input [field]="accountForm.username" />
+      <input [formField]="accountForm.username" />
     </label>
 
     <label>
       Email
-      <input [field]="accountForm.email" />
+      <input [formField]="accountForm.email" />
     </label>
-  `
+  `,
 })
 export class Account {
   accountModel = signal({
     username: 'johndoe',
-    email: 'john@example.com'
-  })
+    email: 'john@example.com',
+  });
 
-  accountForm = form(this.accountModel, schemaPath => {
-    readonly(schemaPath.username)
-  })
+  accountForm = form(this.accountModel, (schemaPath) => {
+    readonly(schemaPath.username);
+  });
 }
 ```
 
-NOTE: The `[field]` directive automatically binds the `readonly` attribute based on the field's `readonly()` state, so you don't need to manually add `[readonly]="field().readonly()"`.
+NOTE: The `[formField]` directive automatically binds the `readonly` attribute based on the field's `readonly()` state, so you don't need to manually add `[readonly]="field().readonly()"`.
 
 Like disabled and hidden fields, readonly fields are non-interactive and don't affect parent form state. The `readonly()` state affects editability and validation, but does not change the field's value.
 
@@ -354,17 +355,17 @@ The root form is also a field in the field tree. When you call it as a function,
 ```angular-ts
 @Component({
   template: `
-    <form>
-      <input [field]="loginForm.email" />
-      <input [field]="loginForm.password" />
+    <form novalidate>
+      <input [formField]="loginForm.email" />
+      <input [formField]="loginForm.password" />
 
       <button [disabled]="!loginForm().valid()">Sign In</button>
     </form>
-  `
+  `,
 })
 export class Login {
-  loginModel = signal({ email: '', password: '' })
-  loginForm = form(this.loginModel)
+  loginModel = signal({email: '', password: ''});
+  loginForm = form(this.loginModel);
 }
 ```
 
@@ -455,29 +456,29 @@ Field state signals integrate seamlessly with Angular templates, enabling reacti
 Show errors only after a user has interacted with a field:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, email } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, email} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-signup',
-  imports: [Field],
+  imports: [FormField],
   template: `
     <label>
       Email
-      <input type="email" [field]="signupForm.email" />
+      <input type="email" [formField]="signupForm.email" />
     </label>
 
     @if (signupForm.email().touched() && signupForm.email().invalid()) {
       <p class="error">{{ signupForm.email().errors()[0].message }}</p>
     }
-  `
+  `,
 })
 export class Signup {
-  signupModel = signal({ email: '', password: '' })
+  signupModel = signal({email: '', password: ''});
 
-  signupForm = form(this.signupModel, schemaPath => {
-    email(schemaPath.email)
-  })
+  signupForm = form(this.signupModel, (schemaPath) => {
+    email(schemaPath.email);
+  });
 }
 ```
 
@@ -488,35 +489,35 @@ This pattern prevents showing errors before users have had a chance to interact
 Use the `hidden()` signal with `@if` to show or hide fields conditionally:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, hidden } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, hidden} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-order',
-  imports: [Field],
+  imports: [FormField],
   template: `
     <label>
-      <input type="checkbox" [field]="orderForm.requiresShipping" />
+      <input type="checkbox" [formField]="orderForm.requiresShipping" />
       Requires shipping
     </label>
 
     @if (!orderForm.shippingAddress().hidden()) {
       <label>
         Shipping Address
-        <input [field]="orderForm.shippingAddress" />
+        <input [formField]="orderForm.shippingAddress" />
       </label>
     }
-  `
+  `,
 })
 export class Order {
   orderModel = signal({
     requiresShipping: false,
-    shippingAddress: ''
-  })
+    shippingAddress: '',
+  });
 
-  orderForm = form(this.orderModel, schemaPath => {
-    hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping))
-  })
+  orderForm = form(this.orderModel, (schemaPath) => {
+    hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping));
+  });
 }
 ```
 
@@ -594,12 +595,22 @@ While field state typically updates through user interactions (typing, focusing,
 
 #### Form submission
 
-When a user submits a form, use the `submit()` function to handle validation and reveal errors:
+When a user submits a form, use the `submit()` function to handle validation and reveal errors.
 
-```ts
-import {Component, signal} from '@angular/core';
-import {form, submit, required, email} from '@angular/forms/signals';
+Signal Forms handles validation through its own system, so you need to prevent the browser's default form behavior. Add `novalidate` to the `<form>` element to disable native HTML validation (such as browser tooltip popups for `required` or `type="email"` fields), and call `$event.preventDefault()` in your submit handler to prevent the browser from reloading the page:
+
+```angular-ts
+@Component({
+  template: `
+    <form novalidate (submit)="onSubmit($event)">
+      <input [formField]="registrationForm.username" />
+      <input type="email" [formField]="registrationForm.email" />
+      <input type="password" [formField]="registrationForm.password" />
 
+      <button type="submit">Register</button>
+    </form>
+  `,
+})
 export class Registration {
   registrationModel = signal({username: '', email: '', password: ''});
 
@@ -609,13 +620,14 @@ export class Registration {
     required(schemaPath.password);
   });
 
-  onSubmit() {
+  onSubmit(event: Event) {
+    event.preventDefault();
     submit(this.registrationForm, async () => {
       this.submitToServer();
     });
   }
 
-  submitToServer() {
+  private submitToServer() {
     // Send data to server
   }
 }
@@ -653,14 +665,14 @@ This two-step reset ensures the form is ready for new input without showing stal
 You can apply custom styles to your form by binding CSS classes based on the validation state:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, email } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, email} from '@angular/forms/signals';
 
 @Component({
   template: `
     <input
       type="email"
-      [field]="form.email"
+      [formField]="form.email"
       [class.is-invalid]="form.email().touched() && form.email().invalid()"
       [class.is-valid]="form.email().touched() && form.email().valid()"
     />
@@ -674,14 +686,14 @@ import { form, Field, email } from '@angular/forms/signals'
     input.is-valid {
       border: 2px solid green;
     }
-  `
+  `,
 })
 export class StyleExample {
-  model = signal({ email: '' })
+  model = signal({email: ''});
 
-  form = form(this.model, schemaPath => {
-    email(schemaPath.email)
-  })
+  form = form(this.model, (schemaPath) => {
+    email(schemaPath.email);
+  });
 }
 ```
 
diff --git a/adev-ja/src/content/guide/forms/signals/field-state-management.md b/adev-ja/src/content/guide/forms/signals/field-state-management.md
index 908c28f8f..352b1f6a3 100644
--- a/adev-ja/src/content/guide/forms/signals/field-state-management.md
+++ b/adev-ja/src/content/guide/forms/signals/field-state-management.md
@@ -4,21 +4,21 @@
 
 ## フィールドの状態を理解する
 
-`form()`関数でフォームを作成すると、**フィールドツリー**が返されます。これはフォームモデルを反映したオブジェクト構造です。ツリー内の各フィールドには、ドット記法（`form.email`など）でアクセスできます。
+[`form()`](api/forms/signals/form)関数でフォームを作成すると、**フィールドツリー**が返されます。これはフォームモデルを反映したオブジェクト構造です。ツリー内の各フィールドには、ドット記法（[`form.email`](api/forms/signals/form#email)など）でアクセスできます。
 
 ### フィールドの状態へのアクセス {#accessing-field-state}
 
-フィールドツリー内の任意のフィールドを関数として（`form.email()`のように）呼び出すと、`FieldState`オブジェクトが返されます。これには、フィールドのバリデーション、インタラクション、および可用性の状態を追跡するリアクティブなシグナルが含まれています。たとえば、`invalid()`シグナルは、フィールドにバリデーションエラーがあるかどうかを示します:
+フィールドツリー内の任意のフィールドを関数として（[`form.email()`](api/forms/signals/form#email)のように）呼び出すと、`FieldState`オブジェクトが返されます。これには、フィールドのバリデーション、インタラクション、および可用性の状態を追跡するリアクティブなシグナルが含まれています。たとえば、`invalid()`シグナルは、フィールドにバリデーションエラーがあるかどうかを示します:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, required, email } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required, email} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-registration',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <input type="email" [field]="registrationForm.email" />
+    <input type="email" [formField]="registrationForm.email" />
 
     @if (registrationForm.email().invalid()) {
       <p class="error">Email has validation errors:</p>
@@ -28,18 +28,18 @@ import { form, Field, required, email } from '@angular/forms/signals'
         }
       </ul>
     }
-  `
+  `,
 })
 export class Registration {
   registrationModel = signal({
     email: '',
-    password: ''
-  })
+    password: '',
+  });
 
   registrationForm = form(this.registrationModel, (schemaPath) => {
-    required(schemaPath.email, { message: 'Email is required' })
-    email(schemaPath.email, { message: 'Enter a valid email address' })
-  })
+    required(schemaPath.email, {message: 'Email is required'});
+    email(schemaPath.email, {message: 'Enter a valid email address'});
+  });
 }
 ```
 
@@ -47,7 +47,7 @@ export class Registration {
 
 ### フィールドの状態シグナル {#field-state-signals}
 
-最も一般的に使用されるシグナルは`value()`です。これはフィールドの現在の値へのアクセスを提供する[書き込み可能なシグナル](guide/forms/signals/models#updating-models)です:
+最も一般的に使用されるシグナルは`value()`です。これはフィールドの現在の値へのアクセスを提供する`WritableSignal`です:
 
 ```ts
 const emailValue = registrationForm.email().value();
@@ -83,18 +83,19 @@ NOTE: このガイドでは、テンプレートやロジックでバリデー
 ```angular-ts
 @Component({
   template: `
-    <input type="email" [field]="loginForm.email" />
+    <input type="email" [formField]="loginForm.email" />
 
     @if (loginForm.email().invalid()) {
       <p class="error">Email is invalid</p>
-    } @if (loginForm.email().valid()) {
+    }
+    @if (loginForm.email().valid()) {
       <p class="success">Email looks good</p>
     }
-  `
+  `,
 })
 export class Login {
-  loginModel = signal({ email: '', password: '' })
-  loginForm = form(this.loginModel)
+  loginModel = signal({email: '', password: ''});
+  loginForm = form(this.loginModel);
 }
 ```
 
@@ -109,11 +110,11 @@ export class Login {
 
 `errors()`でバリデーションエラーの配列にアクセスします。各エラーオブジェクトには以下が含まれます:
 
-| プロパティ | 説明                                                            |
-| --------- | --------------------------------------------------------------- |
-| `kind`    | 失敗したバリデーションルール（"required"や"email"など）           |
-| `message` | オプションの人間が読める形式のエラーメッセージ                  |
-| `field`   | エラーが発生した`FieldTree`への参照                           |
+| プロパティ    | 説明                                                            |
+| ----------- | --------------------------------------------------------------- |
+| `kind`      | 失敗したバリデーションルール（"required"や"email"など）           |
+| `message`   | オプションの人間が読める形式のエラーメッセージ                  |
+| `fieldTree` | エラーが発生した`FieldTree`への参照                           |
 
 NOTE: `message`プロパティはオプションです。バリデーターはカスタムエラーメッセージを提供できますが、指定されていない場合は、エラーの`kind`値を独自メッセージにマッピングする必要があるかもしれません。
 
@@ -122,7 +123,7 @@ NOTE: `message`プロパティはオプションです。バリデーターは
 ```angular-ts
 @Component({
   template: `
-    <input type="email" [field]="loginForm.email" />
+    <input type="email" [formField]="loginForm.email" />
 
     @if (loginForm.email().errors().length > 0) {
       <div class="errors">
@@ -144,7 +145,7 @@ NOTE: `message`プロパティはオプションです。バリデーターは
 ```angular-ts
 @Component({
   template: `
-    <input type="email" [field]="signupForm.email" />
+    <input type="email" [formField]="signupForm.email" />
 
     @if (signupForm.email().pending()) {
       <p>Checking if email is available...</p>
@@ -176,19 +177,19 @@ NOTE: `message`プロパティはオプションです。バリデーターは
 ```angular-ts
 @Component({
   template: `
-    <form>
-      <input [field]="profileForm.name" />
-      <input [field]="profileForm.bio" />
+    <form novalidate>
+      <input [formField]="profileForm.name" />
+      <input [formField]="profileForm.bio" />
 
       @if (profileForm().dirty()) {
         <p class="warning">You have unsaved changes</p>
       }
     </form>
-  `
+  `,
 })
 export class Profile {
-  profileModel = signal({ name: 'Alice', bio: 'Developer' })
-  profileForm = form(this.profileModel)
+  profileModel = signal({name: 'Alice', bio: 'Developer'});
+  profileForm = form(this.profileModel);
 }
 ```
 
@@ -222,14 +223,14 @@ NOTE: 非表示、無効、読み取り専用のフィールドは非インタ
 
 ```angular-ts
 import { Component, signal } from '@angular/core'
-import { form, Field, disabled } from '@angular/forms/signals'
+import { form, FormField, disabled } from '@angular/forms/signals'
 
 @Component({
   selector: 'app-order',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <!-- TIP: `[field]`ディレクティブは、フィールドの`disabled()`状態に基づいて`disabled`属性を自動的にバインドするため、手動で`[disabled]="field().disabled()"`を追加する必要はありません -->
-    <input [field]="orderForm.couponCode" />
+    <!-- TIP: `[formField]`ディレクティブは、フィールドの`disabled()`状態に基づいて`disabled`属性を自動的にバインドするため、手動で`[disabled]="field().disabled()"`を追加する必要はありません -->
+    <input [formField]="orderForm.couponCode" />
 
     @if (orderForm.couponCode().disabled()) {
       <p class="info">クーポンコードは50ドルを超える注文でのみ利用可能です</p>
@@ -264,35 +265,35 @@ NOTE: スキーマのコールバックパラメータ（この例では`schemaP
 `hidden()`シグナルは、フィールドが条件付きで非表示になるかどうかを示します。条件に基づいてフィールドを表示または非表示にするには、`@if`と共に`hidden()`を使用します:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, hidden } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, hidden} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-profile',
-  imports: [Field],
+  imports: [FormField],
   template: `
     <label>
-      <input type="checkbox" [field]="profileForm.isPublic" />
+      <input type="checkbox" [formField]="profileForm.isPublic" />
       プロフィールを公開する
     </label>
 
     @if (!profileForm.publicUrl().hidden()) {
       <label>
         公開URL
-        <input [field]="profileForm.publicUrl" />
+        <input [formField]="profileForm.publicUrl" />
       </label>
     }
-  `
+  `,
 })
 export class Profile {
   profileModel = signal({
     isPublic: false,
-    publicUrl: ''
-  })
+    publicUrl: '',
+  });
 
-  profileForm = form(this.profileModel, schemaPath => {
-    hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic))
-  })
+  profileForm = form(this.profileModel, (schemaPath) => {
+    hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic));
+  });
 }
 ```
 
@@ -303,37 +304,37 @@ export class Profile {
 `readonly()`シグナルは、フィールドが読み取り専用かどうかを示します。読み取り専用フィールドは値を表示しますが、ユーザーは編集できません:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, readonly } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, readonly} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-account',
-  imports: [Field],
+  imports: [FormField],
   template: `
     <label>
       ユーザー名（変更不可）
-      <input [field]="accountForm.username" />
+      <input [formField]="accountForm.username" />
     </label>
 
     <label>
       メールアドレス
-      <input [field]="accountForm.email" />
+      <input [formField]="accountForm.email" />
     </label>
-  `
+  `,
 })
 export class Account {
   accountModel = signal({
     username: 'johndoe',
-    email: 'john@example.com'
-  })
+    email: 'john@example.com',
+  });
 
-  accountForm = form(this.accountModel, schemaPath => {
-    readonly(schemaPath.username)
-  })
+  accountForm = form(this.accountModel, (schemaPath) => {
+    readonly(schemaPath.username);
+  });
 }
 ```
 
-NOTE: `[field]`ディレクティブは、フィールドの`readonly()`状態に基づいて`readonly`属性を自動的にバインドするため、手動で`[readonly]="field().readonly()"`を追加する必要はありません。
+NOTE: `[formField]`ディレクティブは、フィールドの`readonly()`状態に基づいて`readonly`属性を自動的にバインドするため、手動で`[readonly]="field().readonly()"`を追加する必要はありません。
 
 無効フィールドや非表示フィールドと同様に、読み取り専用フィールドは非インタラクティブであり、親フォームの状態に影響を与えません。`readonly()`状態は編集可能性とバリデーションに影響しますが、フィールドの値は変更しません。
 
@@ -354,17 +355,17 @@ NOTE: `[field]`ディレクティブは、フィールドの`readonly()`状態
 ```angular-ts
 @Component({
   template: `
-    <form>
-      <input [field]="loginForm.email" />
-      <input [field]="loginForm.password" />
+    <form novalidate>
+      <input [formField]="loginForm.email" />
+      <input [formField]="loginForm.password" />
 
       <button [disabled]="!loginForm().valid()">Sign In</button>
     </form>
-  `
+  `,
 })
 export class Login {
-  loginModel = signal({ email: '', password: '' })
-  loginForm = form(this.loginModel)
+  loginModel = signal({email: '', password: ''});
+  loginForm = form(this.loginModel);
 }
 ```
 
@@ -455,29 +456,29 @@ const orderForm = form(orderModel, (schemaPath) => {
 ユーザーがフィールドを操作した後にのみエラーを表示します:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, email } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, email} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-signup',
-  imports: [Field],
+  imports: [FormField],
   template: `
     <label>
       Email
-      <input type="email" [field]="signupForm.email" />
+      <input type="email" [formField]="signupForm.email" />
     </label>
 
     @if (signupForm.email().touched() && signupForm.email().invalid()) {
       <p class="error">{{ signupForm.email().errors()[0].message }}</p>
     }
-  `
+  `,
 })
 export class Signup {
-  signupModel = signal({ email: '', password: '' })
+  signupModel = signal({email: '', password: ''});
 
-  signupForm = form(this.signupModel, schemaPath => {
-    email(schemaPath.email)
-  })
+  signupForm = form(this.signupModel, (schemaPath) => {
+    email(schemaPath.email);
+  });
 }
 ```
 
@@ -488,35 +489,35 @@ export class Signup {
 `hidden()`シグナルを`@if`とともに使用して、条件付きでフィールドを表示または非表示にします:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, hidden } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, hidden} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-order',
-  imports: [Field],
+  imports: [FormField],
   template: `
     <label>
-      <input type="checkbox" [field]="orderForm.requiresShipping" />
+      <input type="checkbox" [formField]="orderForm.requiresShipping" />
       Requires shipping
     </label>
 
     @if (!orderForm.shippingAddress().hidden()) {
       <label>
         Shipping Address
-        <input [field]="orderForm.shippingAddress" />
+        <input [formField]="orderForm.shippingAddress" />
       </label>
     }
-  `
+  `,
 })
 export class Order {
   orderModel = signal({
     requiresShipping: false,
-    shippingAddress: ''
-  })
+    shippingAddress: '',
+  });
 
-  orderForm = form(this.orderModel, schemaPath => {
-    hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping))
-  })
+  orderForm = form(this.orderModel, (schemaPath) => {
+    hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping));
+  });
 }
 ```
 
@@ -594,12 +595,22 @@ export class Password {
 
 #### フォームの送信 {#form-submission}
 
-ユーザーがフォームを送信するときは、`submit()`関数を使用してバリデーションを処理し、エラーを表示します:
+ユーザーがフォームを送信するときは、`submit()`関数を使用してバリデーションを処理し、エラーを表示します。
 
-```ts
-import {Component, signal} from '@angular/core';
-import {form, submit, required, email} from '@angular/forms/signals';
+シグナルフォームは独自のバリデーションシステムでバリデーションを処理するため、ブラウザのデフォルトのフォーム動作を防ぐ必要があります。`<form>`要素に`novalidate`を追加してネイティブHTMLバリデーション（`required`や`type="email"`フィールドに対するブラウザのツールチップポップアップなど）を無効にし、送信ハンドラーで`$event.preventDefault()`を呼び出してブラウザがページをリロードするのを防ぎます:
+
+```angular-ts
+@Component({
+  template: `
+    <form novalidate (submit)="onSubmit($event)">
+      <input [formField]="registrationForm.username" />
+      <input type="email" [formField]="registrationForm.email" />
+      <input type="password" [formField]="registrationForm.password" />
 
+      <button type="submit">Register</button>
+    </form>
+  `,
+})
 export class Registration {
   registrationModel = signal({username: '', email: '', password: ''});
 
@@ -609,13 +620,14 @@ export class Registration {
     required(schemaPath.password);
   });
 
-  onSubmit() {
+  onSubmit(event: Event) {
+    event.preventDefault();
     submit(this.registrationForm, async () => {
       this.submitToServer();
     });
   }
 
-  submitToServer() {
+  private submitToServer() {
     // Send data to server
   }
 }
@@ -653,14 +665,14 @@ export class Contact {
 バリデーション状態に基づいてCSSクラスをバインドすることで、フォームにカスタムスタイルを適用できます:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, email } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, email} from '@angular/forms/signals';
 
 @Component({
   template: `
     <input
       type="email"
-      [field]="form.email"
+      [formField]="form.email"
       [class.is-invalid]="form.email().touched() && form.email().invalid()"
       [class.is-valid]="form.email().touched() && form.email().valid()"
     />
@@ -674,14 +686,14 @@ import { form, Field, email } from '@angular/forms/signals'
     input.is-valid {
       border: 2px solid green;
     }
-  `
+  `,
 })
 export class StyleExample {
-  model = signal({ email: '' })
+  model = signal({email: ''});
 
-  form = form(this.model, schemaPath => {
-    email(schemaPath.email)
-  })
+  form = form(this.model, (schemaPath) => {
+    email(schemaPath.email);
+  });
 }
 ```
 
diff --git a/adev-ja/src/content/guide/forms/signals/models.en.md b/adev-ja/src/content/guide/forms/signals/models.en.md
index 45580feec..3c1cf674f 100644
--- a/adev-ja/src/content/guide/forms/signals/models.en.md
+++ b/adev-ja/src/content/guide/forms/signals/models.en.md
@@ -15,30 +15,30 @@ Form models solve this by centralizing form data in a single writable signal. Wh
 A form model is a writable signal created with Angular's `signal()` function. The signal holds an object that represents your form's data structure.
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-login',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <input type="email" [field]="loginForm.email" />
-    <input type="password" [field]="loginForm.password" />
-  `
+    <input type="email" [formField]="loginForm.email" />
+    <input type="password" [formField]="loginForm.password" />
+  `,
 })
 export class LoginComponent {
   loginModel = signal({
     email: '',
-    password: ''
-  })
+    password: '',
+  });
 
-  loginForm = form(this.loginModel)
+  loginForm = form(this.loginModel);
 }
 ```
 
-The `form()` function accepts the model signal and creates a **field tree** - a special object structure that mirrors your model's shape. The field tree is both navigable (access child fields with dot notation like `loginForm.email`) and callable (call a field as a function to access its state).
+The [`form()`](api/forms/signals/form) function accepts the model signal and creates a **field tree** - a special object structure that mirrors your model's shape. The field tree is both navigable (access child fields with dot notation like `loginForm.email`) and callable (call a field as a function to access its state).
 
-The `[field]` directive binds each input element to its corresponding field in the field tree, enabling automatic two-way synchronization between the UI and model.
+The `[formField]` directive binds each input element to its corresponding field in the field tree, enabling automatic two-way synchronization between the UI and model.
 
 ### Using TypeScript types
 
@@ -74,14 +74,16 @@ const usernameField = loginForm.username;
 
 Form models should provide initial values for all fields you want to include in the field tree.
 
-```ts
+```ts {prefer}
 // Good: All fields initialized
 const userModel = signal({
   name: '',
   email: '',
   age: 0,
 });
+```
 
+```ts {avoid}
 // Avoid: Missing initial value
 const userModel = signal({
   name: '',
@@ -90,7 +92,7 @@ const userModel = signal({
 });
 ```
 
-For optional fields, explicitly set them to `null` or an empty value:
+For optional fields, explicitly set them to an empty value or `null`:
 
 ```ts
 interface UserData {
@@ -106,6 +108,8 @@ const userModel = signal<UserData>({
 });
 ```
 
+HELPFUL: Native text controls like `<input type=text>` and `<textarea>` don't support `null`, use `''` to represent an empty value.
+
 Fields set to `undefined` are excluded from the field tree. A model with `{value: undefined}` behaves identically to `{}` - accessing the field returns `undefined` rather than a `FieldTree`.
 
 ## Reading model values
@@ -117,7 +121,7 @@ You can access form values in two ways: directly from the model signal, or throu
 Access the model signal when you need the complete form data, such as during form submission:
 
 ```ts
-onSubmit() {
+async onSubmit() {
   const formData = this.loginModel();
   console.log(formData.email, formData.password);
 
@@ -139,15 +143,15 @@ Access field state when working with individual fields in templates or reactive
   template: `
     <p>Current email: {{ loginForm.email().value() }}</p>
     <p>Password length: {{ passwordLength() }}</p>
-  `
+  `,
 })
 export class LoginComponent {
-  loginModel = signal({ email: '', password: '' })
-  loginForm = form(this.loginModel)
+  loginModel = signal({email: '', password: ''});
+  loginForm = form(this.loginModel);
 
   passwordLength = computed(() => {
-    return this.loginForm.password().value().length
-  })
+    return this.loginForm.password().value().length;
+  });
 }
 ```
 
@@ -230,7 +234,7 @@ The form fields automatically update when the model changes, displaying the fetc
 
 ## Two-way data binding
 
-The `[field]` directive creates automatic two-way synchronization between the model, form state, and UI.
+The `[formField]` directive creates automatic two-way synchronization between the model, form state, and UI.
 
 ### How data flows
 
@@ -239,7 +243,7 @@ Changes flow bidirectionally:
 **User input → Model:**
 
 1. User types in an input element
-2. The `[field]` directive detects the change
+2. The `[formField]` directive detects the change
 3. Field state updates
 4. Model signal updates
 
@@ -248,7 +252,7 @@ Changes flow bidirectionally:
 1. Code updates the model with `set()` or `update()`
 2. Model signal notifies subscribers
 3. Field state updates
-4. The `[field]` directive updates the input element
+4. The `[formField]` directive updates the input element
 
 This synchronization happens automatically. You don't write subscriptions or event handlers to keep the model and UI in sync.
 
@@ -257,14 +261,14 @@ This synchronization happens automatically. You don't write subscriptions or eve
 ```angular-ts
 @Component({
   template: `
-    <input type="text" [field]="userForm.name" />
+    <input type="text" [formField]="userForm.name" />
     <button (click)="setName('Bob')">Set Name to Bob</button>
     <p>Current name: {{ userModel().name }}</p>
-  `
+  `,
 })
 export class UserComponent {
-  userModel = signal({ name: '' })
-  userForm = form(this.userModel)
+  userModel = signal({name: ''});
+  userForm = form(this.userModel);
 
   setName(name: string) {
     this.userForm.name().value.set(name);
@@ -351,10 +355,10 @@ In templates, you bind nested fields the same way as top-level fields:
 ```angular-ts
 @Component({
   template: `
-    <input [field]="userForm.profile.firstName" />
-    <input [field]="userForm.profile.lastName" />
+    <input [formField]="userForm.profile.firstName" />
+    <input [formField]="userForm.profile.lastName" />
 
-    <select [field]="userForm.settings.theme">
+    <select [formField]="userForm.settings.theme">
       <option value="light">Light</option>
       <option value="dark">Dark</option>
     </select>
diff --git a/adev-ja/src/content/guide/forms/signals/models.md b/adev-ja/src/content/guide/forms/signals/models.md
index 129fbcce8..e3bb43bd5 100644
--- a/adev-ja/src/content/guide/forms/signals/models.md
+++ b/adev-ja/src/content/guide/forms/signals/models.md
@@ -15,30 +15,30 @@ NOTE: フォームモデルは、コンポーネントの双方向バインデ
 フォームモデルは、Angularの`signal()`関数で作成される書き込み可能なシグナルです。このシグナルは、フォームのデータ構造を表すオブジェクトを保持します。
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-login',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <input type="email" [field]="loginForm.email" />
-    <input type="password" [field]="loginForm.password" />
-  `
+    <input type="email" [formField]="loginForm.email" />
+    <input type="password" [formField]="loginForm.password" />
+  `,
 })
 export class LoginComponent {
   loginModel = signal({
     email: '',
-    password: ''
-  })
+    password: '',
+  });
 
-  loginForm = form(this.loginModel)
+  loginForm = form(this.loginModel);
 }
 ```
 
-`form()`関数はモデルのシグナルを受け取り、モデルの形状を反映した特別なオブジェクト構造である**フィールドツリー**を作成します。フィールドツリーは、ナビゲート可能（`loginForm.email`のようにドット記法で子フィールドにアクセス）であり、呼び出し可能（フィールドを関数として呼び出してその状態にアクセス）でもあります。
+[`form()`](api/forms/signals/form)関数はモデルのシグナルを受け取り、モデルの形状を反映した特別なオブジェクト構造である**フィールドツリー**を作成します。フィールドツリーは、ナビゲート可能（`loginForm.email`のようにドット記法で子フィールドにアクセス）であり、呼び出し可能（フィールドを関数として呼び出してその状態にアクセス）でもあります。
 
-`[field]`ディレクティブは、各入力要素をフィールドツリー内の対応するフィールドにバインドし、UIとモデル間の自動的な双方向同期を可能にします。
+`[formField]`ディレクティブは、各入力要素をフィールドツリー内の対応するフィールドにバインドし、UIとモデル間の自動的な双方向同期を可能にします。
 
 ### TypeScriptの型を使用する {#using-typescript-types}
 
@@ -74,14 +74,16 @@ const usernameField = loginForm.username;
 
 フォームモデルは、フィールドツリーに含めたいすべてのフィールドに初期値を提供する必要があります。
 
-```ts
+```ts {prefer}
 // Good: All fields initialized
 const userModel = signal({
   name: '',
   email: '',
   age: 0,
 });
+```
 
+```ts {avoid}
 // Avoid: Missing initial value
 const userModel = signal({
   name: '',
@@ -90,7 +92,7 @@ const userModel = signal({
 });
 ```
 
-オプショナルなフィールドについては、明示的に`null`または空の値を設定してください:
+オプショナルなフィールドについては、明示的に空の値または`null`を設定してください:
 
 ```ts
 interface UserData {
@@ -106,6 +108,8 @@ const userModel = signal<UserData>({
 });
 ```
 
+HELPFUL: `<input type=text>`や`<textarea>`のようなネイティブテキストコントロールは`null`をサポートしていないため、空の値を表すには`''`を使用してください。
+
 `undefined`に設定されたフィールドは、フィールドツリーから除外されます。`{value: undefined}`を持つモデルは`{}`と全く同じように動作し、そのフィールドにアクセスすると`FieldTree`ではなく`undefined`が返されます。
 
 ## モデルの値を読み取る {#reading-model-values}
@@ -117,7 +121,7 @@ const userModel = signal<UserData>({
 フォームの送信時など、完全なフォームデータが必要な場合は、モデルのシグナルにアクセスします:
 
 ```ts
-onSubmit() {
+async onSubmit() {
   const formData = this.loginModel();
   console.log(formData.email, formData.password);
 
@@ -139,7 +143,7 @@ onSubmit() {
   template: `
     <p>Current email: {{ loginForm.email().value() }}</p>
     <p>Password length: {{ passwordLength() }}</p>
-  `
+  `,
 })
 export class LoginComponent {
   loginModel = signal({email: '', password: ''});
@@ -230,7 +234,7 @@ export class UserProfileComponent {
 
 ## 双方向データバインディング {#two-way-data-binding}
 
-`[field]`ディレクティブは、モデル、フォームの状態、UIの間で自動的な双方向の同期を作成します。
+`[formField]`ディレクティブは、モデル、フォームの状態、UIの間で自動的な双方向の同期を作成します。
 
 ### データフローの仕組み {#how-data-flows}
 
@@ -239,7 +243,7 @@ export class UserProfileComponent {
 **ユーザー入力 → モデル:**
 
 1. ユーザーが入力要素に入力する
-2. `[field]`ディレクティブが変更を検知する
+2. `[formField]`ディレクティブが変更を検知する
 3. フィールドの状態が更新される
 4. モデルのシグナルが更新される
 
@@ -248,7 +252,7 @@ export class UserProfileComponent {
 1. コードが`set()`または`update()`でモデルを更新する
 2. モデルのシグナルがサブスクライバーに通知する
 3. フィールドの状態が更新される
-4. `[field]`ディレクティブが入力要素を更新する
+4. `[formField]`ディレクティブが入力要素を更新する
 
 この同期は自動的に行われます。モデルとUIを同期させるために、サブスクリプションやイベントハンドラーを記述する必要はありません。
 
@@ -257,10 +261,10 @@ export class UserProfileComponent {
 ```angular-ts
 @Component({
   template: `
-    <input type="text" [field]="userForm.name" />
+    <input type="text" [formField]="userForm.name" />
     <button (click)="setName('Bob')">Set Name to Bob</button>
     <p>Current name: {{ userModel().name }}</p>
-  `
+  `,
 })
 export class UserComponent {
   userModel = signal({name: ''});
@@ -351,10 +355,10 @@ userForm.settings.theme; // FieldTree<string>
 ```angular-ts
 @Component({
   template: `
-    <input [field]="userForm.profile.firstName" />
-    <input [field]="userForm.profile.lastName" />
+    <input [formField]="userForm.profile.firstName" />
+    <input [formField]="userForm.profile.lastName" />
 
-    <select [field]="userForm.settings.theme">
+    <select [formField]="userForm.settings.theme">
       <option value="light">Light</option>
       <option value="dark">Dark</option>
     </select>
diff --git a/adev-ja/src/content/guide/forms/signals/validation.en.md b/adev-ja/src/content/guide/forms/signals/validation.en.md
index b1e0aa26c..c5c0d0fd4 100644
--- a/adev-ja/src/content/guide/forms/signals/validation.en.md
+++ b/adev-ja/src/content/guide/forms/signals/validation.en.md
@@ -61,38 +61,38 @@ Signal Forms provides validation rules for common validation scenarios. All buil
 The `required()` validation rule ensures a field has a value:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, required } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-registration',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Username
-        <input [field]="registrationForm.username" />
+        <input [formField]="registrationForm.username" />
       </label>
 
       <label>
         Email
-        <input type="email" [field]="registrationForm.email" />
+        <input type="email" [formField]="registrationForm.email" />
       </label>
 
       <button type="submit">Register</button>
     </form>
-  `
+  `,
 })
 export class RegistrationComponent {
   registrationModel = signal({
     username: '',
-    email: ''
-  })
+    email: '',
+  });
 
   registrationForm = form(this.registrationModel, (schemaPath) => {
-    required(schemaPath.username, { message: 'Username is required' })
-    required(schemaPath.email, { message: 'Email is required' })
-  })
+    required(schemaPath.username, {message: 'Username is required'});
+    required(schemaPath.email, {message: 'Email is required'});
+  });
 }
 ```
 
@@ -102,7 +102,6 @@ A field is considered "empty" when:
 | ------------------------ | ------- |
 | Value is `null`          | `null`, |
 | Value is an empty string | `''`    |
-| Value is an empty array  | `[]`    |
 
 For conditional requirements, use the `when` option:
 
@@ -117,32 +116,34 @@ registrationForm = form(this.registrationModel, (schemaPath) => {
 
 The validation rule only runs when the `when` function returns `true`.
 
+NOTE: `required` will return `true` for empty array. Use [`minLength()`](#minlength-and-maxlength) to validate arrays.
+
 ### email()
 
 The `email()` validation rule checks for valid email format:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, email } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, email} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-contact',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Your Email
-        <input type="email" [field]="contactForm.email" />
+        <input type="email" [formField]="contactForm.email" />
       </label>
     </form>
-  `
+  `,
 })
 export class ContactComponent {
-  contactModel = signal({ email: '' })
+  contactModel = signal({email: ''});
 
   contactForm = form(this.contactModel, (schemaPath) => {
-    email(schemaPath.email, { message: 'Please enter a valid email address' })
-  })
+    email(schemaPath.email, {message: 'Please enter a valid email address'});
+  });
 }
 ```
 
@@ -153,39 +154,39 @@ The `email()` validation rule uses a standard email format regex. It accepts add
 The `min()` and `max()` validation rules work with numeric values:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, min, max } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, min, max} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-age-form',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Age
-        <input type="number" [field]="ageForm.age" />
+        <input type="number" [formField]="ageForm.age" />
       </label>
 
       <label>
         Rating (1-5)
-        <input type="number" [field]="ageForm.rating" />
+        <input type="number" [formField]="ageForm.rating" />
       </label>
     </form>
-  `
+  `,
 })
 export class AgeFormComponent {
   ageModel = signal({
     age: 0,
-    rating: 0
-  })
+    rating: 0,
+  });
 
   ageForm = form(this.ageModel, (schemaPath) => {
-    min(schemaPath.age, 18, { message: 'You must be at least 18 years old' })
-    max(schemaPath.age, 120, { message: 'Please enter a valid age' })
+    min(schemaPath.age, 18, {message: 'You must be at least 18 years old'});
+    max(schemaPath.age, 120, {message: 'Please enter a valid age'});
 
-    min(schemaPath.rating, 1, { message: 'Rating must be at least 1' })
-    max(schemaPath.rating, 5, { message: 'Rating cannot exceed 5' })
-  })
+    min(schemaPath.rating, 1, {message: 'Rating must be at least 1'});
+    max(schemaPath.rating, 5, {message: 'Rating cannot exceed 5'});
+  });
 }
 ```
 
@@ -204,38 +205,38 @@ ageForm = form(this.ageModel, (schemaPath) => {
 The `minLength()` and `maxLength()` validation rules work with strings and arrays:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, minLength, maxLength } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, minLength, maxLength} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-password-form',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Password
-        <input type="password" [field]="passwordForm.password" />
+        <input type="password" [formField]="passwordForm.password" />
       </label>
 
       <label>
         Bio
-        <textarea [field]="passwordForm.bio"></textarea>
+        <textarea [formField]="passwordForm.bio"></textarea>
       </label>
     </form>
-  `
+  `,
 })
 export class PasswordFormComponent {
   passwordModel = signal({
     password: '',
-    bio: ''
-  })
+    bio: '',
+  });
 
   passwordForm = form(this.passwordModel, (schemaPath) => {
-    minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' })
-    maxLength(schemaPath.password, 100, { message: 'Password is too long' })
+    minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'});
+    maxLength(schemaPath.password, 100, {message: 'Password is too long'});
 
-    maxLength(schemaPath.bio, 500, { message: 'Bio cannot exceed 500 characters' })
-  })
+    maxLength(schemaPath.bio, 500, {message: 'Bio cannot exceed 500 characters'});
+  });
 }
 ```
 
@@ -246,41 +247,41 @@ For strings, "length" means the number of characters. For arrays, "length" means
 The `pattern()` validation rule validates against a regular expression:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, pattern } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, pattern} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-phone-form',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Phone Number
-        <input [field]="phoneForm.phone" placeholder="555-123-4567" />
+        <input [formField]="phoneForm.phone" placeholder="555-123-4567" />
       </label>
 
       <label>
         Postal Code
-        <input [field]="phoneForm.postalCode" placeholder="12345" />
+        <input [formField]="phoneForm.postalCode" placeholder="12345" />
       </label>
     </form>
-  `
+  `,
 })
 export class PhoneFormComponent {
   phoneModel = signal({
     phone: '',
-    postalCode: ''
-  })
+    postalCode: '',
+  });
 
   phoneForm = form(this.phoneModel, (schemaPath) => {
     pattern(schemaPath.phone, /^\d{3}-\d{3}-\d{4}$/, {
-      message: 'Phone must be in format: 555-123-4567'
-    })
+      message: 'Phone must be in format: 555-123-4567',
+    });
 
     pattern(schemaPath.postalCode, /^\d{5}$/, {
-      message: 'Postal code must be 5 digits'
-    })
-  })
+      message: 'Postal code must be 5 digits',
+    });
+  });
 }
 ```
 
@@ -299,7 +300,7 @@ Forms can include arrays of nested objects (for example, a list of order items).
 
 ```ts
 import {Component, signal} from '@angular/core';
-import {applyEach, Field, form, min, required, SchemaPathTree} from '@angular/forms/signals';
+import {applyEach, FormField, form, min, required, SchemaPathTree} from '@angular/forms/signals';
 
 type Item = {name: string; quantity: number};
 
@@ -355,44 +356,44 @@ Built-in validation rules automatically set the `kind` property. The `message` p
 All built-in validation rules accept a `message` option for custom error text:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, required, minLength } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required, minLength} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-signup',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Username
-        <input [field]="signupForm.username" />
+        <input [formField]="signupForm.username" />
       </label>
 
       <label>
         Password
-        <input type="password" [field]="signupForm.password" />
+        <input type="password" [formField]="signupForm.password" />
       </label>
     </form>
-  `
+  `,
 })
 export class SignupComponent {
   signupModel = signal({
     username: '',
-    password: ''
-  })
+    password: '',
+  });
 
   signupForm = form(this.signupModel, (schemaPath) => {
     required(schemaPath.username, {
-      message: 'Please choose a username'
-    })
+      message: 'Please choose a username',
+    });
 
     required(schemaPath.password, {
-      message: 'Password cannot be empty'
-    })
+      message: 'Password cannot be empty',
+    });
     minLength(schemaPath.password, 12, {
-      message: 'Password must be at least 12 characters for security'
-    })
-  })
+      message: 'Password must be at least 12 characters for security',
+    });
+  });
 }
 ```
 
@@ -428,36 +429,36 @@ The `validate()` function creates custom validation rules. It receives a validat
 | `null` or `undefined` | Value is valid   |
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, validate } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, validate} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-url-form',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Website URL
-        <input [field]="urlForm.website" />
+        <input [formField]="urlForm.website" />
       </label>
     </form>
-  `
+  `,
 })
 export class UrlFormComponent {
-  urlModel = signal({ website: '' })
+  urlModel = signal({website: ''});
 
   urlForm = form(this.urlModel, (schemaPath) => {
     validate(schemaPath.website, ({value}) => {
       if (!value().startsWith('https://')) {
         return {
           kind: 'https',
-          message: 'URL must start with https://'
-        }
+          message: 'URL must start with https://',
+        };
       }
 
-      return null
-    })
-  })
+      return null;
+    });
+  });
 }
 ```
 
@@ -477,13 +478,53 @@ NOTE: Child fields also have a `key` signal, and array item fields have both `ke
 
 Return an error object with `kind` and `message` when validation fails. Return `null` or `undefined` when validation passes.
 
+### Using validateTree()
+
+The `validateTree()` function creates custom validation rules that can target multiple fields or provide complex validation logic for a whole subtree.
+
+```angular-ts
+import {Component, model} from '@angular/core';
+import {form, FormField, validateTree} from '@angular/forms/signals';
+
+interface User {
+  firstName: string;
+  lastName: string;
+}
+
+@Component({
+  /* ... */
+})
+export class UserFormComponent {
+  readonly userModel = model<DTO>({
+    firstName: '',
+    lastName: '',
+  });
+
+  userForm = form(this.userModel, (path) => {
+    validateTree(path, (ctx) => {
+      if (ctx.valueOf(path.firstName).length < 5) {
+        return {
+          kind: 'minLength5',
+          message: 'First name must be at least 5 characters',
+          fieldTree: ctx.fieldTree.lastName,
+        };
+      }
+
+      return null;
+    });
+  });
+}
+```
+
+The `validateTree()` validator function receives the same `FieldContext` object as `validate()`.
+
 ### Reusable validation rules
 
 Create reusable validation rule functions by wrapping `validate()`:
 
 ```ts
-function url(field: any, options?: {message?: string}) {
-  validate(field, ({value}) => {
+function url(path: SchemaPath<string>, options?: {message?: string}) {
+  validate(path, ({value}) => {
     try {
       new URL(value());
       return null;
@@ -496,8 +537,8 @@ function url(field: any, options?: {message?: string}) {
   });
 }
 
-function phoneNumber(field: any, options?: {message?: string}) {
-  validate(field, ({value}) => {
+function phoneNumber(path: SchemaPath<string>, options?: {message?: string}) {
+  validate(path, ({value}) => {
     const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
 
     if (!phoneRegex.test(value())) {
@@ -528,54 +569,54 @@ Cross-field validation compares or relates multiple field values.
 A common scenario for cross-field validation is password confirmation:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, required, minLength, validate } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required, minLength, validate} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-password-change',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         New Password
-        <input type="password" [field]="passwordForm.password" />
+        <input type="password" [formField]="passwordForm.password" />
       </label>
 
       <label>
         Confirm Password
-        <input type="password" [field]="passwordForm.confirmPassword" />
+        <input type="password" [formField]="passwordForm.confirmPassword" />
       </label>
 
       <button type="submit">Change Password</button>
     </form>
-  `
+  `,
 })
 export class PasswordChangeComponent {
   passwordModel = signal({
     password: '',
-    confirmPassword: ''
-  })
+    confirmPassword: '',
+  });
 
   passwordForm = form(this.passwordModel, (schemaPath) => {
-    required(schemaPath.password, { message: 'Password is required' })
-    minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' })
+    required(schemaPath.password, {message: 'Password is required'});
+    minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'});
 
-    required(schemaPath.confirmPassword, { message: 'Please confirm your password' })
+    required(schemaPath.confirmPassword, {message: 'Please confirm your password'});
 
     validate(schemaPath.confirmPassword, ({value, valueOf}) => {
-      const confirmPassword = value()
-      const password = valueOf(schemaPath.password)
+      const confirmPassword = value();
+      const password = valueOf(schemaPath.password);
 
       if (confirmPassword !== password) {
         return {
           kind: 'passwordMismatch',
-          message: 'Passwords do not match'
-        }
+          message: 'Passwords do not match',
+        };
       }
 
-      return null
-    })
-  })
+      return null;
+    });
+  });
 }
 ```
 
@@ -590,33 +631,30 @@ Async validation handles validation that requires external data sources, like ch
 The `validateHttp()` function performs HTTP-based validation:
 
 ```angular-ts
-import { Component, signal, inject } from '@angular/core'
-import { HttpClient } from '@angular/common/http'
-import { form, Field, required, validateHttp } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required, validateHttp} from '@angular/forms/signals';
 
 @Component({
-  selector: 'app-username-form',
-  imports: [Field],
+  selector: 'app-username-form',|
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Username
-        <input [field]="usernameForm.username" />
+        <input [formField]="usernameForm.username" />
 
         @if (usernameForm.username().pending()) {
           <span class="checking">Checking availability...</span>
         }
       </label>
     </form>
-  `
+  `,
 })
 export class UsernameFormComponent {
-  http = inject(HttpClient)
-
-  usernameModel = signal({ username: '' })
+  usernameModel = signal({username: ''});
 
   usernameForm = form(this.usernameModel, (schemaPath) => {
-    required(schemaPath.username, { message: 'Username is required' })
+    required(schemaPath.username, {message: 'Username is required'});
 
     validateHttp(schemaPath.username, {
       request: ({value}) => `/api/check-username?username=${value()}`,
@@ -624,17 +662,17 @@ export class UsernameFormComponent {
         if (response.taken) {
           return {
             kind: 'usernameTaken',
-            message: 'Username is already taken'
-          }
+            message: 'Username is already taken',
+          };
         }
-        return null
+        return null;
       },
       onError: (error) => ({
         kind: 'networkError',
-        message: 'Could not verify username availability'
-      })
-    })
-  })
+        message: 'Could not verify username availability',
+      }),
+    });
+  });
 }
 ```
 
diff --git a/adev-ja/src/content/guide/forms/signals/validation.md b/adev-ja/src/content/guide/forms/signals/validation.md
index 1f48d91da..94058da45 100644
--- a/adev-ja/src/content/guide/forms/signals/validation.md
+++ b/adev-ja/src/content/guide/forms/signals/validation.md
@@ -61,48 +61,47 @@ NOTE: スキーマのコールバックパラメータ（この例では`schemaP
 `required()`バリデーションルールは、フィールドに値があることを保証します:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, required } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-registration',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Username
-        <input [field]="registrationForm.username" />
+        <input [formField]="registrationForm.username" />
       </label>
 
       <label>
         Email
-        <input type="email" [field]="registrationForm.email" />
+        <input type="email" [formField]="registrationForm.email" />
       </label>
 
       <button type="submit">Register</button>
     </form>
-  `
+  `,
 })
 export class RegistrationComponent {
   registrationModel = signal({
     username: '',
-    email: ''
-  })
+    email: '',
+  });
 
   registrationForm = form(this.registrationModel, (schemaPath) => {
-    required(schemaPath.username, { message: 'Username is required' })
-    required(schemaPath.email, { message: 'Email is required' })
-  })
+    required(schemaPath.username, {message: 'Username is required'});
+    required(schemaPath.email, {message: 'Email is required'});
+  });
 }
 ```
 
 フィールドは次の場合に「空」と見なされます:
 
-| 条件 | 例 |
+| 条件                     | 例      |
 | ------------------------ | ------- |
-| 値が`null`である | `null` |
-| 値が空文字列である | `''` |
-| 値が空の配列である | `[]` |
+| 値が`null`である         | `null`, |
+| 値が空文字列である       | `''`    |
 
 条件付きの要件には、`when`オプションを使用します:
 
@@ -117,32 +116,34 @@ registrationForm = form(this.registrationModel, (schemaPath) => {
 
 バリデーションルールは、`when`関数が`true`を返す場合にのみ実行されます。
 
+NOTE: `required`は空の配列に対して`true`を返します。配列のバリデーションには[`minLength()`](#minlength-and-maxlength)を使用してください。
+
 ### email() {#email}
 
 `email()`バリデーションルールは、有効なメール形式をチェックします:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, email } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, email} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-contact',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Your Email
-        <input type="email" [field]="contactForm.email" />
+        <input type="email" [formField]="contactForm.email" />
       </label>
     </form>
-  `
+  `,
 })
 export class ContactComponent {
-  contactModel = signal({ email: '' })
+  contactModel = signal({email: ''});
 
   contactForm = form(this.contactModel, (schemaPath) => {
-    email(schemaPath.email, { message: 'Please enter a valid email address' })
-  })
+    email(schemaPath.email, {message: 'Please enter a valid email address'});
+  });
 }
 ```
 
@@ -153,39 +154,39 @@ export class ContactComponent {
 `min()`と`max()`バリデーションルールは、数値に対して機能します:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, min, max } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, min, max} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-age-form',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Age
-        <input type="number" [field]="ageForm.age" />
+        <input type="number" [formField]="ageForm.age" />
       </label>
 
       <label>
         Rating (1-5)
-        <input type="number" [field]="ageForm.rating" />
+        <input type="number" [formField]="ageForm.rating" />
       </label>
     </form>
-  `
+  `,
 })
 export class AgeFormComponent {
   ageModel = signal({
     age: 0,
-    rating: 0
-  })
+    rating: 0,
+  });
 
   ageForm = form(this.ageModel, (schemaPath) => {
-    min(schemaPath.age, 18, { message: 'You must be at least 18 years old' })
-    max(schemaPath.age, 120, { message: 'Please enter a valid age' })
+    min(schemaPath.age, 18, {message: 'You must be at least 18 years old'});
+    max(schemaPath.age, 120, {message: 'Please enter a valid age'});
 
-    min(schemaPath.rating, 1, { message: 'Rating must be at least 1' })
-    max(schemaPath.rating, 5, { message: 'Rating cannot exceed 5' })
-  })
+    min(schemaPath.rating, 1, {message: 'Rating must be at least 1'});
+    max(schemaPath.rating, 5, {message: 'Rating cannot exceed 5'});
+  });
 }
 ```
 
@@ -204,38 +205,38 @@ ageForm = form(this.ageModel, (schemaPath) => {
 `minLength()`と`maxLength()`バリデーションルールは、文字列と配列に対して機能します:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, minLength, maxLength } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, minLength, maxLength} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-password-form',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Password
-        <input type="password" [field]="passwordForm.password" />
+        <input type="password" [formField]="passwordForm.password" />
       </label>
 
       <label>
         Bio
-        <textarea [field]="passwordForm.bio"></textarea>
+        <textarea [formField]="passwordForm.bio"></textarea>
       </label>
     </form>
-  `
+  `,
 })
 export class PasswordFormComponent {
   passwordModel = signal({
     password: '',
-    bio: ''
-  })
+    bio: '',
+  });
 
   passwordForm = form(this.passwordModel, (schemaPath) => {
-    minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' })
-    maxLength(schemaPath.password, 100, { message: 'Password is too long' })
+    minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'});
+    maxLength(schemaPath.password, 100, {message: 'Password is too long'});
 
-    maxLength(schemaPath.bio, 500, { message: 'Bio cannot exceed 500 characters' })
-  })
+    maxLength(schemaPath.bio, 500, {message: 'Bio cannot exceed 500 characters'});
+  });
 }
 ```
 
@@ -246,41 +247,41 @@ export class PasswordFormComponent {
 `pattern()`バリデーションルールは、正規表現に対してバリデーションを行います:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, pattern } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, pattern} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-phone-form',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Phone Number
-        <input [field]="phoneForm.phone" placeholder="555-123-4567" />
+        <input [formField]="phoneForm.phone" placeholder="555-123-4567" />
       </label>
 
       <label>
         Postal Code
-        <input [field]="phoneForm.postalCode" placeholder="12345" />
+        <input [formField]="phoneForm.postalCode" placeholder="12345" />
       </label>
     </form>
-  `
+  `,
 })
 export class PhoneFormComponent {
   phoneModel = signal({
     phone: '',
-    postalCode: ''
-  })
+    postalCode: '',
+  });
 
   phoneForm = form(this.phoneModel, (schemaPath) => {
     pattern(schemaPath.phone, /^\d{3}-\d{3}-\d{4}$/, {
-      message: 'Phone must be in format: 555-123-4567'
-    })
+      message: 'Phone must be in format: 555-123-4567',
+    });
 
     pattern(schemaPath.postalCode, /^\d{5}$/, {
-      message: 'Postal code must be 5 digits'
-    })
-  })
+      message: 'Postal code must be 5 digits',
+    });
+  });
 }
 ```
 
@@ -299,7 +300,7 @@ export class PhoneFormComponent {
 
 ```ts
 import {Component, signal} from '@angular/core';
-import {applyEach, Field, form, min, required, SchemaPathTree} from '@angular/forms/signals';
+import {applyEach, FormField, form, min, required, SchemaPathTree} from '@angular/forms/signals';
 
 type Item = {name: string; quantity: number};
 
@@ -355,44 +356,44 @@ NOTE: このセクションでは、バリデーションルールが生成す
 すべての組み込みバリデーションルールは、カスタムエラーテキストのために`message`オプションを受け入れます:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, required, minLength } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required, minLength} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-signup',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Username
-        <input [field]="signupForm.username" />
+        <input [formField]="signupForm.username" />
       </label>
 
       <label>
         Password
-        <input type="password" [field]="signupForm.password" />
+        <input type="password" [formField]="signupForm.password" />
       </label>
     </form>
-  `
+  `,
 })
 export class SignupComponent {
   signupModel = signal({
     username: '',
-    password: ''
-  })
+    password: '',
+  });
 
   signupForm = form(this.signupModel, (schemaPath) => {
     required(schemaPath.username, {
-      message: 'Please choose a username'
-    })
+      message: 'Please choose a username',
+    });
 
     required(schemaPath.password, {
-      message: 'Password cannot be empty'
-    })
+      message: 'Password cannot be empty',
+    });
     minLength(schemaPath.password, 12, {
-      message: 'Password must be at least 12 characters for security'
-    })
-  })
+      message: 'Password must be at least 12 characters for security',
+    });
+  });
 }
 ```
 
@@ -428,36 +429,36 @@ TIP: テンプレートで`touched() && invalid()`パターンを使用すると
 | `null` または `undefined` | 値は有効です     |
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, validate } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, validate} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-url-form',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Website URL
-        <input [field]="urlForm.website" />
+        <input [formField]="urlForm.website" />
       </label>
     </form>
-  `
+  `,
 })
 export class UrlFormComponent {
-  urlModel = signal({ website: '' })
+  urlModel = signal({website: ''});
 
   urlForm = form(this.urlModel, (schemaPath) => {
     validate(schemaPath.website, ({value}) => {
       if (!value().startsWith('https://')) {
         return {
           kind: 'https',
-          message: 'URL must start with https://'
-        }
+          message: 'URL must start with https://',
+        };
       }
 
-      return null
-    })
-  })
+      return null;
+    });
+  });
 }
 ```
 
@@ -477,13 +478,53 @@ NOTE: 子フィールドには`key`シグナルもあり、配列アイテムの
 
 バリデーションが失敗した場合は`kind`と`message`を持つエラーオブジェクトを返します。バリデーションが成功した場合は`null`または`undefined`を返します。
 
+### validateTree()の使用 {#using-validatetree}
+
+`validateTree()`関数は、複数のフィールドをターゲットにしたり、サブツリー全体に複雑なバリデーションロジックを提供したりできるカスタムバリデーションルールを作成します。
+
+```angular-ts
+import {Component, model} from '@angular/core';
+import {form, FormField, validateTree} from '@angular/forms/signals';
+
+interface User {
+  firstName: string;
+  lastName: string;
+}
+
+@Component({
+  /* ... */
+})
+export class UserFormComponent {
+  readonly userModel = model<DTO>({
+    firstName: '',
+    lastName: '',
+  });
+
+  userForm = form(this.userModel, (path) => {
+    validateTree(path, (ctx) => {
+      if (ctx.valueOf(path.firstName).length < 5) {
+        return {
+          kind: 'minLength5',
+          message: 'First name must be at least 5 characters',
+          fieldTree: ctx.fieldTree.lastName,
+        };
+      }
+
+      return null;
+    });
+  });
+}
+```
+
+`validateTree()`バリデーター関数は、`validate()`と同じ`FieldContext`オブジェクトを受け取ります。
+
 ### 再利用可能なバリデーションルール {#reusable-validation-rules}
 
 `validate()`をラップして、再利用可能なバリデーションルール関数を作成します:
 
 ```ts
-function url(field: any, options?: {message?: string}) {
-  validate(field, ({value}) => {
+function url(path: SchemaPath<string>, options?: {message?: string}) {
+  validate(path, ({value}) => {
     try {
       new URL(value());
       return null;
@@ -496,8 +537,8 @@ function url(field: any, options?: {message?: string}) {
   });
 }
 
-function phoneNumber(field: any, options?: {message?: string}) {
-  validate(field, ({value}) => {
+function phoneNumber(path: SchemaPath<string>, options?: {message?: string}) {
+  validate(path, ({value}) => {
     const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
 
     if (!phoneRegex.test(value())) {
@@ -528,54 +569,54 @@ urlForm = form(this.urlModel, (schemaPath) => {
 クロスフィールドバリデーションの一般的なシナリオは、パスワードの確認です:
 
 ```angular-ts
-import { Component, signal } from '@angular/core'
-import { form, Field, required, minLength, validate } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required, minLength, validate} from '@angular/forms/signals';
 
 @Component({
   selector: 'app-password-change',
-  imports: [Field],
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         New Password
-        <input type="password" [field]="passwordForm.password" />
+        <input type="password" [formField]="passwordForm.password" />
       </label>
 
       <label>
         Confirm Password
-        <input type="password" [field]="passwordForm.confirmPassword" />
+        <input type="password" [formField]="passwordForm.confirmPassword" />
       </label>
 
       <button type="submit">Change Password</button>
     </form>
-  `
+  `,
 })
 export class PasswordChangeComponent {
   passwordModel = signal({
     password: '',
-    confirmPassword: ''
-  })
+    confirmPassword: '',
+  });
 
   passwordForm = form(this.passwordModel, (schemaPath) => {
-    required(schemaPath.password, { message: 'Password is required' })
-    minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' })
+    required(schemaPath.password, {message: 'Password is required'});
+    minLength(schemaPath.password, 8, {message: 'Password must be at least 8 characters'});
 
-    required(schemaPath.confirmPassword, { message: 'Please confirm your password' })
+    required(schemaPath.confirmPassword, {message: 'Please confirm your password'});
 
     validate(schemaPath.confirmPassword, ({value, valueOf}) => {
-      const confirmPassword = value()
-      const password = valueOf(schemaPath.password)
+      const confirmPassword = value();
+      const password = valueOf(schemaPath.password);
 
       if (confirmPassword !== password) {
         return {
           kind: 'passwordMismatch',
-          message: 'Passwords do not match'
-        }
+          message: 'Passwords do not match',
+        };
       }
 
-      return null
-    })
-  })
+      return null;
+    });
+  });
 }
 ```
 
@@ -590,33 +631,30 @@ export class PasswordChangeComponent {
 `validateHttp()`関数は、HTTPベースのバリデーションを実行します:
 
 ```angular-ts
-import { Component, signal, inject } from '@angular/core'
-import { HttpClient } from '@angular/common/http'
-import { form, Field, required, validateHttp } from '@angular/forms/signals'
+import {Component, signal} from '@angular/core';
+import {form, FormField, required, validateHttp} from '@angular/forms/signals';
 
 @Component({
-  selector: 'app-username-form',
-  imports: [Field],
+  selector: 'app-username-form',|
+  imports: [FormField],
   template: `
-    <form>
+    <form novalidate>
       <label>
         Username
-        <input [field]="usernameForm.username" />
+        <input [formField]="usernameForm.username" />
 
         @if (usernameForm.username().pending()) {
           <span class="checking">Checking availability...</span>
         }
       </label>
     </form>
-  `
+  `,
 })
 export class UsernameFormComponent {
-  http = inject(HttpClient)
-
-  usernameModel = signal({ username: '' })
+  usernameModel = signal({username: ''});
 
   usernameForm = form(this.usernameModel, (schemaPath) => {
-    required(schemaPath.username, { message: 'Username is required' })
+    required(schemaPath.username, {message: 'Username is required'});
 
     validateHttp(schemaPath.username, {
       request: ({value}) => `/api/check-username?username=${value()}`,
@@ -624,17 +662,17 @@ export class UsernameFormComponent {
         if (response.taken) {
           return {
             kind: 'usernameTaken',
-            message: 'Username is already taken'
-          }
+            message: 'Username is already taken',
+          };
         }
-        return null
+        return null;
       },
       onError: (error) => ({
         kind: 'networkError',
-        message: 'Could not verify username availability'
-      })
-    })
-  })
+        message: 'Could not verify username availability',
+      }),
+    });
+  });
 }
 ```
 

From 34ceadc4897a610767e8146a408a3224190b6f0c Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 09:38:46 +0900
Subject: [PATCH 29/55] fix(docs): migrate miscellaneous docs changes

- hierarchical-dependency-injection: Component name simplification
- reactive-forms: Formatting updates
- utility-apis: Table formatting
- image-optimization: Add transform property section
- ssr: Component naming, formatting updates
---
 .../hierarchical-dependency-injection.en.md   | 175 +++++++++---------
 .../di/hierarchical-dependency-injection.md   | 173 +++++++++--------
 .../content/guide/forms/reactive-forms.en.md  |  23 +--
 .../src/content/guide/forms/reactive-forms.md |  23 +--
 .../content/guide/image-optimization.en.md    |  34 ++++
 .../src/content/guide/image-optimization.md   |  34 ++++
 adev-ja/src/content/guide/ssr.en.md           |  16 +-
 adev-ja/src/content/guide/ssr.md              |  16 +-
 .../content/guide/testing/utility-apis.en.md  |  32 ++--
 .../src/content/guide/testing/utility-apis.md |  30 +--
 10 files changed, 308 insertions(+), 248 deletions(-)

diff --git a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md
index f9a09ce17..75e92df64 100644
--- a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md
+++ b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.en.md
@@ -68,7 +68,7 @@ There are two more injectors above `root`, an additional `EnvironmentInjector` a
 Consider how Angular bootstraps the application with the following in `main.ts`:
 
 ```ts
-bootstrapApplication(AppComponent, appConfig);
+bootstrapApplication(App, appConfig);
 ```
 
 The `bootstrapApplication()` method creates a child injector of the platform injector which is configured by the `ApplicationConfig` instance.
@@ -106,7 +106,7 @@ All requests forward up to the root injector, whether you configured it with the
 If you configure an app-wide provider in the `ApplicationConfig` of `bootstrapApplication`, it overrides one configured for `root` in the `@Injectable()` metadata.
 You can do this to configure a non-default provider of a service that is shared with multiple applications.
 
-Here is an example of the case where the component router configuration includes a non-default [location strategy](guide/routing#location-strategy) by listing its provider in the `providers` list of the `ApplicationConfig`.
+Here is an example of the case where the component router configuration includes a non-default [location strategy](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles) by listing its provider in the `providers` list of the `ApplicationConfig`.
 
 ```ts
 providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}];
@@ -193,8 +193,8 @@ Additionally, you can combine all of the modifiers except:
 This way, if it can't be resolved at runtime, Angular resolves the service as `null`, rather than throwing an error.
 In the following example, the service, `OptionalService`, isn't provided in the service, `ApplicationConfig`, `@NgModule()`, or component class, so it isn't available anywhere in the app.
 
-```ts {header:"src/app/optional/optional.component.ts"}
-export class OptionalComponent {
+```ts {header:"src/app/optional/optional.ts"}
+export class Optional {
   public optional? = inject(OptionalService, {optional: true});
 }
 ```
@@ -206,15 +206,15 @@ Use `self` so that Angular will only look at the `ElementInjector` for the curre
 A good use case for `self` is to inject a service but only if it is available on the current host element.
 To avoid errors in this situation, combine `self` with `optional`.
 
-For example, in the following `SelfNoDataComponent`, notice the injected `LeafService` as a property.
+For example, in the following `SelfNoData`, notice the injected `LeafService` as a property.
 
-```ts {header: 'self-no-data.component.ts', highlight: [7]}
+```ts {header: 'self-no-data.ts', highlight: [7]}
 @Component({
   selector: 'app-self-no-data',
-  templateUrl: './self-no-data.component.html',
-  styleUrls: ['./self-no-data.component.css'],
+  templateUrl: './self-no-data.html',
+  styleUrls: ['./self-no-data.css'],
 })
-export class SelfNoDataComponent {
+export class SelfNoData {
   public leaf = inject(LeafService, {optional: true, self: true});
 }
 ```
@@ -224,14 +224,14 @@ In this example, there is a parent provider and injecting the service will retur
 Another example shows the component class with a provider for `FlowerService`.
 In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip 🌷.
 
-```ts {header:"src/app/self/self.component.ts"}
+```ts {header:"src/app/self/self.ts"}
 @Component({
   selector: 'app-self',
-  templateUrl: './self.component.html',
-  styleUrls: ['./self.component.css'],
+  templateUrl: './self.html',
+  styleUrls: ['./self.css'],
   providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
 })
-export class SelfComponent {
+export class Self {
   constructor(@Self() public flower: FlowerService) {}
 }
 ```
@@ -253,15 +253,15 @@ export class LeafService {
 Imagine that in the child component, you had a different value, maple leaf 🍁 but you wanted to use the parent's value instead.
 This is when you'd use `skipSelf`:
 
-```ts {header:"skipself.component.ts" highlight:[[6],[10]]}
+```ts {header:"skipself.ts" highlight:[[6],[10]]}
 @Component({
   selector: 'app-skipself',
-  templateUrl: './skipself.component.html',
-  styleUrls: ['./skipself.component.css'],
+  templateUrl: './skipself.html',
+  styleUrls: ['./skipself.css'],
   // Angular would ignore this LeafService instance
   providers: [{provide: LeafService, useValue: {emoji: '🍁'}}],
 })
-export class SkipselfComponent {
+export class Skipself {
   // Use skipSelf as inject option
   public leaf = inject(LeafService, {skipSelf: true});
 }
@@ -291,21 +291,21 @@ class Person {
 Even if there is a service instance further up the tree, Angular won't continue looking.
 Use `host` as follows:
 
-```ts {header:"host.component.ts" highlight:[[6],[9]]}
+```ts {header:"host.ts" highlight:[[6],[9]]}
 @Component({
   selector: 'app-host',
-  templateUrl: './host.component.html',
-  styleUrls: ['./host.component.css'],
+  templateUrl: './host.html',
+  styleUrls: ['./host.css'],
   // provide the service
   providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
 })
-export class HostComponent {
+export class Host {
   // use host when injecting the service
   flower = inject(FlowerService, {host: true, optional: true});
 }
 ```
 
-Since `HostComponent` has the `host` option , no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip <code>🌷</code>.
+Since `Host` has the `host` option , no matter what the parent of `Host` might have as a `flower.emoji` value, the `Host` will use tulip <code>🌷</code>.
 
 ### Modifiers with constructor injection
 
@@ -313,8 +313,8 @@ Similarly as presented before, the behavior of constructor injection can be modi
 
 Import each of them from `@angular/core` and use each in the component class constructor when you inject your service.
 
-```ts {header:"self-no-data.component.ts" highlight:[2]}
-export class SelfNoDataComponent {
+```ts {header:"self-no-data.ts" highlight:[2]}
+export class SelfNoData {
   constructor(@Self() @Optional() public leaf?: LeafService) {}
 }
 ```
@@ -390,22 +390,22 @@ export class FlowerService {
 }
 ```
 
-Consider an application with only an `AppComponent` and a `ChildComponent`.
+Consider an application with only an `App` and a `Child`.
 The most basic rendered view would look like nested HTML elements such as the following:
 
 ```html
 <app-root>
-  <!-- AppComponent selector -->
-  <app-child> <!-- ChildComponent selector --> </app-child>
+  <!-- App selector -->
+  <app-child> <!-- Child selector --> </app-child>
 </app-root>
 ```
 
 However, behind the scenes, Angular uses a logical view representation as follows when resolving injection requests:
 
 ```html
-<app-root> <!-- AppComponent selector -->
+<app-root> <!-- App selector -->
   <#VIEW>
-    <app-child> <!-- ChildComponent selector -->
+    <app-child> <!-- Child selector -->
       <#VIEW>
       </#VIEW>
     </app-child>
@@ -421,7 +421,7 @@ Knowledge of this structure can inform how you provide and inject your services,
 Now, consider that `<app-root>` injects the `FlowerService`:
 
 ```typescript
-export class AppComponent {
+export class App {
   flower = inject(FlowerService);
 }
 ```
@@ -434,7 +434,7 @@ Add a binding to the `<app-root>` template to visualize the result:
 
 The output in the view would be:
 
-```shell
+```text {hideCopy}
 Emoji from FlowerService: 🌺
 ```
 
@@ -474,17 +474,17 @@ In the example case, the constraints are:
 
 ### Using the `providers` array
 
-Now, in the `ChildComponent` class, add a provider for `FlowerService` to demonstrate more complex resolution rules in the upcoming sections:
+Now, in the `Child` class, add a provider for `FlowerService` to demonstrate more complex resolution rules in the upcoming sections:
 
 ```ts
 @Component({
   selector: 'app-child',
-  templateUrl: './child.component.html',
-  styleUrls: ['./child.component.css'],
+  templateUrl: './child.html',
+  styleUrls: ['./child.css'],
   // use the providers array to provide a service
   providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
 })
-export class ChildComponent {
+export class Child {
   // inject the service
   flower = inject(FlowerService);
 }
@@ -493,15 +493,15 @@ export class ChildComponent {
 Now that the `FlowerService` is provided in the `@Component()` decorator, when the `<app-child>` requests the service, the injector has only to look as far as the `ElementInjector` in the `<app-child>`.
 It won't have to continue the search any further through the injector tree.
 
-The next step is to add a binding to the `ChildComponent` template.
+The next step is to add a binding to the `Child` template.
 
 ```html
 <p>Emoji from FlowerService: {{flower.emoji}}</p>
 ```
 
-To render the new values, add `<app-child>` to the bottom of the `AppComponent` template so the view also displays the sunflower:
+To render the new values, add `<app-child>` to the bottom of the `App` template so the view also displays the sunflower:
 
-```shell
+```text {hideCopy}
 Child Component
 Emoji from FlowerService: 🌻
 ```
@@ -555,10 +555,10 @@ export class AnimalService {
 }
 ```
 
-Following the same pattern as with the `FlowerService`, inject the `AnimalService` in the `AppComponent` class:
+Following the same pattern as with the `FlowerService`, inject the `AnimalService` in the `App` class:
 
 ```ts
-export class AppComponent {
+export class App {
   public flower = inject(FlowerService);
   public animal = inject(AnimalService);
 }
@@ -572,37 +572,36 @@ Here, it has a value of dog 🐶.
 ```typescript
 @Component({
   selector: 'app-child',
-  templateUrl: './child.component.html',
-  styleUrls: ['./child.component.css'],
+  templateUrl: './child.html',
+  styleUrls: ['./child.css'],
   // provide services
   providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
   viewProviders: [{provide: AnimalService, useValue: {emoji: '🐶'}}],
 })
-export class ChildComponent {
+export class Child {
   // inject services
   flower = inject(FlowerService);
   animal = inject(AnimalService);
 }
 ```
 
-Add bindings to the `ChildComponent` and the `AppComponent` templates.
-In the `ChildComponent` template, add the following binding:
+Add bindings to the `Child` and the `App` templates.
+In the `Child` template, add the following binding:
 
 ```html
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
 ```
 
-Additionally, add the same to the `AppComponent` template:
+Additionally, add the same to the `App` template:
 
 ```html
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
-s
 ```
 
 Now you should see both values in the browser:
 
-```shell
-AppComponent
+```text {hideCopy}
+App
 Emoji from AnimalService: 🐳
 
 Child Component
@@ -637,35 +636,35 @@ It doesn't need to continue searching the `ElementInjector` tree, nor does it ne
 The `viewProviders` field is conceptually similar to `providers`, but there is one notable difference.
 Configured providers in `viewProviders` are not visible to projected content that ends up as a logical children of the component.
 
-To see the difference between using `providers` and `viewProviders`, add another component to the example and call it `InspectorComponent`.
-`InspectorComponent` will be a child of the `ChildComponent`.
-In `inspector.component.ts`, inject the `FlowerService` and `AnimalService` during property initialization:
+To see the difference between using `providers` and `viewProviders`, add another component to the example and call it `Inspector`.
+`Inspector` will be a child of the `Child`.
+In `inspector.ts`, inject the `FlowerService` and `AnimalService` during property initialization:
 
 ```typescript
-export class InspectorComponent {
+export class Inspector {
   flower = inject(FlowerService);
   animal = inject(AnimalService);
 }
 ```
 
 You do not need a `providers` or `viewProviders` array.
-Next, in `inspector.component.html`, add the same markup from previous components:
+Next, in `inspector.html`, add the same markup from previous components:
 
 ```html
 <p>Emoji from FlowerService: {{flower.emoji}}</p>
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
 ```
 
-Remember to add the `InspectorComponent` to the `ChildComponent` `imports` array.
+Remember to add the `Inspector` to the `Child` `imports` array.
 
 ```ts
 @Component({
   ...
-  imports: [InspectorComponent]
+  imports: [Inspector]
 })
 ```
 
-Next, add the following to `child.component.html`:
+Next, add the following to `child.html`:
 
 ```html
 ...
@@ -679,9 +678,9 @@ Next, add the following to `child.component.html`:
 <app-inspector />
 ```
 
-`<ng-content>` allows you to project content, and `<app-inspector>` inside the `ChildComponent` template makes the `InspectorComponent` a child component of `ChildComponent`.
+`<ng-content>` allows you to project content, and `<app-inspector>` inside the `Child` template makes the `Inspector` a child component of `Child`.
 
-Next, add the following to `app.component.html` to take advantage of content projection.
+Next, add the following to `app.html` to take advantage of content projection.
 
 ```html
 <app-child>
@@ -691,7 +690,7 @@ Next, add the following to `app.component.html` to take advantage of content pro
 
 The browser now renders the following, omitting the previous examples for brevity:
 
-```shell
+```text {hideCopy}
 ...
 Content projection
 
@@ -703,10 +702,10 @@ Emoji from AnimalService: 🐶
 ```
 
 These four bindings demonstrate the difference between `providers` and `viewProviders`.
-Remember that the dog emoji <code>🐶</code> is declared inside the `<#VIEW>` of `ChildComponent` and isn't visible to the projected content.
+Remember that the dog emoji <code>🐶</code> is declared inside the `<#VIEW>` of `Child` and isn't visible to the projected content.
 Instead, the projected content sees the whale <code>🐳</code>.
 
-However, in the next output section though, the `InspectorComponent` is an actual child component of `ChildComponent`, `InspectorComponent` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog <code>🐶</code>.
+However, in the next output section though, the `Inspector` is an actual child component of `Child`, `Inspector` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog <code>🐶</code>.
 
 The `AnimalService` in the logical tree would look like this:
 
@@ -751,7 +750,7 @@ Visibility decorators influence where the search for the injection token begins
 To do this, place visibility configuration at the point of injection, that is, when invoking `inject()`, rather than at a point of declaration.
 
 To alter where the injector starts looking for `FlowerService`, add `skipSelf` to the `<app-child>` `inject()` invocation where `FlowerService` is injected.
-This invocation is a property initializer the `<app-child>` as shown in `child.component.ts`:
+This invocation is a property initializer the `<app-child>` as shown in `child.ts`:
 
 ```typescript
 flower = inject(FlowerService, {skipSelf: true});
@@ -762,7 +761,7 @@ Instead, the injector starts looking for the `FlowerService` at the `ElementInje
 Then, it goes back to the `<app-child>` `ModuleInjector` and finds the red hibiscus <code>🌺</code> value, which is available because `<app-child>` and `<app-root>` share the same `ModuleInjector`.
 The UI renders the following:
 
-```shell
+```text {hideCopy}
 Emoji from FlowerService: 🌺
 ```
 
@@ -847,7 +846,7 @@ With `skipSelf` in the `<app-child>`, the injector begins its search for the `An
 ### `host` and `viewProviders`
 
 If you just use `host` for the injection of `AnimalService`, the result is dog <code>🐶</code> because the injector finds the `AnimalService` in the `<app-child>` `<#VIEW>` itself.
-The `ChildComponent` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value.
+The `Child` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value.
 You can also see `host` the `inject()`:
 
 ```typescript
@@ -858,7 +857,7 @@ You can also see `host` the `inject()`:
     { provide: AnimalService, useValue: { emoji: '🐶' } },
   ]
 })
-export class ChildComponent {
+export class Child {
   animal = inject(AnimalService, { host: true })
 }
 ```
@@ -879,24 +878,24 @@ export class ChildComponent {
 </app-root>
 ```
 
-Add a `viewProviders` array with a third animal, hedgehog <code>🦔</code>, to the `app.component.ts` `@Component()` metadata:
+Add a `viewProviders` array with a third animal, hedgehog <code>🦔</code>, to the `app.ts` `@Component()` metadata:
 
 ```typescript
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ],
+  templateUrl: './app.html',
+  styleUrls: [ './app.css' ],
   viewProviders: [
     { provide: AnimalService, useValue: { emoji: '🦔' } },
   ],
 })
 ```
 
-Next, add `skipSelf` along with `host` to the `inject()` for the `AnimalService` injection in `child.component.ts`.
+Next, add `skipSelf` along with `host` to the `inject()` for the `AnimalService` injection in `child.ts`.
 Here are `host` and `skipSelf` in the `animal` property initialization:
 
 ```typescript
-export class ChildComponent {
+export class Child {
   animal = inject(AnimalService, {host: true, skipSelf: true});
 }
 ```
@@ -908,7 +907,7 @@ export class ChildComponent {
 When `host` and `skipSelf` were applied to the `FlowerService`, which is in the `providers` array, the result was `null` because `skipSelf` starts its search in the `<app-child>` injector, but `host` stops searching at `<#VIEW>` —where there is no `FlowerService`
 In the logical tree, you can see that the `FlowerService` is visible in `<app-child>`, not its `<#VIEW>`.
 
-However, the `AnimalService`, which is provided in the `AppComponent` `viewProviders` array, is visible.
+However, the `AnimalService`, which is provided in the `App` `viewProviders` array, is visible.
 
 The logical tree representation shows why this is:
 
@@ -940,34 +939,34 @@ The ability to configure one or more providers at different levels opens up usef
 ### Scenario: service isolation
 
 Architectural reasons may lead you to restrict access to a service to the application domain where it belongs.
-For example, consider we build a `VillainsListComponent` that displays a list of villains.
+For example, consider we build a `VillainsList` that displays a list of villains.
 It gets those villains from a `VillainsService`.
 
 If you provide `VillainsService` in the root `AppModule`, it will make `VillainsService` visible everywhere in the application.
 If you later modify the `VillainsService`, you could break something in other components that started depending this service by accident.
 
-Instead, you should provide the `VillainsService` in the `providers` metadata of the `VillainsListComponent` like this:
+Instead, you should provide the `VillainsService` in the `providers` metadata of the `VillainsList` like this:
 
 ```typescript
 @Component({
   selector: 'app-villains-list',
-  templateUrl: './villains-list.component.html',
+  templateUrl: './villains-list.html',
   providers: [VillainsService],
 })
-export class VillainsListComponent {}
+export class VillainsList {}
 ```
 
-By providing `VillainsService` in the `VillainsListComponent` metadata and nowhere else, the service becomes available only in the `VillainsListComponent` and its subcomponent tree.
+By providing `VillainsService` in the `VillainsList` metadata and nowhere else, the service becomes available only in the `VillainsList` and its subcomponent tree.
 
-`VillainService` is a singleton with respect to `VillainsListComponent` because that is where it is declared.
-As long as `VillainsListComponent` does not get destroyed it will be the same instance of `VillainService` but if there are multiple instances of `VillainsListComponent`, then each instance of `VillainsListComponent` will have its own instance of `VillainService`.
+`VillainsService` is a singleton with respect to `VillainsList` because that is where it is declared.
+As long as `VillainsList` does not get destroyed it will be the same instance of `VillainsService` but if there are multiple instances of `VillainsList`, then each instance of `VillainsList` will have its own instance of `VillainsService`.
 
 ### Scenario: multiple edit sessions
 
 Many applications allow users to work on several open tasks at the same time.
 For example, in a tax preparation application, the preparer could be working on several tax returns, switching from one to the other throughout the day.
 
-To demonstrate that scenario, imagine a `HeroListComponent` that displays a list of super heroes.
+To demonstrate that scenario, imagine a `HeroList` that displays a list of super heroes.
 
 To open a hero's tax return, the preparer clicks on a hero name, which opens a component for editing that return.
 Each selected hero tax return opens in its own component and multiple returns can be open at the same time.
@@ -978,7 +977,7 @@ Each tax return component has the following characteristics:
 - Can change a tax return without affecting a return in another component
 - Has the ability to save the changes to its tax return or cancel them
 
-Suppose that the `HeroTaxReturnComponent` had logic to manage and restore changes.
+Suppose that the `HeroTaxReturn` had logic to manage and restore changes.
 That would be a straightforward task for a hero tax return.
 In the real world, with a rich tax return data model, the change management would be tricky.
 You could delegate that management to a helper service, as this example does.
@@ -1018,7 +1017,7 @@ export class HeroTaxReturnService {
 }
 ```
 
-Here is the `HeroTaxReturnComponent` that makes use of `HeroTaxReturnService`.
+Here is the `HeroTaxReturn` that makes use of `HeroTaxReturnService`.
 
 ```typescript
 import {Component, input, output} from '@angular/core';
@@ -1027,11 +1026,11 @@ import {HeroTaxReturnService} from './hero-tax-return.service';
 
 @Component({
   selector: 'app-hero-tax-return',
-  templateUrl: './hero-tax-return.component.html',
-  styleUrls: ['./hero-tax-return.component.css'],
+  templateUrl: './hero-tax-return.html',
+  styleUrls: ['./hero-tax-return.css'],
   providers: [HeroTaxReturnService],
 })
-export class HeroTaxReturnComponent {
+export class HeroTaxReturn {
   message = '';
 
   close = output<void>();
@@ -1079,13 +1078,13 @@ The component also asks the service to save and restore this tax return.
 This won't work if the service is an application-wide singleton.
 Every component would share the same service instance, and each component would overwrite the tax return that belonged to another hero.
 
-To prevent this, configure the component-level injector of `HeroTaxReturnComponent` to provide the service, using the `providers` property in the component metadata.
+To prevent this, configure the component-level injector of `HeroTaxReturn` to provide the service, using the `providers` property in the component metadata.
 
 ```typescript
 providers: [HeroTaxReturnService];
 ```
 
-The `HeroTaxReturnComponent` has its own provider of the `HeroTaxReturnService`.
+The `HeroTaxReturn` has its own provider of the `HeroTaxReturnService`.
 Recall that every component _instance_ has its own injector.
 Providing the service at the component level ensures that _every_ instance of the component gets a private instance of the service. This makes sure that no tax return gets overwritten.
 
@@ -1170,5 +1169,5 @@ style RootInjector fill:#BDD7EE,color:#000
 ## More on dependency injection
 
 <docs-pill-row>
-  <docs-pill href="/guide/di/dependency-injection-providers" title="DI Providers"/>
+  <docs-pill href="/guide/di/defining-dependency-providers" title="DI Providers"/>
 </docs-pill-row>
diff --git a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md
index 78499ddaa..afcaff207 100644
--- a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md
+++ b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md
@@ -68,7 +68,7 @@ export class ItemService {
 Angularが `main.ts` の次の内容でアプリケーションをブートストラップする方法を検討してください。
 
 ```ts
-bootstrapApplication(AppComponent, appConfig);
+bootstrapApplication(App, appConfig);
 ```
 
 `bootstrapApplication()` メソッドは、 `ApplicationConfig` インスタンスによって構成されたプラットフォームインジェクターの子インジェクターを作成します。
@@ -106,7 +106,7 @@ stateDiagram-v2
 `bootstrapApplication()` の `ApplicationConfig` でアプリケーション全体のプロバイダーを構成すると、 `@Injectable()` メタデータの `root` で構成されたプロバイダーがオーバーライドされます。
 これは、複数のアプリケーションで共有されるサービスのデフォルト以外のプロバイダーを構成する場合に行うことができます。
 
-コンポーネントルーターの構成にデフォルト以外の [ロケーション戦略](guide/routing#location-strategy) が含まれている場合、 `ApplicationConfig` の `providers` リストにそのプロバイダーをリストすることによって、その例を示します。
+コンポーネントルーターの構成にデフォルト以外の [ロケーション戦略](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles) が含まれている場合、 `ApplicationConfig` の `providers` リストにそのプロバイダーをリストすることによって、その例を示します。
 
 ```ts
 providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}];
@@ -193,8 +193,8 @@ Angularの解決動作は、`optional`、`self`、`skipSelf`、および `host`
 そのため、実行時に解決できない場合、Angularはサービスをエラーをスローするのではなく、 `null` として解決します。
 次の例では、サービス `OptionalService` はサービス `ApplicationConfig`や`@NgModule()`、コンポーネントクラスで提供されていないため、アプリケーションのどこにも使用できません。
 
-```ts {header:"src/app/optional/optional.component.ts"}
-export class OptionalComponent {
+```ts {header:"src/app/optional/optional.ts"}
+export class Optional {
   public optional? = inject(OptionalService, {optional: true});
 }
 ```
@@ -206,15 +206,15 @@ export class OptionalComponent {
 `self` の適切なユースケースは、サービスを注入するが、現在のホスト要素で使用可能な場合のみにすることです。
 このような状況でエラーを回避するには、`self` を `optional` と組み合わせます。
 
-たとえば、次の `SelfNoDataComponent` では、プロパティとして注入された `LeafService` に注目してください。
+たとえば、次の `SelfNoData` では、プロパティとして注入された `LeafService` に注目してください。
 
-```ts {header: 'self-no-data.component.ts', highlight: [7]}
+```ts {header: 'self-no-data.ts', highlight: [7]}
 @Component({
   selector: 'app-self-no-data',
-  templateUrl: './self-no-data.component.html',
-  styleUrls: ['./self-no-data.component.css'],
+  templateUrl: './self-no-data.html',
+  styleUrls: ['./self-no-data.css'],
 })
-export class SelfNoDataComponent {
+export class SelfNoData {
   public leaf = inject(LeafService, {optional: true, self: true});
 }
 ```
@@ -224,14 +224,14 @@ export class SelfNoDataComponent {
 別の例では、 `FlowerService` のプロバイダーを備えたコンポーネントクラスを示しています。
 この場合、インジェクターは現在の `ElementInjector` より先を見ずに、 `FlowerService` を見つけて、チューリップ 🌷 を返します。
 
-```ts {header:"src/app/self/self.component.ts"}
+```ts {header:"src/app/self/self.ts"}
 @Component({
   selector: 'app-self',
-  templateUrl: './self.component.html',
-  styleUrls: ['./self.component.css'],
+  templateUrl: './self.html',
+  styleUrls: ['./self.css'],
   providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
 })
-export class SelfComponent {
+export class Self {
   constructor(@Self() public flower: FlowerService) {}
 }
 ```
@@ -253,15 +253,15 @@ export class LeafService {
 子コンポーネントに、異なる値、カエデの葉 🍁 が含まれていると想像してください。ただし、親の値を使用したいとします。
 これが `skipSelf` を使用する場合です。
 
-```ts {header:"skipself.component.ts" highlight:[[6],[10]]}
+```ts {header:"skipself.ts" highlight:[[6],[10]]}
 @Component({
   selector: 'app-skipself',
-  templateUrl: './skipself.component.html',
-  styleUrls: ['./skipself.component.css'],
+  templateUrl: './skipself.html',
+  styleUrls: ['./skipself.css'],
   // Angular はこの LeafService インスタンスを無視します
   providers: [{provide: LeafService, useValue: {emoji: '🍁'}}],
 })
-export class SkipselfComponent {
+export class Skipself {
   // Use skipSelf as inject option
   public leaf = inject(LeafService, {skipSelf: true});
 }
@@ -291,21 +291,21 @@ class Person {
 ツリーのさらに上にサービスインスタンスがある場合でも、Angularは検索を続けません。
 `host` を次のように使用します。
 
-```ts {header:"host.component.ts" highlight:[[6],[9]]}
+```ts {header:"host.ts" highlight:[[6],[9]]}
 @Component({
   selector: 'app-host',
-  templateUrl: './host.component.html',
-  styleUrls: ['./host.component.css'],
+  templateUrl: './host.html',
+  styleUrls: ['./host.css'],
   // provide the service
   providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
 })
-export class HostComponent {
+export class Host {
   // use host when injecting the service
   flower = inject(FlowerService, {host: true, optional: true});
 }
 ```
 
-`HostComponent`に`host`オプションがあるため、`HostComponent`の親が`flower.emoji`にどのような値を持っていても、`HostComponent`はチューリップ<code>🌷</code>を使用します。
+`Host`に`host`オプションがあるため、`Host`の親が`flower.emoji`にどのような値を持っていても、`Host`はチューリップ<code>🌷</code>を使用します。
 
 ### コンストラクター注入での修飾子 {#modifiers-with-constructor-injection}
 
@@ -313,8 +313,8 @@ export class HostComponent {
 
 `@angular/core` からそれぞれをインポートし、サービスを注入するときにコンポーネントクラスのコンストラクターでそれぞれを使用します。
 
-```ts {header:"self-no-data.component.ts" highlight:[2]}
-export class SelfNoDataComponent {
+```ts {header:"self-no-data.ts" highlight:[2]}
+export class SelfNoData {
   constructor(@Self() @Optional() public leaf?: LeafService) {}
 }
 ```
@@ -390,22 +390,22 @@ export class FlowerService {
 }
 ```
 
-`AppComponent` と `ChildComponent` のみが含まれるアプリケーションを検討してください。
+`App` と `Child` のみが含まれるアプリケーションを検討してください。
 最も基本的なレンダリングされたビューは、次のようなネストされたHTML要素のように見えます。
 
 ```html
 <app-root>
-  <!-- AppComponent selector -->
-  <app-child> <!-- ChildComponent selector --> </app-child>
+  <!-- App selector -->
+  <app-child> <!-- Child selector --> </app-child>
 </app-root>
 ```
 
 ただし、裏側では、Angularはインジェクションリクエストを解決するときに、次のような論理ビュー表現を使用します。
 
 ```html
-<app-root> <!-- AppComponent selector -->
+<app-root> <!-- App selector -->
   <#VIEW>
-    <app-child> <!-- ChildComponent selector -->
+    <app-child> <!-- Child selector -->
       <#VIEW>
       </#VIEW>
     </app-child>
@@ -421,7 +421,7 @@ export class FlowerService {
 次に、 `<app-root>` が `FlowerService` を注入しているとします。
 
 ```typescript
-export class AppComponent {
+export class App {
   flower = inject(FlowerService);
 }
 ```
@@ -434,7 +434,7 @@ export class AppComponent {
 
 ビューに出力されるのは次のとおりです。
 
-```shell
+```text {hideCopy}
 Emoji from FlowerService: 🌺
 ```
 
@@ -474,17 +474,17 @@ Emoji from FlowerService: 🌺
 
 ### `providers` 配列を使用する {#using-the-providers-array}
 
-次に、 `ChildComponent` クラスで、今後のセクションでより複雑な解決ルールを説明するために、 `FlowerService` のプロバイダーを追加します。
+次に、 `Child` クラスで、今後のセクションでより複雑な解決ルールを説明するために、 `FlowerService` のプロバイダーを追加します。
 
 ```ts
 @Component({
   selector: 'app-child',
-  templateUrl: './child.component.html',
-  styleUrls: ['./child.component.css'],
+  templateUrl: './child.html',
+  styleUrls: ['./child.css'],
   // use the providers array to provide a service
   providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
 })
-export class ChildComponent {
+export class Child {
   // inject the service
   flower = inject(FlowerService);
 }
@@ -493,15 +493,15 @@ export class ChildComponent {
 `FlowerService` が `@Component()` デコレーターで提供されるようになったため、 `<app-child>` がサービスを要求すると、インジェクターは `<app-child>` の `ElementInjector` ほど遠くまでしか見なくてもよくなります。
 インジェクターは、インジェクターツリーをさらに検索する必要はありません。
 
-次のステップは、 `ChildComponent` テンプレートにバインディングを追加することです。
+次のステップは、 `Child` テンプレートにバインディングを追加することです。
 
 ```html
 <p>Emoji from FlowerService: {{flower.emoji}}</p>
 ```
 
-新しい値をレンダリングするために、ビューにひまわりも表示されるように、 `AppComponent` テンプレートの下部に `<app-child>` を追加します。
+新しい値をレンダリングするために、ビューにひまわりも表示されるように、 `App` テンプレートの下部に `<app-child>` を追加します。
 
-```shell
+```text {hideCopy}
 Child Component
 Emoji from FlowerService: 🌻
 ```
@@ -555,10 +555,10 @@ export class AnimalService {
 }
 ```
 
-`FlowerService` と同じパターンに従って、 `AppComponent` クラスに `AnimalService` を注入します。
+`FlowerService` と同じパターンに従って、 `App` クラスに `AnimalService` を注入します。
 
 ```ts
-export class AppComponent {
+export class App {
   public flower = inject(FlowerService);
   public animal = inject(AnimalService);
 }
@@ -572,37 +572,36 @@ HELPFUL: `FlowerService` に関連するコードはすべてそのままにし
 ```typescript
 @Component({
   selector: 'app-child',
-  templateUrl: './child.component.html',
-  styleUrls: ['./child.component.css'],
+  templateUrl: './child.html',
+  styleUrls: ['./child.css'],
   // provide services
   providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
   viewProviders: [{provide: AnimalService, useValue: {emoji: '🐶'}}],
 })
-export class ChildComponent {
+export class Child {
   // inject services
   flower = inject(FlowerService);
   animal = inject(AnimalService);
 }
 ```
 
-`ChildComponent` と `AppComponent` のテンプレートにバインディングを追加します。
-`ChildComponent` テンプレートに、次のバインディングを追加します。
+`Child` と `App` のテンプレートにバインディングを追加します。
+`Child` テンプレートに、次のバインディングを追加します。
 
 ```html
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
 ```
 
-さらに、 `AppComponent` テンプレートにも同じものを追加します。
+さらに、 `App` テンプレートにも同じものを追加します。
 
 ```html
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
-s
 ```
 
 これで、ブラウザに両方の値が表示されます。
 
-```shell
-AppComponent
+```text {hideCopy}
+App
 Emoji from AnimalService: 🐳
 
 Child Component
@@ -637,35 +636,35 @@ Emoji from AnimalService: 🐶
 `viewProviders` フィールドは、概念的には `providers` と似ていますが、1つの顕著な違いがあります。
 `viewProviders` で構成されたプロバイダーは、コンポーネントの論理的な子になる投影されたコンテンツには可視ではありません。
 
-`providers` と `viewProviders` の違いを確認するために、別のコンポーネントを例に追加して、 `InspectorComponent` と呼びます。
-`InspectorComponent` は、 `ChildComponent` の子になります。
-`inspector.component.ts` では、プロパティの初期化中に `FlowerService` と `AnimalService` を注入します。
+`providers` と `viewProviders` の違いを確認するために、別のコンポーネントを例に追加して、 `Inspector` と呼びます。
+`Inspector` は、 `Child` の子になります。
+`inspector.ts` では、プロパティの初期化中に `FlowerService` と `AnimalService` を注入します。
 
 ```typescript
-export class InspectorComponent {
+export class Inspector {
   flower = inject(FlowerService);
   animal = inject(AnimalService);
 }
 ```
 
 `providers` または `viewProviders` 配列は必要ありません。
-次に、 `inspector.component.html` に、以前のコンポーネントと同じマークアップを追加します。
+次に、 `inspector.html` に、以前のコンポーネントと同じマークアップを追加します。
 
 ```html
 <p>Emoji from FlowerService: {{flower.emoji}}</p>
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
 ```
 
-`InspectorComponent` を `ChildComponent` の `imports` 配列に追加することを忘れないでください。
+`Inspector` を `Child` の `imports` 配列に追加することを忘れないでください。
 
 ```ts
 @Component({
   ...
-  imports: [InspectorComponent]
+  imports: [Inspector]
 })
 ```
 
-次に、 `child.component.html` に次を追加します。
+次に、 `child.html` に次を追加します。
 
 ```html
 ...
@@ -679,9 +678,9 @@ export class InspectorComponent {
 <app-inspector />
 ```
 
-`<ng-content>` を使用するとコンテンツを投影でき、 `ChildComponent` テンプレート内の `<app-inspector>` は、 `InspectorComponent` を `ChildComponent` の子コンポーネントにします。
+`<ng-content>` を使用するとコンテンツを投影でき、 `Child` テンプレート内の `<app-inspector>` は、 `Inspector` を `Child` の子コンポーネントにします。
 
-次に、コンテンツ投影を活用するために、 `app.component.html` に次を追加します。
+次に、コンテンツ投影を活用するために、 `app.html` に次を追加します。
 
 ```html
 <app-child>
@@ -691,7 +690,7 @@ export class InspectorComponent {
 
 これで、ブラウザには、以前の例は省略して、次のものがレンダリングされます。
 
-```shell
+```text {hideCopy}
 ...
 Content projection
 
@@ -703,10 +702,10 @@ Emoji from AnimalService: 🐶
 ```
 
 これらの4つのバインディングは、 `providers` と `viewProviders` の違いを示しています。
-犬の絵文字 <code>🐶</code> は、 `ChildComponent` の `<#VIEW>` 内に宣言され、投影されたコンテンツには可視ではないことを覚えておいてください。
+犬の絵文字 <code>🐶</code> は、 `Child` の `<#VIEW>` 内に宣言され、投影されたコンテンツには可視ではないことを覚えておいてください。
 代わりに、投影されたコンテンツには、クジラ <code>🐳</code> が表示されます。
 
-ただし、次の出力セクションでは `InspectorComponent` は `ChildComponent` の実際の子コンポーネントです。そして `InspectorComponent` は `<#VIEW>` の内側にあるため、 `AnimalService` を要求すると、犬 <code>🐶</code> が表示されます。
+ただし、次の出力セクションでは `Inspector` は `Child` の実際の子コンポーネントです。そして `Inspector` は `<#VIEW>` の内側にあるため、 `AnimalService` を要求すると、犬 <code>🐶</code> が表示されます。
 
 論理ツリー内の `AnimalService` は、次のようになります。
 
@@ -751,7 +750,7 @@ Emoji from AnimalService: 🐶
 これを行うには、宣言のポイントではなく、注入のポイント、つまり `inject()` を呼び出すときに可視性構成を配置します。
 
 インジェクターが `FlowerService` の検索を開始する場所を変更するには、`FlowerService` が注入される `<app-child>` の `inject()` 呼び出しに `skipSelf` を追加します。
-この呼び出しは、`child.component.ts` に示すように、`<app-child>` のプロパティ初期化子です。
+この呼び出しは、`child.ts` に示すように、`<app-child>` のプロパティ初期化子です。
 
 ```typescript
 flower = inject(FlowerService, {skipSelf: true});
@@ -762,7 +761,7 @@ flower = inject(FlowerService, {skipSelf: true});
 次に、 `<app-child>` の `ModuleInjector` に戻り、 `<app-child>` と `<app-root>` が同じ `ModuleInjector` を共有しているため、赤いハイビスカス <code>🌺</code> 値が見つかります。
 UIには次のように表示されます。
 
-```shell
+```text {hideCopy}
 Emoji from FlowerService: 🌺
 ```
 
@@ -847,7 +846,7 @@ Emoji from FlowerService: 🌺
 ### `host` と `viewProviders` {#host-and-viewproviders}
 
 `AnimalService`のインジェクションに`host`だけを使用する場合、インジェクターは`<app-child>`の`<#VIEW>`自体で`AnimalService`を見つけるため、結果は犬<code>🐶</code>になります。
-`ChildComponent`は`viewProviders`を設定し、犬の絵文字が`AnimalService`の値として提供されます。
+`Child`は`viewProviders`を設定し、犬の絵文字が`AnimalService`の値として提供されます。
 `inject()`では`host`も使用できます：
 
 ```typescript
@@ -858,7 +857,7 @@ Emoji from FlowerService: 🌺
     { provide: AnimalService, useValue: { emoji: '🐶' } },
   ]
 })
-export class ChildComponent {
+export class Child {
   animal = inject(AnimalService, { host: true })
 }
 ```
@@ -884,19 +883,19 @@ export class ChildComponent {
 ```typescript
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ],
+  templateUrl: './app.html',
+  styleUrls: [ './app.css' ],
   viewProviders: [
     { provide: AnimalService, useValue: { emoji: '🦔' } },
   ],
 })
 ```
 
-次に、`child.component.ts` の `AnimalService` 注入の `inject()` に `host` とともに `skipSelf` を追加します。
+次に、`child.ts` の `AnimalService` 注入の `inject()` に `host` とともに `skipSelf` を追加します。
 `animal` プロパティの初期化における `host` と `skipSelf` は次のとおりです。
 
 ```typescript
-export class ChildComponent {
+export class Child {
   animal = inject(AnimalService, {host: true, skipSelf: true});
 }
 ```
@@ -908,7 +907,7 @@ export class ChildComponent {
 `providers` 配列にある `FlowerService` に `host` と `skipSelf` を適用した場合、結果は `null` でした。これは、`skipSelf` が `<app-child>` インジェクターで検索を開始しますが、`host` は `<#VIEW>` で検索を停止するためです。そこには `FlowerService` がありません。
 論理ツリーでは、 `FlowerService` は `<app-child>` で可視であり、 `<#VIEW>` では可視ではないことがわかります。
 
-ただし、 `AppComponent` の `viewProviders` 配列で提供されている `AnimalService` は可視です。
+ただし、 `App` の `viewProviders` 配列で提供されている `AnimalService` は可視です。
 
 論理ツリーの表現は、これが理由を示しています。
 
@@ -940,34 +939,34 @@ export class ChildComponent {
 ### シナリオ：サービスの分離 {#scenario-service-isolation}
 
 アーキテクチャ上の理由から、サービスへのアクセスを属するアプリケーションドメインに制限する必要がある場合があります。
-たとえば、悪役のリストを表示する `VillainsListComponent` を構築するとします。
+たとえば、悪役のリストを表示する `VillainsList` を構築するとします。
 この悪役は、 `VillainsService` から取得されます。
 
 `VillainsService` をルートの `AppModule` で提供すると、 `VillainsService` がアプリケーションのすべての場所で可視になります。
 後で `VillainsService` を変更した場合、誤ってこのサービスに依存し始めた他のコンポーネントで何かが壊れる可能性があります。
 
-代わりに、次のように `VillainsListComponent` の `providers` メタデータで `VillainsService` を提供する必要があります。
+代わりに、次のように `VillainsList` の `providers` メタデータで `VillainsService` を提供する必要があります。
 
 ```typescript
 @Component({
   selector: 'app-villains-list',
-  templateUrl: './villains-list.component.html',
+  templateUrl: './villains-list.html',
   providers: [VillainsService],
 })
-export class VillainsListComponent {}
+export class VillainsList {}
 ```
 
-`VillainsService` を `VillainsListComponent` メタデータで提供し、他の場所では提供しないと、サービスは `VillainsListComponent` とそのサブコンポーネントツリーのみに使用可能になります。
+`VillainsService` を `VillainsList` メタデータで提供し、他の場所では提供しないと、サービスは `VillainsList` とそのサブコンポーネントツリーのみに使用可能になります。
 
-`VillainService` は、 `VillainsListComponent` に対してシングルトンです。なぜなら、それが宣言されている場所だからです。
-`VillainsListComponent` が破棄されない限り `VillainService` のインスタンスは同じです。ただし `VillainsListComponent` のインスタンスが複数ある場合、 `VillainsListComponent` の各インスタンスには、独自の `VillainService` インスタンスが1つずつあります。
+`VillainsService` は、 `VillainsList` に対してシングルトンです。なぜなら、それが宣言されている場所だからです。
+`VillainsList` が破棄されない限り `VillainsService` のインスタンスは同じです。ただし `VillainsList` のインスタンスが複数ある場合、 `VillainsList` の各インスタンスには、独自の `VillainsService` インスタンスが1つずつあります。
 
 ### シナリオ：複数の編集セッション {#scenario-multiple-edit-sessions}
 
 多くのアプリケーションでは、ユーザーは同時に複数のオープンタスクで作業できます。
 たとえば、税務申告の作成アプリケーションでは、作成者は複数の税務申告で作業し、1日を通してそれらを切り替えることができます。
 
-そのシナリオを示すために、スーパーヒーローのリストを表示する `HeroListComponent` を考えてみてください。
+そのシナリオを示すために、スーパーヒーローのリストを表示する `HeroList` を考えてみてください。
 
 ヒーローの税務申告を開くために、作成者はヒーローの名前をクリックすると、その申告を編集するためのコンポーネントが開きます。
 選択したヒーローの税務申告は、それぞれ独自のコンポーネントで開き、複数の申告を同時に開くことができます。
@@ -978,7 +977,7 @@ export class VillainsListComponent {}
 - 別のコンポーネントの申告に影響を与えずに税務申告を変更できます
 - 税務申告の変更を保存するか、キャンセルする機能があります
 
-`HeroTaxReturnComponent` に、変更を管理および復元するためのロジックがあるとします。
+`HeroTaxReturn` に、変更を管理および復元するためのロジックがあるとします。
 これは、ヒーローの税務申告にとっては簡単なタスクです。
 現実世界では、豊富な税務申告データモデルでは、変更管理が複雑になります。
 この例のように、この管理をヘルパーサービスに委任できます。
@@ -1018,7 +1017,7 @@ export class HeroTaxReturnService {
 }
 ```
 
-以下は、 `HeroTaxReturnService` を使用する `HeroTaxReturnComponent` です。
+以下は、 `HeroTaxReturnService` を使用する `HeroTaxReturn` です。
 
 ```typescript
 import {Component, input, output} from '@angular/core';
@@ -1027,11 +1026,11 @@ import {HeroTaxReturnService} from './hero-tax-return.service';
 
 @Component({
   selector: 'app-hero-tax-return',
-  templateUrl: './hero-tax-return.component.html',
-  styleUrls: ['./hero-tax-return.component.css'],
+  templateUrl: './hero-tax-return.html',
+  styleUrls: ['./hero-tax-return.css'],
   providers: [HeroTaxReturnService],
 })
-export class HeroTaxReturnComponent {
+export class HeroTaxReturn {
   message = '';
 
   close = output<void>();
@@ -1079,13 +1078,13 @@ _編集対象の税務申告_ は、 `input` プロパティを介して到着
 これは、サービスがアプリケーション全体のシングルトンである場合に機能しません。
 すべてのコンポーネントは同じサービスインスタンスを共有し、各コンポーネントは別のヒーローに属する税務申告を上書きします。
 
-これを防ぐために、コンポーネントレベルのインジェクター `HeroTaxReturnComponent` を構成して、コンポーネントメタデータの `providers` プロパティを使用してサービスを提供します。
+これを防ぐために、コンポーネントレベルのインジェクター `HeroTaxReturn` を構成して、コンポーネントメタデータの `providers` プロパティを使用してサービスを提供します。
 
 ```typescript
 providers: [HeroTaxReturnService];
 ```
 
-`HeroTaxReturnComponent` には、 `HeroTaxReturnService` の独自の提供者がいます。
+`HeroTaxReturn` には、 `HeroTaxReturnService` の独自の提供者がいます。
 覚えておいてください。すべてのコンポーネントの _インスタンス_ には、独自のインジェクターがあります。
 コンポーネントレベルでサービスを提供すると、コンポーネントの _すべての_ インスタンスは、サービスのプライベートインスタンスを1つずつ取得することが保証されます。これにより、税務申告が上書きされないようにします。
 
@@ -1170,5 +1169,5 @@ style RootInjector fill:#BDD7EE,color:#000
 ## 依存性の注入の詳細 {#more-on-dependency-injection}
 
 <docs-pill-row>
-  <docs-pill href="/guide/di/dependency-injection-providers" title="DIプロバイダー"/>
+  <docs-pill href="/guide/di/defining-dependency-providers" title="DIプロバイダー"/>
 </docs-pill-row>
diff --git a/adev-ja/src/content/guide/forms/reactive-forms.en.md b/adev-ja/src/content/guide/forms/reactive-forms.en.md
index 5dc6e6c54..cd0474c37 100644
--- a/adev-ja/src/content/guide/forms/reactive-forms.en.md
+++ b/adev-ja/src/content/guide/forms/reactive-forms.en.md
@@ -387,25 +387,21 @@ You can bind a `FormArray` directly to a `<form>` element by using the `FormArra
 This is useful when the form does not use a top-level `FormGroup`, and the array itself represents the full form model.
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { FormArray, FormControl } from '@angular/forms';
+import {Component} from '@angular/core';
+import {FormArray, FormControl} from '@angular/forms';
 
 @Component({
   selector: 'form-array-example',
   template: `
     <form [formArray]="form">
       @for (control of form.controls; track $index) {
-        <input [formControlName]="$index">
+        <input [formControlName]="$index" />
       }
     </form>
   `,
 })
 export class FormArrayExampleComponent {
-  controls = [
-    new FormControl('fish'),
-    new FormControl('cat'),
-    new FormControl('dog'),
-  ];
+  controls = [new FormControl('fish'), new FormControl('cat'), new FormControl('dog')];
 
   form = new FormArray(this.controls);
 }
@@ -451,7 +447,7 @@ import {
 } from '@angular/forms';
 
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UnifiedEventsBasicComponent {
   form = new FormGroup({
@@ -601,7 +597,9 @@ When updating form controls programmatically, you have precise control over how
 By default `emitEvent: true`, any change to a control emits events through the `valueChanges` and `statusChanges` observables. Setting `emitEvent: false` suppresses these emissions, which is useful when setting values programmatically without triggering reactive behavior like auto-save, avoiding circular updates between controls, or performing bulk updates where events should emit only once at the end.
 
 ```ts
-@Component({/* ... */})
+@Component({
+  /* ... */
+})
 export class BlogPostEditor {
   postForm = new FormGroup({
     title: new FormControl(''),
@@ -610,16 +608,15 @@ export class BlogPostEditor {
 
   constructor() {
     // Auto-save draft every time user types
-    this.postForm.valueChanges.subscribe(formValue => {
+    this.postForm.valueChanges.subscribe((formValue) => {
       this.autosaveDraft(formValue);
     });
   }
 
   loadExistingDraft(savedDraft: {title: string; content: string}) {
     // Restore draft without triggering auto-save
-    this.postForm.setValue(savedDraft, { emitEvent: false });
+    this.postForm.setValue(savedDraft, {emitEvent: false});
   }
-
 }
 ```
 
diff --git a/adev-ja/src/content/guide/forms/reactive-forms.md b/adev-ja/src/content/guide/forms/reactive-forms.md
index 4e2fcfbde..3e6b8d463 100644
--- a/adev-ja/src/content/guide/forms/reactive-forms.md
+++ b/adev-ja/src/content/guide/forms/reactive-forms.md
@@ -387,25 +387,21 @@ _フォーム検証_ は、ユーザー入力が完全で正しいことを確
 これは、フォームがトップレベルの `FormGroup` を使用せず、配列自体が完全なフォームモデルを表す場合に便利です。
 
 ```angular-ts
-import { Component } from '@angular/core';
-import { FormArray, FormControl } from '@angular/forms';
+import {Component} from '@angular/core';
+import {FormArray, FormControl} from '@angular/forms';
 
 @Component({
   selector: 'form-array-example',
   template: `
     <form [formArray]="form">
       @for (control of form.controls; track $index) {
-        <input [formControlName]="$index">
+        <input [formControlName]="$index" />
       }
     </form>
   `,
 })
 export class FormArrayExampleComponent {
-  controls = [
-    new FormControl('fish'),
-    new FormControl('cat'),
-    new FormControl('dog'),
-  ];
+  controls = [new FormControl('fish'), new FormControl('cat'), new FormControl('dog')];
 
   form = new FormArray(this.controls);
 }
@@ -451,7 +447,7 @@ import {
 } from '@angular/forms';
 
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UnifiedEventsBasicComponent {
   form = new FormGroup({
@@ -601,7 +597,9 @@ onSubmit() {
 デフォルトで `emitEvent: true` の場合、コントロールへの変更は `valueChanges` と `statusChanges` Observableを通じてイベントを発行します。`emitEvent: false` を設定すると、これらの発行が抑制されます。これは、自動保存のようなリアクティブな動作をトリガーせずにプログラムで値を設定する場合、コントロール間の循環更新を回避する場合、またはイベントが最後に一度だけ発行されるべき一括更新を実行する場合に便利です。
 
 ```ts
-@Component({/* ... */})
+@Component({
+  /* ... */
+})
 export class BlogPostEditor {
   postForm = new FormGroup({
     title: new FormControl(''),
@@ -610,16 +608,15 @@ export class BlogPostEditor {
 
   constructor() {
     // ユーザーが入力するたびに下書きを自動保存
-    this.postForm.valueChanges.subscribe(formValue => {
+    this.postForm.valueChanges.subscribe((formValue) => {
       this.autosaveDraft(formValue);
     });
   }
 
   loadExistingDraft(savedDraft: {title: string; content: string}) {
     // 自動保存をトリガーせずに下書きを復元
-    this.postForm.setValue(savedDraft, { emitEvent: false });
+    this.postForm.setValue(savedDraft, {emitEvent: false});
   }
-
 }
 ```
 
diff --git a/adev-ja/src/content/guide/image-optimization.en.md b/adev-ja/src/content/guide/image-optimization.en.md
index 014f83ec3..d5b6c958d 100644
--- a/adev-ja/src/content/guide/image-optimization.en.md
+++ b/adev-ja/src/content/guide/image-optimization.en.md
@@ -369,6 +369,40 @@ There is an additional attribute supported by the `NgOptimizedImage` directive,
 
 A common use for `loaderParams` is controlling advanced image CDN features.
 
+### Using the `transform` property with built-in loaders
+
+The built-in loaders for Cloudinary, Cloudflare, ImageKit, and Imgix support a special `transform` property within `loaderParams`. This property allows you to apply custom image transformations provided by your CDN.
+
+The `transform` property accepts two formats:
+
+#### String format
+
+Provide transformations as a comma-separated string using your CDN's transformation syntax:
+
+```html
+<img
+  ngSrc="my-image.jpg"
+  width="400"
+  height="300"
+  [loaderParams]="{transform: 'e_grayscale,r_10'}"
+/>
+```
+
+#### Object format
+
+Provide transformations as an object with key-value pairs.
+
+```html
+<img
+  ngSrc="my-image.jpg"
+  width="400"
+  height="300"
+  [loaderParams]="{transform: {e: 'grayscale', r: 10}}"
+/>
+```
+
+NOTE: The `transform` property is not supported by the Netlify loader, as Netlify's image CDN does not provide custom transformation parameters.
+
 ### Example custom loader
 
 The following shows an example of a custom loader function. This example function concatenates `src` and `width`, and uses `loaderParams` to control a custom CDN feature for rounded corners:
diff --git a/adev-ja/src/content/guide/image-optimization.md b/adev-ja/src/content/guide/image-optimization.md
index 8945183c4..c774960c4 100644
--- a/adev-ja/src/content/guide/image-optimization.md
+++ b/adev-ja/src/content/guide/image-optimization.md
@@ -369,6 +369,40 @@ NOTE: `width`プロパティが常に存在するとは限りませんが、`ngS
 
 `loaderParams`の一般的な用途は、高度な画像CDN機能を制御することです。
 
+### 組み込みローダーでの`transform`プロパティの使用 {#using-the-transform-property-with-built-in-loaders}
+
+Cloudinary、Cloudflare、ImageKit、Imgix用の組み込みローダーは、`loaderParams`内で特別な`transform`プロパティをサポートしています。このプロパティを使用すると、CDNによって提供されるカスタム画像変換を適用できます。
+
+`transform`プロパティは2つの形式を受け入れます。
+
+#### 文字列形式 {#string-format}
+
+CDNの変換構文を使用して、カンマ区切りの文字列として変換を提供します。
+
+```html
+<img
+  ngSrc="my-image.jpg"
+  width="400"
+  height="300"
+  [loaderParams]="{transform: 'e_grayscale,r_10'}"
+/>
+```
+
+#### オブジェクト形式 {#object-format}
+
+キーと値のペアを持つオブジェクトとして変換を提供します。
+
+```html
+<img
+  ngSrc="my-image.jpg"
+  width="400"
+  height="300"
+  [loaderParams]="{transform: {e: 'grayscale', r: 10}}"
+/>
+```
+
+NOTE: `transform`プロパティは、Netlifyのローダーではサポートされていません。Netlifyの画像CDNはカスタム変換パラメーターを提供していないためです。
+
 ### カスタムローダーの例 {#example-custom-loader}
 
 以下にカスタムローダー関数の例を示します。この例の関数は`src`と`width`を連結し、`loaderParams`を使用して角丸のためのカスタムCDN機能を制御します。
diff --git a/adev-ja/src/content/guide/ssr.en.md b/adev-ja/src/content/guide/ssr.en.md
index cb8265a8c..24ca1c780 100644
--- a/adev-ja/src/content/guide/ssr.en.md
+++ b/adev-ja/src/content/guide/ssr.en.md
@@ -71,11 +71,11 @@ When using the [App shell pattern](ecosystem/service-workers/app-shell), you mus
 
 ```typescript
 import {provideServerRendering, withRoutes, withAppShell} from '@angular/ssr';
-import {AppShellComponent} from './app-shell/app-shell.component';
+import {AppShell} from './app-shell';
 
 const serverConfig: ApplicationConfig = {
   providers: [
-    provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShellComponent)),
+    provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShell)),
     // ... other providers ...
   ],
 };
@@ -246,7 +246,7 @@ Some common browser APIs and capabilities might not be available on the server.
 In general, code which relies on browser-specific symbols should only be executed in the browser, not on the server. This can be enforced through the `afterEveryRender` and `afterNextRender` lifecycle hooks. These are only executed on the browser and skipped on the server.
 
 ```angular-ts
-import { Component, viewChild, afterNextRender } from '@angular/core';
+import {Component, viewChild, afterNextRender} from '@angular/core';
 
 @Component({
   selector: 'my-cmp',
@@ -329,7 +329,7 @@ Inject and use the service in your components:
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class Checkout {
   private analytics = inject(AnalyticsService);
@@ -373,7 +373,7 @@ The `@angular/core` package provides several tokens for interacting with the ser
 - **[`REQUEST_CONTEXT`](api/core/REQUEST_CONTEXT 'API reference'):** Provides access to additional context related to the current request. This context can be passed as the second parameter of the [`handle`](api/ssr/AngularAppEngine#handle 'API reference') function. Typically, this is used to provide additional request-related information that is not part of the standard Web API.
 
 ```angular-ts
-import { inject, REQUEST } from '@angular/core';
+import {inject, REQUEST} from '@angular/core';
 
 @Component({
   selector: 'app-my-component',
@@ -433,7 +433,7 @@ By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contai
 import {bootstrapApplication} from '@angular/platform-browser';
 import {provideClientHydration, withHttpTransferCacheOptions} from '@angular/platform-browser';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideClientHydration(
       withHttpTransferCacheOptions({
@@ -516,7 +516,7 @@ import {
   withNoHttpTransferCache,
 } from '@angular/platform-browser';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideClientHydration(withNoHttpTransferCache())],
 });
 ```
@@ -532,7 +532,7 @@ import {
   withHttpTransferCacheOptions,
 } from '@angular/platform-browser';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideClientHydration(
       withHttpTransferCacheOptions({
diff --git a/adev-ja/src/content/guide/ssr.md b/adev-ja/src/content/guide/ssr.md
index ec5c41c6a..889c874db 100644
--- a/adev-ja/src/content/guide/ssr.md
+++ b/adev-ja/src/content/guide/ssr.md
@@ -71,11 +71,11 @@ const serverConfig: ApplicationConfig = {
 
 ```typescript
 import {provideServerRendering, withRoutes, withAppShell} from '@angular/ssr';
-import {AppShellComponent} from './app-shell/app-shell.component';
+import {AppShell} from './app-shell';
 
 const serverConfig: ApplicationConfig = {
   providers: [
-    provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShellComponent)),
+    provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShell)),
     // ... その他のプロバイダー ...
   ],
 };
@@ -246,7 +246,7 @@ export const serverRoutes: ServerRoute[] = [
 一般に、ブラウザ固有のシンボルに依存するコードは、サーバーではなくブラウザでのみ実行されるべきです。これは、`afterEveryRender` および `afterNextRender` ライフサイクルフックによって強制できます。これらはブラウザでのみ実行され、サーバーではスキップされます。
 
 ```angular-ts
-import { Component, viewChild, afterNextRender } from '@angular/core';
+import {Component, viewChild, afterNextRender} from '@angular/core';
 
 @Component({
   selector: 'my-cmp',
@@ -329,7 +329,7 @@ const serverConfig: ApplicationConfig = {
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class Checkout {
   private analytics = inject(AnalyticsService);
@@ -373,7 +373,7 @@ HELPFUL: メタタグの管理には、Angularは `Meta` サービスを提供
 -   **[`REQUEST_CONTEXT`](api/core/REQUEST_CONTEXT 'API reference'):** 現在のリクエストに関連する追加のコンテキストへのアクセスを提供します。このコンテキストは、[`handle`](api/ssr/AngularAppEngine#handle 'API reference') 関数の2番目のパラメーターとして渡すことができます。通常、これは標準のWeb APIの一部ではない追加のリクエスト関連情報を提供するために使用されます。
 
 ```angular-ts
-import { inject, REQUEST } from '@angular/core';
+import {inject, REQUEST} from '@angular/core';
 
 @Component({
   selector: 'app-my-component',
@@ -433,7 +433,7 @@ IMPORTANT: 上記のトークンは、次のシナリオでは `null` になり
 import {bootstrapApplication} from '@angular/platform-browser';
 import {provideClientHydration, withHttpTransferCacheOptions} from '@angular/platform-browser';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideClientHydration(
       withHttpTransferCacheOptions({
@@ -516,7 +516,7 @@ import {
   withNoHttpTransferCache,
 } from '@angular/platform-browser';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [provideClientHydration(withNoHttpTransferCache())],
 });
 ```
@@ -532,7 +532,7 @@ import {
   withHttpTransferCacheOptions,
 } from '@angular/platform-browser';
 
-bootstrapApplication(AppComponent, {
+bootstrapApplication(App, {
   providers: [
     provideClientHydration(
       withHttpTransferCacheOptions({
diff --git a/adev-ja/src/content/guide/testing/utility-apis.en.md b/adev-ja/src/content/guide/testing/utility-apis.en.md
index 6ba33f834..65aae0ebb 100644
--- a/adev-ja/src/content/guide/testing/utility-apis.en.md
+++ b/adev-ja/src/content/guide/testing/utility-apis.en.md
@@ -111,22 +111,22 @@ From the test root component's `DebugElement` returned by `fixture.debugElement`
 
 Here are the most useful `DebugElement` members for testers, in approximate order of utility:
 
-| Members               | Details                                                                                                                                                                                                                                                                                                                                                                                                |
-| :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `nativeElement`       | The corresponding DOM element in the browser                                                                                                                                                                                                                                                                                                                                                           |
-| `query`               | Calling `query(predicate: Predicate<DebugElement>)` returns the first `DebugElement` that matches the predicate at any depth in the subtree.                                                                                                                                                                                                                                                           |
-| `queryAll`            | Calling `queryAll(predicate: Predicate<DebugElement>)` returns all `DebugElements` that matches the predicate at any depth in subtree.                                                                                                                                                                                                                                                                 |
-| `injector`            | The host dependency injector. For example, the root element's component instance injector.                                                                                                                                                                                                                                                                                                             |
-| `componentInstance`   | The element's own component instance, if it has one.                                                                                                                                                                                                                                                                                                                                                   |
-| `context`             | An object that provides parent context for this element. Often an ancestor component instance that governs this element. <br /> When an element is repeated within `@for` block, the context is an `RepeaterContext` whose `$implicit` property is the value of the row instance value. For example, the `hero` in `@for(hero of heroes; ...)`.                                                        |
-| `children`            | The immediate `DebugElement` children. Walk the tree by descending through `children`. `DebugElement` also has `childNodes`, a list of `DebugNode` objects. `DebugElement` derives from `DebugNode` objects and there are often more nodes than elements. Testers can usually ignore plain nodes.                                                                                                      |
-| `parent`              | The `DebugElement` parent. Null if this is the root element.                                                                                                                                                                                                                                                                                                                                           |
-| `name`                | The element tag name, if it is an element.                                                                                                                                                                                                                                                                                                                                                             |
-| `triggerEventHandler` | Triggers the event by its name if there is a corresponding listener in the element's `listeners` collection. The second parameter is the _event object_ expected by the handler. See [triggerEventHandler](guide/testing/components-scenarios#trigger-event-handler). <br /> If the event lacks a listener or there's some other problem, consider calling `nativeElement.dispatchEvent(eventObject)`. |
-| `listeners`           | The callbacks attached to the component's `@Output` properties and/or the element's event properties.                                                                                                                                                                                                                                                                                                  |
-| `providerTokens`      | This component's injector lookup tokens. Includes the component itself plus the tokens that the component lists in its `providers` metadata.                                                                                                                                                                                                                                                           |
-| `source`              | Where to find this element in the source component template.                                                                                                                                                                                                                                                                                                                                           |
-| `references`          | Dictionary of objects associated with template local variables \(for example, `#foo`\), keyed by the local variable name.                                                                                                                                                                                                                                                                              |
+| Members               | Details                                                                                                                                                                                                                                                                                                                                         |
+| :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `nativeElement`       | The corresponding DOM element in the browser                                                                                                                                                                                                                                                                                                    |
+| `query`               | Calling `query(predicate: Predicate<DebugElement>)` returns the first `DebugElement` that matches the predicate at any depth in the subtree.                                                                                                                                                                                                    |
+| `queryAll`            | Calling `queryAll(predicate: Predicate<DebugElement>)` returns all `DebugElements` that matches the predicate at any depth in subtree.                                                                                                                                                                                                          |
+| `injector`            | The host dependency injector. For example, the root element's component instance injector.                                                                                                                                                                                                                                                      |
+| `componentInstance`   | The element's own component instance, if it has one.                                                                                                                                                                                                                                                                                            |
+| `context`             | An object that provides parent context for this element. Often an ancestor component instance that governs this element. <br /> When an element is repeated within `@for` block, the context is an `RepeaterContext` whose `$implicit` property is the value of the row instance value. For example, the `hero` in `@for(hero of heroes; ...)`. |
+| `children`            | The immediate `DebugElement` children. Walk the tree by descending through `children`. `DebugElement` also has `childNodes`, a list of `DebugNode` objects. `DebugElement` derives from `DebugNode` objects and there are often more nodes than elements. Testers can usually ignore plain nodes.                                               |
+| `parent`              | The `DebugElement` parent. Null if this is the root element.                                                                                                                                                                                                                                                                                    |
+| `name`                | The element tag name, if it is an element.                                                                                                                                                                                                                                                                                                      |
+| `triggerEventHandler` | Triggers the event by its name if there is a corresponding listener in the element's `listeners` collection. The second parameter is the _event object_ expected by the handler. <br /> If the event lacks a listener or there's some other problem, consider calling `nativeElement.dispatchEvent(eventObject)`.                               |
+| `listeners`           | The callbacks attached to the component's `@Output` properties and/or the element's event properties.                                                                                                                                                                                                                                           |
+| `providerTokens`      | This component's injector lookup tokens. Includes the component itself plus the tokens that the component lists in its `providers` metadata.                                                                                                                                                                                                    |
+| `source`              | Where to find this element in the source component template.                                                                                                                                                                                                                                                                                    |
+| `references`          | Dictionary of objects associated with template local variables \(for example, `#foo`\), keyed by the local variable name.                                                                                                                                                                                                                       |
 
 The `DebugElement.query(predicate)` and `DebugElement.queryAll(predicate)` methods take a predicate that filters the source element's subtree for matching `DebugElement`.
 
diff --git a/adev-ja/src/content/guide/testing/utility-apis.md b/adev-ja/src/content/guide/testing/utility-apis.md
index c1efd3392..1c41f460d 100644
--- a/adev-ja/src/content/guide/testing/utility-apis.md
+++ b/adev-ja/src/content/guide/testing/utility-apis.md
@@ -111,22 +111,22 @@ type MetadataOverride<T> = {
 
 以下は、テスターにとって最も役立つ `DebugElement` のメンバーを、ユーティリティの利用頻度順に示します。
 
-| メンバー              | 詳細                                                                                                                                                                                                                                                                                                                                               |
-| :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `nativeElement`       | ブラウザの対応する DOM 要素                                                                                                                                                                                                                                                                                                                        |
-| `query`               | `query(predicate: Predicate<DebugElement>)` を呼び出すと、サブツリーの任意の深さで、述語と一致する最初の `DebugElement` が返されます。                                                                                                                                                                                                            |
-| `queryAll`            | `queryAll(predicate: Predicate<DebugElement>)` を呼び出すと、サブツリーの任意の深さで、述語と一致するすべての `DebugElements` が返されます。                                                                                                                                                                                                       |
-| `injector`            | ホスト依存インジェクター。たとえば、ルート要素のコンポーネントインスタンスインジェクター。                                                                                                                                                                                                                                                         |
-| `componentInstance`   | 要素自身のコンポーネントインスタンス（存在する場合）。                                                                                                                                                                                                                                                                                             |
-| `context`             | この要素の親コンテキストを提供するオブジェクト。多くの場合、この要素を管理する祖先コンポーネントインスタンス。 <br /> 要素が `@for` ブロック内で繰り返される場合、コンテキストは `RepeaterContext` であり、その `$implicit` プロパティは行インスタンスの値です。たとえば、`@for(hero of heroes; ...)` の `hero` です。                                  |
+| メンバー              | 詳細                                                                                                                                                                                                                                                                                                                                         |
+| :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `nativeElement`       | ブラウザの対応する DOM 要素                                                                                                                                                                                                                                                                                                                  |
+| `query`               | `query(predicate: Predicate<DebugElement>)` を呼び出すと、サブツリーの任意の深さで、述語と一致する最初の `DebugElement` が返されます。                                                                                                                                                                                                      |
+| `queryAll`            | `queryAll(predicate: Predicate<DebugElement>)` を呼び出すと、サブツリーの任意の深さで、述語と一致するすべての `DebugElements` が返されます。                                                                                                                                                                                                 |
+| `injector`            | ホスト依存インジェクター。たとえば、ルート要素のコンポーネントインスタンスインジェクター。                                                                                                                                                                                                                                                   |
+| `componentInstance`   | 要素自身のコンポーネントインスタンス（存在する場合）。                                                                                                                                                                                                                                                                                       |
+| `context`             | この要素の親コンテキストを提供するオブジェクト。多くの場合、この要素を管理する祖先コンポーネントインスタンス。 <br /> 要素が `@for` ブロック内で繰り返される場合、コンテキストは `RepeaterContext` であり、その `$implicit` プロパティは行インスタンスの値です。たとえば、`@for(hero of heroes; ...)` の `hero` です。                        |
 | `children`            | 直近の `DebugElement` の子。`children` を介して階層を下降することで、ツリーを移動します。 `DebugElement` には `childNodes` もあり、これは `DebugNode` オブジェクトのリストです。`DebugElement` は `DebugNode` オブジェクトから派生しており、多くの場合、要素よりも多くのノードがあります。テスターは、通常、プレーンノードを無視できます。 |
-| `parent`              | `DebugElement` の親。これがルート要素の場合は `null` です。                                                                                                                                                                                                                                                                                        |
-| `name`                | 要素が要素の場合、要素のタグ名。                                                                                                                                                                                                                                                                                                                   |
-| `triggerEventHandler` | イベントに名前が付けられている場合、要素の `listeners` コレクションに対応するリスナーがある場合は、そのイベントをトリガーします。第 2 パラメーターは、ハンドラーで予想される _イベントオブジェクト_ です。[triggerEventHandler](guide/testing/components-scenarios#trigger-event-handler) を参照してください。 <br /> イベントにリスナーがない場合や、その他の問題がある場合は、`nativeElement.dispatchEvent(eventObject)` を呼び出すことを検討してください。 |
-| `listeners`           | コンポーネントの `@Output` プロパティまたは要素のイベントプロパティに添付されたコールバック。                                                                                                                                                                                                                                                      |
-| `providerTokens`      | このコンポーネントのインジェクターのルックアップトークン。コンポーネント自体と、コンポーネントが `providers` メタデータにリストしているトークンが含まれます。                                                                                                                                                                                       |
-| `source`              | ソースコンポーネントテンプレートでこの要素を見つける場所。                                                                                                                                                                                                                                                                                         |
-| `references`          | テンプレートローカル変数（たとえば、`#foo`）に関連付けられているオブジェクトの辞書。ローカル変数名でキー付けされます。                                                                                                                                                                                                                             |
+| `parent`              | `DebugElement` の親。これがルート要素の場合は `null` です。                                                                                                                                                                                                                                                                                  |
+| `name`                | 要素が要素の場合、要素のタグ名。                                                                                                                                                                                                                                                                                                             |
+| `triggerEventHandler` | イベントに名前が付けられている場合、要素の `listeners` コレクションに対応するリスナーがある場合は、そのイベントをトリガーします。第 2 パラメーターは、ハンドラーで予想される _イベントオブジェクト_ です。 <br /> イベントにリスナーがない場合や、その他の問題がある場合は、`nativeElement.dispatchEvent(eventObject)` を呼び出すことを検討してください。 |
+| `listeners`           | コンポーネントの `@Output` プロパティまたは要素のイベントプロパティに添付されたコールバック。                                                                                                                                                                                                                                                |
+| `providerTokens`      | このコンポーネントのインジェクターのルックアップトークン。コンポーネント自体と、コンポーネントが `providers` メタデータにリストしているトークンが含まれます。                                                                                                                                                                                 |
+| `source`              | ソースコンポーネントテンプレートでこの要素を見つける場所。                                                                                                                                                                                                                                                                                   |
+| `references`          | テンプレートローカル変数（たとえば、`#foo`）に関連付けられているオブジェクトの辞書。ローカル変数名でキー付けされます。                                                                                                                                                                                                                       |
 
 `DebugElement.query(predicate)` および `DebugElement.queryAll(predicate)` メソッドは、ソース要素のサブツリーをフィルター処理して、一致する `DebugElement` を見つける述語を受け取ります。
 

From de3a7ec127b57eca220ee47c515c897780372b64 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 10:07:26 +0900
Subject: [PATCH 30/55] fix(docs): migrate navigation data to
 navigation-entries

- Add navigation-entries/index.ts with Japanese translations
- Update sub-navigation-data.ts to import from navigation-entries
- Add navigation-entries to update-origin.ts
---
 .../features/update/update.component.en.ts    |   21 +-
 .../app/features/update/update.component.ts   |   21 +-
 .../routing/navigation-entries/index.en.ts    | 1761 +++++++++++++++++
 .../app/routing/navigation-entries/index.ts   | 1761 +++++++++++++++++
 .../src/app/routing/sub-navigation-data.en.ts | 1625 +--------------
 .../src/app/routing/sub-navigation-data.ts    | 1633 +--------------
 tools/update-origin.ts                        |    1 +
 7 files changed, 3553 insertions(+), 3270 deletions(-)
 create mode 100644 adev-ja/src/app/routing/navigation-entries/index.en.ts
 create mode 100644 adev-ja/src/app/routing/navigation-entries/index.ts

diff --git a/adev-ja/src/app/features/update/update.component.en.ts b/adev-ja/src/app/features/update/update.component.en.ts
index 0b3539986..29ddd1423 100644
--- a/adev-ja/src/app/features/update/update.component.en.ts
+++ b/adev-ja/src/app/features/update/update.component.en.ts
@@ -9,12 +9,9 @@
 import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
 import {Step, RECOMMENDATIONS, ApplicationComplexity} from './recommendations';
 import {Clipboard} from '@angular/cdk/clipboard';
-import {CdkMenuModule} from '@angular/cdk/menu';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatInputModule} from '@angular/material/input';
-import {MatCardModule} from '@angular/material/card';
-import {MatGridListModule} from '@angular/material/grid-list';
-import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
+import {MatCheckbox} from '@angular/material/checkbox';
+import {MatButtonToggleGroup, MatButtonToggle} from '@angular/material/button-toggle';
 import {IconComponent} from '@angular/docs';
 import {ActivatedRoute, Router} from '@angular/router';
 import {marked} from 'marked';
@@ -33,12 +30,12 @@ const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.in
   templateUrl: './update.component.html',
   styleUrl: './update.component.scss',
   imports: [
-    MatCheckboxModule,
-    MatInputModule,
-    MatCardModule,
-    MatGridListModule,
-    MatButtonToggleModule,
-    CdkMenuModule,
+    MatCheckbox,
+    MatButtonToggleGroup,
+    MatButtonToggle,
+    CdkMenuTrigger,
+    CdkMenu,
+    CdkMenuItem,
     IconComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/adev-ja/src/app/features/update/update.component.ts b/adev-ja/src/app/features/update/update.component.ts
index d33bf4df6..f6094276b 100644
--- a/adev-ja/src/app/features/update/update.component.ts
+++ b/adev-ja/src/app/features/update/update.component.ts
@@ -9,12 +9,9 @@
 import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
 import {Step, RECOMMENDATIONS, ApplicationComplexity} from './recommendations';
 import {Clipboard} from '@angular/cdk/clipboard';
-import {CdkMenuModule} from '@angular/cdk/menu';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatInputModule} from '@angular/material/input';
-import {MatCardModule} from '@angular/material/card';
-import {MatGridListModule} from '@angular/material/grid-list';
-import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
+import {MatCheckbox} from '@angular/material/checkbox';
+import {MatButtonToggleGroup, MatButtonToggle} from '@angular/material/button-toggle';
 import {IconComponent} from '@angular/docs';
 import {ActivatedRoute, Router} from '@angular/router';
 import {marked} from 'marked';
@@ -33,12 +30,12 @@ const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.in
   templateUrl: './update.component.html',
   styleUrl: './update.component.scss',
   imports: [
-    MatCheckboxModule,
-    MatInputModule,
-    MatCardModule,
-    MatGridListModule,
-    MatButtonToggleModule,
-    CdkMenuModule,
+    MatCheckbox,
+    MatButtonToggleGroup,
+    MatButtonToggle,
+    CdkMenuTrigger,
+    CdkMenu,
+    CdkMenuItem,
     IconComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/adev-ja/src/app/routing/navigation-entries/index.en.ts b/adev-ja/src/app/routing/navigation-entries/index.en.ts
new file mode 100644
index 000000000..35be26c71
--- /dev/null
+++ b/adev-ja/src/app/routing/navigation-entries/index.en.ts
@@ -0,0 +1,1761 @@
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {isDevMode} from '@angular/core';
+import type {NavigationItem} from '@angular/docs';
+// These imports are expected to be red because they are generated a build time
+// @ts-ignore
+import ERRORS_NAV_DATA from '../../../content/reference/errors/routes.json' with {type: 'json'};
+// @ts-ignore
+import EXT_DIAGNOSTICS_NAV_DATA from '../../../content/reference/extended-diagnostics/routes.json' with {type: 'json'};
+// @ts-ignore
+import FIRST_APP_TUTORIAL_NAV_DATA from '../../../content/tutorials/first-app/first-app/routes.json' with {type: 'json'};
+// @ts-ignore
+import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../content/tutorials/learn-angular/learn-angular/routes.json' with {type: 'json'};
+// @ts-ignore
+import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../content/tutorials/deferrable-views/deferrable-views/routes.json' with {type: 'json'};
+// @ts-ignore
+import SIGNALS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signals/signals/routes.json' with {type: 'json'};
+// @ts-ignore
+import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signal-forms/signal-forms/routes.json' with {type: 'json'};
+// @ts-ignore
+import API_MANIFEST_JSON from '../../../assets/manifest.json' with {type: 'json'};
+
+interface SubNavigationData {
+  docs: NavigationItem[];
+  reference: NavigationItem[];
+  tutorials: NavigationItem[];
+  footer: NavigationItem[];
+}
+
+export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
+  {
+    label: 'Introduction',
+    children: [
+      {
+        label: 'What is Angular?',
+        path: 'overview',
+        contentPath: 'introduction/what-is-angular',
+      },
+      {
+        label: 'Installation',
+        path: 'installation',
+        contentPath: 'introduction/installation',
+      },
+      {
+        label: 'Essentials',
+        children: [
+          {
+            label: 'Overview',
+            path: 'essentials',
+            contentPath: 'introduction/essentials/overview',
+          },
+          {
+            label: 'Composition with components',
+            path: 'essentials/components',
+            contentPath: 'introduction/essentials/components',
+          },
+          {
+            label: 'Reactivity with signals',
+            path: 'essentials/signals',
+            contentPath: 'introduction/essentials/signals',
+          },
+          {
+            label: 'Dynamic interfaces with templates',
+            path: 'essentials/templates',
+            contentPath: 'introduction/essentials/templates',
+          },
+          {
+            label: 'Forms with signals',
+            path: 'essentials/signal-forms',
+            contentPath: 'introduction/essentials/signal-forms',
+            status: 'new',
+          },
+          {
+            label: 'Modular design with dependency injection',
+            path: 'essentials/dependency-injection',
+            contentPath: 'introduction/essentials/dependency-injection',
+          },
+          {
+            label: 'Next Steps',
+            path: 'essentials/next-steps',
+            contentPath: 'introduction/essentials/next-steps',
+          },
+        ],
+      },
+      {
+        label: 'Start coding! 🚀',
+        path: 'tutorials/learn-angular',
+      },
+    ],
+  },
+  {
+    label: 'In-depth Guides',
+    children: [
+      {
+        label: 'Signals',
+        status: 'updated',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/signals',
+            contentPath: 'guide/signals/overview',
+          },
+          {
+            label: 'Dependent state with linkedSignal',
+            path: 'guide/signals/linked-signal',
+            contentPath: 'guide/signals/linked-signal',
+          },
+          {
+            label: 'Async reactivity with resources',
+            path: 'guide/signals/resource',
+            contentPath: 'guide/signals/resource',
+          },
+          {
+            label: 'Side effects for non-reactives APIs',
+            path: 'guide/signals/effect',
+            contentPath: 'guide/signals/effect',
+            status: 'new',
+          },
+        ],
+      },
+      {
+        label: 'Components',
+        children: [
+          {
+            label: 'Anatomy of components',
+            path: 'guide/components',
+            contentPath: 'guide/components/anatomy-of-components',
+          },
+          {
+            label: 'Selectors',
+            path: 'guide/components/selectors',
+            contentPath: 'guide/components/selectors',
+          },
+          {
+            label: 'Styling',
+            path: 'guide/components/styling',
+            contentPath: 'guide/components/styling',
+          },
+          {
+            label: 'Accepting data with input properties',
+            path: 'guide/components/inputs',
+            contentPath: 'guide/components/inputs',
+          },
+          {
+            label: 'Custom events with outputs',
+            path: 'guide/components/outputs',
+            contentPath: 'guide/components/outputs',
+          },
+          {
+            label: 'Content projection with ng-content',
+            path: 'guide/components/content-projection',
+            contentPath: 'guide/components/content-projection',
+          },
+          {
+            label: 'Host elements',
+            path: 'guide/components/host-elements',
+            contentPath: 'guide/components/host-elements',
+          },
+          {
+            label: 'Lifecycle',
+            path: 'guide/components/lifecycle',
+            contentPath: 'guide/components/lifecycle',
+          },
+          {
+            label: 'Referencing component children with queries',
+            path: 'guide/components/queries',
+            contentPath: 'guide/components/queries',
+          },
+          {
+            label: 'Using DOM APIs',
+            path: 'guide/components/dom-apis',
+            contentPath: 'guide/components/dom-apis',
+          },
+          {
+            label: 'Inheritance',
+            path: 'guide/components/inheritance',
+            contentPath: 'guide/components/inheritance',
+          },
+          {
+            label: 'Programmatically rendering components',
+            path: 'guide/components/programmatic-rendering',
+            contentPath: 'guide/components/programmatic-rendering',
+          },
+          {
+            label: 'Advanced configuration',
+            path: 'guide/components/advanced-configuration',
+            contentPath: 'guide/components/advanced-configuration',
+          },
+          {
+            label: 'Custom Elements',
+            path: 'guide/elements',
+            contentPath: 'guide/elements',
+          },
+        ],
+      },
+      {
+        label: 'Templates',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/templates',
+            contentPath: 'guide/templates/overview',
+          },
+          {
+            label: 'Binding dynamic text, properties and attributes',
+            path: 'guide/templates/binding',
+            contentPath: 'guide/templates/binding',
+          },
+          {
+            label: 'Adding event listeners',
+            path: 'guide/templates/event-listeners',
+            contentPath: 'guide/templates/event-listeners',
+          },
+          {
+            label: 'Two-way binding',
+            path: 'guide/templates/two-way-binding',
+            contentPath: 'guide/templates/two-way-binding',
+          },
+          {
+            label: 'Control flow',
+            path: 'guide/templates/control-flow',
+            contentPath: 'guide/templates/control-flow',
+          },
+          {
+            label: 'Pipes',
+            path: 'guide/templates/pipes',
+            contentPath: 'guide/templates/pipes',
+          },
+          {
+            label: 'Slotting child content with ng-content',
+            path: 'guide/templates/ng-content',
+            contentPath: 'guide/templates/ng-content',
+          },
+          {
+            label: 'Create template fragments with ng-template',
+            path: 'guide/templates/ng-template',
+            contentPath: 'guide/templates/ng-template',
+          },
+          {
+            label: 'Grouping elements with ng-container',
+            path: 'guide/templates/ng-container',
+            contentPath: 'guide/templates/ng-container',
+          },
+          {
+            label: 'Variables in templates',
+            path: 'guide/templates/variables',
+            contentPath: 'guide/templates/variables',
+          },
+          {
+            label: 'Deferred loading with @defer',
+            path: 'guide/templates/defer',
+            contentPath: 'guide/templates/defer',
+          },
+          {
+            label: 'Expression syntax',
+            path: 'guide/templates/expression-syntax',
+            contentPath: 'guide/templates/expression-syntax',
+          },
+          {
+            label: 'Whitespace in templates',
+            path: 'guide/templates/whitespace',
+            contentPath: 'guide/templates/whitespace',
+          },
+        ],
+      },
+      {
+        label: 'Directives',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/directives',
+            contentPath: 'guide/directives/overview',
+          },
+          {
+            label: 'Attribute directives',
+            path: 'guide/directives/attribute-directives',
+            contentPath: 'guide/directives/attribute-directives',
+          },
+          {
+            label: 'Structural directives',
+            path: 'guide/directives/structural-directives',
+            contentPath: 'guide/directives/structural-directives',
+          },
+          {
+            label: 'Directive composition API',
+            path: 'guide/directives/directive-composition-api',
+            contentPath: 'guide/directives/directive-composition-api',
+          },
+          {
+            label: 'Optimizing images with NgOptimizedImage',
+            path: 'guide/image-optimization',
+            contentPath: 'guide/image-optimization',
+          },
+        ],
+      },
+      {
+        label: 'Dependency Injection',
+        status: 'updated',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/di',
+            contentPath: 'guide/di/overview',
+            status: 'updated',
+          },
+          {
+            label: 'Creating and using services',
+            path: 'guide/di/creating-and-using-services',
+            contentPath: 'guide/di/creating-and-using-services',
+            status: 'updated',
+          },
+          {
+            label: 'Defining dependency providers',
+            path: 'guide/di/defining-dependency-providers',
+            contentPath: 'guide/di/defining-dependency-providers',
+            status: 'updated',
+          },
+          {
+            label: 'Injection context',
+            path: 'guide/di/dependency-injection-context',
+            contentPath: 'guide/di/dependency-injection-context',
+          },
+          {
+            label: 'Hierarchical injectors',
+            path: 'guide/di/hierarchical-dependency-injection',
+            contentPath: 'guide/di/hierarchical-dependency-injection',
+          },
+          {
+            label: 'Optimizing injection tokens',
+            path: 'guide/di/lightweight-injection-tokens',
+            contentPath: 'guide/di/lightweight-injection-tokens',
+          },
+          {
+            label: 'DI in action',
+            path: 'guide/di/di-in-action',
+            contentPath: 'guide/di/di-in-action',
+          },
+          {
+            label: 'Debugging and troubleshooting DI',
+            path: 'guide/di/debugging-and-troubleshooting-di',
+            contentPath: 'guide/di/debugging-and-troubleshooting-di',
+            status: 'new',
+          },
+        ],
+      },
+      {
+        label: 'Routing',
+        status: 'updated',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/routing',
+            contentPath: 'guide/routing/overview',
+          },
+          {
+            label: 'Define routes',
+            path: 'guide/routing/define-routes',
+            contentPath: 'guide/routing/define-routes',
+          },
+          {
+            label: 'Show routes with Outlets',
+            path: 'guide/routing/show-routes-with-outlets',
+            contentPath: 'guide/routing/show-routes-with-outlets',
+          },
+          {
+            label: 'Navigate to routes',
+            path: 'guide/routing/navigate-to-routes',
+            contentPath: 'guide/routing/navigate-to-routes',
+          },
+          {
+            label: 'Read route state',
+            path: 'guide/routing/read-route-state',
+            contentPath: 'guide/routing/read-route-state',
+          },
+          {
+            label: 'Redirecting routes',
+            path: 'guide/routing/redirecting-routes',
+            contentPath: 'guide/routing/redirecting-routes',
+          },
+          {
+            label: 'Control route access with guards',
+            path: 'guide/routing/route-guards',
+            contentPath: 'guide/routing/route-guards',
+          },
+          {
+            label: 'Route data resolvers',
+            path: 'guide/routing/data-resolvers',
+            contentPath: 'guide/routing/data-resolvers',
+          },
+          {
+            label: 'Lifecycle and events',
+            path: 'guide/routing/lifecycle-and-events',
+            contentPath: 'guide/routing/lifecycle-and-events',
+          },
+          {
+            label: 'Testing routing and navigation',
+            path: 'guide/routing/testing',
+            contentPath: 'guide/routing/testing',
+            status: 'new',
+          },
+          {
+            label: 'Other routing tasks',
+            path: 'guide/routing/common-router-tasks',
+            contentPath: 'guide/routing/common-router-tasks',
+          },
+          {
+            label: 'Creating custom route matches',
+            path: 'guide/routing/routing-with-urlmatcher',
+            contentPath: 'guide/routing/routing-with-urlmatcher',
+          },
+          {
+            label: 'Rendering strategies',
+            path: 'guide/routing/rendering-strategies',
+            contentPath: 'guide/routing/rendering-strategies',
+            status: 'new',
+          },
+          {
+            label: 'Customizing route behavior',
+            path: 'guide/routing/customizing-route-behavior',
+            contentPath: 'guide/routing/customizing-route-behavior',
+            status: 'new',
+          },
+          {
+            label: 'Router reference',
+            path: 'guide/routing/router-reference',
+            contentPath: 'guide/routing/router-reference',
+          },
+          {
+            label: 'Route transition animations',
+            path: 'guide/routing/route-transition-animations',
+            contentPath: 'guide/routing/route-transition-animations',
+          },
+        ],
+      },
+      {
+        label: 'Forms',
+        status: 'updated',
+        preserveOtherCategoryOrder: true,
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/forms',
+            contentPath: 'guide/forms/overview',
+          },
+
+          {
+            label: 'Overview',
+            path: 'guide/forms/signals/overview',
+            contentPath: 'guide/forms/signals/overview',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Form models',
+            path: 'guide/forms/signals/models',
+            contentPath: 'guide/forms/signals/models',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Form model design',
+            path: 'guide/forms/signals/model-design',
+            contentPath: 'guide/forms/signals/designing-your-form-model',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Field state management',
+            path: 'guide/forms/signals/field-state-management',
+            contentPath: 'guide/forms/signals/field-state-management',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Validation',
+            path: 'guide/forms/signals/validation',
+            contentPath: 'guide/forms/signals/validation',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Form logic',
+            path: 'guide/forms/signals/form-logic',
+            contentPath: 'guide/forms/signals/form-logic',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Async operations',
+            path: 'guide/forms/signals/async-operations',
+            contentPath: 'guide/forms/signals/async-operations',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Custom controls',
+            path: 'guide/forms/signals/custom-controls',
+            contentPath: 'guide/forms/signals/custom-controls',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Comparison with other form systems',
+            path: 'guide/forms/signals/comparison',
+            contentPath: 'guide/forms/signals/comparison',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Migrating from Reactive Forms',
+            path: 'guide/forms/signals/migration',
+            contentPath: 'guide/forms/signals/migration',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Reactive forms',
+            path: 'guide/forms/reactive-forms',
+            contentPath: 'guide/forms/reactive-forms',
+            category: 'Reactive Forms',
+          },
+          {
+            label: 'Strictly typed reactive forms',
+            path: 'guide/forms/typed-forms',
+            contentPath: 'guide/forms/typed-forms',
+            category: 'Reactive Forms',
+          },
+          {
+            label: 'Template-driven forms',
+            path: 'guide/forms/template-driven-forms',
+            contentPath: 'guide/forms/template-driven-forms',
+            category: 'Template driven Forms',
+          },
+          {
+            label: 'Validate form input',
+            path: 'guide/forms/form-validation',
+            contentPath: 'guide/forms/form-validation',
+            category: 'Reactive Forms',
+          },
+          {
+            label: 'Validate form input',
+            path: 'guide/forms/form-validation',
+            contentPath: 'guide/forms/form-validation',
+            category: 'Template driven Forms',
+          },
+          {
+            label: 'Building dynamic forms',
+            path: 'guide/forms/dynamic-forms',
+            contentPath: 'guide/forms/dynamic-forms',
+            category: 'Reactive Forms',
+          },
+        ],
+      },
+      {
+        label: 'HTTP Client',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/http',
+            contentPath: 'guide/http/overview',
+          },
+          {
+            label: 'Setting up HttpClient',
+            path: 'guide/http/setup',
+            contentPath: 'guide/http/setup',
+          },
+          {
+            label: 'Making requests',
+            path: 'guide/http/making-requests',
+            contentPath: 'guide/http/making-requests',
+          },
+          {
+            label: 'Reactive data fetching with httpResource',
+            path: 'guide/http/http-resource',
+            contentPath: 'guide/http/http-resource',
+          },
+          {
+            label: 'Intercepting requests and responses',
+            path: 'guide/http/interceptors',
+            contentPath: 'guide/http/interceptors',
+          },
+          {
+            label: 'Testing',
+            path: 'guide/http/testing',
+            contentPath: 'guide/http/testing',
+          },
+        ],
+      },
+      {
+        label: 'Server-side & hybrid-rendering',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/performance',
+            contentPath: 'guide/performance/overview',
+          },
+          {
+            label: 'Server-side and hybrid-rendering',
+            path: 'guide/ssr',
+            contentPath: 'guide/ssr',
+          },
+          {
+            label: 'Hydration',
+            path: 'guide/hydration',
+            contentPath: 'guide/hydration',
+          },
+          {
+            label: 'Incremental Hydration',
+            path: 'guide/incremental-hydration',
+            contentPath: 'guide/incremental-hydration',
+          },
+        ],
+      },
+      {
+        label: 'Testing',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/testing',
+            contentPath: 'guide/testing/overview',
+          },
+          {
+            label: 'Basics of testing components',
+            path: 'guide/testing/components-basics',
+            contentPath: 'guide/testing/components-basics',
+          },
+          {
+            label: 'Component testing scenarios',
+            path: 'guide/testing/components-scenarios',
+            contentPath: 'guide/testing/components-scenarios',
+          },
+          {
+            label: 'Testing services',
+            path: 'guide/testing/services',
+            contentPath: 'guide/testing/services',
+          },
+          {
+            label: 'Testing attribute directives',
+            path: 'guide/testing/attribute-directives',
+            contentPath: 'guide/testing/attribute-directives',
+          },
+          {
+            label: 'Testing pipes',
+            path: 'guide/testing/pipes',
+            contentPath: 'guide/testing/pipes',
+          },
+          {
+            label: 'Testing routing and navigation',
+            path: 'guide/routing/testing',
+            contentPath: 'guide/routing/testing',
+            status: 'new',
+          },
+          {
+            label: 'Debugging tests',
+            path: 'guide/testing/debugging',
+            contentPath: 'guide/testing/debugging',
+          },
+          {
+            label: 'Code coverage',
+            path: 'guide/testing/code-coverage',
+            contentPath: 'guide/testing/code-coverage',
+          },
+          {
+            label: 'Testing utility APIs',
+            path: 'guide/testing/utility-apis',
+            contentPath: 'guide/testing/utility-apis',
+          },
+          {
+            label: 'Component harnesses overview',
+            path: 'guide/testing/component-harnesses-overview',
+            contentPath: 'guide/testing/component-harnesses-overview',
+          },
+          {
+            label: 'Using component harnesses in tests',
+            path: 'guide/testing/using-component-harnesses',
+            contentPath: 'guide/testing/using-component-harnesses',
+          },
+          {
+            label: 'Creating harnesses for your components',
+            path: 'guide/testing/creating-component-harnesses',
+            contentPath: 'guide/testing/creating-component-harnesses',
+          },
+          {
+            label: 'Adding harness support for additional testing environments',
+            path: 'guide/testing/component-harnesses-testing-environments',
+            contentPath: 'guide/testing/component-harnesses-testing-environments',
+          },
+          {
+            label: 'Migrating from Karma to Vitest',
+            path: 'guide/testing/migrating-to-vitest',
+            contentPath: 'guide/testing/migrating-to-vitest',
+          },
+          {
+            label: 'Testing with Karma and Jasmine',
+            path: 'guide/testing/karma',
+            contentPath: 'guide/testing/karma',
+          },
+          {
+            label: 'Zone.js Testing Utilities',
+            path: 'guide/testing/zone-js-testing-utilities',
+            contentPath: 'guide/testing/zone-js-testing-utilities',
+          },
+        ],
+      },
+      {
+        label: 'Angular Aria',
+        status: 'new',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/aria/overview',
+            contentPath: 'guide/aria/overview',
+          },
+          {
+            label: 'Accordion',
+            path: 'guide/aria/accordion',
+            contentPath: 'guide/aria/accordion',
+          },
+          {
+            label: 'Autocomplete',
+            path: 'guide/aria/autocomplete',
+            contentPath: 'guide/aria/autocomplete',
+          },
+          {
+            label: 'Combobox',
+            path: 'guide/aria/combobox',
+            contentPath: 'guide/aria/combobox',
+          },
+          {
+            label: 'Grid',
+            path: 'guide/aria/grid',
+            contentPath: 'guide/aria/grid',
+          },
+          {
+            label: 'Listbox',
+            path: 'guide/aria/listbox',
+            contentPath: 'guide/aria/listbox',
+          },
+          {
+            label: 'Menu',
+            path: 'guide/aria/menu',
+            contentPath: 'guide/aria/menu',
+          },
+          {
+            label: 'Menubar',
+            path: 'guide/aria/menubar',
+            contentPath: 'guide/aria/menubar',
+          },
+          {
+            label: 'Multiselect',
+            path: 'guide/aria/multiselect',
+            contentPath: 'guide/aria/multiselect',
+          },
+          {
+            label: 'Select',
+            path: 'guide/aria/select',
+            contentPath: 'guide/aria/select',
+          },
+          {
+            label: 'Tabs',
+            path: 'guide/aria/tabs',
+            contentPath: 'guide/aria/tabs',
+          },
+          {
+            label: 'Toolbar',
+            path: 'guide/aria/toolbar',
+            contentPath: 'guide/aria/toolbar',
+          },
+          {
+            label: 'Tree',
+            path: 'guide/aria/tree',
+            contentPath: 'guide/aria/tree',
+          },
+        ],
+      },
+      {
+        label: 'Internationalization',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/i18n',
+            contentPath: 'guide/i18n/overview',
+          },
+          {
+            label: 'Add the localize package',
+            path: 'guide/i18n/add-package',
+            contentPath: 'guide/i18n/add-package',
+          },
+          {
+            label: 'Refer to locales by ID',
+            path: 'guide/i18n/locale-id',
+            contentPath: 'guide/i18n/locale-id',
+          },
+          {
+            label: 'Format data based on locale',
+            path: 'guide/i18n/format-data-locale',
+            contentPath: 'guide/i18n/format-data-locale',
+          },
+          {
+            label: 'Prepare component for translation',
+            path: 'guide/i18n/prepare',
+            contentPath: 'guide/i18n/prepare',
+          },
+          {
+            label: 'Work with translation files',
+            path: 'guide/i18n/translation-files',
+            contentPath: 'guide/i18n/translation-files',
+          },
+          {
+            label: 'Merge translations into the app',
+            path: 'guide/i18n/merge',
+            contentPath: 'guide/i18n/merge',
+          },
+          {
+            label: 'Deploy multiple locales',
+            path: 'guide/i18n/deploy',
+            contentPath: 'guide/i18n/deploy',
+          },
+          {
+            label: 'Import global variants of the locale data',
+            path: 'guide/i18n/import-global-variants',
+            contentPath: 'guide/i18n/import-global-variants',
+          },
+          {
+            label: 'Manage marked text with custom IDs',
+            path: 'guide/i18n/manage-marked-text',
+            contentPath: 'guide/i18n/manage-marked-text',
+          },
+          {
+            label: 'Example Angular application',
+            path: 'guide/i18n/example',
+            contentPath: 'guide/i18n/example',
+          },
+        ],
+      },
+      {
+        label: 'Animations',
+        status: 'updated',
+        children: [
+          {
+            label: 'Enter and Leave animations',
+            path: 'guide/animations',
+            contentPath: 'guide/animations/enter-and-leave',
+            status: 'new',
+          },
+          {
+            label: 'Complex Animations with CSS',
+            path: 'guide/animations/css',
+            contentPath: 'guide/animations/css',
+          },
+          {
+            label: 'Route transition animations',
+            path: 'guide/routing/route-transition-animations',
+            contentPath: 'guide/routing/route-transition-animations',
+          },
+        ],
+      },
+      {
+        label: 'Drag and drop',
+        path: 'guide/drag-drop',
+        contentPath: 'guide/drag-drop',
+      },
+    ],
+  },
+  {
+    label: 'Build with AI',
+    status: 'new',
+    children: [
+      {
+        label: 'Get Started',
+        path: 'ai',
+        contentPath: 'ai/overview',
+      },
+      {
+        label: 'LLM prompts and AI IDE setup',
+        path: 'ai/develop-with-ai',
+        contentPath: 'ai/develop-with-ai',
+      },
+      {
+        label: 'Design Patterns',
+        path: 'ai/design-patterns',
+        contentPath: 'ai/design-patterns',
+      },
+      {
+        label: 'Angular CLI MCP Server setup',
+        path: 'ai/mcp',
+        contentPath: 'ai/mcp-server-setup',
+      },
+      {
+        label: 'Angular AI Tutor',
+        path: 'ai/ai-tutor',
+        contentPath: 'ai/ai-tutor',
+      },
+    ],
+  },
+  {
+    label: 'Developer Tools',
+    children: [
+      {
+        label: 'Angular CLI',
+        children: [
+          {
+            label: 'Overview',
+            path: 'tools/cli',
+            contentPath: 'tools/cli/overview',
+          },
+          {
+            label: 'Local set-up',
+            path: 'tools/cli/setup-local',
+            contentPath: 'tools/cli/setup-local',
+          },
+          {
+            label: 'Building Angular apps',
+            path: 'tools/cli/build',
+            contentPath: 'tools/cli/build',
+          },
+          {
+            label: 'Serving Angular apps for development',
+            path: 'tools/cli/serve',
+            contentPath: 'tools/cli/serve',
+          },
+          {
+            label: 'Deployment',
+            path: 'tools/cli/deployment',
+            contentPath: 'tools/cli/deployment',
+          },
+          {
+            label: 'End-to-End Testing',
+            path: 'tools/cli/end-to-end',
+            contentPath: 'tools/cli/end-to-end',
+          },
+          {
+            label: 'Migrating to new build system',
+            path: 'tools/cli/build-system-migration',
+            contentPath: 'tools/cli/build-system-migration',
+          },
+          {
+            label: 'Build environments',
+            path: 'tools/cli/environments',
+            contentPath: 'tools/cli/environments',
+          },
+          {
+            label: 'Angular CLI builders',
+            path: 'tools/cli/cli-builder',
+            contentPath: 'tools/cli/cli-builder',
+          },
+          {
+            label: 'Generating code using schematics',
+            path: 'tools/cli/schematics',
+            contentPath: 'tools/cli/schematics',
+          },
+          {
+            label: 'Authoring schematics',
+            path: 'tools/cli/schematics-authoring',
+            contentPath: 'tools/cli/schematics-authoring',
+          },
+          {
+            label: 'Schematics for libraries',
+            path: 'tools/cli/schematics-for-libraries',
+            contentPath: 'tools/cli/schematics-for-libraries',
+          },
+          {
+            label: 'Template type checking',
+            path: 'tools/cli/template-typecheck',
+            contentPath: 'tools/cli/template-typecheck',
+          },
+          {
+            label: 'Ahead-of-time (AOT) compilation',
+            path: 'tools/cli/aot-compiler',
+            contentPath: 'tools/cli/aot-compiler',
+          },
+          {
+            label: 'AOT metadata errors',
+            path: 'tools/cli/aot-metadata-errors',
+            contentPath: 'tools/cli/aot-metadata-errors',
+          },
+        ],
+      },
+      {
+        label: 'Libraries',
+        children: [
+          {
+            label: 'Overview',
+            path: 'tools/libraries',
+            contentPath: 'tools/libraries/overview',
+          },
+          {
+            label: 'Creating Libraries',
+            path: 'tools/libraries/creating-libraries',
+            contentPath: 'tools/libraries/creating-libraries',
+          },
+          {
+            label: 'Using Libraries',
+            path: 'tools/libraries/using-libraries',
+            contentPath: 'tools/libraries/using-libraries',
+          },
+          {
+            label: 'Angular Package Format',
+            path: 'tools/libraries/angular-package-format',
+            contentPath: 'tools/libraries/angular-package-format',
+          },
+        ],
+      },
+      {
+        label: 'DevTools',
+        children: [
+          {
+            label: 'Overview',
+            path: 'tools/devtools',
+            contentPath: 'tools/devtools/overview',
+          },
+          {
+            label: 'Components',
+            path: 'tools/devtools/component',
+            contentPath: 'tools/devtools/component',
+          },
+          {
+            label: 'Profiler',
+            path: 'tools/devtools/profiler',
+            contentPath: 'tools/devtools/profiler',
+          },
+          {
+            label: 'Injectors',
+            path: 'tools/devtools/injectors',
+            contentPath: 'tools/devtools/injectors',
+          },
+          // TODO: create those guides
+          // The signal debugging docs should also be added to the signal section
+          // {
+          //   label: 'Signals',
+          //   path: 'tools/devtools/signals',
+          //   contentPath: 'tools/devtools/signals',
+          // },
+          // {
+          //   label: 'Router',
+          //   path: 'tools/devtools/router',
+          //   contentPath: 'tools/devtools/router',
+          // }
+        ],
+      },
+      {
+        label: 'Language Service',
+        path: 'tools/language-service',
+        contentPath: 'tools/language-service',
+      },
+    ],
+  },
+  {
+    label: 'Best Practices',
+    children: [
+      {
+        label: 'Style Guide',
+        path: 'style-guide',
+        contentPath: 'best-practices/style-guide',
+        status: 'updated',
+      },
+      {
+        label: 'Security',
+        path: 'best-practices/security',
+        contentPath: 'guide/security', // Have not refactored due to build issues
+      },
+      {
+        label: 'Accessibility',
+        path: 'best-practices/a11y',
+        contentPath: 'best-practices/a11y',
+      },
+      {
+        label: 'Unhandled errors in Angular',
+        path: 'best-practices/error-handling',
+        contentPath: 'best-practices/error-handling',
+      },
+      {
+        label: 'Performance',
+        preserveOtherCategoryOrder: true,
+        children: [
+          {
+            label: 'Overview',
+            path: 'best-practices/performance',
+            contentPath: 'best-practices/performance/overview',
+          },
+
+          // Loading Performance
+          {
+            label: 'Deferred loading with @defer',
+            path: 'best-practices/performance/defer',
+            contentPath: 'guide/templates/defer',
+            category: 'Loading Performance',
+          },
+          {
+            label: 'Image optimization',
+            path: 'best-practices/performance/image-optimization',
+            contentPath: 'guide/image-optimization',
+            category: 'Loading Performance',
+          },
+          {
+            label: 'Server-side rendering',
+            path: 'best-practices/performance/ssr',
+            contentPath: 'guide/ssr',
+            category: 'Loading Performance',
+          },
+
+          // Runtime Performance
+          {
+            label: 'Overview',
+            path: 'best-practices/runtime-performance',
+            contentPath: 'best-practices/runtime-performance/overview',
+            category: 'Runtime Performance',
+          },
+          {
+            label: 'Zoneless',
+            path: 'guide/zoneless',
+            contentPath: 'guide/zoneless',
+            category: 'Runtime Performance',
+          },
+          {
+            label: 'Slow computations',
+            path: 'best-practices/slow-computations',
+            contentPath: 'best-practices/runtime-performance/slow-computations',
+            category: 'Runtime Performance',
+          },
+          {
+            label: 'Skipping component subtrees',
+            path: 'best-practices/skipping-subtrees',
+            contentPath: 'best-practices/runtime-performance/skipping-subtrees',
+            category: 'Runtime Performance',
+          },
+          {
+            label: 'Zone pollution',
+            path: 'best-practices/zone-pollution',
+            contentPath: 'best-practices/runtime-performance/zone-pollution',
+            category: 'Runtime Performance',
+          },
+
+          {
+            label: 'Chrome DevTools profiling',
+            path: 'best-practices/profiling-with-chrome-devtools',
+            contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools',
+            category: 'Runtime Performance',
+          },
+        ],
+      },
+      {
+        label: 'Keeping up-to-date',
+        path: 'update',
+        contentPath: 'best-practices/update',
+      },
+    ],
+  },
+  {
+    label: 'Developer Events',
+    children: [
+      {
+        label: 'Angular v21 Release',
+        path: 'events/v21',
+        contentPath: 'events/v21',
+        status: 'new',
+      },
+    ],
+  },
+  {
+    label: 'Extended Ecosystem',
+    children: [
+      {
+        label: 'NgModules',
+        path: 'guide/ngmodules/overview',
+        contentPath: 'guide/ngmodules/overview',
+      },
+      {
+        label: 'Legacy Animations',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/legacy-animations',
+            contentPath: 'guide/animations/overview',
+          },
+          {
+            label: 'Transition and Triggers',
+            path: 'guide/legacy-animations/transition-and-triggers',
+            contentPath: 'guide/animations/transition-and-triggers',
+          },
+          {
+            label: 'Complex Sequences',
+            path: 'guide/legacy-animations/complex-sequences',
+            contentPath: 'guide/animations/complex-sequences',
+          },
+          {
+            label: 'Reusable Animations',
+            path: 'guide/legacy-animations/reusable-animations',
+            contentPath: 'guide/animations/reusable-animations',
+          },
+          {
+            label: 'Migrating to Native CSS Animations',
+            path: 'guide/animations/migration',
+            contentPath: 'guide/animations/migration',
+          },
+        ],
+      },
+      {
+        label: 'Using RxJS with Angular',
+        children: [
+          {
+            label: 'Signals interop',
+            path: 'ecosystem/rxjs-interop',
+            contentPath: 'ecosystem/rxjs-interop/signals-interop',
+          },
+          {
+            label: 'Component output interop',
+            path: 'ecosystem/rxjs-interop/output-interop',
+            contentPath: 'ecosystem/rxjs-interop/output-interop',
+          },
+          {
+            label: 'Unsubscribing with takeUntilDestroyed',
+            path: 'ecosystem/rxjs-interop/take-until-destroyed',
+            contentPath: 'ecosystem/rxjs-interop/take-until-destroyed',
+          },
+        ],
+      },
+      {
+        label: 'Service Workers & PWAs',
+        children: [
+          {
+            label: 'Overview',
+            path: 'ecosystem/service-workers',
+            contentPath: 'ecosystem/service-workers/overview',
+          },
+          {
+            label: 'Getting started',
+            path: 'ecosystem/service-workers/getting-started',
+            contentPath: 'ecosystem/service-workers/getting-started',
+          },
+          {
+            label: 'Custom service worker scripts',
+            path: 'ecosystem/service-workers/custom-service-worker-scripts',
+            contentPath: 'ecosystem/service-workers/custom-service-worker-scripts',
+          },
+          {
+            label: 'Configuration file',
+            path: 'ecosystem/service-workers/config',
+            contentPath: 'ecosystem/service-workers/config',
+          },
+          {
+            label: 'Communicating with the service worker',
+            path: 'ecosystem/service-workers/communications',
+            contentPath: 'ecosystem/service-workers/communications',
+          },
+          {
+            label: 'Push notifications',
+            path: 'ecosystem/service-workers/push-notifications',
+            contentPath: 'ecosystem/service-workers/push-notifications',
+          },
+          {
+            label: 'Service worker devops',
+            path: 'ecosystem/service-workers/devops',
+            contentPath: 'ecosystem/service-workers/devops',
+          },
+          {
+            label: 'App shell pattern',
+            path: 'ecosystem/service-workers/app-shell',
+            contentPath: 'ecosystem/service-workers/app-shell',
+          },
+        ],
+      },
+      {
+        label: 'Web workers',
+        path: 'ecosystem/web-workers',
+        contentPath: 'ecosystem/web-workers',
+      },
+      {
+        label: 'Custom build pipeline',
+        path: 'ecosystem/custom-build-pipeline',
+        contentPath: 'ecosystem/custom-build-pipeline',
+      },
+      {
+        label: 'Tailwind',
+        path: 'guide/tailwind',
+        contentPath: 'guide/tailwind',
+        status: 'new',
+      },
+      {
+        label: 'Angular Fire',
+        path: 'https://github.com/angular/angularfire#readme',
+      },
+      {
+        label: 'Google Maps',
+        path: 'https://github.com/angular/components/tree/main/src/google-maps#readme',
+      },
+      {
+        label: 'Google Pay',
+        path: 'https://github.com/google-pay/google-pay-button#angular',
+      },
+      {
+        label: 'YouTube player',
+        path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md',
+      },
+      {
+        label: 'Angular CDK',
+        path: 'https://material.angular.dev/cdk/categories',
+      },
+      {
+        label: 'Angular Material',
+        path: 'https://material.angular.dev/',
+      },
+    ],
+  },
+  ...(isDevMode()
+    ? [
+        {
+          label: 'Adev Dev Guide',
+          children: [
+            {
+              label: 'Kitchen Sink',
+              path: 'kitchen-sink',
+              contentPath: 'kitchen-sink',
+            },
+          ],
+        },
+      ]
+    : []),
+];
+
+export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
+  FIRST_APP_TUTORIAL_NAV_DATA,
+  LEARN_ANGULAR_TUTORIAL_NAV_DATA,
+  DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
+  SIGNALS_TUTORIAL_NAV_DATA,
+  SIGNAL_FORMS_TUTORIAL_NAV_DATA,
+  {
+    path: 'tutorials',
+    contentPath: 'tutorials/home',
+    label: 'Tutorials',
+  },
+];
+
+export const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
+  {
+    label: 'Roadmap',
+    path: 'roadmap',
+    contentPath: 'reference/roadmap',
+  },
+  {
+    label: 'Get involved',
+    path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md',
+  },
+  {
+    label: 'API Reference',
+    preserveOtherCategoryOrder: true,
+    children: [
+      {
+        label: 'Overview',
+        path: 'api',
+      },
+      ...getApiNavigationItems(),
+    ],
+  },
+  {
+    label: 'CLI Reference',
+    children: [
+      {
+        label: 'Overview',
+        path: 'cli',
+        contentPath: 'reference/cli',
+      },
+      {
+        label: 'ng add',
+        path: 'cli/add',
+      },
+      {
+        label: 'ng analytics',
+        children: [
+          {
+            label: 'Overview',
+            path: 'cli/analytics',
+          },
+          {
+            label: 'disable',
+            path: 'cli/analytics/disable',
+          },
+          {
+            label: 'enable',
+            path: 'cli/analytics/enable',
+          },
+          {
+            label: 'info',
+            path: 'cli/analytics/info',
+          },
+          {
+            label: 'prompt',
+            path: 'cli/analytics/prompt',
+          },
+        ],
+      },
+      {
+        label: 'ng build',
+        path: 'cli/build',
+      },
+      {
+        label: 'ng cache',
+        children: [
+          {
+            label: 'Overview',
+            path: 'cli/cache',
+          },
+          {
+            label: 'clean',
+            path: 'cli/cache/clean',
+          },
+          {
+            label: 'disable',
+            path: 'cli/cache/disable',
+          },
+          {
+            label: 'enable',
+            path: 'cli/cache/enable',
+          },
+          {
+            label: 'info',
+            path: 'cli/cache/info',
+          },
+        ],
+      },
+      {
+        label: 'ng completion',
+        children: [
+          {
+            label: 'Overview',
+            path: 'cli/completion',
+          },
+          {
+            label: 'script',
+            path: 'cli/completion/script',
+          },
+        ],
+      },
+      {
+        label: 'ng config',
+        path: 'cli/config',
+      },
+      {
+        label: 'ng deploy',
+        path: 'cli/deploy',
+      },
+      {
+        label: 'ng e2e',
+        path: 'cli/e2e',
+      },
+      {
+        label: 'ng extract-i18n',
+        path: 'cli/extract-i18n',
+      },
+      {
+        label: 'ng generate',
+        children: [
+          {
+            label: 'Overview',
+            path: 'cli/generate',
+          },
+          {
+            label: 'ai-config',
+            path: 'cli/generate/ai-config',
+          },
+          {
+            label: 'app-shell',
+            path: 'cli/generate/app-shell',
+          },
+          {
+            label: 'application',
+            path: 'cli/generate/application',
+          },
+          {
+            label: 'class',
+            path: 'cli/generate/class',
+          },
+          {
+            label: 'component',
+            path: 'cli/generate/component',
+          },
+          {
+            label: 'config',
+            path: 'cli/generate/config',
+          },
+          {
+            label: 'directive',
+            path: 'cli/generate/directive',
+          },
+          {
+            label: 'enum',
+            path: 'cli/generate/enum',
+          },
+          {
+            label: 'environments',
+            path: 'cli/generate/environments',
+          },
+          {
+            label: 'guard',
+            path: 'cli/generate/guard',
+          },
+          {
+            label: 'interceptor',
+            path: 'cli/generate/interceptor',
+          },
+          {
+            label: 'interface',
+            path: 'cli/generate/interface',
+          },
+          {
+            label: 'library',
+            path: 'cli/generate/library',
+          },
+          {
+            label: 'module',
+            path: 'cli/generate/module',
+          },
+          {
+            label: 'pipe',
+            path: 'cli/generate/pipe',
+          },
+          {
+            label: 'resolver',
+            path: 'cli/generate/resolver',
+          },
+          {
+            label: 'service-worker',
+            path: 'cli/generate/service-worker',
+          },
+          {
+            label: 'service',
+            path: 'cli/generate/service',
+          },
+          {
+            label: 'web-worker',
+            path: 'cli/generate/web-worker',
+          },
+        ],
+      },
+      {
+        label: 'ng lint',
+        path: 'cli/lint',
+      },
+      {
+        label: 'ng new',
+        path: 'cli/new',
+      },
+      {
+        label: 'ng run',
+        path: 'cli/run',
+      },
+      {
+        label: 'ng serve',
+        path: 'cli/serve',
+      },
+      {
+        label: 'ng test',
+        path: 'cli/test',
+      },
+      {
+        label: 'ng update',
+        path: 'cli/update',
+      },
+      {
+        label: 'ng version',
+        path: 'cli/version',
+      },
+    ],
+  },
+  {
+    label: 'Error Encyclopedia',
+    children: [
+      {
+        label: 'Overview',
+        path: 'errors',
+        contentPath: 'reference/errors/overview',
+      },
+      ...ERRORS_NAV_DATA,
+    ],
+  },
+  {
+    label: 'Extended Diagnostics',
+    children: [
+      {
+        label: 'Overview',
+        path: 'extended-diagnostics',
+        contentPath: 'reference/extended-diagnostics/overview',
+      },
+      ...EXT_DIAGNOSTICS_NAV_DATA,
+    ],
+  },
+  {
+    label: 'Versioning and releases',
+    path: 'reference/releases',
+    contentPath: 'reference/releases',
+  },
+  {
+    label: 'Version compatibility',
+    path: 'reference/versions',
+    contentPath: 'reference/versions',
+  },
+  {
+    label: 'Update guide',
+    path: 'update-guide',
+  },
+  {
+    label: 'Configurations',
+    children: [
+      {
+        label: 'File structure',
+        path: 'reference/configs/file-structure',
+        contentPath: 'reference/configs/file-structure',
+      },
+      {
+        label: 'Workspace configuration',
+        path: 'reference/configs/workspace-config',
+        contentPath: 'reference/configs/workspace-config',
+      },
+      {
+        label: 'Angular compiler options',
+        path: 'reference/configs/angular-compiler-options',
+        contentPath: 'reference/configs/angular-compiler-options',
+      },
+      {
+        label: 'npm dependencies',
+        path: 'reference/configs/npm-packages',
+        contentPath: 'reference/configs/npm-packages',
+      },
+    ],
+  },
+  {
+    label: 'Migrations',
+    children: [
+      {
+        label: 'Overview',
+        path: 'reference/migrations',
+        contentPath: 'reference/migrations/overview',
+      },
+      {
+        label: 'Standalone',
+        path: 'reference/migrations/standalone',
+        contentPath: 'reference/migrations/standalone',
+      },
+      {
+        label: 'Control Flow Syntax',
+        path: 'reference/migrations/control-flow',
+        contentPath: 'reference/migrations/control-flow',
+      },
+      {
+        label: 'inject() Function',
+        path: 'reference/migrations/inject-function',
+        contentPath: 'reference/migrations/inject-function',
+      },
+      {
+        label: 'Lazy-loaded routes',
+        path: 'reference/migrations/route-lazy-loading',
+        contentPath: 'reference/migrations/route-lazy-loading',
+      },
+      {
+        label: 'Signal inputs',
+        path: 'reference/migrations/signal-inputs',
+        contentPath: 'reference/migrations/signal-inputs',
+      },
+      {
+        label: 'Outputs',
+        path: 'reference/migrations/outputs',
+        contentPath: 'reference/migrations/outputs',
+      },
+      {
+        label: 'Signal queries',
+        path: 'reference/migrations/signal-queries',
+        contentPath: 'reference/migrations/signal-queries',
+      },
+      {
+        label: 'Clean up unused imports',
+        path: 'reference/migrations/cleanup-unused-imports',
+        contentPath: 'reference/migrations/cleanup-unused-imports',
+      },
+      {
+        label: 'Self-closing tags',
+        path: 'reference/migrations/self-closing-tags',
+        contentPath: 'reference/migrations/self-closing-tags',
+      },
+      {
+        label: 'NgClass to Class',
+        path: 'reference/migrations/ngclass-to-class',
+        contentPath: 'reference/migrations/ngclass-to-class',
+        status: 'new',
+      },
+      {
+        label: 'NgStyle to Style',
+        path: 'reference/migrations/ngstyle-to-style',
+        contentPath: 'reference/migrations/ngstyle-to-style',
+        status: 'new',
+      },
+      {
+        label: 'Router Testing Module Migration',
+        path: 'reference/migrations/router-testing-module-migration',
+        contentPath: 'reference/migrations/router-testing-module-migration',
+        status: 'new',
+      },
+      {
+        label: 'CommonModule to Standalone',
+        path: 'reference/migrations/common-to-standalone',
+        contentPath: 'reference/migrations/common-to-standalone',
+        status: 'new',
+      },
+    ],
+  },
+];
+
+export const FOOTER_NAVIGATION_DATA: NavigationItem[] = [
+  {
+    label: 'Press Kit',
+    path: 'press-kit',
+    contentPath: 'reference/press-kit',
+  },
+  {
+    label: 'License',
+    path: 'license',
+    contentPath: 'reference/license',
+  },
+];
+
+export const ALL_ITEMS = [
+  ...DOCS_SUB_NAVIGATION_DATA,
+  ...REFERENCE_SUB_NAVIGATION_DATA,
+  ...FOOTER_NAVIGATION_DATA,
+  ...TUTORIALS_SUB_NAVIGATION_DATA,
+];
+
+function getApiNavigationItems(): NavigationItem[] {
+  const manifest = API_MANIFEST_JSON as any; // TODO(mri): Use proper type when the refactoring of #66252 gets in.
+
+  const apiNavigationItems: NavigationItem[] = [];
+
+  for (const packageEntry of manifest) {
+    const packageNavigationItem: NavigationItem = {
+      label: packageEntry.moduleLabel,
+      children: packageEntry.entries.map((api: any) => ({
+        path: getApiUrl(packageEntry, api.name),
+        label: api.name,
+        category: api.category,
+      })),
+    };
+
+    apiNavigationItems.push(packageNavigationItem);
+  }
+
+  return apiNavigationItems;
+}
+
+function getApiUrl(packageEntry: any, apiName: string): string {
+  const packageName = packageEntry.normalizedModuleName
+    // packages like `angular_core` should be `core`
+    // packages like `angular_animation_browser` should be `animation/browser`
+    .replace('angular_', '')
+    .replaceAll('_', '/');
+  return `api/${packageName}/${apiName}`;
+}
diff --git a/adev-ja/src/app/routing/navigation-entries/index.ts b/adev-ja/src/app/routing/navigation-entries/index.ts
new file mode 100644
index 000000000..76d484fad
--- /dev/null
+++ b/adev-ja/src/app/routing/navigation-entries/index.ts
@@ -0,0 +1,1761 @@
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {isDevMode} from '@angular/core';
+import type {NavigationItem} from '@angular/docs';
+// These imports are expected to be red because they are generated a build time
+// @ts-ignore
+import ERRORS_NAV_DATA from '../../../content/reference/errors/routes.json' with {type: 'json'};
+// @ts-ignore
+import EXT_DIAGNOSTICS_NAV_DATA from '../../../content/reference/extended-diagnostics/routes.json' with {type: 'json'};
+// @ts-ignore
+import FIRST_APP_TUTORIAL_NAV_DATA from '../../../content/tutorials/first-app/first-app/routes.json' with {type: 'json'};
+// @ts-ignore
+import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../content/tutorials/learn-angular/learn-angular/routes.json' with {type: 'json'};
+// @ts-ignore
+import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../content/tutorials/deferrable-views/deferrable-views/routes.json' with {type: 'json'};
+// @ts-ignore
+import SIGNALS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signals/signals/routes.json' with {type: 'json'};
+// @ts-ignore
+import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signal-forms/signal-forms/routes.json' with {type: 'json'};
+// @ts-ignore
+import API_MANIFEST_JSON from '../../../assets/manifest.json' with {type: 'json'};
+
+interface SubNavigationData {
+  docs: NavigationItem[];
+  reference: NavigationItem[];
+  tutorials: NavigationItem[];
+  footer: NavigationItem[];
+}
+
+export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
+  {
+    label: '入門',
+    children: [
+      {
+        label: 'Angularとは？',
+        path: 'overview',
+        contentPath: 'introduction/what-is-angular',
+      },
+      {
+        label: 'インストール',
+        path: 'installation',
+        contentPath: 'introduction/installation',
+      },
+      {
+        label: '基本概念',
+        children: [
+          {
+            label: '概要',
+            path: 'essentials',
+            contentPath: 'introduction/essentials/overview',
+          },
+          {
+            label: 'コンポーネントによる構築',
+            path: 'essentials/components',
+            contentPath: 'introduction/essentials/components',
+          },
+          {
+            label: 'リアクティビティとシグナル',
+            path: 'essentials/signals',
+            contentPath: 'introduction/essentials/signals',
+          },
+          {
+            label: 'テンプレートによる動的なインターフェース',
+            path: 'essentials/templates',
+            contentPath: 'introduction/essentials/templates',
+          },
+          {
+            label: 'シグナルを使ったフォーム',
+            path: 'essentials/signal-forms',
+            contentPath: 'introduction/essentials/signal-forms',
+            status: 'new',
+          },
+          {
+            label: '依存性の注入によるモジュール設計',
+            path: 'essentials/dependency-injection',
+            contentPath: 'introduction/essentials/dependency-injection',
+          },
+          {
+            label: '次のステップ',
+            path: 'essentials/next-steps',
+            contentPath: 'introduction/essentials/next-steps',
+          },
+        ],
+      },
+      {
+        label: '作ってみよう！ 🚀',
+        path: 'tutorials/learn-angular',
+      },
+    ],
+  },
+  {
+    label: '詳細ガイド',
+    children: [
+      {
+        label: 'シグナル',
+        status: 'updated',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/signals',
+            contentPath: 'guide/signals/overview',
+          },
+          {
+            label: 'linkedSignalによる派生状態',
+            path: 'guide/signals/linked-signal',
+            contentPath: 'guide/signals/linked-signal',
+          },
+          {
+            label: 'resourceによる非同期リアクティビティ',
+            path: 'guide/signals/resource',
+            contentPath: 'guide/signals/resource',
+          },
+          {
+            label: '非リアクティブAPIのための副作用',
+            path: 'guide/signals/effect',
+            contentPath: 'guide/signals/effect',
+            status: 'new',
+          },
+        ],
+      },
+      {
+        label: 'コンポーネント',
+        children: [
+          {
+            label: 'コンポーネントの構造',
+            path: 'guide/components',
+            contentPath: 'guide/components/anatomy-of-components',
+          },
+          {
+            label: 'セレクター',
+            path: 'guide/components/selectors',
+            contentPath: 'guide/components/selectors',
+          },
+          {
+            label: 'スタイリング',
+            path: 'guide/components/styling',
+            contentPath: 'guide/components/styling',
+          },
+          {
+            label: '入力プロパティによるデータ受け入れ',
+            path: 'guide/components/inputs',
+            contentPath: 'guide/components/inputs',
+          },
+          {
+            label: '出力によるカスタムイベント',
+            path: 'guide/components/outputs',
+            contentPath: 'guide/components/outputs',
+          },
+          {
+            label: 'ng-contentによるコンテンツ投影',
+            path: 'guide/components/content-projection',
+            contentPath: 'guide/components/content-projection',
+          },
+          {
+            label: 'ホスト要素',
+            path: 'guide/components/host-elements',
+            contentPath: 'guide/components/host-elements',
+          },
+          {
+            label: 'ライフサイクル',
+            path: 'guide/components/lifecycle',
+            contentPath: 'guide/components/lifecycle',
+          },
+          {
+            label: 'クエリによるコンポーネントの子への参照',
+            path: 'guide/components/queries',
+            contentPath: 'guide/components/queries',
+          },
+          {
+            label: 'DOM APIの使用',
+            path: 'guide/components/dom-apis',
+            contentPath: 'guide/components/dom-apis',
+          },
+          {
+            label: '継承',
+            path: 'guide/components/inheritance',
+            contentPath: 'guide/components/inheritance',
+          },
+          {
+            label: 'プログラムによるコンポーネントレンダリング',
+            path: 'guide/components/programmatic-rendering',
+            contentPath: 'guide/components/programmatic-rendering',
+          },
+          {
+            label: '高度な設定',
+            path: 'guide/components/advanced-configuration',
+            contentPath: 'guide/components/advanced-configuration',
+          },
+          {
+            label: 'カスタム要素',
+            path: 'guide/elements',
+            contentPath: 'guide/elements',
+          },
+        ],
+      },
+      {
+        label: 'テンプレート',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/templates',
+            contentPath: 'guide/templates/overview',
+          },
+          {
+            label: '動的テキスト、プロパティ、属性のバインディング',
+            path: 'guide/templates/binding',
+            contentPath: 'guide/templates/binding',
+          },
+          {
+            label: 'イベントリスナーの追加',
+            path: 'guide/templates/event-listeners',
+            contentPath: 'guide/templates/event-listeners',
+          },
+          {
+            label: '双方向バインディング',
+            path: 'guide/templates/two-way-binding',
+            contentPath: 'guide/templates/two-way-binding',
+          },
+          {
+            label: '制御フロー',
+            path: 'guide/templates/control-flow',
+            contentPath: 'guide/templates/control-flow',
+          },
+          {
+            label: 'パイプ',
+            path: 'guide/templates/pipes',
+            contentPath: 'guide/templates/pipes',
+          },
+          {
+            label: 'ng-contentによる子コンテンツのスロット化',
+            path: 'guide/templates/ng-content',
+            contentPath: 'guide/templates/ng-content',
+          },
+          {
+            label: 'ng-templateによるテンプレートフラグメントの作成',
+            path: 'guide/templates/ng-template',
+            contentPath: 'guide/templates/ng-template',
+          },
+          {
+            label: 'ng-containerによる要素のグループ化',
+            path: 'guide/templates/ng-container',
+            contentPath: 'guide/templates/ng-container',
+          },
+          {
+            label: 'テンプレート内の変数',
+            path: 'guide/templates/variables',
+            contentPath: 'guide/templates/variables',
+          },
+          {
+            label: '@deferによる遅延読み込み',
+            path: 'guide/templates/defer',
+            contentPath: 'guide/templates/defer',
+          },
+          {
+            label: '式の構文',
+            path: 'guide/templates/expression-syntax',
+            contentPath: 'guide/templates/expression-syntax',
+          },
+          {
+            label: 'テンプレート内の空白',
+            path: 'guide/templates/whitespace',
+            contentPath: 'guide/templates/whitespace',
+          },
+        ],
+      },
+      {
+        label: 'ディレクティブ',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/directives',
+            contentPath: 'guide/directives/overview',
+          },
+          {
+            label: '属性ディレクティブ',
+            path: 'guide/directives/attribute-directives',
+            contentPath: 'guide/directives/attribute-directives',
+          },
+          {
+            label: '構造ディレクティブ',
+            path: 'guide/directives/structural-directives',
+            contentPath: 'guide/directives/structural-directives',
+          },
+          {
+            label: 'ディレクティブコンポジションAPI',
+            path: 'guide/directives/directive-composition-api',
+            contentPath: 'guide/directives/directive-composition-api',
+          },
+          {
+            label: 'NgOptimizedImageによる画像の最適化',
+            path: 'guide/image-optimization',
+            contentPath: 'guide/image-optimization',
+          },
+        ],
+      },
+      {
+        label: '依存性の注入',
+        status: 'updated',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/di',
+            contentPath: 'guide/di/overview',
+            status: 'updated',
+          },
+          {
+            label: 'サービスの作成と使用',
+            path: 'guide/di/creating-and-using-services',
+            contentPath: 'guide/di/creating-and-using-services',
+            status: 'updated',
+          },
+          {
+            label: '依存性プロバイダーの定義',
+            path: 'guide/di/defining-dependency-providers',
+            contentPath: 'guide/di/defining-dependency-providers',
+            status: 'updated',
+          },
+          {
+            label: '注入コンテキスト',
+            path: 'guide/di/dependency-injection-context',
+            contentPath: 'guide/di/dependency-injection-context',
+          },
+          {
+            label: '階層的なインジェクター',
+            path: 'guide/di/hierarchical-dependency-injection',
+            contentPath: 'guide/di/hierarchical-dependency-injection',
+          },
+          {
+            label: 'インジェクショントークンの最適化',
+            path: 'guide/di/lightweight-injection-tokens',
+            contentPath: 'guide/di/lightweight-injection-tokens',
+          },
+          {
+            label: 'DIの実践',
+            path: 'guide/di/di-in-action',
+            contentPath: 'guide/di/di-in-action',
+          },
+          {
+            label: 'Debugging and troubleshooting DI',
+            path: 'guide/di/debugging-and-troubleshooting-di',
+            contentPath: 'guide/di/debugging-and-troubleshooting-di',
+            status: 'new',
+          },
+        ],
+      },
+      {
+        label: 'ルーティング',
+        status: 'updated',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/routing',
+            contentPath: 'guide/routing/overview',
+          },
+          {
+            label: 'ルートを定義する',
+            path: 'guide/routing/define-routes',
+            contentPath: 'guide/routing/define-routes',
+          },
+          {
+            label: 'アウトレットにルートを表示する',
+            path: 'guide/routing/show-routes-with-outlets',
+            contentPath: 'guide/routing/show-routes-with-outlets',
+          },
+          {
+            label: 'ルートへのナビゲーション',
+            path: 'guide/routing/navigate-to-routes',
+            contentPath: 'guide/routing/navigate-to-routes',
+          },
+          {
+            label: 'ルートの状態を読み取る',
+            path: 'guide/routing/read-route-state',
+            contentPath: 'guide/routing/read-route-state',
+          },
+          {
+            label: 'ルートのリダイレクト',
+            path: 'guide/routing/redirecting-routes',
+            contentPath: 'guide/routing/redirecting-routes',
+          },
+          {
+            label: 'ガードによるルートアクセスの制御',
+            path: 'guide/routing/route-guards',
+            contentPath: 'guide/routing/route-guards',
+          },
+          {
+            label: 'ルートデータリゾルバー',
+            path: 'guide/routing/data-resolvers',
+            contentPath: 'guide/routing/data-resolvers',
+          },
+          {
+            label: 'ライフサイクルとイベント',
+            path: 'guide/routing/lifecycle-and-events',
+            contentPath: 'guide/routing/lifecycle-and-events',
+          },
+          {
+            label: 'ルーティングとナビゲーションのテスト',
+            path: 'guide/routing/testing',
+            contentPath: 'guide/routing/testing',
+            status: 'new',
+          },
+          {
+            label: 'その他のルーティングタスク',
+            path: 'guide/routing/common-router-tasks',
+            contentPath: 'guide/routing/common-router-tasks',
+          },
+          {
+            label: 'カスタムルートマッチの作成',
+            path: 'guide/routing/routing-with-urlmatcher',
+            contentPath: 'guide/routing/routing-with-urlmatcher',
+          },
+          {
+            label: 'レンダリング戦略',
+            path: 'guide/routing/rendering-strategies',
+            contentPath: 'guide/routing/rendering-strategies',
+            status: 'new',
+          },
+          {
+            label: 'ルートの動作のカスタマイズ',
+            path: 'guide/routing/customizing-route-behavior',
+            contentPath: 'guide/routing/customizing-route-behavior',
+            status: 'new',
+          },
+          {
+            label: 'ルーターリファレンス',
+            path: 'guide/routing/router-reference',
+            contentPath: 'guide/routing/router-reference',
+          },
+          {
+            label: 'ルート遷移アニメーション',
+            path: 'guide/routing/route-transition-animations',
+            contentPath: 'guide/routing/route-transition-animations',
+          },
+        ],
+      },
+      {
+        label: 'フォーム',
+        status: 'updated',
+        preserveOtherCategoryOrder: true,
+        children: [
+          {
+            label: '概要',
+            path: 'guide/forms',
+            contentPath: 'guide/forms/overview',
+          },
+
+          {
+            label: '概要',
+            path: 'guide/forms/signals/overview',
+            contentPath: 'guide/forms/signals/overview',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'フォームモデル',
+            path: 'guide/forms/signals/models',
+            contentPath: 'guide/forms/signals/models',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'フォームモデルの設計',
+            path: 'guide/forms/signals/model-design',
+            contentPath: 'guide/forms/signals/designing-your-form-model',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'フィールド状態管理',
+            path: 'guide/forms/signals/field-state-management',
+            contentPath: 'guide/forms/signals/field-state-management',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'バリデーション',
+            path: 'guide/forms/signals/validation',
+            contentPath: 'guide/forms/signals/validation',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Form logic',
+            path: 'guide/forms/signals/form-logic',
+            contentPath: 'guide/forms/signals/form-logic',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Async operations',
+            path: 'guide/forms/signals/async-operations',
+            contentPath: 'guide/forms/signals/async-operations',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'カスタムコントロール',
+            path: 'guide/forms/signals/custom-controls',
+            contentPath: 'guide/forms/signals/custom-controls',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: '他のフォームシステムとの比較',
+            path: 'guide/forms/signals/comparison',
+            contentPath: 'guide/forms/signals/comparison',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Migrating from Reactive Forms',
+            path: 'guide/forms/signals/migration',
+            contentPath: 'guide/forms/signals/migration',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'リアクティブフォーム',
+            path: 'guide/forms/reactive-forms',
+            contentPath: 'guide/forms/reactive-forms',
+            category: 'Reactive Forms',
+          },
+          {
+            label: '厳密に型付けされたリアクティブフォーム',
+            path: 'guide/forms/typed-forms',
+            contentPath: 'guide/forms/typed-forms',
+            category: 'Reactive Forms',
+          },
+          {
+            label: 'テンプレート駆動型フォーム',
+            path: 'guide/forms/template-driven-forms',
+            contentPath: 'guide/forms/template-driven-forms',
+            category: 'Template driven Forms',
+          },
+          {
+            label: 'フォーム入力の検証',
+            path: 'guide/forms/form-validation',
+            contentPath: 'guide/forms/form-validation',
+            category: 'Reactive Forms',
+          },
+          {
+            label: 'フォーム入力の検証',
+            path: 'guide/forms/form-validation',
+            contentPath: 'guide/forms/form-validation',
+            category: 'Template driven Forms',
+          },
+          {
+            label: '動的フォームの構築',
+            path: 'guide/forms/dynamic-forms',
+            contentPath: 'guide/forms/dynamic-forms',
+            category: 'Reactive Forms',
+          },
+        ],
+      },
+      {
+        label: 'HTTPクライアント',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/http',
+            contentPath: 'guide/http/overview',
+          },
+          {
+            label: 'HttpClientの設定',
+            path: 'guide/http/setup',
+            contentPath: 'guide/http/setup',
+          },
+          {
+            label: 'リクエストの実行',
+            path: 'guide/http/making-requests',
+            contentPath: 'guide/http/making-requests',
+          },
+          {
+            label: 'httpResourceを使ったリアクティブなデータ取得',
+            path: 'guide/http/http-resource',
+            contentPath: 'guide/http/http-resource',
+          },
+          {
+            label: 'リクエストとレスポンスへの介入',
+            path: 'guide/http/interceptors',
+            contentPath: 'guide/http/interceptors',
+          },
+          {
+            label: 'テスト',
+            path: 'guide/http/testing',
+            contentPath: 'guide/http/testing',
+          },
+        ],
+      },
+      {
+        label: 'サーバーサイド・ハイブリッドレンダリング',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/performance',
+            contentPath: 'guide/performance/overview',
+          },
+          {
+            label: 'サーバーサイド・ハイブリッドレンダリング',
+            path: 'guide/ssr',
+            contentPath: 'guide/ssr',
+          },
+          {
+            label: 'ハイドレーション',
+            path: 'guide/hydration',
+            contentPath: 'guide/hydration',
+          },
+          {
+            label: 'インクリメンタルハイドレーション',
+            path: 'guide/incremental-hydration',
+            contentPath: 'guide/incremental-hydration',
+          },
+        ],
+      },
+      {
+        label: 'テスト',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/testing',
+            contentPath: 'guide/testing/overview',
+          },
+          {
+            label: 'コンポーネントのテストの基本',
+            path: 'guide/testing/components-basics',
+            contentPath: 'guide/testing/components-basics',
+          },
+          {
+            label: 'コンポーネントのテストシナリオ',
+            path: 'guide/testing/components-scenarios',
+            contentPath: 'guide/testing/components-scenarios',
+          },
+          {
+            label: 'サービスのテスト',
+            path: 'guide/testing/services',
+            contentPath: 'guide/testing/services',
+          },
+          {
+            label: '属性ディレクティブのテスト',
+            path: 'guide/testing/attribute-directives',
+            contentPath: 'guide/testing/attribute-directives',
+          },
+          {
+            label: 'パイプのテスト',
+            path: 'guide/testing/pipes',
+            contentPath: 'guide/testing/pipes',
+          },
+          {
+            label: 'ルーティングとナビゲーションのテスト',
+            path: 'guide/routing/testing',
+            contentPath: 'guide/routing/testing',
+            status: 'new',
+          },
+          {
+            label: 'テストのデバッグ',
+            path: 'guide/testing/debugging',
+            contentPath: 'guide/testing/debugging',
+          },
+          {
+            label: 'コードカバレッジ',
+            path: 'guide/testing/code-coverage',
+            contentPath: 'guide/testing/code-coverage',
+          },
+          {
+            label: 'テストユーティリティAPI',
+            path: 'guide/testing/utility-apis',
+            contentPath: 'guide/testing/utility-apis',
+          },
+          {
+            label: 'コンポーネントハーネスの概要',
+            path: 'guide/testing/component-harnesses-overview',
+            contentPath: 'guide/testing/component-harnesses-overview',
+          },
+          {
+            label: 'テストでコンポーネントハーネスを使う',
+            path: 'guide/testing/using-component-harnesses',
+            contentPath: 'guide/testing/using-component-harnesses',
+          },
+          {
+            label: 'コンポーネントハーネスを作成する',
+            path: 'guide/testing/creating-component-harnesses',
+            contentPath: 'guide/testing/creating-component-harnesses',
+          },
+          {
+            label: 'テスト環境にハーネスサポートを追加する',
+            path: 'guide/testing/component-harnesses-testing-environments',
+            contentPath: 'guide/testing/component-harnesses-testing-environments',
+          },
+          {
+            label: 'KarmaからVitestへの移行',
+            path: 'guide/testing/migrating-to-vitest',
+            contentPath: 'guide/testing/migrating-to-vitest',
+          },
+          {
+            label: 'KarmaとJasmineによるテスト',
+            path: 'guide/testing/karma',
+            contentPath: 'guide/testing/karma',
+          },
+          {
+            label: 'Zone.jsテストユーティリティ',
+            path: 'guide/testing/zone-js-testing-utilities',
+            contentPath: 'guide/testing/zone-js-testing-utilities',
+          },
+        ],
+      },
+      {
+        label: 'Angular Aria',
+        status: 'new',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/aria/overview',
+            contentPath: 'guide/aria/overview',
+          },
+          {
+            label: 'アコーディオン',
+            path: 'guide/aria/accordion',
+            contentPath: 'guide/aria/accordion',
+          },
+          {
+            label: 'オートコンプリート',
+            path: 'guide/aria/autocomplete',
+            contentPath: 'guide/aria/autocomplete',
+          },
+          {
+            label: 'コンボボックス',
+            path: 'guide/aria/combobox',
+            contentPath: 'guide/aria/combobox',
+          },
+          {
+            label: 'グリッド',
+            path: 'guide/aria/grid',
+            contentPath: 'guide/aria/grid',
+          },
+          {
+            label: 'リストボックス',
+            path: 'guide/aria/listbox',
+            contentPath: 'guide/aria/listbox',
+          },
+          {
+            label: 'メニュー',
+            path: 'guide/aria/menu',
+            contentPath: 'guide/aria/menu',
+          },
+          {
+            label: 'メニューバー',
+            path: 'guide/aria/menubar',
+            contentPath: 'guide/aria/menubar',
+          },
+          {
+            label: 'マルチセレクト',
+            path: 'guide/aria/multiselect',
+            contentPath: 'guide/aria/multiselect',
+          },
+          {
+            label: 'セレクト',
+            path: 'guide/aria/select',
+            contentPath: 'guide/aria/select',
+          },
+          {
+            label: 'タブ',
+            path: 'guide/aria/tabs',
+            contentPath: 'guide/aria/tabs',
+          },
+          {
+            label: 'ツールバー',
+            path: 'guide/aria/toolbar',
+            contentPath: 'guide/aria/toolbar',
+          },
+          {
+            label: 'ツリー',
+            path: 'guide/aria/tree',
+            contentPath: 'guide/aria/tree',
+          },
+        ],
+      },
+      {
+        label: '国際化',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/i18n',
+            contentPath: 'guide/i18n/overview',
+          },
+          {
+            label: 'localizeパッケージの追加',
+            path: 'guide/i18n/add-package',
+            contentPath: 'guide/i18n/add-package',
+          },
+          {
+            label: 'IDによるロケールの参照',
+            path: 'guide/i18n/locale-id',
+            contentPath: 'guide/i18n/locale-id',
+          },
+          {
+            label: 'ロケールに基づいたデータのフォーマット',
+            path: 'guide/i18n/format-data-locale',
+            contentPath: 'guide/i18n/format-data-locale',
+          },
+          {
+            label: '翻訳のためのコンポーネントの準備',
+            path: 'guide/i18n/prepare',
+            contentPath: 'guide/i18n/prepare',
+          },
+          {
+            label: '翻訳ファイルの操作',
+            path: 'guide/i18n/translation-files',
+            contentPath: 'guide/i18n/translation-files',
+          },
+          {
+            label: 'アプリへの翻訳の統合',
+            path: 'guide/i18n/merge',
+            contentPath: 'guide/i18n/merge',
+          },
+          {
+            label: '複数のロケールのデプロイ',
+            path: 'guide/i18n/deploy',
+            contentPath: 'guide/i18n/deploy',
+          },
+          {
+            label: 'ロケールデータのグローバルバリアントのインポート',
+            path: 'guide/i18n/import-global-variants',
+            contentPath: 'guide/i18n/import-global-variants',
+          },
+          {
+            label: 'カスタムIDによるマークされたテキストの管理',
+            path: 'guide/i18n/manage-marked-text',
+            contentPath: 'guide/i18n/manage-marked-text',
+          },
+          {
+            label: 'Angularアプリケーションの例',
+            path: 'guide/i18n/example',
+            contentPath: 'guide/i18n/example',
+          },
+        ],
+      },
+      {
+        label: 'アニメーション',
+        status: 'updated',
+        children: [
+          {
+            label: 'Enter and Leave アニメーション',
+            path: 'guide/animations',
+            contentPath: 'guide/animations/enter-and-leave',
+            status: 'new',
+          },
+          {
+            label: '複雑なCSSアニメーション',
+            path: 'guide/animations/css',
+            contentPath: 'guide/animations/css',
+          },
+          {
+            label: 'ルート遷移アニメーション',
+            path: 'guide/routing/route-transition-animations',
+            contentPath: 'guide/routing/route-transition-animations',
+          },
+        ],
+      },
+      {
+        label: 'Drag and drop',
+        path: 'guide/drag-drop',
+        contentPath: 'guide/drag-drop',
+      },
+    ],
+  },
+  {
+    label: 'Build with AI',
+    status: 'new',
+    children: [
+      {
+        label: 'はじめよう',
+        path: 'ai',
+        contentPath: 'ai/overview',
+      },
+      {
+        label: 'LLMプロンプトとAI IDEセットアップ',
+        path: 'ai/develop-with-ai',
+        contentPath: 'ai/develop-with-ai',
+      },
+      {
+        label: '設計パターン',
+        path: 'ai/design-patterns',
+        contentPath: 'ai/design-patterns',
+      },
+      {
+        label: 'Angular CLI MCPサーバーセットアップ',
+        path: 'ai/mcp',
+        contentPath: 'ai/mcp-server-setup',
+      },
+      {
+        label: 'Angular AI Tutor',
+        path: 'ai/ai-tutor',
+        contentPath: 'ai/ai-tutor',
+      },
+    ],
+  },
+  {
+    label: '開発者ツール',
+    children: [
+      {
+        label: 'Angular CLI',
+        children: [
+          {
+            label: '概要',
+            path: 'tools/cli',
+            contentPath: 'tools/cli/overview',
+          },
+          {
+            label: 'ローカル設定',
+            path: 'tools/cli/setup-local',
+            contentPath: 'tools/cli/setup-local',
+          },
+          {
+            label: 'Angularアプリのビルド',
+            path: 'tools/cli/build',
+            contentPath: 'tools/cli/build',
+          },
+          {
+            label: '開発用ローカルサーバー',
+            path: 'tools/cli/serve',
+            contentPath: 'tools/cli/serve',
+          },
+          {
+            label: 'デプロイメント',
+            path: 'tools/cli/deployment',
+            contentPath: 'tools/cli/deployment',
+          },
+          {
+            label: 'エンドツーエンドテスト',
+            path: 'tools/cli/end-to-end',
+            contentPath: 'tools/cli/end-to-end',
+          },
+          {
+            label: '新しいビルドシステムへの移行',
+            path: 'tools/cli/build-system-migration',
+            contentPath: 'tools/cli/build-system-migration',
+          },
+          {
+            label: 'ビルド環境',
+            path: 'tools/cli/environments',
+            contentPath: 'tools/cli/environments',
+          },
+          {
+            label: 'Angular CLIビルダー',
+            path: 'tools/cli/cli-builder',
+            contentPath: 'tools/cli/cli-builder',
+          },
+          {
+            label: 'Schematicsによるコードの生成',
+            path: 'tools/cli/schematics',
+            contentPath: 'tools/cli/schematics',
+          },
+          {
+            label: 'Schematicsの作成',
+            path: 'tools/cli/schematics-authoring',
+            contentPath: 'tools/cli/schematics-authoring',
+          },
+          {
+            label: 'ライブラリのSchematics',
+            path: 'tools/cli/schematics-for-libraries',
+            contentPath: 'tools/cli/schematics-for-libraries',
+          },
+          {
+            label: 'テンプレート型チェック',
+            path: 'tools/cli/template-typecheck',
+            contentPath: 'tools/cli/template-typecheck',
+          },
+          {
+            label: '事前コンパイル (AOT) コンパイル',
+            path: 'tools/cli/aot-compiler',
+            contentPath: 'tools/cli/aot-compiler',
+          },
+          {
+            label: 'AOTメタデータエラー',
+            path: 'tools/cli/aot-metadata-errors',
+            contentPath: 'tools/cli/aot-metadata-errors',
+          },
+        ],
+      },
+      {
+        label: 'ライブラリ',
+        children: [
+          {
+            label: '概要',
+            path: 'tools/libraries',
+            contentPath: 'tools/libraries/overview',
+          },
+          {
+            label: 'ライブラリの作成',
+            path: 'tools/libraries/creating-libraries',
+            contentPath: 'tools/libraries/creating-libraries',
+          },
+          {
+            label: 'ライブラリの使用',
+            path: 'tools/libraries/using-libraries',
+            contentPath: 'tools/libraries/using-libraries',
+          },
+          {
+            label: 'Angularパッケージフォーマット',
+            path: 'tools/libraries/angular-package-format',
+            contentPath: 'tools/libraries/angular-package-format',
+          },
+        ],
+      },
+      {
+        label: 'DevTools',
+        children: [
+          {
+            label: '概要',
+            path: 'tools/devtools',
+            contentPath: 'tools/devtools/overview',
+          },
+          {
+            label: 'コンポーネント',
+            path: 'tools/devtools/component',
+            contentPath: 'tools/devtools/component',
+          },
+          {
+            label: 'プロファイラー',
+            path: 'tools/devtools/profiler',
+            contentPath: 'tools/devtools/profiler',
+          },
+          {
+            label: 'インジェクター',
+            path: 'tools/devtools/injectors',
+            contentPath: 'tools/devtools/injectors',
+          },
+          // TODO: create those guides
+          // The signal debugging docs should also be added to the signal section
+          // {
+          //   label: 'Signals',
+          //   path: 'tools/devtools/signals',
+          //   contentPath: 'tools/devtools/signals',
+          // },
+          // {
+          //   label: 'Router',
+          //   path: 'tools/devtools/router',
+          //   contentPath: 'tools/devtools/router',
+          // }
+        ],
+      },
+      {
+        label: '言語サービス',
+        path: 'tools/language-service',
+        contentPath: 'tools/language-service',
+      },
+    ],
+  },
+  {
+    label: 'ベストプラクティス',
+    children: [
+      {
+        label: 'スタイルガイド',
+        path: 'style-guide',
+        contentPath: 'best-practices/style-guide',
+        status: 'updated',
+      },
+      {
+        label: 'セキュリティ',
+        path: 'best-practices/security',
+        contentPath: 'guide/security', // Have not refactored due to build issues
+      },
+      {
+        label: 'アクセシビリティ',
+        path: 'best-practices/a11y',
+        contentPath: 'best-practices/a11y',
+      },
+      {
+        label: 'Angularにおける未処理エラー',
+        path: 'best-practices/error-handling',
+        contentPath: 'best-practices/error-handling',
+      },
+      {
+        label: 'パフォーマンス',
+        preserveOtherCategoryOrder: true,
+        children: [
+          {
+            label: '概要',
+            path: 'best-practices/performance',
+            contentPath: 'best-practices/performance/overview',
+          },
+
+          // Loading Performance
+          {
+            label: '@deferによる遅延読み込み',
+            path: 'best-practices/performance/defer',
+            contentPath: 'guide/templates/defer',
+            category: 'Loading Performance',
+          },
+          {
+            label: '画像の最適化',
+            path: 'best-practices/performance/image-optimization',
+            contentPath: 'guide/image-optimization',
+            category: 'Loading Performance',
+          },
+          {
+            label: 'サーバーサイドレンダリング',
+            path: 'best-practices/performance/ssr',
+            contentPath: 'guide/ssr',
+            category: 'Loading Performance',
+          },
+
+          // Runtime Performance
+          {
+            label: '概要',
+            path: 'best-practices/runtime-performance',
+            contentPath: 'best-practices/runtime-performance/overview',
+            category: 'Runtime Performance',
+          },
+          {
+            label: 'Zoneless',
+            path: 'guide/zoneless',
+            contentPath: 'guide/zoneless',
+            category: 'Runtime Performance',
+          },
+          {
+            label: '遅い計算',
+            path: 'best-practices/slow-computations',
+            contentPath: 'best-practices/runtime-performance/slow-computations',
+            category: 'Runtime Performance',
+          },
+          {
+            label: 'コンポーネントサブツリーのスキップ',
+            path: 'best-practices/skipping-subtrees',
+            contentPath: 'best-practices/runtime-performance/skipping-subtrees',
+            category: 'Runtime Performance',
+          },
+          {
+            label: 'ゾーンの汚染',
+            path: 'best-practices/zone-pollution',
+            contentPath: 'best-practices/runtime-performance/zone-pollution',
+            category: 'Runtime Performance',
+          },
+
+          {
+            label: 'Chrome DevToolsでのプロファイリング',
+            path: 'best-practices/profiling-with-chrome-devtools',
+            contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools',
+            category: 'Runtime Performance',
+          },
+        ],
+      },
+      {
+        label: 'アップデートに追従する',
+        path: 'update',
+        contentPath: 'best-practices/update',
+      },
+    ],
+  },
+  {
+    label: '開発者向けイベント',
+    children: [
+      {
+        label: 'Angular v21 Release',
+        path: 'events/v21',
+        contentPath: 'events/v21',
+        status: 'new',
+      },
+    ],
+  },
+  {
+    label: '拡張エコシステム',
+    children: [
+      {
+        label: 'NgModule',
+        path: 'guide/ngmodules/overview',
+        contentPath: 'guide/ngmodules/overview',
+      },
+      {
+        label: 'レガシーアニメーション',
+        children: [
+          {
+            label: '概要',
+            path: 'guide/legacy-animations',
+            contentPath: 'guide/animations/overview',
+          },
+          {
+            label: 'トランジションとトリガー',
+            path: 'guide/legacy-animations/transition-and-triggers',
+            contentPath: 'guide/animations/transition-and-triggers',
+          },
+          {
+            label: '複雑なシーケンス',
+            path: 'guide/legacy-animations/complex-sequences',
+            contentPath: 'guide/animations/complex-sequences',
+          },
+          {
+            label: '再利用可能なアニメーション',
+            path: 'guide/legacy-animations/reusable-animations',
+            contentPath: 'guide/animations/reusable-animations',
+          },
+          {
+            label: 'ネイティブCSSアニメーションへの移行',
+            path: 'guide/animations/migration',
+            contentPath: 'guide/animations/migration',
+          },
+        ],
+      },
+      {
+        label: 'RxJSとの併用',
+        children: [
+          {
+            label: 'Signalとの相互運用',
+            path: 'ecosystem/rxjs-interop',
+            contentPath: 'ecosystem/rxjs-interop/signals-interop',
+          },
+          {
+            label: 'コンポーネント出力との相互接続',
+            path: 'ecosystem/rxjs-interop/output-interop',
+            contentPath: 'ecosystem/rxjs-interop/output-interop',
+          },
+          {
+            label: 'takeUntilDestroyedでの購読解除',
+            path: 'ecosystem/rxjs-interop/take-until-destroyed',
+            contentPath: 'ecosystem/rxjs-interop/take-until-destroyed',
+          },
+        ],
+      },
+      {
+        label: 'Service WorkerとPWA',
+        children: [
+          {
+            label: '概要',
+            path: 'ecosystem/service-workers',
+            contentPath: 'ecosystem/service-workers/overview',
+          },
+          {
+            label: 'はじめに',
+            path: 'ecosystem/service-workers/getting-started',
+            contentPath: 'ecosystem/service-workers/getting-started',
+          },
+          {
+            label: '独自のService Workerスクリプト',
+            path: 'ecosystem/service-workers/custom-service-worker-scripts',
+            contentPath: 'ecosystem/service-workers/custom-service-worker-scripts',
+          },
+          {
+            label: '設定ファイル',
+            path: 'ecosystem/service-workers/config',
+            contentPath: 'ecosystem/service-workers/config',
+          },
+          {
+            label: 'Service Workerとの通信',
+            path: 'ecosystem/service-workers/communications',
+            contentPath: 'ecosystem/service-workers/communications',
+          },
+          {
+            label: 'プッシュ通知',
+            path: 'ecosystem/service-workers/push-notifications',
+            contentPath: 'ecosystem/service-workers/push-notifications',
+          },
+          {
+            label: 'Service WorkerのDevOps',
+            path: 'ecosystem/service-workers/devops',
+            contentPath: 'ecosystem/service-workers/devops',
+          },
+          {
+            label: 'App Shellパターン',
+            path: 'ecosystem/service-workers/app-shell',
+            contentPath: 'ecosystem/service-workers/app-shell',
+          },
+        ],
+      },
+      {
+        label: 'Web Worker',
+        path: 'ecosystem/web-workers',
+        contentPath: 'ecosystem/web-workers',
+      },
+      {
+        label: 'カスタムビルドパイプライン',
+        path: 'ecosystem/custom-build-pipeline',
+        contentPath: 'ecosystem/custom-build-pipeline',
+      },
+      {
+        label: 'Tailwind',
+        path: 'guide/tailwind',
+        contentPath: 'guide/tailwind',
+        status: 'new',
+      },
+      {
+        label: 'Angular Fire',
+        path: 'https://github.com/angular/angularfire#readme',
+      },
+      {
+        label: 'Google Maps',
+        path: 'https://github.com/angular/components/tree/main/src/google-maps#readme',
+      },
+      {
+        label: 'Google Pay',
+        path: 'https://github.com/google-pay/google-pay-button#angular',
+      },
+      {
+        label: 'YouTubeプレーヤー',
+        path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md',
+      },
+      {
+        label: 'Angular CDK',
+        path: 'https://material.angular.dev/cdk/categories',
+      },
+      {
+        label: 'Angular Material',
+        path: 'https://material.angular.dev/',
+      },
+    ],
+  },
+  ...(isDevMode()
+    ? [
+        {
+          label: 'Adev Dev Guide',
+          children: [
+            {
+              label: 'Kitchen Sink',
+              path: 'kitchen-sink',
+              contentPath: 'kitchen-sink',
+            },
+          ],
+        },
+      ]
+    : []),
+];
+
+export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
+  FIRST_APP_TUTORIAL_NAV_DATA,
+  LEARN_ANGULAR_TUTORIAL_NAV_DATA,
+  DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
+  SIGNALS_TUTORIAL_NAV_DATA,
+  SIGNAL_FORMS_TUTORIAL_NAV_DATA,
+  {
+    path: 'tutorials',
+    contentPath: 'tutorials/home',
+    label: 'チュートリアル',
+  },
+];
+
+export const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
+  {
+    label: 'ロードマップ',
+    path: 'roadmap',
+    contentPath: 'reference/roadmap',
+  },
+  {
+    label: '開発に参加する',
+    path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md',
+  },
+  {
+    label: 'APIリファレンス',
+    preserveOtherCategoryOrder: true,
+    children: [
+      {
+        label: '概要',
+        path: 'api',
+      },
+      ...getApiNavigationItems(),
+    ],
+  },
+  {
+    label: 'CLIリファレンス',
+    children: [
+      {
+        label: '概要',
+        path: 'cli',
+        contentPath: 'reference/cli',
+      },
+      {
+        label: 'ng add',
+        path: 'cli/add',
+      },
+      {
+        label: 'ng analytics',
+        children: [
+          {
+            label: '概要',
+            path: 'cli/analytics',
+          },
+          {
+            label: 'disable',
+            path: 'cli/analytics/disable',
+          },
+          {
+            label: 'enable',
+            path: 'cli/analytics/enable',
+          },
+          {
+            label: 'info',
+            path: 'cli/analytics/info',
+          },
+          {
+            label: 'prompt',
+            path: 'cli/analytics/prompt',
+          },
+        ],
+      },
+      {
+        label: 'ng build',
+        path: 'cli/build',
+      },
+      {
+        label: 'ng cache',
+        children: [
+          {
+            label: '概要',
+            path: 'cli/cache',
+          },
+          {
+            label: 'clean',
+            path: 'cli/cache/clean',
+          },
+          {
+            label: 'disable',
+            path: 'cli/cache/disable',
+          },
+          {
+            label: 'enable',
+            path: 'cli/cache/enable',
+          },
+          {
+            label: 'info',
+            path: 'cli/cache/info',
+          },
+        ],
+      },
+      {
+        label: 'ng completion',
+        children: [
+          {
+            label: '概要',
+            path: 'cli/completion',
+          },
+          {
+            label: 'script',
+            path: 'cli/completion/script',
+          },
+        ],
+      },
+      {
+        label: 'ng config',
+        path: 'cli/config',
+      },
+      {
+        label: 'ng deploy',
+        path: 'cli/deploy',
+      },
+      {
+        label: 'ng e2e',
+        path: 'cli/e2e',
+      },
+      {
+        label: 'ng extract-i18n',
+        path: 'cli/extract-i18n',
+      },
+      {
+        label: 'ng generate',
+        children: [
+          {
+            label: '概要',
+            path: 'cli/generate',
+          },
+          {
+            label: 'ai-config',
+            path: 'cli/generate/ai-config',
+          },
+          {
+            label: 'app-shell',
+            path: 'cli/generate/app-shell',
+          },
+          {
+            label: 'application',
+            path: 'cli/generate/application',
+          },
+          {
+            label: 'class',
+            path: 'cli/generate/class',
+          },
+          {
+            label: 'component',
+            path: 'cli/generate/component',
+          },
+          {
+            label: 'config',
+            path: 'cli/generate/config',
+          },
+          {
+            label: 'directive',
+            path: 'cli/generate/directive',
+          },
+          {
+            label: 'enum',
+            path: 'cli/generate/enum',
+          },
+          {
+            label: 'environments',
+            path: 'cli/generate/environments',
+          },
+          {
+            label: 'guard',
+            path: 'cli/generate/guard',
+          },
+          {
+            label: 'interceptor',
+            path: 'cli/generate/interceptor',
+          },
+          {
+            label: 'interface',
+            path: 'cli/generate/interface',
+          },
+          {
+            label: 'library',
+            path: 'cli/generate/library',
+          },
+          {
+            label: 'module',
+            path: 'cli/generate/module',
+          },
+          {
+            label: 'pipe',
+            path: 'cli/generate/pipe',
+          },
+          {
+            label: 'resolver',
+            path: 'cli/generate/resolver',
+          },
+          {
+            label: 'service-worker',
+            path: 'cli/generate/service-worker',
+          },
+          {
+            label: 'service',
+            path: 'cli/generate/service',
+          },
+          {
+            label: 'web-worker',
+            path: 'cli/generate/web-worker',
+          },
+        ],
+      },
+      {
+        label: 'ng lint',
+        path: 'cli/lint',
+      },
+      {
+        label: 'ng new',
+        path: 'cli/new',
+      },
+      {
+        label: 'ng run',
+        path: 'cli/run',
+      },
+      {
+        label: 'ng serve',
+        path: 'cli/serve',
+      },
+      {
+        label: 'ng test',
+        path: 'cli/test',
+      },
+      {
+        label: 'ng update',
+        path: 'cli/update',
+      },
+      {
+        label: 'ng version',
+        path: 'cli/version',
+      },
+    ],
+  },
+  {
+    label: 'エラー百科辞典',
+    children: [
+      {
+        label: '概要',
+        path: 'errors',
+        contentPath: 'reference/errors/overview',
+      },
+      ...ERRORS_NAV_DATA,
+    ],
+  },
+  {
+    label: '拡張診断',
+    children: [
+      {
+        label: '概要',
+        path: 'extended-diagnostics',
+        contentPath: 'reference/extended-diagnostics/overview',
+      },
+      ...EXT_DIAGNOSTICS_NAV_DATA,
+    ],
+  },
+  {
+    label: 'バージョニングとリリース',
+    path: 'reference/releases',
+    contentPath: 'reference/releases',
+  },
+  {
+    label: 'バージョン互換性',
+    path: 'reference/versions',
+    contentPath: 'reference/versions',
+  },
+  {
+    label: 'アップデートガイド',
+    path: 'update-guide',
+  },
+  {
+    label: '設定',
+    children: [
+      {
+        label: 'ファイル構造',
+        path: 'reference/configs/file-structure',
+        contentPath: 'reference/configs/file-structure',
+      },
+      {
+        label: 'ワークスペース設定',
+        path: 'reference/configs/workspace-config',
+        contentPath: 'reference/configs/workspace-config',
+      },
+      {
+        label: 'Angularコンパイラオプション',
+        path: 'reference/configs/angular-compiler-options',
+        contentPath: 'reference/configs/angular-compiler-options',
+      },
+      {
+        label: 'npmの依存関係',
+        path: 'reference/configs/npm-packages',
+        contentPath: 'reference/configs/npm-packages',
+      },
+    ],
+  },
+  {
+    label: 'マイグレーション',
+    children: [
+      {
+        label: '概要',
+        path: 'reference/migrations',
+        contentPath: 'reference/migrations/overview',
+      },
+      {
+        label: 'スタンドアロン',
+        path: 'reference/migrations/standalone',
+        contentPath: 'reference/migrations/standalone',
+      },
+      {
+        label: '制御フロー構文',
+        path: 'reference/migrations/control-flow',
+        contentPath: 'reference/migrations/control-flow',
+      },
+      {
+        label: 'inject() 関数',
+        path: 'reference/migrations/inject-function',
+        contentPath: 'reference/migrations/inject-function',
+      },
+      {
+        label: '遅延読み込みルート',
+        path: 'reference/migrations/route-lazy-loading',
+        contentPath: 'reference/migrations/route-lazy-loading',
+      },
+      {
+        label: 'Signal入力',
+        path: 'reference/migrations/signal-inputs',
+        contentPath: 'reference/migrations/signal-inputs',
+      },
+      {
+        label: '出力',
+        path: 'reference/migrations/outputs',
+        contentPath: 'reference/migrations/outputs',
+      },
+      {
+        label: 'Signalクエリ',
+        path: 'reference/migrations/signal-queries',
+        contentPath: 'reference/migrations/signal-queries',
+      },
+      {
+        label: '未使用のインポートのクリーンアップ',
+        path: 'reference/migrations/cleanup-unused-imports',
+        contentPath: 'reference/migrations/cleanup-unused-imports',
+      },
+      {
+        label: '自己閉鎖タグ',
+        path: 'reference/migrations/self-closing-tags',
+        contentPath: 'reference/migrations/self-closing-tags',
+      },
+      {
+        label: 'NgClassからClassへ',
+        path: 'reference/migrations/ngclass-to-class',
+        contentPath: 'reference/migrations/ngclass-to-class',
+        status: 'new',
+      },
+      {
+        label: 'NgStyleからStyleへ',
+        path: 'reference/migrations/ngstyle-to-style',
+        contentPath: 'reference/migrations/ngstyle-to-style',
+        status: 'new',
+      },
+      {
+        label: 'Routerテストモジュールのマイグレーション',
+        path: 'reference/migrations/router-testing-module-migration',
+        contentPath: 'reference/migrations/router-testing-module-migration',
+        status: 'new',
+      },
+      {
+        label: 'CommonModuleからスタンドアロンへ',
+        path: 'reference/migrations/common-to-standalone',
+        contentPath: 'reference/migrations/common-to-standalone',
+        status: 'new',
+      },
+    ],
+  },
+];
+
+export const FOOTER_NAVIGATION_DATA: NavigationItem[] = [
+  {
+    label: 'プレスキット',
+    path: 'press-kit',
+    contentPath: 'reference/press-kit',
+  },
+  {
+    label: 'ライセンス',
+    path: 'license',
+    contentPath: 'reference/license',
+  },
+];
+
+export const ALL_ITEMS = [
+  ...DOCS_SUB_NAVIGATION_DATA,
+  ...REFERENCE_SUB_NAVIGATION_DATA,
+  ...FOOTER_NAVIGATION_DATA,
+  ...TUTORIALS_SUB_NAVIGATION_DATA,
+];
+
+function getApiNavigationItems(): NavigationItem[] {
+  const manifest = API_MANIFEST_JSON as any; // TODO(mri): Use proper type when the refactoring of #66252 gets in.
+
+  const apiNavigationItems: NavigationItem[] = [];
+
+  for (const packageEntry of manifest) {
+    const packageNavigationItem: NavigationItem = {
+      label: packageEntry.moduleLabel,
+      children: packageEntry.entries.map((api: any) => ({
+        path: getApiUrl(packageEntry, api.name),
+        label: api.name,
+        category: api.category,
+      })),
+    };
+
+    apiNavigationItems.push(packageNavigationItem);
+  }
+
+  return apiNavigationItems;
+}
+
+function getApiUrl(packageEntry: any, apiName: string): string {
+  const packageName = packageEntry.normalizedModuleName
+    // packages like `angular_core` should be `core`
+    // packages like `angular_animation_browser` should be `animation/browser`
+    .replace('angular_', '')
+    .replaceAll('_', '/');
+  return `api/${packageName}/${apiName}`;
+}
diff --git a/adev-ja/src/app/routing/sub-navigation-data.en.ts b/adev-ja/src/app/routing/sub-navigation-data.en.ts
index 2ebf4da2c..43f27a257 100644
--- a/adev-ja/src/app/routing/sub-navigation-data.en.ts
+++ b/adev-ja/src/app/routing/sub-navigation-data.en.ts
@@ -6,20 +6,14 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {isDevMode} from '@angular/core';
 import {NavigationItem} from '@angular/docs';
 
-// These imports are expected to be red because they are generated a build time
-import FIRST_APP_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/first-app/routes.json';
-import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/learn-angular/routes.json';
-import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/deferrable-views/routes.json';
-import SIGNALS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signals/routes.json';
-import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signal-forms/routes.json';
-import ERRORS_NAV_DATA from '../../../src/assets/content/reference/errors/routes.json';
-import EXT_DIAGNOSTICS_NAV_DATA from '../../../src/assets/content/reference/extended-diagnostics/routes.json';
-
-import {getApiNavigationItems} from '../features/references/helpers/manifest.helper';
-import {DEFAULT_PAGES} from '../core/constants/pages';
+import {
+  DOCS_SUB_NAVIGATION_DATA,
+  FOOTER_NAVIGATION_DATA,
+  REFERENCE_SUB_NAVIGATION_DATA,
+  TUTORIALS_SUB_NAVIGATION_DATA,
+} from './navigation-entries';
 
 interface SubNavigationData {
   docs: NavigationItem[];
@@ -28,1613 +22,6 @@ interface SubNavigationData {
   footer: NavigationItem[];
 }
 
-const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
-  {
-    label: 'Introduction',
-    children: [
-      {
-        label: 'What is Angular?',
-        path: 'overview',
-        contentPath: 'introduction/what-is-angular',
-      },
-      {
-        label: 'Installation',
-        path: 'installation',
-        contentPath: 'introduction/installation',
-      },
-      {
-        label: 'Essentials',
-        children: [
-          {
-            label: 'Overview',
-            path: 'essentials',
-            contentPath: 'introduction/essentials/overview',
-          },
-          {
-            label: 'Composition with components',
-            path: 'essentials/components',
-            contentPath: 'introduction/essentials/components',
-          },
-          {
-            label: 'Reactivity with signals',
-            path: 'essentials/signals',
-            contentPath: 'introduction/essentials/signals',
-          },
-          {
-            label: 'Dynamic interfaces with templates',
-            path: 'essentials/templates',
-            contentPath: 'introduction/essentials/templates',
-          },
-          {
-            label: 'Forms with signals',
-            path: 'essentials/signal-forms',
-            contentPath: 'introduction/essentials/signal-forms',
-            status: 'new',
-          },
-          {
-            label: 'Modular design with dependency injection',
-            path: 'essentials/dependency-injection',
-            contentPath: 'introduction/essentials/dependency-injection',
-          },
-          {
-            label: 'Next Steps',
-            path: 'essentials/next-steps',
-            contentPath: 'introduction/essentials/next-steps',
-          },
-        ],
-      },
-      {
-        label: 'Start coding! 🚀',
-        path: 'tutorials/learn-angular',
-      },
-    ],
-  },
-  {
-    label: 'In-depth Guides',
-    children: [
-      {
-        label: 'Signals',
-        status: 'updated',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/signals',
-            contentPath: 'guide/signals/overview',
-          },
-          {
-            label: 'Dependent state with linkedSignal',
-            path: 'guide/signals/linked-signal',
-            contentPath: 'guide/signals/linked-signal',
-          },
-          {
-            label: 'Async reactivity with resources',
-            path: 'guide/signals/resource',
-            contentPath: 'guide/signals/resource',
-          },
-          {
-            label: 'Side effects for non-reactives APIs',
-            path: 'guide/signals/effect',
-            contentPath: 'guide/signals/effect',
-            status: 'new',
-          },
-        ],
-      },
-      {
-        label: 'Components',
-        children: [
-          {
-            label: 'Anatomy of components',
-            path: 'guide/components',
-            contentPath: 'guide/components/anatomy-of-components',
-          },
-          {
-            label: 'Selectors',
-            path: 'guide/components/selectors',
-            contentPath: 'guide/components/selectors',
-          },
-          {
-            label: 'Styling',
-            path: 'guide/components/styling',
-            contentPath: 'guide/components/styling',
-          },
-          {
-            label: 'Accepting data with input properties',
-            path: 'guide/components/inputs',
-            contentPath: 'guide/components/inputs',
-          },
-          {
-            label: 'Custom events with outputs',
-            path: 'guide/components/outputs',
-            contentPath: 'guide/components/outputs',
-          },
-          {
-            label: 'Content projection with ng-content',
-            path: 'guide/components/content-projection',
-            contentPath: 'guide/components/content-projection',
-          },
-          {
-            label: 'Host elements',
-            path: 'guide/components/host-elements',
-            contentPath: 'guide/components/host-elements',
-          },
-          {
-            label: 'Lifecycle',
-            path: 'guide/components/lifecycle',
-            contentPath: 'guide/components/lifecycle',
-          },
-          {
-            label: 'Referencing component children with queries',
-            path: 'guide/components/queries',
-            contentPath: 'guide/components/queries',
-          },
-          {
-            label: 'Using DOM APIs',
-            path: 'guide/components/dom-apis',
-            contentPath: 'guide/components/dom-apis',
-          },
-          {
-            label: 'Inheritance',
-            path: 'guide/components/inheritance',
-            contentPath: 'guide/components/inheritance',
-          },
-          {
-            label: 'Programmatically rendering components',
-            path: 'guide/components/programmatic-rendering',
-            contentPath: 'guide/components/programmatic-rendering',
-          },
-          {
-            label: 'Advanced configuration',
-            path: 'guide/components/advanced-configuration',
-            contentPath: 'guide/components/advanced-configuration',
-          },
-          {
-            label: 'Custom Elements',
-            path: 'guide/elements',
-            contentPath: 'guide/elements',
-          },
-        ],
-      },
-      {
-        label: 'Templates',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/templates',
-            contentPath: 'guide/templates/overview',
-          },
-          {
-            label: 'Binding dynamic text, properties and attributes',
-            path: 'guide/templates/binding',
-            contentPath: 'guide/templates/binding',
-          },
-          {
-            label: 'Adding event listeners',
-            path: 'guide/templates/event-listeners',
-            contentPath: 'guide/templates/event-listeners',
-          },
-          {
-            label: 'Two-way binding',
-            path: 'guide/templates/two-way-binding',
-            contentPath: 'guide/templates/two-way-binding',
-          },
-          {
-            label: 'Control flow',
-            path: 'guide/templates/control-flow',
-            contentPath: 'guide/templates/control-flow',
-          },
-          {
-            label: 'Pipes',
-            path: 'guide/templates/pipes',
-            contentPath: 'guide/templates/pipes',
-          },
-          {
-            label: 'Slotting child content with ng-content',
-            path: 'guide/templates/ng-content',
-            contentPath: 'guide/templates/ng-content',
-          },
-          {
-            label: 'Create template fragments with ng-template',
-            path: 'guide/templates/ng-template',
-            contentPath: 'guide/templates/ng-template',
-          },
-          {
-            label: 'Grouping elements with ng-container',
-            path: 'guide/templates/ng-container',
-            contentPath: 'guide/templates/ng-container',
-          },
-          {
-            label: 'Variables in templates',
-            path: 'guide/templates/variables',
-            contentPath: 'guide/templates/variables',
-          },
-          {
-            label: 'Deferred loading with @defer',
-            path: 'guide/templates/defer',
-            contentPath: 'guide/templates/defer',
-          },
-          {
-            label: 'Expression syntax',
-            path: 'guide/templates/expression-syntax',
-            contentPath: 'guide/templates/expression-syntax',
-          },
-          {
-            label: 'Whitespace in templates',
-            path: 'guide/templates/whitespace',
-            contentPath: 'guide/templates/whitespace',
-          },
-        ],
-      },
-      {
-        label: 'Directives',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/directives',
-            contentPath: 'guide/directives/overview',
-          },
-          {
-            label: 'Attribute directives',
-            path: 'guide/directives/attribute-directives',
-            contentPath: 'guide/directives/attribute-directives',
-          },
-          {
-            label: 'Structural directives',
-            path: 'guide/directives/structural-directives',
-            contentPath: 'guide/directives/structural-directives',
-          },
-          {
-            label: 'Directive composition API',
-            path: 'guide/directives/directive-composition-api',
-            contentPath: 'guide/directives/directive-composition-api',
-          },
-          {
-            label: 'Optimizing images with NgOptimizedImage',
-            path: 'guide/image-optimization',
-            contentPath: 'guide/image-optimization',
-          },
-        ],
-      },
-      {
-        label: 'Dependency Injection',
-        status: 'updated',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/di',
-            contentPath: 'guide/di/overview',
-            status: 'updated',
-          },
-          {
-            label: 'Creating and using services',
-            path: 'guide/di/creating-and-using-services',
-            contentPath: 'guide/di/creating-and-using-services',
-            status: 'updated',
-          },
-          {
-            label: 'Defining dependency providers',
-            path: 'guide/di/defining-dependency-providers',
-            contentPath: 'guide/di/defining-dependency-providers',
-            status: 'updated',
-          },
-          {
-            label: 'Injection context',
-            path: 'guide/di/dependency-injection-context',
-            contentPath: 'guide/di/dependency-injection-context',
-          },
-          {
-            label: 'Hierarchical injectors',
-            path: 'guide/di/hierarchical-dependency-injection',
-            contentPath: 'guide/di/hierarchical-dependency-injection',
-          },
-          {
-            label: 'Optimizing injection tokens',
-            path: 'guide/di/lightweight-injection-tokens',
-            contentPath: 'guide/di/lightweight-injection-tokens',
-          },
-          {
-            label: 'DI in action',
-            path: 'guide/di/di-in-action',
-            contentPath: 'guide/di/di-in-action',
-          },
-        ],
-      },
-      {
-        label: 'Routing',
-        status: 'updated',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/routing',
-            contentPath: 'guide/routing/overview',
-          },
-          {
-            label: 'Define routes',
-            path: 'guide/routing/define-routes',
-            contentPath: 'guide/routing/define-routes',
-          },
-          {
-            label: 'Show routes with Outlets',
-            path: 'guide/routing/show-routes-with-outlets',
-            contentPath: 'guide/routing/show-routes-with-outlets',
-          },
-          {
-            label: 'Navigate to routes',
-            path: 'guide/routing/navigate-to-routes',
-            contentPath: 'guide/routing/navigate-to-routes',
-          },
-          {
-            label: 'Read route state',
-            path: 'guide/routing/read-route-state',
-            contentPath: 'guide/routing/read-route-state',
-          },
-          {
-            label: 'Redirecting routes',
-            path: 'guide/routing/redirecting-routes',
-            contentPath: 'guide/routing/redirecting-routes',
-          },
-          {
-            label: 'Control route access with guards',
-            path: 'guide/routing/route-guards',
-            contentPath: 'guide/routing/route-guards',
-          },
-          {
-            label: 'Route data resolvers',
-            path: 'guide/routing/data-resolvers',
-            contentPath: 'guide/routing/data-resolvers',
-          },
-          {
-            label: 'Lifecycle and events',
-            path: 'guide/routing/lifecycle-and-events',
-            contentPath: 'guide/routing/lifecycle-and-events',
-          },
-          {
-            label: 'Testing routing and navigation',
-            path: 'guide/routing/testing',
-            contentPath: 'guide/routing/testing',
-            status: 'new',
-          },
-          {
-            label: 'Other routing tasks',
-            path: 'guide/routing/common-router-tasks',
-            contentPath: 'guide/routing/common-router-tasks',
-          },
-          {
-            label: 'Creating custom route matches',
-            path: 'guide/routing/routing-with-urlmatcher',
-            contentPath: 'guide/routing/routing-with-urlmatcher',
-          },
-          {
-            label: 'Rendering strategies',
-            path: 'guide/routing/rendering-strategies',
-            contentPath: 'guide/routing/rendering-strategies',
-            status: 'new',
-          },
-          {
-            label: 'Customizing route behavior',
-            path: 'guide/routing/customizing-route-behavior',
-            contentPath: 'guide/routing/customizing-route-behavior',
-            status: 'new',
-          },
-          {
-            label: 'Router reference',
-            path: 'guide/routing/router-reference',
-            contentPath: 'guide/routing/router-reference',
-          },
-          {
-            label: 'Route transition animations',
-            path: 'guide/routing/route-transition-animations',
-            contentPath: 'guide/routing/route-transition-animations',
-          },
-        ],
-      },
-      {
-        label: 'Forms',
-        status: 'updated',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/forms',
-            contentPath: 'guide/forms/overview',
-          },
-          {
-            label: 'Signal forms',
-            status: 'new',
-            children: [
-              {
-                label: 'Overview',
-                path: 'guide/forms/signals/overview',
-                contentPath: 'guide/forms/signals/overview',
-              },
-              {
-                label: 'Form models',
-                path: 'guide/forms/signals/models',
-                contentPath: 'guide/forms/signals/models',
-              },
-              {
-                label: 'Form model design',
-                path: 'guide/forms/signals/model-design',
-                contentPath: 'guide/forms/signals/designing-your-form-model',
-              },
-              {
-                label: 'Field state management',
-                path: 'guide/forms/signals/field-state-management',
-                contentPath: 'guide/forms/signals/field-state-management',
-              },
-              {
-                label: 'Validation',
-                path: 'guide/forms/signals/validation',
-                contentPath: 'guide/forms/signals/validation',
-              },
-              {
-                label: 'Custom controls',
-                path: 'guide/forms/signals/custom-controls',
-                contentPath: 'guide/forms/signals/custom-controls',
-              },
-              {
-                label: 'Comparison with other form systems',
-                path: 'guide/forms/signals/comparison',
-                contentPath: 'guide/forms/signals/comparison',
-              },
-              {
-                label: 'Migrating from Legacy Forms',
-                path: 'guide/forms/signals/migration',
-                contentPath: 'guide/forms/signals/migration',
-              },
-            ],
-          },
-          {
-            label: 'Reactive forms',
-            path: 'guide/forms/reactive-forms',
-            contentPath: 'guide/forms/reactive-forms',
-          },
-          {
-            label: 'Strictly typed reactive forms',
-            path: 'guide/forms/typed-forms',
-            contentPath: 'guide/forms/typed-forms',
-          },
-          {
-            label: 'Template-driven forms',
-            path: 'guide/forms/template-driven-forms',
-            contentPath: 'guide/forms/template-driven-forms',
-          },
-          {
-            label: 'Validate form input',
-            path: 'guide/forms/form-validation',
-            contentPath: 'guide/forms/form-validation',
-          },
-          {
-            label: 'Building dynamic forms',
-            path: 'guide/forms/dynamic-forms',
-            contentPath: 'guide/forms/dynamic-forms',
-          },
-        ],
-      },
-      {
-        label: 'HTTP Client',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/http',
-            contentPath: 'guide/http/overview',
-          },
-          {
-            label: 'Setting up HttpClient',
-            path: 'guide/http/setup',
-            contentPath: 'guide/http/setup',
-          },
-          {
-            label: 'Making requests',
-            path: 'guide/http/making-requests',
-            contentPath: 'guide/http/making-requests',
-          },
-          {
-            label: 'Reactive data fetching with httpResource',
-            path: 'guide/http/http-resource',
-            contentPath: 'guide/http/http-resource',
-          },
-          {
-            label: 'Intercepting requests and responses',
-            path: 'guide/http/interceptors',
-            contentPath: 'guide/http/interceptors',
-          },
-          {
-            label: 'Testing',
-            path: 'guide/http/testing',
-            contentPath: 'guide/http/testing',
-          },
-        ],
-      },
-      {
-        label: 'Server-side & hybrid-rendering',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/performance',
-            contentPath: 'guide/performance/overview',
-          },
-          {
-            label: 'Server-side and hybrid-rendering',
-            path: 'guide/ssr',
-            contentPath: 'guide/ssr',
-          },
-          {
-            label: 'Hydration',
-            path: 'guide/hydration',
-            contentPath: 'guide/hydration',
-          },
-          {
-            label: 'Incremental Hydration',
-            path: 'guide/incremental-hydration',
-            contentPath: 'guide/incremental-hydration',
-          },
-        ],
-      },
-      {
-        label: 'Testing',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/testing',
-            contentPath: 'guide/testing/overview',
-          },
-          {
-            label: 'Basics of testing components',
-            path: 'guide/testing/components-basics',
-            contentPath: 'guide/testing/components-basics',
-          },
-          {
-            label: 'Component testing scenarios',
-            path: 'guide/testing/components-scenarios',
-            contentPath: 'guide/testing/components-scenarios',
-          },
-          {
-            label: 'Testing services',
-            path: 'guide/testing/services',
-            contentPath: 'guide/testing/services',
-          },
-          {
-            label: 'Testing attribute directives',
-            path: 'guide/testing/attribute-directives',
-            contentPath: 'guide/testing/attribute-directives',
-          },
-          {
-            label: 'Testing pipes',
-            path: 'guide/testing/pipes',
-            contentPath: 'guide/testing/pipes',
-          },
-          {
-            label: 'Testing routing and navigation',
-            path: 'guide/routing/testing',
-            contentPath: 'guide/routing/testing',
-            status: 'new',
-          },
-          {
-            label: 'Debugging tests',
-            path: 'guide/testing/debugging',
-            contentPath: 'guide/testing/debugging',
-          },
-          {
-            label: 'Code coverage',
-            path: 'guide/testing/code-coverage',
-            contentPath: 'guide/testing/code-coverage',
-          },
-          {
-            label: 'Testing utility APIs',
-            path: 'guide/testing/utility-apis',
-            contentPath: 'guide/testing/utility-apis',
-          },
-          {
-            label: 'Component harnesses overview',
-            path: 'guide/testing/component-harnesses-overview',
-            contentPath: 'guide/testing/component-harnesses-overview',
-          },
-          {
-            label: 'Using component harnesses in tests',
-            path: 'guide/testing/using-component-harnesses',
-            contentPath: 'guide/testing/using-component-harnesses',
-          },
-          {
-            label: 'Creating harnesses for your components',
-            path: 'guide/testing/creating-component-harnesses',
-            contentPath: 'guide/testing/creating-component-harnesses',
-          },
-          {
-            label: 'Adding harness support for additional testing environments',
-            path: 'guide/testing/component-harnesses-testing-environments',
-            contentPath: 'guide/testing/component-harnesses-testing-environments',
-          },
-          {
-            label: 'Migrating from Karma to Vitest',
-            path: 'guide/testing/migrating-to-vitest',
-            contentPath: 'guide/testing/migrating-to-vitest',
-          },
-          {
-            label: 'Testing with Karma and Jasmine',
-            path: 'guide/testing/karma',
-            contentPath: 'guide/testing/karma',
-          },
-          {
-            label: 'Zone.js Testing Utilities',
-            path: 'guide/testing/zone-js-testing-utilities',
-            contentPath: 'guide/testing/zone-js-testing-utilities',
-          },
-        ],
-      },
-      {
-        label: 'Angular Aria',
-        status: 'new',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/aria/overview',
-            contentPath: 'guide/aria/overview',
-          },
-          {
-            label: 'Accordion',
-            path: 'guide/aria/accordion',
-            contentPath: 'guide/aria/accordion',
-          },
-          {
-            label: 'Autocomplete',
-            path: 'guide/aria/autocomplete',
-            contentPath: 'guide/aria/autocomplete',
-          },
-          {
-            label: 'Combobox',
-            path: 'guide/aria/combobox',
-            contentPath: 'guide/aria/combobox',
-          },
-          {
-            label: 'Grid',
-            path: 'guide/aria/grid',
-            contentPath: 'guide/aria/grid',
-          },
-          {
-            label: 'Listbox',
-            path: 'guide/aria/listbox',
-            contentPath: 'guide/aria/listbox',
-          },
-          {
-            label: 'Menu',
-            path: 'guide/aria/menu',
-            contentPath: 'guide/aria/menu',
-          },
-          {
-            label: 'Menubar',
-            path: 'guide/aria/menubar',
-            contentPath: 'guide/aria/menubar',
-          },
-          {
-            label: 'Multiselect',
-            path: 'guide/aria/multiselect',
-            contentPath: 'guide/aria/multiselect',
-          },
-          {
-            label: 'Select',
-            path: 'guide/aria/select',
-            contentPath: 'guide/aria/select',
-          },
-          {
-            label: 'Tabs',
-            path: 'guide/aria/tabs',
-            contentPath: 'guide/aria/tabs',
-          },
-          {
-            label: 'Toolbar',
-            path: 'guide/aria/toolbar',
-            contentPath: 'guide/aria/toolbar',
-          },
-          {
-            label: 'Tree',
-            path: 'guide/aria/tree',
-            contentPath: 'guide/aria/tree',
-          },
-        ],
-      },
-      {
-        label: 'Internationalization',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/i18n',
-            contentPath: 'guide/i18n/overview',
-          },
-          {
-            label: 'Add the localize package',
-            path: 'guide/i18n/add-package',
-            contentPath: 'guide/i18n/add-package',
-          },
-          {
-            label: 'Refer to locales by ID',
-            path: 'guide/i18n/locale-id',
-            contentPath: 'guide/i18n/locale-id',
-          },
-          {
-            label: 'Format data based on locale',
-            path: 'guide/i18n/format-data-locale',
-            contentPath: 'guide/i18n/format-data-locale',
-          },
-          {
-            label: 'Prepare component for translation',
-            path: 'guide/i18n/prepare',
-            contentPath: 'guide/i18n/prepare',
-          },
-          {
-            label: 'Work with translation files',
-            path: 'guide/i18n/translation-files',
-            contentPath: 'guide/i18n/translation-files',
-          },
-          {
-            label: 'Merge translations into the app',
-            path: 'guide/i18n/merge',
-            contentPath: 'guide/i18n/merge',
-          },
-          {
-            label: 'Deploy multiple locales',
-            path: 'guide/i18n/deploy',
-            contentPath: 'guide/i18n/deploy',
-          },
-          {
-            label: 'Import global variants of the locale data',
-            path: 'guide/i18n/import-global-variants',
-            contentPath: 'guide/i18n/import-global-variants',
-          },
-          {
-            label: 'Manage marked text with custom IDs',
-            path: 'guide/i18n/manage-marked-text',
-            contentPath: 'guide/i18n/manage-marked-text',
-          },
-          {
-            label: 'Example Angular application',
-            path: 'guide/i18n/example',
-            contentPath: 'guide/i18n/example',
-          },
-        ],
-      },
-      {
-        label: 'Animations',
-        status: 'updated',
-        children: [
-          {
-            label: 'Enter and Leave animations',
-            path: 'guide/animations',
-            contentPath: 'guide/animations/enter-and-leave',
-            status: 'new',
-          },
-          {
-            label: 'Complex Animations with CSS',
-            path: 'guide/animations/css',
-            contentPath: 'guide/animations/css',
-          },
-          {
-            label: 'Route transition animations',
-            path: 'guide/routing/route-transition-animations',
-            contentPath: 'guide/routing/route-transition-animations',
-          },
-        ],
-      },
-      {
-        label: 'Drag and drop',
-        path: 'guide/drag-drop',
-        contentPath: 'guide/drag-drop',
-      },
-    ],
-  },
-  {
-    label: 'Build with AI',
-    status: 'new',
-    children: [
-      {
-        label: 'Get Started',
-        path: 'ai',
-        contentPath: 'ai/overview',
-      },
-      {
-        label: 'LLM prompts and AI IDE setup',
-        path: 'ai/develop-with-ai',
-        contentPath: 'ai/develop-with-ai',
-      },
-      {
-        label: 'Design Patterns',
-        path: 'ai/design-patterns',
-        contentPath: 'ai/design-patterns',
-      },
-      {
-        label: 'Angular CLI MCP Server setup',
-        path: 'ai/mcp',
-        contentPath: 'ai/mcp-server-setup',
-      },
-      {
-        label: 'Angular AI Tutor',
-        path: 'ai/ai-tutor',
-        contentPath: 'ai/ai-tutor',
-      },
-    ],
-  },
-  {
-    label: 'Developer Tools',
-    children: [
-      {
-        label: 'Angular CLI',
-        children: [
-          {
-            label: 'Overview',
-            path: 'tools/cli',
-            contentPath: 'tools/cli/overview',
-          },
-          {
-            label: 'Local set-up',
-            path: 'tools/cli/setup-local',
-            contentPath: 'tools/cli/setup-local',
-          },
-          {
-            label: 'Building Angular apps',
-            path: 'tools/cli/build',
-            contentPath: 'tools/cli/build',
-          },
-          {
-            label: 'Serving Angular apps for development',
-            path: 'tools/cli/serve',
-            contentPath: 'tools/cli/serve',
-          },
-          {
-            label: 'Deployment',
-            path: 'tools/cli/deployment',
-            contentPath: 'tools/cli/deployment',
-          },
-          {
-            label: 'End-to-End Testing',
-            path: 'tools/cli/end-to-end',
-            contentPath: 'tools/cli/end-to-end',
-          },
-          {
-            label: 'Migrating to new build system',
-            path: 'tools/cli/build-system-migration',
-            contentPath: 'tools/cli/build-system-migration',
-          },
-          {
-            label: 'Build environments',
-            path: 'tools/cli/environments',
-            contentPath: 'tools/cli/environments',
-          },
-          {
-            label: 'Angular CLI builders',
-            path: 'tools/cli/cli-builder',
-            contentPath: 'tools/cli/cli-builder',
-          },
-          {
-            label: 'Generating code using schematics',
-            path: 'tools/cli/schematics',
-            contentPath: 'tools/cli/schematics',
-          },
-          {
-            label: 'Authoring schematics',
-            path: 'tools/cli/schematics-authoring',
-            contentPath: 'tools/cli/schematics-authoring',
-          },
-          {
-            label: 'Schematics for libraries',
-            path: 'tools/cli/schematics-for-libraries',
-            contentPath: 'tools/cli/schematics-for-libraries',
-          },
-          {
-            label: 'Template type checking',
-            path: 'tools/cli/template-typecheck',
-            contentPath: 'tools/cli/template-typecheck',
-          },
-          {
-            label: 'Ahead-of-time (AOT) compilation',
-            path: 'tools/cli/aot-compiler',
-            contentPath: 'tools/cli/aot-compiler',
-          },
-          {
-            label: 'AOT metadata errors',
-            path: 'tools/cli/aot-metadata-errors',
-            contentPath: 'tools/cli/aot-metadata-errors',
-          },
-        ],
-      },
-      {
-        label: 'Libraries',
-        children: [
-          {
-            label: 'Overview',
-            path: 'tools/libraries',
-            contentPath: 'tools/libraries/overview',
-          },
-          {
-            label: 'Creating Libraries',
-            path: 'tools/libraries/creating-libraries',
-            contentPath: 'tools/libraries/creating-libraries',
-          },
-          {
-            label: 'Using Libraries',
-            path: 'tools/libraries/using-libraries',
-            contentPath: 'tools/libraries/using-libraries',
-          },
-          {
-            label: 'Angular Package Format',
-            path: 'tools/libraries/angular-package-format',
-            contentPath: 'tools/libraries/angular-package-format',
-          },
-        ],
-      },
-      {
-        label: 'DevTools',
-        children: [
-          {
-            label: 'Overview',
-            path: 'tools/devtools',
-            contentPath: 'tools/devtools/overview',
-          },
-          {
-            label: 'Components',
-            path: 'tools/devtools/component',
-            contentPath: 'tools/devtools/component',
-          },
-          {
-            label: 'Profiler',
-            path: 'tools/devtools/profiler',
-            contentPath: 'tools/devtools/profiler',
-          },
-          {
-            label: 'Injectors',
-            path: 'tools/devtools/injectors',
-            contentPath: 'tools/devtools/injectors',
-          },
-          // TODO: create those guides
-          // The signal debugging docs should also be added to the signal section
-          // {
-          //   label: 'Signals',
-          //   path: 'tools/devtools/signals',
-          //   contentPath: 'tools/devtools/signals',
-          // },
-          // {
-          //   label: 'Router',
-          //   path: 'tools/devtools/router',
-          //   contentPath: 'tools/devtools/router',
-          // }
-        ],
-      },
-      {
-        label: 'Language Service',
-        path: 'tools/language-service',
-        contentPath: 'tools/language-service',
-      },
-    ],
-  },
-  {
-    label: 'Best Practices',
-    children: [
-      {
-        label: 'Style Guide',
-        path: 'style-guide',
-        contentPath: 'best-practices/style-guide',
-        status: 'updated',
-      },
-      {
-        label: 'Security',
-        path: 'best-practices/security',
-        contentPath: 'guide/security', // Have not refactored due to build issues
-      },
-      {
-        label: 'Accessibility',
-        path: 'best-practices/a11y',
-        contentPath: 'best-practices/a11y',
-      },
-      {
-        label: 'Unhandled errors in Angular',
-        path: 'best-practices/error-handling',
-        contentPath: 'best-practices/error-handling',
-      },
-      {
-        label: 'Performance',
-        children: [
-          {
-            label: 'Overview',
-            path: 'best-practices/runtime-performance',
-            contentPath: 'best-practices/runtime-performance/overview',
-          },
-          {
-            label: 'Zone pollution',
-            path: 'best-practices/zone-pollution',
-            contentPath: 'best-practices/runtime-performance/zone-pollution',
-          },
-          {
-            label: 'Slow computations',
-            path: 'best-practices/slow-computations',
-            contentPath: 'best-practices/runtime-performance/slow-computations',
-          },
-          {
-            label: 'Skipping component subtrees',
-            path: 'best-practices/skipping-subtrees',
-            contentPath: 'best-practices/runtime-performance/skipping-subtrees',
-          },
-          {
-            label: 'Profiling with the Chrome DevTools',
-            path: 'best-practices/profiling-with-chrome-devtools',
-            contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools',
-          },
-          {label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'},
-        ],
-      },
-      {
-        label: 'Keeping up-to-date',
-        path: 'update',
-        contentPath: 'best-practices/update',
-      },
-    ],
-  },
-  {
-    label: 'Developer Events',
-    children: [
-      {
-        label: 'Angular v21 Release',
-        path: 'events/v21',
-        contentPath: 'events/v21',
-        status: 'new',
-      },
-    ],
-  },
-  {
-    label: 'Extended Ecosystem',
-    children: [
-      {
-        label: 'NgModules',
-        path: 'guide/ngmodules/overview',
-        contentPath: 'guide/ngmodules/overview',
-      },
-      {
-        label: 'Legacy Animations',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/legacy-animations',
-            contentPath: 'guide/animations/overview',
-          },
-          {
-            label: 'Transition and Triggers',
-            path: 'guide/legacy-animations/transition-and-triggers',
-            contentPath: 'guide/animations/transition-and-triggers',
-          },
-          {
-            label: 'Complex Sequences',
-            path: 'guide/legacy-animations/complex-sequences',
-            contentPath: 'guide/animations/complex-sequences',
-          },
-          {
-            label: 'Reusable Animations',
-            path: 'guide/legacy-animations/reusable-animations',
-            contentPath: 'guide/animations/reusable-animations',
-          },
-          {
-            label: 'Migrating to Native CSS Animations',
-            path: 'guide/animations/migration',
-            contentPath: 'guide/animations/migration',
-          },
-        ],
-      },
-      {
-        label: 'Using RxJS with Angular',
-        children: [
-          {
-            label: 'Signals interop',
-            path: 'ecosystem/rxjs-interop',
-            contentPath: 'ecosystem/rxjs-interop/signals-interop',
-          },
-          {
-            label: 'Component output interop',
-            path: 'ecosystem/rxjs-interop/output-interop',
-            contentPath: 'ecosystem/rxjs-interop/output-interop',
-          },
-          {
-            label: 'Unsubscribing with takeUntilDestroyed',
-            path: 'ecosystem/rxjs-interop/take-until-destroyed',
-            contentPath: 'ecosystem/rxjs-interop/take-until-destroyed',
-          },
-        ],
-      },
-      {
-        label: 'Service Workers & PWAs',
-        children: [
-          {
-            label: 'Overview',
-            path: 'ecosystem/service-workers',
-            contentPath: 'ecosystem/service-workers/overview',
-          },
-          {
-            label: 'Getting started',
-            path: 'ecosystem/service-workers/getting-started',
-            contentPath: 'ecosystem/service-workers/getting-started',
-          },
-          {
-            label: 'Custom service worker scripts',
-            path: 'ecosystem/service-workers/custom-service-worker-scripts',
-            contentPath: 'ecosystem/service-workers/custom-service-worker-scripts',
-          },
-          {
-            label: 'Configuration file',
-            path: 'ecosystem/service-workers/config',
-            contentPath: 'ecosystem/service-workers/config',
-          },
-          {
-            label: 'Communicating with the service worker',
-            path: 'ecosystem/service-workers/communications',
-            contentPath: 'ecosystem/service-workers/communications',
-          },
-          {
-            label: 'Push notifications',
-            path: 'ecosystem/service-workers/push-notifications',
-            contentPath: 'ecosystem/service-workers/push-notifications',
-          },
-          {
-            label: 'Service worker devops',
-            path: 'ecosystem/service-workers/devops',
-            contentPath: 'ecosystem/service-workers/devops',
-          },
-          {
-            label: 'App shell pattern',
-            path: 'ecosystem/service-workers/app-shell',
-            contentPath: 'ecosystem/service-workers/app-shell',
-          },
-        ],
-      },
-      {
-        label: 'Web workers',
-        path: 'ecosystem/web-workers',
-        contentPath: 'ecosystem/web-workers',
-      },
-      {
-        label: 'Custom build pipeline',
-        path: 'ecosystem/custom-build-pipeline',
-        contentPath: 'ecosystem/custom-build-pipeline',
-      },
-      {
-        label: 'Tailwind',
-        path: 'guide/tailwind',
-        contentPath: 'guide/tailwind',
-        status: 'new',
-      },
-      {
-        label: 'Angular Fire',
-        path: 'https://github.com/angular/angularfire#readme',
-      },
-      {
-        label: 'Google Maps',
-        path: 'https://github.com/angular/components/tree/main/src/google-maps#readme',
-      },
-      {
-        label: 'Google Pay',
-        path: 'https://github.com/google-pay/google-pay-button#angular',
-      },
-      {
-        label: 'YouTube player',
-        path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md',
-      },
-      {
-        label: 'Angular CDK',
-        path: 'https://material.angular.dev/cdk/categories',
-      },
-      {
-        label: 'Angular Material',
-        path: 'https://material.angular.dev/',
-      },
-    ],
-  },
-  ...(isDevMode()
-    ? [
-        {
-          label: 'Adev Dev Guide',
-          children: [
-            {
-              label: 'Kitchen Sink',
-              path: 'kitchen-sink',
-              contentPath: 'kitchen-sink',
-            },
-          ],
-        },
-      ]
-    : []),
-];
-
-export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
-  FIRST_APP_TUTORIAL_NAV_DATA,
-  LEARN_ANGULAR_TUTORIAL_NAV_DATA,
-  DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
-  SIGNALS_TUTORIAL_NAV_DATA,
-  SIGNAL_FORMS_TUTORIAL_NAV_DATA,
-  {
-    path: DEFAULT_PAGES.TUTORIALS,
-    contentPath: 'tutorials/home',
-    label: 'Tutorials',
-  },
-];
-
-const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
-  {
-    label: 'Roadmap',
-    path: 'roadmap',
-    contentPath: 'reference/roadmap',
-  },
-  {
-    label: 'Get involved',
-    path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md',
-  },
-  {
-    label: 'API Reference',
-    children: [
-      {
-        label: 'Overview',
-        path: 'api',
-      },
-      ...getApiNavigationItems(),
-    ],
-  },
-  {
-    label: 'CLI Reference',
-    children: [
-      {
-        label: 'Overview',
-        path: 'cli',
-        contentPath: 'reference/cli',
-      },
-      {
-        label: 'ng add',
-        path: 'cli/add',
-      },
-      {
-        label: 'ng analytics',
-        children: [
-          {
-            label: 'Overview',
-            path: 'cli/analytics',
-          },
-          {
-            label: 'disable',
-            path: 'cli/analytics/disable',
-          },
-          {
-            label: 'enable',
-            path: 'cli/analytics/enable',
-          },
-          {
-            label: 'info',
-            path: 'cli/analytics/info',
-          },
-          {
-            label: 'prompt',
-            path: 'cli/analytics/prompt',
-          },
-        ],
-      },
-      {
-        label: 'ng build',
-        path: 'cli/build',
-      },
-      {
-        label: 'ng cache',
-        children: [
-          {
-            label: 'Overview',
-            path: 'cli/cache',
-          },
-          {
-            label: 'clean',
-            path: 'cli/cache/clean',
-          },
-          {
-            label: 'disable',
-            path: 'cli/cache/disable',
-          },
-          {
-            label: 'enable',
-            path: 'cli/cache/enable',
-          },
-          {
-            label: 'info',
-            path: 'cli/cache/info',
-          },
-        ],
-      },
-      {
-        label: 'ng completion',
-        children: [
-          {
-            label: 'Overview',
-            path: 'cli/completion',
-          },
-          {
-            label: 'script',
-            path: 'cli/completion/script',
-          },
-        ],
-      },
-      {
-        label: 'ng config',
-        path: 'cli/config',
-      },
-      {
-        label: 'ng deploy',
-        path: 'cli/deploy',
-      },
-      {
-        label: 'ng e2e',
-        path: 'cli/e2e',
-      },
-      {
-        label: 'ng extract-i18n',
-        path: 'cli/extract-i18n',
-      },
-      {
-        label: 'ng generate',
-        children: [
-          {
-            label: 'Overview',
-            path: 'cli/generate',
-          },
-          {
-            label: 'ai-config',
-            path: 'cli/generate/ai-config',
-          },
-          {
-            label: 'app-shell',
-            path: 'cli/generate/app-shell',
-          },
-          {
-            label: 'application',
-            path: 'cli/generate/application',
-          },
-          {
-            label: 'class',
-            path: 'cli/generate/class',
-          },
-          {
-            label: 'component',
-            path: 'cli/generate/component',
-          },
-          {
-            label: 'config',
-            path: 'cli/generate/config',
-          },
-          {
-            label: 'directive',
-            path: 'cli/generate/directive',
-          },
-          {
-            label: 'enum',
-            path: 'cli/generate/enum',
-          },
-          {
-            label: 'environments',
-            path: 'cli/generate/environments',
-          },
-          {
-            label: 'guard',
-            path: 'cli/generate/guard',
-          },
-          {
-            label: 'interceptor',
-            path: 'cli/generate/interceptor',
-          },
-          {
-            label: 'interface',
-            path: 'cli/generate/interface',
-          },
-          {
-            label: 'library',
-            path: 'cli/generate/library',
-          },
-          {
-            label: 'module',
-            path: 'cli/generate/module',
-          },
-          {
-            label: 'pipe',
-            path: 'cli/generate/pipe',
-          },
-          {
-            label: 'resolver',
-            path: 'cli/generate/resolver',
-          },
-          {
-            label: 'service-worker',
-            path: 'cli/generate/service-worker',
-          },
-          {
-            label: 'service',
-            path: 'cli/generate/service',
-          },
-          {
-            label: 'web-worker',
-            path: 'cli/generate/web-worker',
-          },
-        ],
-      },
-      {
-        label: 'ng lint',
-        path: 'cli/lint',
-      },
-      {
-        label: 'ng new',
-        path: 'cli/new',
-      },
-      {
-        label: 'ng run',
-        path: 'cli/run',
-      },
-      {
-        label: 'ng serve',
-        path: 'cli/serve',
-      },
-      {
-        label: 'ng test',
-        path: 'cli/test',
-      },
-      {
-        label: 'ng update',
-        path: 'cli/update',
-      },
-      {
-        label: 'ng version',
-        path: 'cli/version',
-      },
-    ],
-  },
-  {
-    label: 'Error Encyclopedia',
-    children: [
-      {
-        label: 'Overview',
-        path: 'errors',
-        contentPath: 'reference/errors/overview',
-      },
-      ...ERRORS_NAV_DATA,
-    ],
-  },
-  {
-    label: 'Extended Diagnostics',
-    children: [
-      {
-        label: 'Overview',
-        path: 'extended-diagnostics',
-        contentPath: 'reference/extended-diagnostics/overview',
-      },
-      ...EXT_DIAGNOSTICS_NAV_DATA,
-    ],
-  },
-  {
-    label: 'Versioning and releases',
-    path: 'reference/releases',
-    contentPath: 'reference/releases',
-  },
-  {
-    label: 'Version compatibility',
-    path: 'reference/versions',
-    contentPath: 'reference/versions',
-  },
-  {
-    label: 'Update guide',
-    path: 'update-guide',
-  },
-  {
-    label: 'Configurations',
-    children: [
-      {
-        label: 'File structure',
-        path: 'reference/configs/file-structure',
-        contentPath: 'reference/configs/file-structure',
-      },
-      {
-        label: 'Workspace configuration',
-        path: 'reference/configs/workspace-config',
-        contentPath: 'reference/configs/workspace-config',
-      },
-      {
-        label: 'Angular compiler options',
-        path: 'reference/configs/angular-compiler-options',
-        contentPath: 'reference/configs/angular-compiler-options',
-      },
-      {
-        label: 'npm dependencies',
-        path: 'reference/configs/npm-packages',
-        contentPath: 'reference/configs/npm-packages',
-      },
-    ],
-  },
-  {
-    label: 'Migrations',
-    children: [
-      {
-        label: 'Overview',
-        path: 'reference/migrations',
-        contentPath: 'reference/migrations/overview',
-      },
-      {
-        label: 'Standalone',
-        path: 'reference/migrations/standalone',
-        contentPath: 'reference/migrations/standalone',
-      },
-      {
-        label: 'Control Flow Syntax',
-        path: 'reference/migrations/control-flow',
-        contentPath: 'reference/migrations/control-flow',
-      },
-      {
-        label: 'inject() Function',
-        path: 'reference/migrations/inject-function',
-        contentPath: 'reference/migrations/inject-function',
-      },
-      {
-        label: 'Lazy-loaded routes',
-        path: 'reference/migrations/route-lazy-loading',
-        contentPath: 'reference/migrations/route-lazy-loading',
-      },
-      {
-        label: 'Signal inputs',
-        path: 'reference/migrations/signal-inputs',
-        contentPath: 'reference/migrations/signal-inputs',
-      },
-      {
-        label: 'Outputs',
-        path: 'reference/migrations/outputs',
-        contentPath: 'reference/migrations/outputs',
-      },
-      {
-        label: 'Signal queries',
-        path: 'reference/migrations/signal-queries',
-        contentPath: 'reference/migrations/signal-queries',
-      },
-      {
-        label: 'Clean up unused imports',
-        path: 'reference/migrations/cleanup-unused-imports',
-        contentPath: 'reference/migrations/cleanup-unused-imports',
-      },
-      {
-        label: 'Self-closing tags',
-        path: 'reference/migrations/self-closing-tags',
-        contentPath: 'reference/migrations/self-closing-tags',
-      },
-      {
-        label: 'NgClass to Class',
-        path: 'reference/migrations/ngclass-to-class',
-        contentPath: 'reference/migrations/ngclass-to-class',
-        status: 'new',
-      },
-      {
-        label: 'NgStyle to Style',
-        path: 'reference/migrations/ngstyle-to-style',
-        contentPath: 'reference/migrations/ngstyle-to-style',
-        status: 'new',
-      },
-      {
-        label: 'Router Testing Module Migration',
-        path: 'reference/migrations/router-testing-module-migration',
-        contentPath: 'reference/migrations/router-testing-module-migration',
-        status: 'new',
-      },
-      {
-        label: 'CommonModule to Standalone',
-        path: 'reference/migrations/common-to-standalone',
-        contentPath: 'reference/migrations/common-to-standalone',
-        status: 'new',
-      },
-    ],
-  },
-];
-
-const FOOTER_NAVIGATION_DATA: NavigationItem[] = [
-  {
-    label: 'Press Kit',
-    path: 'press-kit',
-    contentPath: 'reference/press-kit',
-  },
-  {
-    label: 'License',
-    path: 'license',
-    contentPath: 'reference/license',
-  },
-];
-
 // Docs navigation data structure, it's used to display structure in
 // navigation-list component And build the routing table for content pages.
 export const SUB_NAVIGATION_DATA: SubNavigationData = {
diff --git a/adev-ja/src/app/routing/sub-navigation-data.ts b/adev-ja/src/app/routing/sub-navigation-data.ts
index f45ec5202..43f27a257 100644
--- a/adev-ja/src/app/routing/sub-navigation-data.ts
+++ b/adev-ja/src/app/routing/sub-navigation-data.ts
@@ -6,20 +6,14 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {isDevMode} from '@angular/core';
 import {NavigationItem} from '@angular/docs';
 
-// These imports are expected to be red because they are generated a build time
-import FIRST_APP_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/first-app/routes.json';
-import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/learn-angular/routes.json';
-import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/deferrable-views/routes.json';
-import SIGNALS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signals/routes.json';
-import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signal-forms/routes.json';
-import ERRORS_NAV_DATA from '../../../src/assets/content/reference/errors/routes.json';
-import EXT_DIAGNOSTICS_NAV_DATA from '../../../src/assets/content/reference/extended-diagnostics/routes.json';
-
-import {getApiNavigationItems} from '../features/references/helpers/manifest.helper';
-import {DEFAULT_PAGES} from '../core/constants/pages';
+import {
+  DOCS_SUB_NAVIGATION_DATA,
+  FOOTER_NAVIGATION_DATA,
+  REFERENCE_SUB_NAVIGATION_DATA,
+  TUTORIALS_SUB_NAVIGATION_DATA,
+} from './navigation-entries';
 
 interface SubNavigationData {
   docs: NavigationItem[];
@@ -28,1621 +22,6 @@ interface SubNavigationData {
   footer: NavigationItem[];
 }
 
-const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
-  {
-    label: '入門',
-    children: [
-      {
-        label: 'Angularとは？',
-        path: 'overview',
-        contentPath: 'introduction/what-is-angular',
-      },
-      {
-        label: 'インストール',
-        path: 'installation',
-        contentPath: 'introduction/installation',
-      },
-      {
-        label: '基本概念',
-        children: [
-          {
-            label: '概要',
-            path: 'essentials',
-            contentPath: 'introduction/essentials/overview',
-          },
-          {
-            label: 'コンポーネントによる構築',
-            path: 'essentials/components',
-            contentPath: 'introduction/essentials/components',
-          },
-          {
-            label: 'リアクティビティとシグナル',
-            path: 'essentials/signals',
-            contentPath: 'introduction/essentials/signals',
-          },
-          {
-            label: 'テンプレートによる動的なインターフェース',
-            path: 'essentials/templates',
-            contentPath: 'introduction/essentials/templates',
-          },
-          {
-            label: 'シグナルを使ったフォーム',
-            path: 'essentials/signal-forms',
-            contentPath: 'introduction/essentials/signal-forms',
-            status: 'new',
-          },
-          {
-            label: '依存性の注入によるモジュール設計',
-            path: 'essentials/dependency-injection',
-            contentPath: 'introduction/essentials/dependency-injection',
-          },
-          {
-            label: '次のステップ',
-            path: 'essentials/next-steps',
-            contentPath: 'introduction/essentials/next-steps',
-          },
-        ],
-      },
-      {
-        label: '作ってみよう！ 🚀',
-        path: 'tutorials/learn-angular',
-      },
-    ],
-  },
-  {
-    label: '詳細ガイド',
-    children: [
-      {
-        label: 'シグナル',
-        status: 'updated',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/signals',
-            contentPath: 'guide/signals/overview',
-          },
-          {
-            label: 'linkedSignalによる派生状態',
-            path: 'guide/signals/linked-signal',
-            contentPath: 'guide/signals/linked-signal',
-          },
-          {
-            label: 'resourceによる非同期リアクティビティ',
-            path: 'guide/signals/resource',
-            contentPath: 'guide/signals/resource',
-          },
-          {
-            label: '非リアクティブAPIのための副作用',
-            path: 'guide/signals/effect',
-            contentPath: 'guide/signals/effect',
-            status: 'new',
-          },
-        ],
-      },
-      {
-        label: 'コンポーネント',
-        children: [
-          {
-            label: 'コンポーネントの構造',
-            path: 'guide/components',
-            contentPath: 'guide/components/anatomy-of-components',
-          },
-          {
-            label: 'セレクター',
-            path: 'guide/components/selectors',
-            contentPath: 'guide/components/selectors',
-          },
-          {
-            label: 'スタイリング',
-            path: 'guide/components/styling',
-            contentPath: 'guide/components/styling',
-          },
-          {
-            label: '入力プロパティによるデータ受け入れ',
-            path: 'guide/components/inputs',
-            contentPath: 'guide/components/inputs',
-          },
-          {
-            label: '出力によるカスタムイベント',
-            path: 'guide/components/outputs',
-            contentPath: 'guide/components/outputs',
-          },
-          {
-            label: 'ng-contentによるコンテンツ投影',
-            path: 'guide/components/content-projection',
-            contentPath: 'guide/components/content-projection',
-          },
-          {
-            label: 'ホスト要素',
-            path: 'guide/components/host-elements',
-            contentPath: 'guide/components/host-elements',
-          },
-          {
-            label: 'ライフサイクル',
-            path: 'guide/components/lifecycle',
-            contentPath: 'guide/components/lifecycle',
-          },
-          {
-            label: 'クエリによるコンポーネントの子への参照',
-            path: 'guide/components/queries',
-            contentPath: 'guide/components/queries',
-          },
-          {
-            label: 'DOM APIの使用',
-            path: 'guide/components/dom-apis',
-            contentPath: 'guide/components/dom-apis',
-          },
-          {
-            label: '継承',
-            path: 'guide/components/inheritance',
-            contentPath: 'guide/components/inheritance',
-          },
-          {
-            label: 'プログラムによるコンポーネントレンダリング',
-            path: 'guide/components/programmatic-rendering',
-            contentPath: 'guide/components/programmatic-rendering',
-          },
-          {
-            label: '高度な設定',
-            path: 'guide/components/advanced-configuration',
-            contentPath: 'guide/components/advanced-configuration',
-          },
-          {
-            label: 'カスタム要素',
-            path: 'guide/elements',
-            contentPath: 'guide/elements',
-          },
-        ],
-      },
-      {
-        label: 'テンプレート',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/templates',
-            contentPath: 'guide/templates/overview',
-          },
-          {
-            label: '動的テキスト、プロパティ、属性のバインディング',
-            path: 'guide/templates/binding',
-            contentPath: 'guide/templates/binding',
-          },
-          {
-            label: 'イベントリスナーの追加',
-            path: 'guide/templates/event-listeners',
-            contentPath: 'guide/templates/event-listeners',
-          },
-          {
-            label: '双方向バインディング',
-            path: 'guide/templates/two-way-binding',
-            contentPath: 'guide/templates/two-way-binding',
-          },
-          {
-            label: '制御フロー',
-            path: 'guide/templates/control-flow',
-            contentPath: 'guide/templates/control-flow',
-          },
-          {
-            label: 'パイプ',
-            path: 'guide/templates/pipes',
-            contentPath: 'guide/templates/pipes',
-          },
-          {
-            label: 'ng-contentによる子コンテンツのスロット化',
-            path: 'guide/templates/ng-content',
-            contentPath: 'guide/templates/ng-content',
-          },
-          {
-            label: 'ng-templateによるテンプレートフラグメントの作成',
-            path: 'guide/templates/ng-template',
-            contentPath: 'guide/templates/ng-template',
-          },
-          {
-            label: 'ng-containerによる要素のグループ化',
-            path: 'guide/templates/ng-container',
-            contentPath: 'guide/templates/ng-container',
-          },
-          {
-            label: 'テンプレート内の変数',
-            path: 'guide/templates/variables',
-            contentPath: 'guide/templates/variables',
-          },
-          {
-            label: '@deferによる遅延読み込み',
-            path: 'guide/templates/defer',
-            contentPath: 'guide/templates/defer',
-          },
-          {
-            label: '式の構文',
-            path: 'guide/templates/expression-syntax',
-            contentPath: 'guide/templates/expression-syntax',
-          },
-          {
-            label: 'テンプレート内の空白',
-            path: 'guide/templates/whitespace',
-            contentPath: 'guide/templates/whitespace',
-          },
-        ],
-      },
-      {
-        label: 'ディレクティブ',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/directives',
-            contentPath: 'guide/directives/overview',
-          },
-          {
-            label: '属性ディレクティブ',
-            path: 'guide/directives/attribute-directives',
-            contentPath: 'guide/directives/attribute-directives',
-          },
-          {
-            label: '構造ディレクティブ',
-            path: 'guide/directives/structural-directives',
-            contentPath: 'guide/directives/structural-directives',
-          },
-          {
-            label: 'ディレクティブコンポジションAPI',
-            path: 'guide/directives/directive-composition-api',
-            contentPath: 'guide/directives/directive-composition-api',
-          },
-          {
-            label: 'NgOptimizedImageによる画像の最適化',
-            path: 'guide/image-optimization',
-            contentPath: 'guide/image-optimization',
-          },
-        ],
-      },
-      {
-        label: '依存性の注入',
-        status: 'updated',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/di',
-            contentPath: 'guide/di/overview',
-            status: 'updated',
-          },
-          {
-            label: 'サービスの作成と使用',
-            path: 'guide/di/creating-and-using-services',
-            contentPath: 'guide/di/creating-and-using-services',
-            status: 'updated',
-          },
-          {
-            label: '依存性プロバイダーの定義',
-            path: 'guide/di/defining-dependency-providers',
-            contentPath: 'guide/di/defining-dependency-providers',
-            status: 'updated',
-          },
-          {
-            label: '注入コンテキスト',
-            path: 'guide/di/dependency-injection-context',
-            contentPath: 'guide/di/dependency-injection-context',
-          },
-          {
-            label: '階層的なインジェクター',
-            path: 'guide/di/hierarchical-dependency-injection',
-            contentPath: 'guide/di/hierarchical-dependency-injection',
-          },
-          {
-            label: 'インジェクショントークンの最適化',
-            path: 'guide/di/lightweight-injection-tokens',
-            contentPath: 'guide/di/lightweight-injection-tokens',
-          },
-          {
-            label: 'DIの実践',
-            path: 'guide/di/di-in-action',
-            contentPath: 'guide/di/di-in-action',
-          },
-        ],
-      },
-      {
-        label: 'ルーティング',
-        status: 'updated',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/routing',
-            contentPath: 'guide/routing/overview',
-          },
-          {
-            label: 'ルートを定義する',
-            path: 'guide/routing/define-routes',
-            contentPath: 'guide/routing/define-routes',
-          },
-          {
-            label: 'アウトレットにルートを表示する',
-            path: 'guide/routing/show-routes-with-outlets',
-            contentPath: 'guide/routing/show-routes-with-outlets',
-          },
-          {
-            label: 'ルートへのナビゲーション',
-            path: 'guide/routing/navigate-to-routes',
-            contentPath: 'guide/routing/navigate-to-routes',
-          },
-          {
-            label: 'ルートの状態を読み取る',
-            path: 'guide/routing/read-route-state',
-            contentPath: 'guide/routing/read-route-state',
-          },
-          {
-            label: 'ルートのリダイレクト',
-            path: 'guide/routing/redirecting-routes',
-            contentPath: 'guide/routing/redirecting-routes',
-          },
-          {
-            label: 'ガードによるルートアクセスの制御',
-            path: 'guide/routing/route-guards',
-            contentPath: 'guide/routing/route-guards',
-          },
-          {
-            label: 'ルートデータリゾルバー',
-            path: 'guide/routing/data-resolvers',
-            contentPath: 'guide/routing/data-resolvers',
-          },
-          {
-            label: 'ライフサイクルとイベント',
-            path: 'guide/routing/lifecycle-and-events',
-            contentPath: 'guide/routing/lifecycle-and-events',
-          },
-          {
-            label: 'ルーティングとナビゲーションのテスト',
-            path: 'guide/routing/testing',
-            contentPath: 'guide/routing/testing',
-            status: 'new',
-          },
-          {
-            label: 'その他のルーティングタスク',
-            path: 'guide/routing/common-router-tasks',
-            contentPath: 'guide/routing/common-router-tasks',
-          },
-          {
-            label: 'カスタムルートマッチの作成',
-            path: 'guide/routing/routing-with-urlmatcher',
-            contentPath: 'guide/routing/routing-with-urlmatcher',
-          },
-          {
-            label: 'レンダリング戦略',
-            path: 'guide/routing/rendering-strategies',
-            contentPath: 'guide/routing/rendering-strategies',
-            status: 'new',
-          },
-          {
-            label: 'ルートの動作のカスタマイズ',
-            path: 'guide/routing/customizing-route-behavior',
-            contentPath: 'guide/routing/customizing-route-behavior',
-            status: 'new',
-          },
-          {
-            label: 'ルーターリファレンス',
-            path: 'guide/routing/router-reference',
-            contentPath: 'guide/routing/router-reference',
-          },
-          {
-            label: 'ルート遷移アニメーション',
-            path: 'guide/routing/route-transition-animations',
-            contentPath: 'guide/routing/route-transition-animations',
-          },
-        ],
-      },
-      {
-        label: 'フォーム',
-        status: 'updated',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/forms',
-            contentPath: 'guide/forms/overview',
-          },
-          {
-            label: 'シグナルフォーム',
-            status: 'new',
-            children: [
-              {
-                label: '概要',
-                path: 'guide/forms/signals/overview',
-                contentPath: 'guide/forms/signals/overview',
-              },
-              {
-                label: 'フォームモデル',
-                path: 'guide/forms/signals/models',
-                contentPath: 'guide/forms/signals/models',
-              },
-              {
-                label: 'フォームモデルの設計',
-                path: 'guide/forms/signals/model-design',
-                contentPath: 'guide/forms/signals/designing-your-form-model',
-              },
-              {
-                label: 'フィールド状態管理',
-                path: 'guide/forms/signals/field-state-management',
-                contentPath: 'guide/forms/signals/field-state-management',
-              },
-              {
-                label: 'バリデーション',
-                path: 'guide/forms/signals/validation',
-                contentPath: 'guide/forms/signals/validation',
-              },
-              {
-                label: 'カスタムコントロール',
-                path: 'guide/forms/signals/custom-controls',
-                contentPath: 'guide/forms/signals/custom-controls',
-              },
-              {
-                label: '他のフォームシステムとの比較',
-                path: 'guide/forms/signals/comparison',
-                contentPath: 'guide/forms/signals/comparison',
-              },
-              {
-                label: 'Migrating from Legacy Forms',
-                path: 'guide/forms/signals/migration',
-                contentPath: 'guide/forms/signals/migration',
-              },
-            ],
-          },
-          {
-            label: 'リアクティブフォーム',
-            path: 'guide/forms/reactive-forms',
-            contentPath: 'guide/forms/reactive-forms',
-          },
-          {
-            label: '厳密に型付けされたリアクティブフォーム',
-            path: 'guide/forms/typed-forms',
-            contentPath: 'guide/forms/typed-forms',
-          },
-          {
-            label: 'テンプレート駆動型フォーム',
-            path: 'guide/forms/template-driven-forms',
-            contentPath: 'guide/forms/template-driven-forms',
-          },
-          {
-            label: 'フォーム入力の検証',
-            path: 'guide/forms/form-validation',
-            contentPath: 'guide/forms/form-validation',
-          },
-          {
-            label: '動的フォームの構築',
-            path: 'guide/forms/dynamic-forms',
-            contentPath: 'guide/forms/dynamic-forms',
-          },
-        ],
-      },
-      {
-        label: 'HTTPクライアント',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/http',
-            contentPath: 'guide/http/overview',
-          },
-          {
-            label: 'HttpClientの設定',
-            path: 'guide/http/setup',
-            contentPath: 'guide/http/setup',
-          },
-          {
-            label: 'リクエストの実行',
-            path: 'guide/http/making-requests',
-            contentPath: 'guide/http/making-requests',
-          },
-          {
-            label: 'httpResourceを使ったリアクティブなデータ取得',
-            path: 'guide/http/http-resource',
-            contentPath: 'guide/http/http-resource',
-          },
-          {
-            label: 'リクエストとレスポンスへの介入',
-            path: 'guide/http/interceptors',
-            contentPath: 'guide/http/interceptors',
-          },
-          {
-            label: 'テスト',
-            path: 'guide/http/testing',
-            contentPath: 'guide/http/testing',
-          },
-        ],
-      },
-      {
-        label: 'サーバーサイド・ハイブリッドレンダリング',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/performance',
-            contentPath: 'guide/performance/overview',
-          },
-          {
-            label: 'サーバーサイド・ハイブリッドレンダリング',
-            path: 'guide/ssr',
-            contentPath: 'guide/ssr',
-          },
-          {
-            label: 'ハイドレーション',
-            path: 'guide/hydration',
-            contentPath: 'guide/hydration',
-          },
-          {
-            label: 'インクリメンタルハイドレーション',
-            path: 'guide/incremental-hydration',
-            contentPath: 'guide/incremental-hydration',
-          },
-        ],
-      },
-      {
-        label: 'テスト',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/testing',
-            contentPath: 'guide/testing/overview',
-          },
-          {
-            label: 'コンポーネントのテストの基本',
-            path: 'guide/testing/components-basics',
-            contentPath: 'guide/testing/components-basics',
-          },
-          {
-            label: 'コンポーネントのテストシナリオ',
-            path: 'guide/testing/components-scenarios',
-            contentPath: 'guide/testing/components-scenarios',
-          },
-          {
-            label: 'サービスのテスト',
-            path: 'guide/testing/services',
-            contentPath: 'guide/testing/services',
-          },
-          {
-            label: '属性ディレクティブのテスト',
-            path: 'guide/testing/attribute-directives',
-            contentPath: 'guide/testing/attribute-directives',
-          },
-          {
-            label: 'パイプのテスト',
-            path: 'guide/testing/pipes',
-            contentPath: 'guide/testing/pipes',
-          },
-          {
-            label: 'ルーティングとナビゲーションのテスト',
-            path: 'guide/routing/testing',
-            contentPath: 'guide/routing/testing',
-            status: 'new',
-          },
-          {
-            label: 'テストのデバッグ',
-            path: 'guide/testing/debugging',
-            contentPath: 'guide/testing/debugging',
-          },
-          {
-            label: 'コードカバレッジ',
-            path: 'guide/testing/code-coverage',
-            contentPath: 'guide/testing/code-coverage',
-          },
-          {
-            label: 'テストユーティリティAPI',
-            path: 'guide/testing/utility-apis',
-            contentPath: 'guide/testing/utility-apis',
-          },
-          {
-            label: 'コンポーネントハーネスの概要',
-            path: 'guide/testing/component-harnesses-overview',
-            contentPath: 'guide/testing/component-harnesses-overview',
-          },
-          {
-            label: 'テストでコンポーネントハーネスを使う',
-            path: 'guide/testing/using-component-harnesses',
-            contentPath: 'guide/testing/using-component-harnesses',
-          },
-          {
-            label: 'コンポーネントハーネスを作成する',
-            path: 'guide/testing/creating-component-harnesses',
-            contentPath: 'guide/testing/creating-component-harnesses',
-          },
-          {
-            label: 'テスト環境にハーネスサポートを追加する',
-            path: 'guide/testing/component-harnesses-testing-environments',
-            contentPath: 'guide/testing/component-harnesses-testing-environments',
-          },
-          {
-            label: 'KarmaからVitestへの移行',
-            path: 'guide/testing/migrating-to-vitest',
-            contentPath: 'guide/testing/migrating-to-vitest',
-          },
-          {
-            label: 'KarmaとJasmineによるテスト',
-            path: 'guide/testing/karma',
-            contentPath: 'guide/testing/karma',
-          },
-          {
-            label: 'Zone.jsテストユーティリティ',
-            path: 'guide/testing/zone-js-testing-utilities',
-            contentPath: 'guide/testing/zone-js-testing-utilities',
-          },
-        ],
-      },
-      {
-        label: 'Angular Aria',
-        status: 'new',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/aria/overview',
-            contentPath: 'guide/aria/overview',
-          },
-          {
-            label: 'アコーディオン',
-            path: 'guide/aria/accordion',
-            contentPath: 'guide/aria/accordion',
-          },
-          {
-            label: 'オートコンプリート',
-            path: 'guide/aria/autocomplete',
-            contentPath: 'guide/aria/autocomplete',
-          },
-          {
-            label: 'コンボボックス',
-            path: 'guide/aria/combobox',
-            contentPath: 'guide/aria/combobox',
-          },
-          {
-            label: 'グリッド',
-            path: 'guide/aria/grid',
-            contentPath: 'guide/aria/grid',
-          },
-          {
-            label: 'リストボックス',
-            path: 'guide/aria/listbox',
-            contentPath: 'guide/aria/listbox',
-          },
-          {
-            label: 'メニュー',
-            path: 'guide/aria/menu',
-            contentPath: 'guide/aria/menu',
-          },
-          {
-            label: 'メニューバー',
-            path: 'guide/aria/menubar',
-            contentPath: 'guide/aria/menubar',
-          },
-          {
-            label: 'マルチセレクト',
-            path: 'guide/aria/multiselect',
-            contentPath: 'guide/aria/multiselect',
-          },
-          {
-            label: 'セレクト',
-            path: 'guide/aria/select',
-            contentPath: 'guide/aria/select',
-          },
-          {
-            label: 'タブ',
-            path: 'guide/aria/tabs',
-            contentPath: 'guide/aria/tabs',
-          },
-          {
-            label: 'ツールバー',
-            path: 'guide/aria/toolbar',
-            contentPath: 'guide/aria/toolbar',
-          },
-          {
-            label: 'ツリー',
-            path: 'guide/aria/tree',
-            contentPath: 'guide/aria/tree',
-          },
-        ],
-      },
-      {
-        label: '国際化',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/i18n',
-            contentPath: 'guide/i18n/overview',
-          },
-          {
-            label: 'localizeパッケージの追加',
-            path: 'guide/i18n/add-package',
-            contentPath: 'guide/i18n/add-package',
-          },
-          {
-            label: 'IDによるロケールの参照',
-            path: 'guide/i18n/locale-id',
-            contentPath: 'guide/i18n/locale-id',
-          },
-          {
-            label: 'ロケールに基づいたデータのフォーマット',
-            path: 'guide/i18n/format-data-locale',
-            contentPath: 'guide/i18n/format-data-locale',
-          },
-          {
-            label: '翻訳のためのコンポーネントの準備',
-            path: 'guide/i18n/prepare',
-            contentPath: 'guide/i18n/prepare',
-          },
-          {
-            label: '翻訳ファイルの操作',
-            path: 'guide/i18n/translation-files',
-            contentPath: 'guide/i18n/translation-files',
-          },
-          {
-            label: 'アプリへの翻訳の統合',
-            path: 'guide/i18n/merge',
-            contentPath: 'guide/i18n/merge',
-          },
-          {
-            label: '複数のロケールのデプロイ',
-            path: 'guide/i18n/deploy',
-            contentPath: 'guide/i18n/deploy',
-          },
-          {
-            label: 'ロケールデータのグローバルバリアントのインポート',
-            path: 'guide/i18n/import-global-variants',
-            contentPath: 'guide/i18n/import-global-variants',
-          },
-          {
-            label: 'カスタムIDによるマークされたテキストの管理',
-            path: 'guide/i18n/manage-marked-text',
-            contentPath: 'guide/i18n/manage-marked-text',
-          },
-          {
-            label: 'Angularアプリケーションの例',
-            path: 'guide/i18n/example',
-            contentPath: 'guide/i18n/example',
-          },
-        ],
-      },
-      {
-        label: 'アニメーション',
-        status: 'updated',
-        children: [
-          {
-            label: 'Enter and Leave アニメーション',
-            path: 'guide/animations/enter-and-leave',
-            contentPath: 'guide/animations/enter-and-leave',
-            status: 'new',
-          },
-          {
-            label: '複雑なCSSアニメーション',
-            path: 'guide/animations/css',
-            contentPath: 'guide/animations/css',
-          },
-          {
-            label: 'ルート遷移アニメーション',
-            path: 'guide/routing/route-transition-animations',
-            contentPath: 'guide/routing/route-transition-animations',
-          },
-        ],
-      },
-      {
-        label: 'Drag and drop',
-        path: 'guide/drag-drop',
-        contentPath: 'guide/drag-drop',
-      },
-    ],
-  },
-  {
-    label: 'Build with AI',
-    status: 'new',
-    children: [
-      {
-        label: 'はじめよう',
-        path: 'ai',
-        contentPath: 'ai/overview',
-      },
-      {
-        label: 'LLMプロンプトとAI IDEセットアップ',
-        path: 'ai/develop-with-ai',
-        contentPath: 'ai/develop-with-ai',
-      },
-      {
-        label: '設計パターン',
-        path: 'ai/design-patterns',
-        contentPath: 'ai/design-patterns',
-      },
-      {
-        label: 'Angular CLI MCPサーバーセットアップ',
-        path: 'ai/mcp',
-        contentPath: 'ai/mcp-server-setup',
-      },
-      {
-        label: 'Angular AI Tutor',
-        path: 'ai/ai-tutor',
-        contentPath: 'ai/ai-tutor',
-      },
-    ],
-  },
-  {
-    label: '開発者ツール',
-    children: [
-      {
-        label: 'Angular CLI',
-        children: [
-          {
-            label: '概要',
-            path: 'tools/cli',
-            contentPath: 'tools/cli/overview',
-          },
-          {
-            label: 'ローカル設定',
-            path: 'tools/cli/setup-local',
-            contentPath: 'tools/cli/setup-local',
-          },
-          {
-            label: 'Angularアプリのビルド',
-            path: 'tools/cli/build',
-            contentPath: 'tools/cli/build',
-          },
-          {
-            label: '開発用ローカルサーバー',
-            path: 'tools/cli/serve',
-            contentPath: 'tools/cli/serve',
-          },
-          {
-            label: 'デプロイメント',
-            path: 'tools/cli/deployment',
-            contentPath: 'tools/cli/deployment',
-          },
-          {
-            label: 'エンドツーエンドテスト',
-            path: 'tools/cli/end-to-end',
-            contentPath: 'tools/cli/end-to-end',
-          },
-          {
-            label: '新しいビルドシステムへの移行',
-            path: 'tools/cli/build-system-migration',
-            contentPath: 'tools/cli/build-system-migration',
-          },
-          {
-            label: 'ビルド環境',
-            path: 'tools/cli/environments',
-            contentPath: 'tools/cli/environments',
-          },
-          {
-            label: 'Angular CLIビルダー',
-            path: 'tools/cli/cli-builder',
-            contentPath: 'tools/cli/cli-builder',
-          },
-          {
-            label: 'Schematicsによるコードの生成',
-            path: 'tools/cli/schematics',
-            contentPath: 'tools/cli/schematics',
-          },
-          {
-            label: 'Schematicsの作成',
-            path: 'tools/cli/schematics-authoring',
-            contentPath: 'tools/cli/schematics-authoring',
-          },
-          {
-            label: 'ライブラリのSchematics',
-            path: 'tools/cli/schematics-for-libraries',
-            contentPath: 'tools/cli/schematics-for-libraries',
-          },
-          {
-            label: 'テンプレート型チェック',
-            path: 'tools/cli/template-typecheck',
-            contentPath: 'tools/cli/template-typecheck',
-          },
-          {
-            label: '事前コンパイル (AOT) コンパイル',
-            path: 'tools/cli/aot-compiler',
-            contentPath: 'tools/cli/aot-compiler',
-          },
-          {
-            label: 'AOTメタデータエラー',
-            path: 'tools/cli/aot-metadata-errors',
-            contentPath: 'tools/cli/aot-metadata-errors',
-          },
-        ],
-      },
-      {
-        label: 'ライブラリ',
-        children: [
-          {
-            label: '概要',
-            path: 'tools/libraries',
-            contentPath: 'tools/libraries/overview',
-          },
-          {
-            label: 'ライブラリの作成',
-            path: 'tools/libraries/creating-libraries',
-            contentPath: 'tools/libraries/creating-libraries',
-          },
-          {
-            label: 'ライブラリの使用',
-            path: 'tools/libraries/using-libraries',
-            contentPath: 'tools/libraries/using-libraries',
-          },
-          {
-            label: 'Angularパッケージフォーマット',
-            path: 'tools/libraries/angular-package-format',
-            contentPath: 'tools/libraries/angular-package-format',
-          },
-        ],
-      },
-      {
-        label: 'DevTools',
-        children: [
-          {
-            label: '概要',
-            path: 'tools/devtools',
-            contentPath: 'tools/devtools/overview',
-          },
-          {
-            label: 'コンポーネント',
-            path: 'tools/devtools/component',
-            contentPath: 'tools/devtools/component',
-          },
-          {
-            label: 'プロファイラー',
-            path: 'tools/devtools/profiler',
-            contentPath: 'tools/devtools/profiler',
-          },
-          {
-            label: 'インジェクター',
-            path: 'tools/devtools/injectors',
-            contentPath: 'tools/devtools/injectors',
-          },
-          // TODO: create those guides
-          // The signal debugging docs should also be added to the signal section
-          // {
-          //   label: 'Signals',
-          //   path: 'tools/devtools/signals',
-          //   contentPath: 'tools/devtools/signals',
-          // },
-          // {
-          //   label: 'Router',
-          //   path: 'tools/devtools/router',
-          //   contentPath: 'tools/devtools/router',
-          // }
-        ],
-      },
-      {
-        label: '言語サービス',
-        path: 'tools/language-service',
-        contentPath: 'tools/language-service',
-      },
-    ],
-  },
-  {
-    label: 'ベストプラクティス',
-    children: [
-      {
-        label: 'スタイルガイド',
-        path: 'style-guide',
-        contentPath: 'best-practices/style-guide',
-        status: 'updated',
-      },
-      {
-        label: 'セキュリティ',
-        path: 'best-practices/security',
-        contentPath: 'guide/security', // Have not refactored due to build issues
-      },
-      {
-        label: 'アクセシビリティ',
-        path: 'best-practices/a11y',
-        contentPath: 'best-practices/a11y',
-      },
-      {
-        label: 'Angularにおける未処理エラー',
-        path: 'best-practices/error-handling',
-        contentPath: 'best-practices/error-handling',
-      },
-      {
-        label: 'パフォーマンス',
-        children: [
-          {
-            label: '概要',
-            path: 'best-practices/runtime-performance',
-            contentPath: 'best-practices/runtime-performance/overview',
-          },
-          {
-            label: 'ゾーンの汚染',
-            path: 'best-practices/zone-pollution',
-            contentPath: 'best-practices/runtime-performance/zone-pollution',
-          },
-          {
-            label: '遅い計算',
-            path: 'best-practices/slow-computations',
-            contentPath: 'best-practices/runtime-performance/slow-computations',
-          },
-          {
-            label: 'コンポーネントサブツリーのスキップ',
-            path: 'best-practices/skipping-subtrees',
-            contentPath: 'best-practices/runtime-performance/skipping-subtrees',
-          },
-          {
-            label: 'Chrome DevToolsでのプロファイリング',
-            path: 'best-practices/profiling-with-chrome-devtools',
-            contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools',
-          },
-          {label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'},
-        ],
-      },
-      {
-        label: 'アップデートに追従する',
-        path: 'update',
-        contentPath: 'best-practices/update',
-      },
-    ],
-  },
-  {
-    label: '開発者向けイベント',
-    children: [
-      {
-        label: 'Angular v21 Release',
-        path: 'events/v21',
-        contentPath: 'events/v21',
-        status: 'new',
-      },
-    ],
-  },
-  {
-    label: '拡張エコシステム',
-    children: [
-      {
-        label: 'NgModule',
-        path: 'guide/ngmodules/overview',
-        contentPath: 'guide/ngmodules/overview',
-      },
-      {
-        label: 'レガシーアニメーション',
-        children: [
-          {
-            label: '概要',
-            path: 'guide/legacy-animations',
-            contentPath: 'guide/animations/overview',
-          },
-          {
-            label: 'トランジションとトリガー',
-            path: 'guide/legacy-animations/transition-and-triggers',
-            contentPath: 'guide/animations/transition-and-triggers',
-          },
-          {
-            label: '複雑なシーケンス',
-            path: 'guide/legacy-animations/complex-sequences',
-            contentPath: 'guide/animations/complex-sequences',
-          },
-          {
-            label: '再利用可能なアニメーション',
-            path: 'guide/legacy-animations/reusable-animations',
-            contentPath: 'guide/animations/reusable-animations',
-          },
-          {
-            label: 'ネイティブCSSアニメーションへの移行',
-            path: 'guide/animations/migration',
-            contentPath: 'guide/animations/migration',
-          },
-        ],
-      },
-      {
-        label: 'RxJSとの併用',
-        children: [
-          {
-            label: 'Signalとの相互運用',
-            path: 'ecosystem/rxjs-interop',
-            contentPath: 'ecosystem/rxjs-interop/signals-interop',
-          },
-          {
-            label: 'コンポーネント出力との相互接続',
-            path: 'ecosystem/rxjs-interop/output-interop',
-            contentPath: 'ecosystem/rxjs-interop/output-interop',
-          },
-          {
-            label: 'takeUntilDestroyedでの購読解除',
-            path: 'ecosystem/rxjs-interop/take-until-destroyed',
-            contentPath: 'ecosystem/rxjs-interop/take-until-destroyed',
-          },
-        ],
-      },
-      {
-        label: 'Service WorkerとPWA',
-        children: [
-          {
-            label: '概要',
-            path: 'ecosystem/service-workers',
-            contentPath: 'ecosystem/service-workers/overview',
-          },
-          {
-            label: 'はじめに',
-            path: 'ecosystem/service-workers/getting-started',
-            contentPath: 'ecosystem/service-workers/getting-started',
-          },
-          {
-            label: '独自のService Workerスクリプト',
-            path: 'ecosystem/service-workers/custom-service-worker-scripts',
-            contentPath: 'ecosystem/service-workers/custom-service-worker-scripts',
-          },
-          {
-            label: '設定ファイル',
-            path: 'ecosystem/service-workers/config',
-            contentPath: 'ecosystem/service-workers/config',
-          },
-          {
-            label: 'Service Workerとの通信',
-            path: 'ecosystem/service-workers/communications',
-            contentPath: 'ecosystem/service-workers/communications',
-          },
-          {
-            label: 'プッシュ通知',
-            path: 'ecosystem/service-workers/push-notifications',
-            contentPath: 'ecosystem/service-workers/push-notifications',
-          },
-          {
-            label: 'Service WorkerのDevOps',
-            path: 'ecosystem/service-workers/devops',
-            contentPath: 'ecosystem/service-workers/devops',
-          },
-          {
-            label: 'App Shellパターン',
-            path: 'ecosystem/service-workers/app-shell',
-            contentPath: 'ecosystem/service-workers/app-shell',
-          },
-        ],
-      },
-      {
-        label: 'Web Worker',
-        path: 'ecosystem/web-workers',
-        contentPath: 'ecosystem/web-workers',
-      },
-      {
-        label: 'カスタムビルドパイプライン',
-        path: 'ecosystem/custom-build-pipeline',
-        contentPath: 'ecosystem/custom-build-pipeline',
-      },
-      {
-        label: 'Tailwind',
-        path: 'guide/tailwind',
-        contentPath: 'guide/tailwind',
-        status: 'new',
-      },
-      {
-        label: 'Angular Fire',
-        path: 'https://github.com/angular/angularfire#readme',
-      },
-      {
-        label: 'Google Maps',
-        path: 'https://github.com/angular/components/tree/main/src/google-maps#readme',
-      },
-      {
-        label: 'Google Pay',
-        path: 'https://github.com/google-pay/google-pay-button#angular',
-      },
-      {
-        label: 'YouTubeプレーヤー',
-        path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md',
-      },
-      {
-        label: 'Angular CDK',
-        path: 'https://material.angular.dev/cdk/categories',
-      },
-      {
-        label: 'Angular Material',
-        path: 'https://material.angular.dev/',
-      },
-    ],
-  },
-  ...(isDevMode()
-    ? [
-        {
-          label: 'Adev Dev Guide',
-          children: [
-            {
-              label: 'Kitchen Sink',
-              path: 'kitchen-sink',
-              contentPath: 'kitchen-sink',
-            },
-          ],
-        },
-      ]
-    : []),
-];
-
-export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
-  FIRST_APP_TUTORIAL_NAV_DATA,
-  LEARN_ANGULAR_TUTORIAL_NAV_DATA,
-  DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
-  SIGNALS_TUTORIAL_NAV_DATA,
-  SIGNAL_FORMS_TUTORIAL_NAV_DATA,
-  {
-    path: DEFAULT_PAGES.TUTORIALS,
-    contentPath: 'tutorials/home',
-    label: 'チュートリアル',
-  },
-];
-
-const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
-  {
-    label: 'ロードマップ',
-    path: 'roadmap',
-    contentPath: 'reference/roadmap',
-  },
-  {
-    label: '開発に参加する',
-    path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md',
-  },
-  {
-    label: 'コミュニティに参加する',
-    path: 'https://community.angular.jp/',
-  },
-  {
-    label: '日本語化プロジェクト',
-    path: 'https://github.com/angular/angular-ja',
-  },
-  {
-    label: 'APIリファレンス',
-    children: [
-      {
-        label: '概要',
-        path: 'api',
-      },
-      ...getApiNavigationItems(),
-    ],
-  },
-  {
-    label: 'CLIリファレンス',
-    children: [
-      {
-        label: '概要',
-        path: 'cli',
-        contentPath: 'reference/cli',
-      },
-      {
-        label: 'ng add',
-        path: 'cli/add',
-      },
-      {
-        label: 'ng analytics',
-        children: [
-          {
-            label: '概要',
-            path: 'cli/analytics',
-          },
-          {
-            label: 'disable',
-            path: 'cli/analytics/disable',
-          },
-          {
-            label: 'enable',
-            path: 'cli/analytics/enable',
-          },
-          {
-            label: 'info',
-            path: 'cli/analytics/info',
-          },
-          {
-            label: 'prompt',
-            path: 'cli/analytics/prompt',
-          },
-        ],
-      },
-      {
-        label: 'ng build',
-        path: 'cli/build',
-      },
-      {
-        label: 'ng cache',
-        children: [
-          {
-            label: '概要',
-            path: 'cli/cache',
-          },
-          {
-            label: 'clear',
-            path: 'cli/cache/clean',
-          },
-          {
-            label: 'disable',
-            path: 'cli/cache/disable',
-          },
-          {
-            label: 'enable',
-            path: 'cli/cache/enable',
-          },
-          {
-            label: 'info',
-            path: 'cli/cache/info',
-          },
-        ],
-      },
-      {
-        label: 'ng completion',
-        children: [
-          {
-            label: '概要',
-            path: 'cli/completion',
-          },
-          {
-            label: 'script',
-            path: 'cli/completion/script',
-          },
-        ],
-      },
-      {
-        label: 'ng config',
-        path: 'cli/config',
-      },
-      {
-        label: 'ng deploy',
-        path: 'cli/deploy',
-      },
-      {
-        label: 'ng e2e',
-        path: 'cli/e2e',
-      },
-      {
-        label: 'ng extract-i18n',
-        path: 'cli/extract-i18n',
-      },
-      {
-        label: 'ng generate',
-        children: [
-          {
-            label: '概要',
-            path: 'cli/generate',
-          },
-          {
-            label: 'ai-config',
-            path: 'cli/generate/ai-config',
-          },
-          {
-            label: 'app-shell',
-            path: 'cli/generate/app-shell',
-          },
-          {
-            label: 'application',
-            path: 'cli/generate/application',
-          },
-          {
-            label: 'class',
-            path: 'cli/generate/class',
-          },
-          {
-            label: 'component',
-            path: 'cli/generate/component',
-          },
-          {
-            label: 'config',
-            path: 'cli/generate/config',
-          },
-          {
-            label: 'directive',
-            path: 'cli/generate/directive',
-          },
-          {
-            label: 'enum',
-            path: 'cli/generate/enum',
-          },
-          {
-            label: 'environments',
-            path: 'cli/generate/environments',
-          },
-          {
-            label: 'guard',
-            path: 'cli/generate/guard',
-          },
-          {
-            label: 'interceptor',
-            path: 'cli/generate/interceptor',
-          },
-          {
-            label: 'interface',
-            path: 'cli/generate/interface',
-          },
-          {
-            label: 'library',
-            path: 'cli/generate/library',
-          },
-          {
-            label: 'module',
-            path: 'cli/generate/module',
-          },
-          {
-            label: 'pipe',
-            path: 'cli/generate/pipe',
-          },
-          {
-            label: 'resolver',
-            path: 'cli/generate/resolver',
-          },
-          {
-            label: 'service-worker',
-            path: 'cli/generate/service-worker',
-          },
-          {
-            label: 'service',
-            path: 'cli/generate/service',
-          },
-          {
-            label: 'web-worker',
-            path: 'cli/generate/web-worker',
-          },
-        ],
-      },
-      {
-        label: 'ng lint',
-        path: 'cli/lint',
-      },
-      {
-        label: 'ng new',
-        path: 'cli/new',
-      },
-      {
-        label: 'ng run',
-        path: 'cli/run',
-      },
-      {
-        label: 'ng serve',
-        path: 'cli/serve',
-      },
-      {
-        label: 'ng test',
-        path: 'cli/test',
-      },
-      {
-        label: 'ng update',
-        path: 'cli/update',
-      },
-      {
-        label: 'ng version',
-        path: 'cli/version',
-      },
-    ],
-  },
-  {
-    label: 'エラー百科辞典',
-    children: [
-      {
-        label: '概要',
-        path: 'errors',
-        contentPath: 'reference/errors/overview',
-      },
-      ...ERRORS_NAV_DATA,
-    ],
-  },
-  {
-    label: '拡張診断',
-    children: [
-      {
-        label: '概要',
-        path: 'extended-diagnostics',
-        contentPath: 'reference/extended-diagnostics/overview',
-      },
-      ...EXT_DIAGNOSTICS_NAV_DATA,
-    ],
-  },
-  {
-    label: 'バージョニングとリリース',
-    path: 'reference/releases',
-    contentPath: 'reference/releases',
-  },
-  {
-    label: 'バージョン互換性',
-    path: 'reference/versions',
-    contentPath: 'reference/versions',
-  },
-  {
-    label: 'アップデートガイド',
-    path: 'update-guide',
-  },
-  {
-    label: '設定',
-    children: [
-      {
-        label: 'ファイル構造',
-        path: 'reference/configs/file-structure',
-        contentPath: 'reference/configs/file-structure',
-      },
-      {
-        label: 'ワークスペース設定',
-        path: 'reference/configs/workspace-config',
-        contentPath: 'reference/configs/workspace-config',
-      },
-      {
-        label: 'Angularコンパイラオプション',
-        path: 'reference/configs/angular-compiler-options',
-        contentPath: 'reference/configs/angular-compiler-options',
-      },
-      {
-        label: 'npmの依存関係',
-        path: 'reference/configs/npm-packages',
-        contentPath: 'reference/configs/npm-packages',
-      },
-    ],
-  },
-  {
-    label: 'マイグレーション',
-    children: [
-      {
-        label: '概要',
-        path: 'reference/migrations',
-        contentPath: 'reference/migrations/overview',
-      },
-      {
-        label: 'スタンドアロン',
-        path: 'reference/migrations/standalone',
-        contentPath: 'reference/migrations/standalone',
-      },
-      {
-        label: '制御フロー構文',
-        path: 'reference/migrations/control-flow',
-        contentPath: 'reference/migrations/control-flow',
-      },
-      {
-        label: 'inject() 関数',
-        path: 'reference/migrations/inject-function',
-        contentPath: 'reference/migrations/inject-function',
-      },
-      {
-        label: '遅延読み込みルート',
-        path: 'reference/migrations/route-lazy-loading',
-        contentPath: 'reference/migrations/route-lazy-loading',
-      },
-      {
-        label: 'Signal入力',
-        path: 'reference/migrations/signal-inputs',
-        contentPath: 'reference/migrations/signal-inputs',
-      },
-      {
-        label: '出力',
-        path: 'reference/migrations/outputs',
-        contentPath: 'reference/migrations/outputs',
-      },
-      {
-        label: 'Signalクエリ',
-        path: 'reference/migrations/signal-queries',
-        contentPath: 'reference/migrations/signal-queries',
-      },
-      {
-        label: '未使用のインポートのクリーンアップ',
-        path: 'reference/migrations/cleanup-unused-imports',
-        contentPath: 'reference/migrations/cleanup-unused-imports',
-      },
-      {
-        label: '自己閉鎖タグ',
-        path: 'reference/migrations/self-closing-tags',
-        contentPath: 'reference/migrations/self-closing-tags',
-      },
-      {
-        label: 'NgClassからClassへ',
-        path: 'reference/migrations/ngclass-to-class',
-        contentPath: 'reference/migrations/ngclass-to-class',
-        status: 'new',
-      },
-      {
-        label: 'NgStyleからStyleへ',
-        path: 'reference/migrations/ngstyle-to-style',
-        contentPath: 'reference/migrations/ngstyle-to-style',
-        status: 'new',
-      },
-      {
-        label: 'Routerテストモジュールのマイグレーション',
-        path: 'reference/migrations/router-testing-module-migration',
-        contentPath: 'reference/migrations/router-testing-module-migration',
-        status: 'new',
-      },
-      {
-        label: 'CommonModuleからスタンドアロンへ',
-        path: 'reference/migrations/common-to-standalone',
-        contentPath: 'reference/migrations/common-to-standalone',
-        status: 'new',
-      },
-    ],
-  },
-];
-
-const FOOTER_NAVIGATION_DATA: NavigationItem[] = [
-  {
-    label: 'プレスキット',
-    path: 'press-kit',
-    contentPath: 'reference/press-kit',
-  },
-  {
-    label: 'ライセンス',
-    path: 'license',
-    contentPath: 'reference/license',
-  },
-];
-
 // Docs navigation data structure, it's used to display structure in
 // navigation-list component And build the routing table for content pages.
 export const SUB_NAVIGATION_DATA: SubNavigationData = {
diff --git a/tools/update-origin.ts b/tools/update-origin.ts
index 1d27ddea9..41074fd88 100644
--- a/tools/update-origin.ts
+++ b/tools/update-origin.ts
@@ -28,6 +28,7 @@ const localizedFilePatterns: Array<string | readonly string[]> = [
   'src/index.html',
   'src/app/core/services/a-dev-title-strategy.ts',
   'src/app/routing/sub-navigation-data.ts',
+  'src/app/routing/navigation-entries/index.ts',
   'shared-docs/components/table-of-contents/table-of-contents.component.html',
   'shared-docs/components/cookie-popup/cookie-popup.component.html',
 ];

From 9700384e1f51e7624b9b9a1ceed030305e0b4c21 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 10:12:46 +0900
Subject: [PATCH 31/55] fix(docs): migrate app component changes

- home.component.html: Remove inline SVG, use component-based logo
- update.component.ts: Use standalone components in imports
---
 .../app/features/home/home.component.en.html  | 681 ++++++------------
 .../src/app/features/home/home.component.html | 671 ++++++-----------
 2 files changed, 430 insertions(+), 922 deletions(-)

diff --git a/adev-ja/src/app/features/home/home.component.en.html b/adev-ja/src/app/features/home/home.component.en.html
index f13d163ce..7510cd9f8 100644
--- a/adev-ja/src/app/features/home/home.component.en.html
+++ b/adev-ja/src/app/features/home/home.component.en.html
@@ -1,489 +1,242 @@
 <main class="adev-home" #home>
-  <div class="banners-layer layer">
-    <div class="adev-banner-container">
-      <a href="events/v21" class="adev-banner" target="_blank">
-        <h1 tabindex="-1">Angular v21 is here!</h1>
-        <p class="adev-banner-cta">🕹️ Start your adventure</p>
-      </a>
-    </div>
-  </div>
   <section class="logo-section">
-    @if (!isUwu) {
-      <!-- Angular logo -->
-      <div class="logo-layer">
-        <svg class="svg" viewBox="0 0 1280 400" xmlns="http://www.w3.org/2000/svg">
-          <defs>
-            <!-- Do not remove `gradientTransform` attribute. Safari needs it in order to start the animation. -->
-            <linearGradient
-              id="gradient"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="rotate(0 640 125)"
-            >
-              <stop offset="0" stop-color="#ed0100" />
-              <stop offset="0.25" stop-color="#e449b4" />
-              <stop offset="0.5" stop-color="#ae3bfc" />
-              <stop offset="1" stop-color="#7f15fd" />
-              <animateTransform
-                attributeName="gradientTransform"
-                type="rotate"
-                from="0 640 125"
-                to="360 640 125"
-                dur="6.5s"
-                repeatCount="indefinite"
-              />
-            </linearGradient>
-          </defs>
-          <g class="wrapper" fill="url(#gradient)">
-            <g class="logo">
-              <g class="shield">
-                <path
-                  class="shield-base"
-                  d="M311.8,101.7L302,255.6L208.3,53.8L311.8,101.7ZM246.9,300.7L176.1,341.1L105.3,300.7L246.9,300.7ZM50.1,255.6L40.4,101.7L143.9,53.8L50.1,255.6Z"
-                />
-                <path class="shield-middle" d="M176.1,130.4L213.2,220.6L139,220.6L176.1,130.4Z" />
-                <path
-                  class="shield-bottom-a-arc"
-                  d="M106.419,301.339L105.3,300.7L119.7,265.8L232.5,265.8L246.9,300.7L245.781,301.339L106.419,301.339Z"
-                />
-              </g>
-              <path
-                class="capt-a-letter letter"
-                d="M515.4,288L553.1,288L484.4,92.7L440.7,92.7L372,288L409.7,288L425.8,239.9L499.2,239.9L515.4,288ZM435.4,211.4L461.8,132.8L463.3,132.8L489.7,211.4L435.4,211.4Z"
-              />
-              <path
-                class="n-letter letter"
-                d="M590.4,202.2L590.4,288L555.9,288L555.9,141.6L588.9,141.6L588.9,166.5L590.6,166.5C594,158.3 599.4,151.8 606.8,147C614.2,142.2 623.4,139.8 634.3,139.8C644.4,139.8 653.2,142 660.8,146.3C668.3,150.6 674.2,156.9 678.3,165.1C682.5,173.3 684.5,183.2 684.4,194.9L684.4,288L649.9,288L649.9,200.1C649.9,190.3 647.4,182.7 642.3,177.1C637.2,171.6 630.3,168.8 621.4,168.8C615.4,168.8 610,170.1 605.3,172.8C600.6,175.4 597,179.2 594.3,184.2C591.8,189.1 590.4,195.1 590.4,202.2Z"
-              />
-              <path
-                class="g-letter letter"
-                d="M760.5,345.9C748.1,345.9 737.5,344.2 728.6,340.9C719.7,337.6 712.6,333.1 707.2,327.5C701.8,321.9 698,315.7 696,308.9L727.1,301.4C728.5,304.3 730.5,307.1 733.2,309.9C735.9,312.7 739.5,315.1 744,317C748.5,318.9 754.3,319.8 761.2,319.8C771,319.8 779.1,317.4 785.5,312.7C791.9,308 795.1,300.2 795.1,289.4L795.1,261.7L793.4,261.7C791.6,265.3 789,268.9 785.6,272.7C782.2,276.5 777.7,279.6 772.2,282.1C766.6,284.6 759.7,285.9 751.3,285.9C740.1,285.9 729.9,283.2 720.7,277.9C711.6,272.6 704.3,264.6 699,254.1C693.6,243.5 690.9,230.3 690.9,214.3C690.9,198.2 693.6,184.6 699,173.5C704.4,162.4 711.6,154 720.8,148.2C730,142.4 740.2,139.6 751.4,139.6C760,139.6 767.1,141 772.6,143.9C778.2,146.8 782.6,150.3 785.9,154.3C789.2,158.3 791.7,162.1 793.4,165.7L795.3,165.7L795.3,141.5L829.3,141.5L829.3,290.3C829.3,302.8 826.3,313.2 820.3,321.4C814.3,329.6 806.2,335.7 795.8,339.8C785.4,343.9 773.6,345.9 760.5,345.9ZM760.8,258.8C768.1,258.8 774.3,257 779.5,253.5C784.6,249.9 788.6,244.8 791.2,238.2C793.9,231.5 795.2,223.5 795.2,214.2C795.2,205 793.9,196.9 791.2,190C788.6,183.1 784.7,177.7 779.6,173.8C774.5,170 768.2,168 760.8,168C753.1,168 746.7,170 741.5,174C736.4,178 732.5,183.5 729.9,190.4C727.3,197.4 726,205.3 726,214.1C726,223.1 727.3,230.9 730,237.6C732.6,244.3 736.5,249.5 741.7,253.2C746.8,256.9 753.2,258.8 760.8,258.8Z"
-              />
-              <path
-                class="u-letter letter"
-                d="M933.8,226.4L933.8,141.6L968.3,141.6L968.3,288L934.8,288L934.8,262L933.3,262C930,270.2 924.6,276.9 917,282.1C909.5,287.3 900.2,289.9 889.2,289.9C879.6,289.9 871.1,287.8 863.8,283.5C856.5,279.2 850.7,273 846.6,264.7C842.5,256.5 840.4,246.5 840.4,234.8L840.4,141.6L875,141.6L875,229.5C875,238.8 877.5,246.2 882.6,251.6C887.7,257.1 894.4,259.8 902.6,259.8C907.7,259.8 912.6,258.6 917.4,256.1C922.2,253.6 926.1,249.9 929.2,245C932.3,240 933.8,233.8 933.8,226.4Z"
-              />
-              <rect class="l-letter letter" x="979.6" y="92.7" width="34.5" height="195.3" />
-              <path
-                class="a-letter letter"
-                d="M1068.9,290.9C1059.6,290.9 1051.3,289.2 1043.9,285.9C1036.5,282.6 1030.6,277.6 1026.4,271.1C1022.1,264.6 1020,256.5 1020,246.9C1020,238.6 1021.5,231.8 1024.6,226.4C1027.7,221 1031.8,216.7 1037.1,213.4C1042.4,210.2 1048.3,207.7 1055,206C1061.6,204.3 1068.5,203.1 1075.6,202.3C1084.2,201.4 1091.1,200.6 1096.5,199.9C1101.8,199.2 1105.7,198 1108.2,196.5C1110.6,194.9 1111.9,192.5 1111.9,189.2L1111.9,188.6C1111.9,181.4 1109.8,175.9 1105.5,171.9C1101.2,168 1095.1,166 1087.1,166C1078.6,166 1072,167.8 1067,171.5C1062.1,175.2 1058.8,179.5 1057,184.6L1024.8,180C1027.3,171.1 1031.5,163.7 1037.4,157.6C1043.2,151.6 1050.4,147.1 1058.8,144.1C1067.3,141.1 1076.6,139.6 1086.8,139.6C1093.9,139.6 1100.9,140.4 1107.9,142.1C1114.9,143.8 1121.3,146.5 1127.1,150.3C1132.9,154.1 1137.5,159.2 1141.1,165.7C1144.6,172.2 1146.4,180.3 1146.4,190L1146.4,288L1113.2,288L1113.2,267.9L1112.1,267.9C1110,272 1107.1,275.8 1103.3,279.3C1099.5,282.8 1094.8,285.7 1089.1,287.8C1083.2,289.9 1076.6,290.9 1068.9,290.9ZM1077.9,265.6C1084.8,265.6 1090.8,264.2 1095.9,261.5C1101,258.7 1104.9,255.1 1107.7,250.5C1110.5,245.9 1111.8,240.9 1111.8,235.5L1111.8,218.2C1110.7,219.1 1108.9,219.9 1106.3,220.7C1103.7,221.5 1100.9,222.1 1097.7,222.7C1094.5,223.3 1091.4,223.8 1088.3,224.2C1085.2,224.6 1082.5,225 1080.2,225.3C1075.1,226 1070.4,227.1 1066.4,228.7C1062.3,230.3 1059.1,232.5 1056.8,235.3C1054.4,238.1 1053.3,241.8 1053.3,246.2C1053.3,252.6 1055.6,257.4 1060.3,260.6C1064.8,264 1070.7,265.6 1077.9,265.6Z"
-              />
-              <path
-                class="r-letter letter"
-                d="M1156.9,288L1156.9,141.6L1190.4,141.6L1190.4,166L1191.9,166C1194.6,157.5 1199.2,151 1205.7,146.4C1212.2,141.8 1219.7,139.5 1228.1,139.5C1230,139.5 1232.2,139.6 1234.5,139.7C1236.9,139.9 1238.9,140.1 1240.5,140.4L1240.5,172.1C1239,171.6 1236.7,171.1 1233.6,170.7C1230.5,170.3 1227.4,170.1 1224.5,170.1C1218.2,170.1 1212.6,171.5 1207.6,174.2C1202.6,176.9 1198.7,180.6 1195.8,185.4C1192.9,190.2 1191.5,195.7 1191.5,201.9L1191.5,288L1156.9,288Z"
-              />
-            </g>
-          </g>
-        </svg>
-        <h2>The framework for building scalable web apps with confidence</h2>
-      </div>
-    } @else {
-      <!-- UwU logo -->
-      <div layerId="uwu" class="uwu-layer">
-        <img src="assets/images/uwu.png" alt="Angular logo" />
+    <div class="pattern"></div>
+    <div class="content">
+      <div class="adev-banner-container">
+        <a href="events/v21" class="adev-banner" target="_blank">
+          <h1 tabindex="-1">Angular v21 is here!</h1>
+          <p class="adev-banner-cta">🕹️ Start your adventure</p>
+        </a>
+
+        <div class="search-field">
+          <docs-text-field placeholder="search" (click)="openSearch()" />
+        </div>
       </div>
-    }
 
-    <div class="learn-angular">
-      <a href="#learn-more" class="adev-cta">
-        <button class="docs-primary-btn" [attr.text]="'Get Started'" aria-label="Get Started">
-          Get Started
-        </button>
-      </a>
-      <div class="adev-arrow"></div>
+      @if (!isUwu) {
+        <div class="title">
+          <h2>Productivity<br />Meets scalability</h2>
+          <h3>The framework for building scalable web apps with confidence</h3>
+        </div>
+      } @else {
+        <!-- UwU logo -->
+        <div class="uwu">
+          <img src="assets/images/uwu.png" alt="Angular logo" />
+        </div>
+      }
+
+      <div class="learn-angular">
+        <a href="#learn-more" class="adev-cta">
+          <button class="docs-primary-btn" [attr.text]="'Get Started'" aria-label="Get Started">
+            Get Started
+          </button>
+        </a>
+        <div class="adev-arrow"></div>
+      </div>
     </div>
   </section>
 
-  <section class="features">
-    <h2>Productivity meets scalability</h2>
-    <div class="features-grid">
-      <div class="feature">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <g><rect fill="none" height="24" width="24" x="0" /></g>
-          <g>
-            <g>
-              <polygon points="19,9 20.25,6.25 23,5 20.25,3.75 19,1 17.75,3.75 15,5 17.75,6.25" />
-              <polygon
-                points="19,15 17.75,17.75 15,19 17.75,20.25 19,23 20.25,20.25 23,19 20.25,17.75"
-              />
-              <path
-                d="M11.5,9.5L9,4L6.5,9.5L1,12l5.5,2.5L9,20l2.5-5.5L17,12L11.5,9.5z M9.99,12.99L9,15.17l-0.99-2.18L5.83,12l2.18-0.99 L9,8.83l0.99,2.18L12.17,12L9.99,12.99z"
-              />
-            </g>
-          </g>
-        </svg>
-        <h3>AI-forward</h3>
-        <p>Resources and integrations to supercharge your development with AI</p>
-      </div>
-      <div class="feature">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-          <path
-            d="m480-400-80-80 80-80 80 80-80 80Zm-85-235L295-735l185-185 185 185-100 100-85-85-85 85ZM225-295 40-480l185-185 100 100-85 85 85 85-100 100Zm510 0L635-395l85-85-85-85 100-100 185 185-185 185ZM480-40 295-225l100-100 85 85 85-85 100 100L480-40Z"
-          />
-        </svg>
-        <h3>Opinionated & versatile</h3>
-        <p>Organized yet modular thanks to Angular components and dependency injection</p>
-      </div>
-      <div class="feature">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-          <path
-            d="M197-197q-54-55-85.5-127.5T80-480q0-84 31.5-156.5T197-763l57 57q-44 44-69 102t-25 124q0 67 25 125t69 101l-57 57Zm113-113q-32-33-51-76.5T240-480q0-51 19-94.5t51-75.5l57 57q-22 22-34.5 51T320-480q0 33 12.5 62t34.5 51l-57 57Zm170-90q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm170 90-57-57q22-22 34.5-51t12.5-62q0-33-12.5-62T593-593l57-57q32 32 51 75.5t19 94.5q0 50-19 93.5T650-310Zm113 113-57-57q44-44 69-102t25-124q0-67-25-125t-69-101l57-57q54 54 85.5 126.5T880-480q0 83-31.5 155.5T763-197Z"
-          />
-        </svg>
-        <h3>Reactive</h3>
-        <p>Fast state updates with fine-grained reactivity based on Angular Signals</p>
+  <section class="features-section">
+    <h2 id="features">Features that actually <br />help you solve problems</h2>
+
+    <div ngTabs class="material-tabs">
+      <div ngTabList selectionMode="follow" selectedTab="signals">
+        <div class="tab-background"></div>
+        <div ngTab value="signals">Signals</div>
+        <div ngTab value="control-flow">Control Flow</div>
+        <div ngTab value="deferrable-views">Deferrable Views</div>
+        <div ngTab value="hydration">Hydration</div>
       </div>
-      <div class="feature">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-          <path
-            d="M220-260q-92 0-156-64T0-480q0-92 64-156t156-64q37 0 71 13t61 37l68 62-60 54-62-56q-16-14-36-22t-42-8q-58 0-99 41t-41 99q0 58 41 99t99 41q22 0 42-8t36-22l310-280q27-24 61-37t71-13q92 0 156 64t64 156q0 92-64 156t-156 64q-37 0-71-13t-61-37l-68-62 60-54 62 56q16 14 36 22t42 8q58 0 99-41t41-99q0-58-41-99t-99-41q-22 0-42 8t-36 22L352-310q-27 24-61 37t-71 13Z"
-          />
-        </svg>
-        <h3>Fully featured</h3>
-        <p>
-          Everything works together with Angular's first-party modules for forms, routing, and more
-        </p>
+
+      <div class="sliding-window">
+        <div ngTabPanel [preserveContent]="true" value="signals">
+          @defer (on idle) {
+            <ng-template ngTabContent>
+              <adev-signals-demo />
+            </ng-template>
+          }
+        </div>
+
+        <div ngTabPanel [preserveContent]="true" value="control-flow">
+          @defer (on idle) {
+            <ng-template ngTabContent>
+              <adev-control-flow-example />
+            </ng-template>
+          }
+        </div>
+
+        <div ngTabPanel [preserveContent]="true" value="deferrable-views">
+          @defer (on idle) {
+            <ng-template ngTabContent>
+              <adev-defer-example />
+            </ng-template>
+          }
+        </div>
+
+        <div ngTabPanel [preserveContent]="true" value="hydration">
+          @defer (on idle) {
+            <ng-template ngTabContent>
+              <adev-hydration-example />
+            </ng-template>
+          }
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- -->
+  <section class="selling-points">
+    <h2>Enabling you to build<br />smarter and faster</h2>
+    <div class="cards">
+      <a class="card" routerLink="/ai/develop-with-ai">
+        <div class="icon-wrapper">
+          <docs-icon>auto_awesome</docs-icon>
+        </div>
+        <div class="card-content">
+          <h3>
+            <strong>AI-forward</strong> resources and integrations to supercharge your development
+            with AI
+          </h3>
+        </div>
+      </a>
+
+      <a class="card" routerLink="/essentials">
+        <div class="icon-wrapper">
+          <docs-icon>grid_view</docs-icon>
+        </div>
+        <div class="card-content">
+          <h3>
+            <strong>Opinionated & versatile,</strong> organized yet modular thanks to Angular
+            components and dependency injection
+          </h3>
+        </div>
+      </a>
+
+      <a class="card" routerLink="/essentials/signals">
+        <div class="icon-wrapper">
+          <docs-icon>sensors</docs-icon>
+        </div>
+        <div class="card-content">
+          <h3>
+            <strong>Reactive</strong> and fast state updates with fine-grained reactivity based on
+            Angular Signals
+          </h3>
+        </div>
+      </a>
+
+      <a class="card" routerLink="/overview">
+        <div class="icon-wrapper">
+          <docs-icon>layers</docs-icon>
+        </div>
+        <div class="card-content">
+          <h3>
+            <strong>Fully featured</strong> platform where everything works together with Angular's
+            first-party modules for forms, routing, and more
+          </h3>
+        </div>
+      </a>
+    </div>
+  </section>
 
-  <section class="performance">
-    <div class="section-content">
-      <div class="performance-half">
-        <h2>When performance matters</h2>
-        <p class="secondary">
+  <section class="performance-section" id="performance">
+    <div class="wrapper">
+      <div class="pattern"></div>
+      <div class="content">
+        <h2>Where performance matters</h2>
+        <h3>
           Trusted by millions to build fast, reliable applications that scale with the size of your
           team
-        </p>
-        <div class="docs-card-grid">
-          <a routerLink="/guide/signals" class="docs-card">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 -960 960 960"
-              height="24px"
-              width="24px"
-            >
-              <path
-                d="M197-197q-54-55-85.5-127.5T80-480q0-84 31.5-156.5T197-763l57 57q-44 44-69 102t-25 124q0 67 25 125t69 101l-57 57Zm113-113q-32-33-51-76.5T240-480q0-51 19-94.5t51-75.5l57 57q-22 22-34.5 51T320-480q0 33 12.5 62t34.5 51l-57 57Zm170-90q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm170 90-57-57q22-22 34.5-51t12.5-62q0-33-12.5-62T593-593l57-57q32 32 51 75.5t19 94.5q0 50-19 93.5T650-310Zm113 113-57-57q44-44 69-102t25-124q0-67-25-125t-69-101l57-57q54 54 85.5 126.5T880-480q0 83-31.5 155.5T763-197Z"
-              />
-            </svg>
-            <div class="card-content">
-              <p>Reactivity with signals makes it a breeze to manage your state</p>
-            </div>
-            <span>Explore signals</span>
-          </a>
-          <a routerLink="/guide/routing/rendering-strategies" class="docs-card">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24px"
-              viewBox="0 -960 960 960"
-              width="24px"
-            >
-              <path
-                d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-507h560v-133H200v133Zm0 214h560v-134H200v134Zm0 213h560v-133H200v133Zm40-454v-80h80v80h-80Zm0 214v-80h80v80h-80Zm0 214v-80h80v80h-80Z"
-              />
-            </svg>
-            <div class="card-content">
-              <p>
-                Meet your performance targets with SSR, SSG, hydration, and next generation deferred
-                loading
-              </p>
-            </div>
-            <span>Learn about rendering strategies</span>
-          </a>
-        </div>
-      </div>
-      <div class="performance-half">
-        <svg
-          width="558"
-          height="365"
-          viewBox="0 0 558 365"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+        </h3>
+        <button
+          class="docs-primary-btn"
+          [attr.text]="'Get started'"
+          routerLink="/guide/performance"
         >
-          <path
-            d="M228.166 59.3864L234.455 85.9391C241.018 84.5704 247.58 83.2017 254.143 82.3805L250.588 55.2803C242.932 56.3752 235.549 57.7439 228.166 59.3864Z"
-            fill="url(#paint0_linear_194_759)"
-          />
-          <path
-            d="M98.2778 145.614L120.427 161.765C124.255 156.29 128.631 151.089 133.006 146.162L112.771 127.821C107.575 133.57 102.653 139.592 98.2778 145.614Z"
-            fill="url(#paint1_linear_194_759)"
-          />
-          <path
-            d="M63.8232 217.06L90.0743 224.451C91.715 218.155 93.9026 211.585 96.3636 205.563L70.9329 195.435C68.1984 202.552 66.0108 209.669 63.8232 217.06Z"
-            fill="url(#paint2_linear_194_759)"
-          />
-          <path
-            d="M155.429 90.8662L170.468 113.587C175.937 110.028 181.68 106.469 187.696 103.458L174.844 79.3691C168.281 82.654 161.718 86.7601 155.429 90.8662Z"
-            fill="url(#paint3_linear_194_759)"
-          />
-          <path
-            d="M424.502 146.435C428.877 151.363 433.252 156.564 437.081 162.038L459.23 145.888C454.855 139.866 449.933 133.843 445.011 128.095L424.502 146.435Z"
-            fill="url(#paint4_linear_194_759)"
-          />
-          <path
-            d="M382.391 79.3691L369.539 103.458C375.281 106.469 381.023 110.028 386.766 113.587L401.806 90.8662C395.79 86.7601 389.227 82.9278 382.391 79.3691Z"
-            fill="url(#paint5_linear_194_759)"
-          />
-          <path
-            d="M486.301 195.435L460.871 205.289C463.332 211.585 465.519 217.881 467.16 224.177L493.411 216.786C491.497 209.943 489.036 202.552 486.301 195.435Z"
-            fill="url(#paint6_linear_194_759)"
-          />
-          <path
-            d="M363.523 13.6719L353.952 39.4034C454.581 71.1572 527.865 164.502 529.779 275.093H333.99L306.919 302.467H556.304L556.851 288.507C556.851 285.495 557.124 282.484 557.124 279.199C556.851 154.922 475.637 49.5318 363.523 13.6719Z"
-            fill="url(#paint7_linear_194_759)"
-          />
-          <path
-            d="M227.892 274.82H27.7281C29.9157 138.224 141.483 27.6328 278.754 27.6328C285.317 27.6328 291.879 27.9065 298.169 28.454L322.506 3.81741C308.286 1.6275 293.52 0.258789 278.48 0.258789C125.349 0.258789 0.383301 125.358 0.383301 278.926C0.383301 281.937 0.383301 284.948 0.656749 288.233L1.20365 302.194H217.501L227.892 274.82Z"
-            fill="url(#paint8_linear_194_759)"
-          />
-          <path
-            d="M341.373 13.9453L162.265 194.614L268.363 224.999L215.861 364.606L394.969 183.938L288.871 153.553L341.373 13.9453Z"
-            fill="url(#paint9_linear_194_759)"
-          />
-          <defs>
-            <linearGradient
-              id="paint0_linear_194_759"
-              x1="224.18"
-              y1="87.8605"
-              x2="263.436"
-              y2="48.6467"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint1_linear_194_759"
-              x1="102.734"
-              y1="158.687"
-              x2="131.291"
-              y2="130.162"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint2_linear_194_759"
-              x1="63.1336"
-              y1="227.404"
-              x2="100.224"
-              y2="190.353"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint3_linear_194_759"
-              x1="157.935"
-              y1="110.828"
-              x2="190.444"
-              y2="78.3545"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint4_linear_194_759"
-              x1="426.244"
-              y1="161.616"
-              x2="461.128"
-              y2="126.768"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint5_linear_194_759"
-              x1="368.074"
-              y1="113.184"
-              x2="405.694"
-              y2="75.6042"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint6_linear_194_759"
-              x1="459.571"
-              y1="228.959"
-              x2="499.852"
-              y2="188.721"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint7_linear_194_759"
-              x1="311.154"
-              y1="306.775"
-              x2="505.716"
-              y2="112.419"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint8_linear_194_759"
-              x1="20.4484"
-              y1="321.544"
-              x2="330.571"
-              y2="11.7518"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint9_linear_194_759"
-              x1="223.592"
-              y1="-19.7554"
-              x2="484.225"
-              y2="256.555"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-          </defs>
-        </svg>
+          <!-- TODO: LINK -->
+          Get started
+        </button>
       </div>
     </div>
   </section>
 
-  <!-- -->
+  <section class="explore-section" id="learn-more">
+    <div class="title">
+      <h2>What to learn more about Angular?</h2>
+      <div class="pattern"></div>
+    </div>
 
-  <section class="learn-more">
-    <div class="section-content">
-      <h2 id="learn-more">Want to learn more?</h2>
-      <div class="docs-card-grid">
-        <a routerLink="/tutorials/learn-angular" class="docs-card">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-            <path
-              d="m188.15-529.46 108.7 46.15q19.15-38.3 41.57-75.42 22.43-37.11 48.5-71.04l-75.53-14.84q-3.08-.77-5.97.19-2.88.96-5.19 3.27L188.15-529.46Zm144.77 73.69 127.62 127.62q55.46-26 104.88-59 49.42-33 84.66-68.23 75.23-75.23 111.11-154.27 35.89-79.04 41.19-188.35-109.69 5.31-188.34 41-78.66 35.69-153.89 110.92-35.23 35.24-68.23 84.85-33 49.62-59 105.46Zm229.77-102.92q-18.08-17.69-18.08-43.92t18.08-44.31Q580.77-665 607.19-665t44.5 18.08q18.08 18.08 18.08 44.31 0 26.23-18.08 43.92-18.08 18.08-44.5 18.08t-44.5-18.08Zm-29.23 374.92 112.08-111.69q2.3-2.31 3.07-5.39.77-3.07.39-5.77l-15.23-75.53q-33.93 25.69-70.85 48.11-36.92 22.42-75.61 41.96l46.15 108.31Zm314.08-659q5.53 126.39-34.97 228.19-40.5 101.81-129.11 190.04-2.54 2.54-4.88 5.08-2.35 2.54-4.89 4.69l19.69 98.85q2.62 14.61-1.69 28.03-4.31 13.43-14.54 23.66L518.08-104.54l-75.77-177.61-156.16-155.77-177.22-76.54 159.3-158.69q10.62-10.23 24.04-14.73t28.04-1.5l99.23 19.69q2.54-2.15 4.69-4.39 2.16-2.23 4.69-4.38 88.62-88.61 190.23-129.23 101.62-40.61 228.39-35.08ZM175.16-320q29.23-29.61 71.07-29.54 41.85.08 71.46 29.31 29.23 29.23 28.92 71.08-.3 41.84-29.53 71.46-23.7 23.3-72.43 38.96-48.73 15.65-134.26 26.04 10.38-85.54 25.73-134.77 15.34-49.23 39.04-72.54Zm31.61 33q-13.61 14.61-24.42 44.88-10.81 30.27-17.27 74.5 44.23-6.84 74.5-17.65 30.27-10.81 44.88-24.81 17.08-15.46 17.39-38.46.3-23-16.16-40.08-17.07-16.46-40.07-15.96T206.77-287Z"
-            />
-          </svg>
-          <div class="card-content">
-            <h3>New to Angular?</h3>
-            <p>
-              Try our completely in browser tutorial lessons designed to give you hands on
-              experience with Angular.
-            </p>
-            <p class="secondary">
-              Recommended for developers new to Angular looking to dive right into the code
-            </p>
-            <span>Start coding</span>
-          </div>
-        </a>
-        <a routerLink="/essentials" class="docs-card">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-            <path
-              d="M557.69-577.46v-38q32.62-15.15 68.27-22.73 35.66-7.58 74.04-7.58 24.08 0 46.77 3.42 22.69 3.43 45.54 9.04v35.54q-22.46-7.85-44.66-11.38-22.19-3.54-47.65-3.54-38.38 0-74.35 9.11-35.96 9.12-67.96 26.12Zm0 219.23v-39.38q31.85-14.85 68.08-22.27 36.23-7.43 74.23-7.43 24.08 0 46.77 3.43 22.69 3.42 45.54 9.03v35.54q-22.46-7.84-44.66-11.38-22.19-3.54-47.65-3.54-38.38 0-74.35 9.19-35.96 9.19-67.96 26.81Zm0-109.23v-38.77q32.62-15.15 68.27-22.73 35.66-7.58 74.04-7.58 24.08 0 46.77 3.42 22.69 3.43 45.54 9.04v35.54q-22.46-7.85-44.66-11.38-22.19-3.54-47.65-3.54-38.38 0-74.35 9.5-35.96 9.5-67.96 26.5ZM251.08-304.62q54.53 0 106.11 12.89 51.58 12.88 101.73 39.42v-417.38q-45-31.92-99.04-48.81-54.04-16.88-108.8-16.88-37.61 0-69.5 7.38t-67.73 20.23q-4.62 1.54-6.54 4.42-1.92 2.89-1.92 6.35v406.31q0 5 3.84 7.5 3.85 2.5 8.46.96 25.62-11.31 60.7-16.85 35.07-5.54 72.69-5.54Zm253.23 52.31q50.38-26.54 99.92-39.42 49.54-12.89 104.69-12.89 37.62 0 73.5 5.23 35.89 5.24 59.89 13.31 4.61 1.93 8.46-.57 3.84-2.5 3.84-7.89V-697q0-3.46-1.92-6.15-1.92-2.7-6.54-4.62-33.61-14.69-66.43-21.15-32.83-6.46-70.8-6.46-55.15 0-107.57 16.88-52.43 16.89-97.04 48.81v417.38Zm-22.89 67.69q-50.8-35.69-109.65-54.84-58.85-19.16-120.69-19.16-32.47 0-63.77 6.7-31.31 6.69-62.85 17.38-23.1 10.23-43.78-4.34T60-279.46v-420.31q0-15.77 7.77-29t22.54-19.92q37.77-16.54 78.34-24.31t82.43-7.77q62.19 0 120.75 17.39Q430.38-746 481.62-711q50.23-35 108.15-52.38 57.92-17.39 119.15-17.39 41.65 0 82.02 7.77t78.14 24.31q14.76 6.61 22.84 19.88t8.08 29.04v420.31q0 27.12-22.31 41.67-22.31 14.56-45.08 2.48-30.15-10.92-61.15-17.11-31-6.2-62.54-6.2-61.94 0-119.32 19.46-57.37 19.47-108.18 54.54ZM282.15-493.23Z"
-            />
-          </svg>
-          <div class="card-content">
-            <h3>More of a reader?</h3>
-            <p>
-              Our essentials guides are designed to help you understand Angular fundamentals in the
-              time it would take to finish a cup of coffee (or tea).
-            </p>
-            <p class="secondary">
-              Recommended for developers with framework experience but want quick overview of
-              concepts
-            </p>
-            <span>Angular concepts</span>
-          </div>
-        </a>
-        <a routerLink="/overview" class="docs-card">
-          <svg class="angular-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 223 236">
-            <g clip-path="url(#a)">
-              <path
-                fill="url(#b)"
-                d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-              />
-              <path
-                fill="url(#c)"
-                d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-              />
-            </g>
-            <defs>
-              <linearGradient
-                id="b"
-                x1="49.009"
-                x2="225.829"
-                y1="213.75"
-                y2="129.722"
-                gradientUnits="userSpaceOnUse"
-              >
-                <stop stop-color="#E40035" />
-                <stop offset=".24" stop-color="#F60A48" />
-                <stop offset=".352" stop-color="#F20755" />
-                <stop offset=".494" stop-color="#DC087D" />
-                <stop offset=".745" stop-color="#9717E7" />
-                <stop offset="1" stop-color="#6C00F5" />
-              </linearGradient>
-              <linearGradient
-                id="c"
-                x1="41.025"
-                x2="156.741"
-                y1="28.344"
-                y2="160.344"
-                gradientUnits="userSpaceOnUse"
-              >
-                <stop stop-color="#FF31D9" />
-                <stop offset="1" stop-color="#FF5BE1" stop-opacity="0" />
-              </linearGradient>
-              <clipPath id="a">
-                <path fill="#fff" d="M0 0h223v236H0z" />
-              </clipPath>
-            </defs>
-          </svg>
-          <div class="card-content">
-            <h3>Why Angular?</h3>
-            <p>Learn about Angular, its benefits, and if it's right for you.</p>
-            <p class="secondary">
-              Recommended for developers seeking to learn more about the Angular framework
-            </p>
-            <span>About Angular</span>
-          </div>
-        </a>
-        <a routerLink="/ai" class="docs-card">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <g>
-              <polygon points="19,9 20.25,6.25 23,5 20.25,3.75 19,1 17.75,3.75 15,5 17.75,6.25" />
-              <polygon
-                points="19,15 17.75,17.75 15,19 17.75,20.25 19,23 20.25,20.25 23,19 20.25,17.75"
-              />
-              <path
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.2"
-                d="M 11.5 9.5 L 9 4 L 6.5 9.5 L 1 12 l 5.5 2.5 L 9 20 l 2.5 -5.5 L 17 12 L 11.5 9.5 z z"
-              />
-            </g>
-          </svg>
-          <div class="card-content">
-            <h3>Are you an LLM or curious about AI in Angular?</h3>
-            <p>
-              Head over to our AI section to find prompts, strategies, best practices, examples, and
-              more.
-            </p>
-            <p class="secondary">
-              Recommended for robots... and developers who want to get the most out of Angular and
-              AI
-            </p>
-            <span>Angular + AI</span>
+    <div class="cards-grid">
+      <!-- Card 1: Tutorials -->
+      <a routerLink="/tutorials/learn-angular" class="explore-card">
+        <div class="card-content">
+          <p>
+            <span class="emphasis">New to Angular?</span>
+            Try our completely in browser tutorial lessons designed to give you hands on experience
+            with Angular.
+          </p>
+          <span class="fake-button">Start coding <docs-icon>arrow_forward</docs-icon></span>
+          <div class="editor-background"></div>
+        </div>
+      </a>
+
+      <!-- Card 2: AI -->
+      <a routerLink="/ai" class="explore-card">
+        <div class="card-content">
+          <p>
+            <span class="emphasis">Are you an LLM or curious about AI in Angular?</span>
+            Head over to our AI section to find prompts, strategies, best practices, examples, and
+            more.
+          </p>
+          <span class="fake-button">Angular + AI <docs-icon>arrow_forward</docs-icon></span>
+          <div class="angular-mcp-container">
+            <div class="mcp-content">
+              <div class="mcp-label">Angular MCP</div>
+              <div class="mcp-pills">
+                <span class="mcp-pill">get_best_practices</span>
+                <span class="mcp-pill">ai_tutor</span>
+                <span class="mcp-pill">find_examples</span>
+              </div>
+            </div>
           </div>
-        </a>
-      </div>
+        </div>
+      </a>
+
+      <!-- Card 3: Overview -->
+      <a routerLink="/overview" class="explore-card">
+        <div class="card-content">
+          <p>
+            <span class="emphasis">Why Angular?</span>
+            Learn about Angular, its benefits, and if it's right for you.
+          </p>
+          <div class="logo-background"></div>
+        </div>
+      </a>
+
+      <!-- Card 4: Essentials -->
+      <a routerLink="/essentials" class="explore-card">
+        <div class="card-content">
+          <p>
+            <span class="emphasis">More of a reader?</span>
+            Our essentials guides are designed to help you understand Angular fundamentals in the
+            time it would take to finish a cup of coffee (or a tea).
+          </p>
+          <span class="fake-button">Angular concepts <docs-icon>arrow_forward</docs-icon></span>
+        </div>
+      </a>
+    </div>
+  </section>
+
+  <section class="learn-more-bottom-section" id="bottom">
+    <div class="pattern"></div>
+    <div class="content">
+      <h2>Want to learn more about Angular ?</h2>
+      <button
+        class="docs-primary-btn"
+        [attr.text]="'Learn more'"
+        aria-label="Learn more"
+        routerLink="/overview"
+      >
+        Learn more
+      </button>
     </div>
   </section>
 </main>
diff --git a/adev-ja/src/app/features/home/home.component.html b/adev-ja/src/app/features/home/home.component.html
index c1931ceb0..f4883d45b 100644
--- a/adev-ja/src/app/features/home/home.component.html
+++ b/adev-ja/src/app/features/home/home.component.html
@@ -1,487 +1,242 @@
 <main class="adev-home" #home>
-  <div class="banners-layer layer">
-    <div class="adev-banner-container">
-      <a href="events/v21" class="adev-banner" target="_blank">
-        <h1 tabindex="-1">Angular v21がリリースされました！</h1>
-        <p class="adev-banner-cta">🕹️ 冒険を始めよう</p>
-      </a>
-    </div>
-  </div>
   <section class="logo-section">
-    @if (!isUwu) {
-      <!-- Angular logo -->
-      <div class="logo-layer">
-        <svg class="svg" viewBox="0 0 1280 400" xmlns="http://www.w3.org/2000/svg">
-          <defs>
-            <!-- Do not remove `gradientTransform` attribute. Safari needs it in order to start the animation. -->
-            <linearGradient
-              id="gradient"
-              gradientUnits="userSpaceOnUse"
-              gradientTransform="rotate(0 640 125)"
-            >
-              <stop offset="0" stop-color="#ed0100" />
-              <stop offset="0.25" stop-color="#e449b4" />
-              <stop offset="0.5" stop-color="#ae3bfc" />
-              <stop offset="1" stop-color="#7f15fd" />
-              <animateTransform
-                attributeName="gradientTransform"
-                type="rotate"
-                from="0 640 125"
-                to="360 640 125"
-                dur="6.5s"
-                repeatCount="indefinite"
-              />
-            </linearGradient>
-          </defs>
-          <g class="wrapper" fill="url(#gradient)">
-            <g class="logo">
-              <g class="shield">
-                <path
-                  class="shield-base"
-                  d="M311.8,101.7L302,255.6L208.3,53.8L311.8,101.7ZM246.9,300.7L176.1,341.1L105.3,300.7L246.9,300.7ZM50.1,255.6L40.4,101.7L143.9,53.8L50.1,255.6Z"
-                />
-                <path class="shield-middle" d="M176.1,130.4L213.2,220.6L139,220.6L176.1,130.4Z" />
-                <path
-                  class="shield-bottom-a-arc"
-                  d="M106.419,301.339L105.3,300.7L119.7,265.8L232.5,265.8L246.9,300.7L245.781,301.339L106.419,301.339Z"
-                />
-              </g>
-              <path
-                class="capt-a-letter letter"
-                d="M515.4,288L553.1,288L484.4,92.7L440.7,92.7L372,288L409.7,288L425.8,239.9L499.2,239.9L515.4,288ZM435.4,211.4L461.8,132.8L463.3,132.8L489.7,211.4L435.4,211.4Z"
-              />
-              <path
-                class="n-letter letter"
-                d="M590.4,202.2L590.4,288L555.9,288L555.9,141.6L588.9,141.6L588.9,166.5L590.6,166.5C594,158.3 599.4,151.8 606.8,147C614.2,142.2 623.4,139.8 634.3,139.8C644.4,139.8 653.2,142 660.8,146.3C668.3,150.6 674.2,156.9 678.3,165.1C682.5,173.3 684.5,183.2 684.4,194.9L684.4,288L649.9,288L649.9,200.1C649.9,190.3 647.4,182.7 642.3,177.1C637.2,171.6 630.3,168.8 621.4,168.8C615.4,168.8 610,170.1 605.3,172.8C600.6,175.4 597,179.2 594.3,184.2C591.8,189.1 590.4,195.1 590.4,202.2Z"
-              />
-              <path
-                class="g-letter letter"
-                d="M760.5,345.9C748.1,345.9 737.5,344.2 728.6,340.9C719.7,337.6 712.6,333.1 707.2,327.5C701.8,321.9 698,315.7 696,308.9L727.1,301.4C728.5,304.3 730.5,307.1 733.2,309.9C735.9,312.7 739.5,315.1 744,317C748.5,318.9 754.3,319.8 761.2,319.8C771,319.8 779.1,317.4 785.5,312.7C791.9,308 795.1,300.2 795.1,289.4L795.1,261.7L793.4,261.7C791.6,265.3 789,268.9 785.6,272.7C782.2,276.5 777.7,279.6 772.2,282.1C766.6,284.6 759.7,285.9 751.3,285.9C740.1,285.9 729.9,283.2 720.7,277.9C711.6,272.6 704.3,264.6 699,254.1C693.6,243.5 690.9,230.3 690.9,214.3C690.9,198.2 693.6,184.6 699,173.5C704.4,162.4 711.6,154 720.8,148.2C730,142.4 740.2,139.6 751.4,139.6C760,139.6 767.1,141 772.6,143.9C778.2,146.8 782.6,150.3 785.9,154.3C789.2,158.3 791.7,162.1 793.4,165.7L795.3,165.7L795.3,141.5L829.3,141.5L829.3,290.3C829.3,302.8 826.3,313.2 820.3,321.4C814.3,329.6 806.2,335.7 795.8,339.8C785.4,343.9 773.6,345.9 760.5,345.9ZM760.8,258.8C768.1,258.8 774.3,257 779.5,253.5C784.6,249.9 788.6,244.8 791.2,238.2C793.9,231.5 795.2,223.5 795.2,214.2C795.2,205 793.9,196.9 791.2,190C788.6,183.1 784.7,177.7 779.6,173.8C774.5,170 768.2,168 760.8,168C753.1,168 746.7,170 741.5,174C736.4,178 732.5,183.5 729.9,190.4C727.3,197.4 726,205.3 726,214.1C726,223.1 727.3,230.9 730,237.6C732.6,244.3 736.5,249.5 741.7,253.2C746.8,256.9 753.2,258.8 760.8,258.8Z"
-              />
-              <path
-                class="u-letter letter"
-                d="M933.8,226.4L933.8,141.6L968.3,141.6L968.3,288L934.8,288L934.8,262L933.3,262C930,270.2 924.6,276.9 917,282.1C909.5,287.3 900.2,289.9 889.2,289.9C879.6,289.9 871.1,287.8 863.8,283.5C856.5,279.2 850.7,273 846.6,264.7C842.5,256.5 840.4,246.5 840.4,234.8L840.4,141.6L875,141.6L875,229.5C875,238.8 877.5,246.2 882.6,251.6C887.7,257.1 894.4,259.8 902.6,259.8C907.7,259.8 912.6,258.6 917.4,256.1C922.2,253.6 926.1,249.9 929.2,245C932.3,240 933.8,233.8 933.8,226.4Z"
-              />
-              <rect class="l-letter letter" x="979.6" y="92.7" width="34.5" height="195.3" />
-              <path
-                class="a-letter letter"
-                d="M1068.9,290.9C1059.6,290.9 1051.3,289.2 1043.9,285.9C1036.5,282.6 1030.6,277.6 1026.4,271.1C1022.1,264.6 1020,256.5 1020,246.9C1020,238.6 1021.5,231.8 1024.6,226.4C1027.7,221 1031.8,216.7 1037.1,213.4C1042.4,210.2 1048.3,207.7 1055,206C1061.6,204.3 1068.5,203.1 1075.6,202.3C1084.2,201.4 1091.1,200.6 1096.5,199.9C1101.8,199.2 1105.7,198 1108.2,196.5C1110.6,194.9 1111.9,192.5 1111.9,189.2L1111.9,188.6C1111.9,181.4 1109.8,175.9 1105.5,171.9C1101.2,168 1095.1,166 1087.1,166C1078.6,166 1072,167.8 1067,171.5C1062.1,175.2 1058.8,179.5 1057,184.6L1024.8,180C1027.3,171.1 1031.5,163.7 1037.4,157.6C1043.2,151.6 1050.4,147.1 1058.8,144.1C1067.3,141.1 1076.6,139.6 1086.8,139.6C1093.9,139.6 1100.9,140.4 1107.9,142.1C1114.9,143.8 1121.3,146.5 1127.1,150.3C1132.9,154.1 1137.5,159.2 1141.1,165.7C1144.6,172.2 1146.4,180.3 1146.4,190L1146.4,288L1113.2,288L1113.2,267.9L1112.1,267.9C1110,272 1107.1,275.8 1103.3,279.3C1099.5,282.8 1094.8,285.7 1089.1,287.8C1083.2,289.9 1076.6,290.9 1068.9,290.9ZM1077.9,265.6C1084.8,265.6 1090.8,264.2 1095.9,261.5C1101,258.7 1104.9,255.1 1107.7,250.5C1110.5,245.9 1111.8,240.9 1111.8,235.5L1111.8,218.2C1110.7,219.1 1108.9,219.9 1106.3,220.7C1103.7,221.5 1100.9,222.1 1097.7,222.7C1094.5,223.3 1091.4,223.8 1088.3,224.2C1085.2,224.6 1082.5,225 1080.2,225.3C1075.1,226 1070.4,227.1 1066.4,228.7C1062.3,230.3 1059.1,232.5 1056.8,235.3C1054.4,238.1 1053.3,241.8 1053.3,246.2C1053.3,252.6 1055.6,257.4 1060.3,260.6C1064.8,264 1070.7,265.6 1077.9,265.6Z"
-              />
-              <path
-                class="r-letter letter"
-                d="M1156.9,288L1156.9,141.6L1190.4,141.6L1190.4,166L1191.9,166C1194.6,157.5 1199.2,151 1205.7,146.4C1212.2,141.8 1219.7,139.5 1228.1,139.5C1230,139.5 1232.2,139.6 1234.5,139.7C1236.9,139.9 1238.9,140.1 1240.5,140.4L1240.5,172.1C1239,171.6 1236.7,171.1 1233.6,170.7C1230.5,170.3 1227.4,170.1 1224.5,170.1C1218.2,170.1 1212.6,171.5 1207.6,174.2C1202.6,176.9 1198.7,180.6 1195.8,185.4C1192.9,190.2 1191.5,195.7 1191.5,201.9L1191.5,288L1156.9,288Z"
-              />
-            </g>
-          </g>
-        </svg>
-        <h2>スケーラブルなWebアプリを自信を持って構築するフレームワーク</h2>
-      </div>
-    } @else {
-      <!-- UwU logo -->
-      <div layerId="uwu" class="uwu-layer">
-        <img src="assets/images/uwu.png" alt="Angular logo" />
+    <div class="pattern"></div>
+    <div class="content">
+      <div class="adev-banner-container">
+        <a href="events/v21" class="adev-banner" target="_blank">
+          <h1 tabindex="-1">Angular v21がリリースされました！</h1>
+          <p class="adev-banner-cta">🕹️ 冒険を始めよう</p>
+        </a>
+
+        <div class="search-field">
+          <docs-text-field placeholder="search" (click)="openSearch()" />
+        </div>
       </div>
-    }
 
-    <div class="learn-angular">
-      <a href="#learn-more" class="adev-cta">
-        <button class="docs-primary-btn" [attr.text]="'今すぐ始める'" aria-label="今すぐ始める">
-          今すぐ始める
-        </button>
-      </a>
-      <div class="adev-arrow"></div>
+      @if (!isUwu) {
+        <div class="title">
+          <h2>生産性と<br />スケーラビリティの両立</h2>
+          <h3>スケーラブルなWebアプリを自信を持って構築するフレームワーク</h3>
+        </div>
+      } @else {
+        <!-- UwU logo -->
+        <div class="uwu">
+          <img src="assets/images/uwu.png" alt="Angular logo" />
+        </div>
+      }
+
+      <div class="learn-angular">
+        <a href="#learn-more" class="adev-cta">
+          <button class="docs-primary-btn" [attr.text]="'今すぐ始める'" aria-label="今すぐ始める">
+            今すぐ始める
+          </button>
+        </a>
+        <div class="adev-arrow"></div>
+      </div>
     </div>
   </section>
 
-  <section class="features">
-    <h2>開発効率とスケーラビリティを両立</h2>
-    <div class="features-grid">
-      <div class="feature">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <g><rect fill="none" height="24" width="24" x="0" /></g>
-          <g>
-            <g>
-              <polygon points="19,9 20.25,6.25 23,5 20.25,3.75 19,1 17.75,3.75 15,5 17.75,6.25" />
-              <polygon
-                points="19,15 17.75,17.75 15,19 17.75,20.25 19,23 20.25,20.25 23,19 20.25,17.75"
-              />
-              <path
-                d="M11.5,9.5L9,4L6.5,9.5L1,12l5.5,2.5L9,20l2.5-5.5L17,12L11.5,9.5z M9.99,12.99L9,15.17l-0.99-2.18L5.83,12l2.18-0.99 L9,8.83l0.99,2.18L12.17,12L9.99,12.99z"
-              />
-            </g>
-          </g>
-        </svg>
-        <h3>AI志向</h3>
-        <p>AIで開発を加速させるリソースと統合機能が充実</p>
-      </div>
-      <div class="feature">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-          <path
-            d="m480-400-80-80 80-80 80 80-80 80Zm-85-235L295-735l185-185 185 185-100 100-85-85-85 85ZM225-295 40-480l185-185 100 100-85 85 85 85-100 100Zm510 0L635-395l85-85-85-85 100-100 185 185-185 185ZM480-40 295-225l100-100 85 85 85-85 100 100L480-40Z"
-          />
-        </svg>
-        <h3>堅牢かつ柔軟</h3>
-        <p>Angularコンポーネントと依存性注入で、構造化と柔軟性を実現</p>
-      </div>
-      <div class="feature">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-          <path
-            d="M197-197q-54-55-85.5-127.5T80-480q0-84 31.5-156.5T197-763l57 57q-44 44-69 102t-25 124q0 67 25 125t69 101l-57 57Zm113-113q-32-33-51-76.5T240-480q0-51 19-94.5t51-75.5l57 57q-22 22-34.5 51T320-480q0 33 12.5 62t34.5 51l-57 57Zm170-90q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm170 90-57-57q22-22 34.5-51t12.5-62q0-33-12.5-62T593-593l57-57q32 32 51 75.5t19 94.5q0 50-19 93.5T650-310Zm113 113-57-57q44-44 69-102t25-124q0-67-25-125t-69-101l57-57q54 54 85.5 126.5T880-480q0 83-31.5 155.5T763-197Z"
-          />
-        </svg>
-        <h3>リアクティブ</h3>
-        <p>Angular Signalsで実現する高速で細やかな状態管理</p>
+  <section class="features-section">
+    <h2 id="features">問題解決に役立つ機能</h2>
+
+    <div ngTabs class="material-tabs">
+      <div ngTabList selectionMode="follow" selectedTab="signals">
+        <div class="tab-background"></div>
+        <div ngTab value="signals">Signals</div>
+        <div ngTab value="control-flow">Control Flow</div>
+        <div ngTab value="deferrable-views">Deferrable Views</div>
+        <div ngTab value="hydration">Hydration</div>
       </div>
-      <div class="feature">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-          <path
-            d="M220-260q-92 0-156-64T0-480q0-92 64-156t156-64q37 0 71 13t61 37l68 62-60 54-62-56q-16-14-36-22t-42-8q-58 0-99 41t-41 99q0 58 41 99t99 41q22 0 42-8t36-22l310-280q27-24 61-37t71-13q92 0 156 64t64 156q0 92-64 156t-156 64q-37 0-71-13t-61-37l-68-62 60-54 62 56q16 14 36 22t42 8q58 0 99-41t41-99q0-58-41-99t-99-41q-22 0-42 8t-36 22L352-310q-27 24-61 37t-71 13Z"
-          />
-        </svg>
-        <h3>オールインワン</h3>
-        <p>
-          フォーム、ルーティングなど、Angularの公式モジュールがシームレスに連携
-        </p>
+
+      <div class="sliding-window">
+        <div ngTabPanel [preserveContent]="true" value="signals">
+          @defer (on idle) {
+            <ng-template ngTabContent>
+              <adev-signals-demo />
+            </ng-template>
+          }
+        </div>
+
+        <div ngTabPanel [preserveContent]="true" value="control-flow">
+          @defer (on idle) {
+            <ng-template ngTabContent>
+              <adev-control-flow-example />
+            </ng-template>
+          }
+        </div>
+
+        <div ngTabPanel [preserveContent]="true" value="deferrable-views">
+          @defer (on idle) {
+            <ng-template ngTabContent>
+              <adev-defer-example />
+            </ng-template>
+          }
+        </div>
+
+        <div ngTabPanel [preserveContent]="true" value="hydration">
+          @defer (on idle) {
+            <ng-template ngTabContent>
+              <adev-hydration-example />
+            </ng-template>
+          }
+        </div>
       </div>
     </div>
   </section>
 
-  <!-- -->
+  <section class="selling-points">
+    <h2>より賢く、より速く<br />構築できるように</h2>
+    <div class="cards">
+      <a class="card" routerLink="/ai/develop-with-ai">
+        <div class="icon-wrapper">
+          <docs-icon>auto_awesome</docs-icon>
+        </div>
+        <div class="card-content">
+          <h3>
+            <strong>AI志向の</strong>リソースと統合機能で、
+            AIを活用した開発を加速
+          </h3>
+        </div>
+      </a>
 
-  <section class="performance">
-    <div class="section-content">
-      <div class="performance-half">
-        <h2>パフォーマンスが決め手のプロジェクトに</h2>
-        <p class="secondary">
-          チーム規模に応じてスケールする高速で信頼性の高いアプリケーション構築で世界中の何百万もの開発者に選ばれています。
+      <a class="card" routerLink="/essentials">
+        <div class="icon-wrapper">
+          <docs-icon>grid_view</docs-icon>
+        </div>
+        <div class="card-content">
+          <h3>
+            <strong>堅牢かつ柔軟で、</strong>Angularコンポーネントと依存性の注入により
+            構造化されたモジュラー設計を実現
+          </h3>
+        </div>
+      </a>
 
-        </p>
-        <div class="docs-card-grid">
-          <a routerLink="/guide/signals" class="docs-card">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 -960 960 960"
-              height="24px"
-              width="24px"
-            >
-              <path
-                d="M197-197q-54-55-85.5-127.5T80-480q0-84 31.5-156.5T197-763l57 57q-44 44-69 102t-25 124q0 67 25 125t69 101l-57 57Zm113-113q-32-33-51-76.5T240-480q0-51 19-94.5t51-75.5l57 57q-22 22-34.5 51T320-480q0 33 12.5 62t34.5 51l-57 57Zm170-90q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm170 90-57-57q22-22 34.5-51t12.5-62q0-33-12.5-62T593-593l57-57q32 32 51 75.5t19 94.5q0 50-19 93.5T650-310Zm113 113-57-57q44-44 69-102t25-124q0-67-25-125t-69-101l57-57q54 54 85.5 126.5T880-480q0 83-31.5 155.5T763-197Z"
-              />
-            </svg>
-            <div class="card-content">
-              <p>シグナルのリアクティビティで状態管理がとても簡単に</p>
-            </div>
-            <span>シグナルを詳しく見る</span>
-          </a>
-          <a routerLink="/guide/routing/rendering-strategies" class="docs-card">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24px"
-              viewBox="0 -960 960 960"
-              width="24px"
-            >
-              <path
-                d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-507h560v-133H200v133Zm0 214h560v-134H200v134Zm0 213h560v-133H200v133Zm40-454v-80h80v80h-80Zm0 214v-80h80v80h-80Zm0 214v-80h80v80h-80Z"
-              />
-            </svg>
-            <div class="card-content">
-              <p>
-                SSR、SSG、ハイドレーション、次世代の遅延ロードでパフォーマンス目標を確実に達成
+      <a class="card" routerLink="/essentials/signals">
+        <div class="icon-wrapper">
+          <docs-icon>sensors</docs-icon>
+        </div>
+        <div class="card-content">
+          <h3>
+            <strong>リアクティブで</strong>Angular Signalsに基づく細やかなリアクティビティによる
+            高速な状態更新
+          </h3>
+        </div>
+      </a>
 
-              </p>
-            </div>
-            <span>レンダリング戦略を学ぶ</span>
-          </a>
+      <a class="card" routerLink="/overview">
+        <div class="icon-wrapper">
+          <docs-icon>layers</docs-icon>
         </div>
-      </div>
-      <div class="performance-half">
-        <svg
-          width="558"
-          height="365"
-          viewBox="0 0 558 365"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+        <div class="card-content">
+          <h3>
+            <strong>フル機能の</strong>プラットフォームで、フォームやルーティングなど、
+            Angular公式モジュールがシームレスに連携
+          </h3>
+        </div>
+      </a>
+    </div>
+  </section>
+
+  <section class="performance-section" id="performance">
+    <div class="wrapper">
+      <div class="pattern"></div>
+      <div class="content">
+        <h2>パフォーマンスが重要な場所で</h2>
+        <h3>
+          チームの規模に応じてスケールする、高速で信頼性の高いアプリケーションの構築で
+          何百万もの開発者に信頼されています
+        </h3>
+        <button
+          class="docs-primary-btn"
+          [attr.text]="'今すぐ始める'"
+          routerLink="/guide/performance"
         >
-          <path
-            d="M228.166 59.3864L234.455 85.9391C241.018 84.5704 247.58 83.2017 254.143 82.3805L250.588 55.2803C242.932 56.3752 235.549 57.7439 228.166 59.3864Z"
-            fill="url(#paint0_linear_194_759)"
-          />
-          <path
-            d="M98.2778 145.614L120.427 161.765C124.255 156.29 128.631 151.089 133.006 146.162L112.771 127.821C107.575 133.57 102.653 139.592 98.2778 145.614Z"
-            fill="url(#paint1_linear_194_759)"
-          />
-          <path
-            d="M63.8232 217.06L90.0743 224.451C91.715 218.155 93.9026 211.585 96.3636 205.563L70.9329 195.435C68.1984 202.552 66.0108 209.669 63.8232 217.06Z"
-            fill="url(#paint2_linear_194_759)"
-          />
-          <path
-            d="M155.429 90.8662L170.468 113.587C175.937 110.028 181.68 106.469 187.696 103.458L174.844 79.3691C168.281 82.654 161.718 86.7601 155.429 90.8662Z"
-            fill="url(#paint3_linear_194_759)"
-          />
-          <path
-            d="M424.502 146.435C428.877 151.363 433.252 156.564 437.081 162.038L459.23 145.888C454.855 139.866 449.933 133.843 445.011 128.095L424.502 146.435Z"
-            fill="url(#paint4_linear_194_759)"
-          />
-          <path
-            d="M382.391 79.3691L369.539 103.458C375.281 106.469 381.023 110.028 386.766 113.587L401.806 90.8662C395.79 86.7601 389.227 82.9278 382.391 79.3691Z"
-            fill="url(#paint5_linear_194_759)"
-          />
-          <path
-            d="M486.301 195.435L460.871 205.289C463.332 211.585 465.519 217.881 467.16 224.177L493.411 216.786C491.497 209.943 489.036 202.552 486.301 195.435Z"
-            fill="url(#paint6_linear_194_759)"
-          />
-          <path
-            d="M363.523 13.6719L353.952 39.4034C454.581 71.1572 527.865 164.502 529.779 275.093H333.99L306.919 302.467H556.304L556.851 288.507C556.851 285.495 557.124 282.484 557.124 279.199C556.851 154.922 475.637 49.5318 363.523 13.6719Z"
-            fill="url(#paint7_linear_194_759)"
-          />
-          <path
-            d="M227.892 274.82H27.7281C29.9157 138.224 141.483 27.6328 278.754 27.6328C285.317 27.6328 291.879 27.9065 298.169 28.454L322.506 3.81741C308.286 1.6275 293.52 0.258789 278.48 0.258789C125.349 0.258789 0.383301 125.358 0.383301 278.926C0.383301 281.937 0.383301 284.948 0.656749 288.233L1.20365 302.194H217.501L227.892 274.82Z"
-            fill="url(#paint8_linear_194_759)"
-          />
-          <path
-            d="M341.373 13.9453L162.265 194.614L268.363 224.999L215.861 364.606L394.969 183.938L288.871 153.553L341.373 13.9453Z"
-            fill="url(#paint9_linear_194_759)"
-          />
-          <defs>
-            <linearGradient
-              id="paint0_linear_194_759"
-              x1="224.18"
-              y1="87.8605"
-              x2="263.436"
-              y2="48.6467"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint1_linear_194_759"
-              x1="102.734"
-              y1="158.687"
-              x2="131.291"
-              y2="130.162"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint2_linear_194_759"
-              x1="63.1336"
-              y1="227.404"
-              x2="100.224"
-              y2="190.353"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint3_linear_194_759"
-              x1="157.935"
-              y1="110.828"
-              x2="190.444"
-              y2="78.3545"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint4_linear_194_759"
-              x1="426.244"
-              y1="161.616"
-              x2="461.128"
-              y2="126.768"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint5_linear_194_759"
-              x1="368.074"
-              y1="113.184"
-              x2="405.694"
-              y2="75.6042"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint6_linear_194_759"
-              x1="459.571"
-              y1="228.959"
-              x2="499.852"
-              y2="188.721"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint7_linear_194_759"
-              x1="311.154"
-              y1="306.775"
-              x2="505.716"
-              y2="112.419"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint8_linear_194_759"
-              x1="20.4484"
-              y1="321.544"
-              x2="330.571"
-              y2="11.7518"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-            <linearGradient
-              id="paint9_linear_194_759"
-              x1="223.592"
-              y1="-19.7554"
-              x2="484.225"
-              y2="256.555"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#F941EA" />
-              <stop offset="1" stop-color="#9138FF" />
-            </linearGradient>
-          </defs>
-        </svg>
+          <!-- TODO: LINK -->
+          今すぐ始める
+        </button>
       </div>
     </div>
   </section>
 
-  <!-- -->
+  <section class="explore-section" id="learn-more">
+    <div class="title">
+      <h2>Angularについてもっと学びませんか？</h2>
+      <div class="pattern"></div>
+    </div>
 
-  <section class="learn-more">
-    <div class="section-content">
-      <h2 id="learn-more">さあ、Angularを始めよう</h2>
-      <div class="docs-card-grid">
-        <a routerLink="/tutorials/learn-angular" class="docs-card">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-            <path
-              d="m188.15-529.46 108.7 46.15q19.15-38.3 41.57-75.42 22.43-37.11 48.5-71.04l-75.53-14.84q-3.08-.77-5.97.19-2.88.96-5.19 3.27L188.15-529.46Zm144.77 73.69 127.62 127.62q55.46-26 104.88-59 49.42-33 84.66-68.23 75.23-75.23 111.11-154.27 35.89-79.04 41.19-188.35-109.69 5.31-188.34 41-78.66 35.69-153.89 110.92-35.23 35.24-68.23 84.85-33 49.62-59 105.46Zm229.77-102.92q-18.08-17.69-18.08-43.92t18.08-44.31Q580.77-665 607.19-665t44.5 18.08q18.08 18.08 18.08 44.31 0 26.23-18.08 43.92-18.08 18.08-44.5 18.08t-44.5-18.08Zm-29.23 374.92 112.08-111.69q2.3-2.31 3.07-5.39.77-3.07.39-5.77l-15.23-75.53q-33.93 25.69-70.85 48.11-36.92 22.42-75.61 41.96l46.15 108.31Zm314.08-659q5.53 126.39-34.97 228.19-40.5 101.81-129.11 190.04-2.54 2.54-4.88 5.08-2.35 2.54-4.89 4.69l19.69 98.85q2.62 14.61-1.69 28.03-4.31 13.43-14.54 23.66L518.08-104.54l-75.77-177.61-156.16-155.77-177.22-76.54 159.3-158.69q10.62-10.23 24.04-14.73t28.04-1.5l99.23 19.69q2.54-2.15 4.69-4.39 2.16-2.23 4.69-4.38 88.62-88.61 190.23-129.23 101.62-40.61 228.39-35.08ZM175.16-320q29.23-29.61 71.07-29.54 41.85.08 71.46 29.31 29.23 29.23 28.92 71.08-.3 41.84-29.53 71.46-23.7 23.3-72.43 38.96-48.73 15.65-134.26 26.04 10.38-85.54 25.73-134.77 15.34-49.23 39.04-72.54Zm31.61 33q-13.61 14.61-24.42 44.88-10.81 30.27-17.27 74.5 44.23-6.84 74.5-17.65 30.27-10.81 44.88-24.81 17.08-15.46 17.39-38.46.3-23-16.16-40.08-17.07-16.46-40.07-15.96T206.77-287Z"
-            />
-          </svg>
-          <div class="card-content">
-            <h3>Angular初心者の方へ</h3>
-            <p>
-              ブラウザ上で完結するインタラクティブなチュートリアルで、Angularの実践的なスキルを身につけましょう。
+    <div class="cards-grid">
+      <!-- Card 1: Tutorials -->
+      <a routerLink="/tutorials/learn-angular" class="explore-card">
+        <div class="card-content">
+          <p>
+            <span class="emphasis">Angularは初めてですか？</span>
+            Angularの実践的な経験を積むために設計された、完全にブラウザ内で完結するチュートリアルレッスンを
+            お試しください。
+          </p>
+          <span class="fake-button">コーディングを始める <docs-icon>arrow_forward</docs-icon></span>
+          <div class="editor-background"></div>
+        </div>
+      </a>
 
-            </p>
-            <p class="secondary">
-              Angularが初めてで、まずはコードを書いて学びたい開発者におすすめ
-            </p>
-            <span>コーディングを始める</span>
+      <!-- Card 2: AI -->
+      <a routerLink="/ai" class="explore-card">
+        <div class="card-content">
+          <p>
+            <span class="emphasis">LLMですか、それともAngularでのAIに興味がありますか？</span>
+            AIセクションにアクセスして、プロンプト、戦略、ベストプラクティス、実例などを
+            ご覧ください。
+          </p>
+          <span class="fake-button">Angular + AI <docs-icon>arrow_forward</docs-icon></span>
+          <div class="angular-mcp-container">
+            <div class="mcp-content">
+              <div class="mcp-label">Angular MCP</div>
+              <div class="mcp-pills">
+                <span class="mcp-pill">get_best_practices</span>
+                <span class="mcp-pill">ai_tutor</span>
+                <span class="mcp-pill">find_examples</span>
+              </div>
+            </div>
           </div>
-        </a>
-        <a routerLink="/essentials" class="docs-card">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-            <path
-              d="M557.69-577.46v-38q32.62-15.15 68.27-22.73 35.66-7.58 74.04-7.58 24.08 0 46.77 3.42 22.69 3.43 45.54 9.04v35.54q-22.46-7.85-44.66-11.38-22.19-3.54-47.65-3.54-38.38 0-74.35 9.11-35.96 9.12-67.96 26.12Zm0 219.23v-39.38q31.85-14.85 68.08-22.27 36.23-7.43 74.23-7.43 24.08 0 46.77 3.43 22.69 3.42 45.54 9.03v35.54q-22.46-7.84-44.66-11.38-22.19-3.54-47.65-3.54-38.38 0-74.35 9.19-35.96 9.19-67.96 26.81Zm0-109.23v-38.77q32.62-15.15 68.27-22.73 35.66-7.58 74.04-7.58 24.08 0 46.77 3.42 22.69 3.43 45.54 9.04v35.54q-22.46-7.85-44.66-11.38-22.19-3.54-47.65-3.54-38.38 0-74.35 9.5-35.96 9.5-67.96 26.5ZM251.08-304.62q54.53 0 106.11 12.89 51.58 12.88 101.73 39.42v-417.38q-45-31.92-99.04-48.81-54.04-16.88-108.8-16.88-37.61 0-69.5 7.38t-67.73 20.23q-4.62 1.54-6.54 4.42-1.92 2.89-1.92 6.35v406.31q0 5 3.84 7.5 3.85 2.5 8.46.96 25.62-11.31 60.7-16.85 35.07-5.54 72.69-5.54Zm253.23 52.31q50.38-26.54 99.92-39.42 49.54-12.89 104.69-12.89 37.62 0 73.5 5.23 35.89 5.24 59.89 13.31 4.61 1.93 8.46-.57 3.84-2.5 3.84-7.89V-697q0-3.46-1.92-6.15-1.92-2.7-6.54-4.62-33.61-14.69-66.43-21.15-32.83-6.46-70.8-6.46-55.15 0-107.57 16.88-52.43 16.89-97.04 48.81v417.38Zm-22.89 67.69q-50.8-35.69-109.65-54.84-58.85-19.16-120.69-19.16-32.47 0-63.77 6.7-31.31 6.69-62.85 17.38-23.1 10.23-43.78-4.34T60-279.46v-420.31q0-15.77 7.77-29t22.54-19.92q37.77-16.54 78.34-24.31t82.43-7.77q62.19 0 120.75 17.39Q430.38-746 481.62-711q50.23-35 108.15-52.38 57.92-17.39 119.15-17.39 41.65 0 82.02 7.77t78.14 24.31q14.76 6.61 22.84 19.88t8.08 29.04v420.31q0 27.12-22.31 41.67-22.31 14.56-45.08 2.48-30.15-10.92-61.15-17.11-31-6.2-62.54-6.2-61.94 0-119.32 19.46-57.37 19.47-108.18 54.54ZM282.15-493.23Z"
-            />
-          </svg>
-          <div class="card-content">
-            <h3>じっくり読んで学びたい方へ</h3>
-            <p>
-              コーヒー一杯分の時間で、Angularの基本概念を効率よく理解できるガイドをご用意しています。
+        </div>
+      </a>
 
-            </p>
-            <p class="secondary">
-              他のフレームワーク経験があり、Angularの概要を素早く把握したい開発者におすすめ
-            </p>
-            <span>基本概念を学ぶ</span>
-          </div>
-        </a>
-        <a routerLink="/overview" class="docs-card">
-          <svg class="angular-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 223 236">
-            <g clip-path="url(#a)">
-              <path
-                fill="url(#b)"
-                d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-              />
-              <path
-                fill="url(#c)"
-                d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z"
-              />
-            </g>
-            <defs>
-              <linearGradient
-                id="b"
-                x1="49.009"
-                x2="225.829"
-                y1="213.75"
-                y2="129.722"
-                gradientUnits="userSpaceOnUse"
-              >
-                <stop stop-color="#E40035" />
-                <stop offset=".24" stop-color="#F60A48" />
-                <stop offset=".352" stop-color="#F20755" />
-                <stop offset=".494" stop-color="#DC087D" />
-                <stop offset=".745" stop-color="#9717E7" />
-                <stop offset="1" stop-color="#6C00F5" />
-              </linearGradient>
-              <linearGradient
-                id="c"
-                x1="41.025"
-                x2="156.741"
-                y1="28.344"
-                y2="160.344"
-                gradientUnits="userSpaceOnUse"
-              >
-                <stop stop-color="#FF31D9" />
-                <stop offset="1" stop-color="#FF5BE1" stop-opacity="0" />
-              </linearGradient>
-              <clipPath id="a">
-                <path fill="#fff" d="M0 0h223v236H0z" />
-              </clipPath>
-            </defs>
-          </svg>
-          <div class="card-content">
-            <h3>なぜAngularを選ぶのか？</h3>
-            <p>Angularの特徴や利点を知り、あなたのプロジェクトに最適かどうか確認してみましょう。</p>
-            <p class="secondary">
-              Angularフレームワークについて詳しく知りたい開発者におすすめ
-            </p>
-            <span>Angularについて学ぶ</span>
-          </div>
-        </a>
-        <a routerLink="/ai" class="docs-card">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <g>
-              <polygon points="19,9 20.25,6.25 23,5 20.25,3.75 19,1 17.75,3.75 15,5 17.75,6.25" />
-              <polygon
-                points="19,15 17.75,17.75 15,19 17.75,20.25 19,23 20.25,20.25 23,19 20.25,17.75"
-              />
-              <path
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.2"
-                d="M 11.5 9.5 L 9 4 L 6.5 9.5 L 1 12 l 5.5 2.5 L 9 20 l 2.5 -5.5 L 17 12 L 11.5 9.5 z z"
-              />
-            </g>
-          </svg>
-          <div class="card-content">
-            <h3>AIとAngularの組み合わせに興味がありますか？</h3>
-            <p>
-              効果的なプロンプト、開発戦略、ベストプラクティス、実践例など、AIとAngularを組み合わせた開発に役立つ情報が満載です。
+      <!-- Card 3: Overview -->
+      <a routerLink="/overview" class="explore-card">
+        <div class="card-content">
+          <p>
+            <span class="emphasis">なぜAngularなのか？</span>
+            Angularについて、その利点、そしてあなたに適しているかどうかを学びましょう。
+          </p>
+          <div class="logo-background"></div>
+        </div>
+      </a>
 
-            </p>
-            <p class="secondary">
-              ロボット用...そしてAngularとAIを最大限活用したい開発者におすすめ
-            </p>
-            <span>Angular + AI</span>
-          </div>
-        </a>
-      </div>
+      <!-- Card 4: Essentials -->
+      <a routerLink="/essentials" class="explore-card">
+        <div class="card-content">
+          <p>
+            <span class="emphasis">じっくり読んで学びたいですか？</span>
+            コーヒー（または紅茶）を飲み終わる時間で、Angularの基礎を理解できるように設計された基本ガイドを
+            ご用意しています。
+          </p>
+          <span class="fake-button">Angularの概念 <docs-icon>arrow_forward</docs-icon></span>
+        </div>
+      </a>
+    </div>
+  </section>
+
+  <section class="learn-more-bottom-section" id="bottom">
+    <div class="pattern"></div>
+    <div class="content">
+      <h2>Angularについてもっと学びたいですか ?</h2>
+      <button
+        class="docs-primary-btn"
+        [attr.text]="'詳しく見る'"
+        aria-label="詳しく見る"
+        routerLink="/overview"
+      >
+        詳しく見る
+      </button>
     </div>
   </section>
 </main>

From 5a3852eac3a61c3617748378b9169c6a3c9e4aa0 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 10:41:53 +0900
Subject: [PATCH 32/55] fix(docs): improve home page h2/h3 translations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refine marketing copy for Japanese home page:
- Use concise noun-ending style (体言止め)
- Remove overly literal translations
- Improve readability while preserving original meaning
---
 .../src/app/features/home/home.component.html | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/adev-ja/src/app/features/home/home.component.html b/adev-ja/src/app/features/home/home.component.html
index f4883d45b..c1dc3a432 100644
--- a/adev-ja/src/app/features/home/home.component.html
+++ b/adev-ja/src/app/features/home/home.component.html
@@ -15,8 +15,8 @@ <h1 tabindex="-1">Angular v21がリリースされました！</h1>
 
       @if (!isUwu) {
         <div class="title">
-          <h2>生産性と<br />スケーラビリティの両立</h2>
-          <h3>スケーラブルなWebアプリを自信を持って構築するフレームワーク</h3>
+          <h2>生産性 × スケーラビリティ</h2>
+          <h3>スケーラブルなWebアプリを確信を持って構築できるフレームワーク</h3>
         </div>
       } @else {
         <!-- UwU logo -->
@@ -85,7 +85,7 @@ <h2 id="features">問題解決に役立つ機能</h2>
   </section>
 
   <section class="selling-points">
-    <h2>より賢く、より速く<br />構築できるように</h2>
+    <h2>よりスマートに、より速い構築</h2>
     <div class="cards">
       <a class="card" routerLink="/ai/develop-with-ai">
         <div class="icon-wrapper">
@@ -94,7 +94,7 @@ <h2>より賢く、より速く<br />構築できるように</h2>
         <div class="card-content">
           <h3>
             <strong>AI志向の</strong>リソースと統合機能で、
-            AIを活用した開発を加速
+            AI活用の開発を加速
           </h3>
         </div>
       </a>
@@ -105,8 +105,8 @@ <h3>
         </div>
         <div class="card-content">
           <h3>
-            <strong>堅牢かつ柔軟で、</strong>Angularコンポーネントと依存性の注入により
-            構造化されたモジュラー設計を実現
+            <strong>堅牢かつ柔軟。</strong>Angularコンポーネントと依存性の注入による
+            構造化されたモジュラー設計
           </h3>
         </div>
       </a>
@@ -117,7 +117,7 @@ <h3>
         </div>
         <div class="card-content">
           <h3>
-            <strong>リアクティブで</strong>Angular Signalsに基づく細やかなリアクティビティによる
+            <strong>リアクティブ。</strong>Angular Signalsの細やかなリアクティビティによる
             高速な状態更新
           </h3>
         </div>
@@ -129,7 +129,7 @@ <h3>
         </div>
         <div class="card-content">
           <h3>
-            <strong>フル機能の</strong>プラットフォームで、フォームやルーティングなど、
+            <strong>フル機能</strong>プラットフォーム。フォームやルーティングなど
             Angular公式モジュールがシームレスに連携
           </h3>
         </div>
@@ -141,10 +141,10 @@ <h3>
     <div class="wrapper">
       <div class="pattern"></div>
       <div class="content">
-        <h2>パフォーマンスが重要な場所で</h2>
+        <h2>パフォーマンスが重要な場面</h2>
         <h3>
-          チームの規模に応じてスケールする、高速で信頼性の高いアプリケーションの構築で
-          何百万もの開発者に信頼されています
+          チームの成長に合わせてスケールする高速で信頼性の高いアプリケーション構築。
+          数百万の開発者が信頼
         </h3>
         <button
           class="docs-primary-btn"
@@ -160,7 +160,7 @@ <h3>
 
   <section class="explore-section" id="learn-more">
     <div class="title">
-      <h2>Angularについてもっと学びませんか？</h2>
+      <h2>Angularについてもっと学ぶには</h2>
       <div class="pattern"></div>
     </div>
 
@@ -228,7 +228,7 @@ <h2>Angularについてもっと学びませんか？</h2>
   <section class="learn-more-bottom-section" id="bottom">
     <div class="pattern"></div>
     <div class="content">
-      <h2>Angularについてもっと学びたいですか ?</h2>
+      <h2>Angularについてもっと学びたい？</h2>
       <button
         class="docs-primary-btn"
         [attr.text]="'詳しく見る'"

From 3cb513473e732a905182dd18e4f1c1e0e1c68b49 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 10:42:49 +0900
Subject: [PATCH 33/55] fix(docs): fix textlint errors in elements and zoneless
 guides
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- elements.md: avoid consecutive 例えば
- zoneless.md: avoid consecutive で助詞
---
 adev-ja/src/content/guide/elements.md | 2 +-
 adev-ja/src/content/guide/zoneless.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/adev-ja/src/content/guide/elements.md b/adev-ja/src/content/guide/elements.md
index 564ddd8ec..666450299 100644
--- a/adev-ja/src/content/guide/elements.md
+++ b/adev-ja/src/content/guide/elements.md
@@ -72,7 +72,7 @@ IMPORTANT: コンポーネントのセレクターをカスタム要素のタグ
 
 - コンポーネントの出力はHTMLの[カスタムイベント](https://developer.mozilla.org/docs/Web/API/CustomEvent)としてディスパッチされ、カスタムイベントの名前は出力名と一致します。
   例えば、`valueChanged = output()`を持つコンポーネントの場合、対応するカスタム要素は"valueChanged"という名前のイベントをディスパッチし、出力されたデータはイベントの`detail`プロパティに格納されます。
-  エイリアスを提供した場合、その値が使用されます。例えば、`clicks = output<string>({alias: 'myClick'});`は"myClick"という名前のディスパッチイベントを生成します。
+  エイリアスを提供した場合、その値が使用されます。たとえば、`clicks = output<string>({alias: 'myClick'});`は"myClick"という名前のディスパッチイベントを生成します。
 
 詳細については、Webコンポーネントのドキュメントの[カスタムイベントの作成](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#creating_custom_events)を参照してください。
 
diff --git a/adev-ja/src/content/guide/zoneless.md b/adev-ja/src/content/guide/zoneless.md
index 8c95885d5..4e25fbb22 100644
--- a/adev-ja/src/content/guide/zoneless.md
+++ b/adev-ja/src/content/guide/zoneless.md
@@ -129,7 +129,7 @@ readonly myObservableState = someObservable.pipe(pendingUntilEvent());
 
 `TestBed`は、`polyfills`経由で`zone.js`がロードされている場合、デフォルトでZoneベースの変更検知を使用します。
 
-`zone.js`が存在しない場合、`TestBed`はデフォルトでZonelessで実行されます。`zone.js`がロードされている場合にZonelessモードを強制するには、`provideZonelessChangeDetection()`を追加します:
+`zone.js`が存在しない場合、`TestBed`はデフォルトでZonelessとして実行されます。`zone.js`がロードされている場合にZonelessモードを強制するには、`provideZonelessChangeDetection()`を追加します:
 
 ```typescript
 TestBed.configureTestingModule({

From 5f6910ca5ac4d846c0f15a1058ca23f61b659114 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 10:55:56 +0900
Subject: [PATCH 34/55] fix(docs): add missing anchor ID to binding guide
 heading

Add {#binding-dynamic-properties-and-attributes} anchor ID to fix
broken link from a11y.md
---
 adev-ja/src/content/guide/templates/binding.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adev-ja/src/content/guide/templates/binding.md b/adev-ja/src/content/guide/templates/binding.md
index 142b250ec..c79cf5264 100644
--- a/adev-ja/src/content/guide/templates/binding.md
+++ b/adev-ja/src/content/guide/templates/binding.md
@@ -56,7 +56,7 @@ export class App {
 
 すべての式の値は文字列に変換されます。オブジェクトと配列は、値の`toString`メソッドを使用して変換されます。
 
-## 動的なプロパティと属性のバインディング
+## 動的なプロパティと属性のバインディング {#binding-dynamic-properties-and-attributes}
 
 Angularは、角括弧を使用して、動的な値をオブジェクトのプロパティとHTML属性にバインドすることをサポートしています。
 

From 2201cc36a2c47539705e6d515caeb4fe0245faf7 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:13:26 +0900
Subject: [PATCH 35/55] fix(docs): migrate devtools translation to split files

Migrate existing devtools.md translation to new split structure:
- devtools/overview.md
- devtools/component.md
- devtools/profiler.md
- devtools/injectors.md

New sections (Deferrable views, Hydration) remain untranslated.
---
 adev-ja/src/content/tools/devtools.en.md      | 196 ------------------
 adev-ja/src/content/tools/devtools.md         | 196 ------------------
 .../content/tools/devtools/component.en.md    |  76 +++++++
 .../src/content/tools/devtools/component.md   |  68 +++---
 .../content/tools/devtools/injectors.en.md    |  23 ++
 .../src/content/tools/devtools/injectors.md   |  24 +--
 .../src/content/tools/devtools/overview.en.md |  47 +++++
 .../src/content/tools/devtools/overview.md    |  56 ++---
 .../src/content/tools/devtools/profiler.en.md |  76 +++++++
 .../src/content/tools/devtools/profiler.md    |  92 ++++----
 10 files changed, 342 insertions(+), 512 deletions(-)
 delete mode 100644 adev-ja/src/content/tools/devtools.en.md
 delete mode 100644 adev-ja/src/content/tools/devtools.md
 create mode 100644 adev-ja/src/content/tools/devtools/component.en.md
 create mode 100644 adev-ja/src/content/tools/devtools/injectors.en.md
 create mode 100644 adev-ja/src/content/tools/devtools/overview.en.md
 create mode 100644 adev-ja/src/content/tools/devtools/profiler.en.md

diff --git a/adev-ja/src/content/tools/devtools.en.md b/adev-ja/src/content/tools/devtools.en.md
deleted file mode 100644
index b4216907d..000000000
--- a/adev-ja/src/content/tools/devtools.en.md
+++ /dev/null
@@ -1,196 +0,0 @@
-# DevTools Overview
-
-Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications.
-
-<docs-video src="https://www.youtube.com/embed/bavWOHZM6zE"/>
-
-Install Angular DevTools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) or from [Firefox Addons](https://addons.mozilla.org/firefox/addon/angular-devtools/).
-
-You can open Chrome or Firefox DevTools on any web page by pressing <kbd>F12</kbd> or <kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd></kbd> (Windows or Linux) and <kbd><kbd>Fn</kbd>+<kbd>F12</kbd></kbd> or <kbd><kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd></kbd> (Mac).
-Once browser DevTools is open and Angular DevTools is installed, you can find it under the "Angular" tab.
-
-HELPFUL: Chrome's new tab page does not run installed extensions, so the Angular tab will not appear in DevTools. Visit any other page to see it.
-
-<img src="assets/images/guide/devtools/devtools.png" alt="An overview of Angular DevTools showing a tree of components for an application.">
-
-## Open your application
-
-When you open the extension, you'll see two additional tabs:
-
-| Tabs                                     | Details |
-|:---                                      |:---     |
-| [Components](tools/devtools#debug-your-application) | Lets you explore the components and directives in your application and preview or edit their state.                    |
-| [Profiler](tools/devtools#profile-your-application)     | Lets you profile your application and understand what the performance bottleneck is during change detection execution. |
-
-<img src="assets/images/guide/devtools/devtools-tabs.png" alt="A screenshot of the top of Angular DevTools illustrating two tabs in the upper-left corner, one labeled 'Components' and another labeled 'Profiler'.">
-
-In the top-right corner of Angular DevTools you'll find which version of Angular is running on the page as well as the latest commit hash for the extension.
-
-### Angular application not detected
-
-If you see an error message "Angular application not detected" when opening Angular DevTools, this means it is not able to communicate with an Angular app on the page.
-The most common reason for this is because the web page you are inspecting does not contain an Angular application.
-Double check that you are inspecting the right web page and that the Angular app is running.
-
-### We detected an application built with production configuration
-
-If you see an error message "We detected an application built with production configuration. Angular DevTools only supports development builds.", this means that an Angular application was found on the page, but it was compiled with production optimizations.
-When compiling for production, Angular CLI removes various debug features to minimize the amount of the JavaScript on the page to improve performance. This includes features needed to communicate with DevTools.
-
-To run DevTools, you need to compile your application with optimizations disabled. `ng serve` does this by default.
-If you need to debug a deployed application, disable optimizations in your build with the [`optimization` configuration option](reference/configs/workspace-config#optimization-configuration) (`{"optimization": false}`).
-
-## Debug your application
-
-The **Components** tab lets you explore the structure of your application.
-You can visualize the component and directive instances in the DOM and inspect or modify their state.
-
-### Explore the application structure
-
-The component tree displays a hierarchical relationship of the *components and directives* within your application.
-
-<img src="assets/images/guide/devtools/component-explorer.png" alt="A screenshot of the 'Components' tab showing a tree of Angular components and directives starting the root of the application.">
-
-Click the individual components or directives in the component explorer to select them and preview their properties.
-Angular DevTools displays properties and metadata on the right side of the component tree.
-
-To look up a component or directive by name use the search box above the component tree.
-
-<img src="assets/images/guide/devtools/search.png" alt="A screenshot of the 'Components' tab. The filter bar immediately underneath the tab is searching for 'todo' and all components with 'todo' in the name are highlighted in the tree. `app-todos` is currently selected and a sidebar to the right displays information about the component's properties. This includes a section of `@Output` fields and another section for other properties.">
-
-### Navigate to the host node
-
-To go to the host element of a particular component or directive, double-click it in the component explorer.
-Angular DevTools will open the Elements tab in Chrome or the Inspector tab in Firefox, and select the associated DOM node.
-
-### Navigate to source
-
-For components, Angular DevTools lets you navigate to the component definition in the Sources tab (Chrome) and Debugger tab (Firefox).
-After you select a particular component, click the icon at the top-right of the properties view:
-
-<img src="assets/images/guide/devtools/navigate-source.png" alt="A screenshot of the 'Components' tab. The properties view on the right is visible for a component and the mouse rests in the upper right corner of that view on top of a `<>` icon. An adjacent tooltip reads 'Open component source'.">
-
-### Update property value
-
-Like browsers' DevTools, the properties view lets you edit the value of an input, output, or other properties.
-Right-click on the property value and if edit functionality is available for this value type, a text input will appear.
-Type the new value and press `Enter` to apply this value to the property.
-
-<img src="assets/images/guide/devtools/update-property.png" alt="A screenshot of the 'Components' tab with the properties view open for a component. An `@Input` named `todo` contains a `label` property which is currently selected and has been manually updated to the value 'Buy milk'.">
-
-### Access selected component or directive in console
-
-As a shortcut in the console, Angular DevTools provides access to instances of recently selected components or directives.
-Type `$ng0` to get a reference to the instance of the currently selected component or directive, and type `$ng1` for the previously selected instance, `$ng2` for the instance selected before that, and so on.
-
-<img src="assets/images/guide/devtools/access-console.png" alt="A screenshot of the 'Components' tab with the browser console underneath. In the console, the user has typed three commands, `$ng0`, `$ng1`, and `$ng2` to view the three most recently selected elements. After each statement, the console prints a different component reference.">
-
-### Select a directive or component
-
-Similar to browsers' DevTools, you can inspect the page to select a particular component or directive.
-Click the ***Inspect element*** icon in the top left corner within Angular DevTools and hover over a DOM element on the page.
-The extension recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree.
-
-<img src="assets/images/guide/devtools/inspect-element.png" alt="A screenshot of the 'Components' tab with an Angular todo application visible. In the very top-left corner of Angular DevTools, an icon of a screen with a mouse icon inside it is selected. The mouse rests on a todo element in the Angular application UI. The element is highlighted with a `<TodoComponent>` label displayed in an adjacent tooltip.">
-
-## Profile your application
-
-The **Profiler** tab lets you visualize the execution of Angular's change detection.
-This is useful for determining when and how change detection impacts your application's performance.
-
-<img src="assets/images/guide/devtools/profiler.png" alt="A screenshot of the 'Profiler' tab which reads 'Click the play button to start a new recording, or upload a json file containing profiler data.' Next to this is a record button to being recording a new profile as well as a file picker to select an existing profile.">
-
-The Profiler tab lets you start profiling the current application or import an existing profile from a previous run.
-To start profiling your application, hover over the circle in the top-left corner within the **Profiler** tab and click **Start recording**.
-
-During profiling, Angular DevTools captures execution events, such as change detection and lifecycle hook execution.
-Interact with your application to trigger change detection and generate data Angular DevTools can use.
-To finish recording, click the circle again to **Stop recording**.
-
-You can also import an existing recording.
-Read more about this feature in the [Import recording](tools/devtools#import-and-export-recordings) section.
-
-### Understand your application's execution
-
-After recording or importing a profile, Angular DevTools displays a visualization of change detection cycles.
-
-<img src="assets/images/guide/devtools/default-profiler-view.png" alt="A screenshot of the 'Profiler' tab after a profile has been recorded or uploaded. It displays a bar chart illustrating various change detection cycles with some text which reads 'Select a bar to preview a particular change detection cycle'.">
-
-Each bar in the sequence represents a change detection cycle in your app.
-The taller a bar is, the longer the application spent running change detection in this cycle.
-When you select a bar, DevTools displays useful information about it including:
-
-* A bar chart with all the components and directives that it captured during this cycle
-* How much time Angular spent running change detection in this cycle.
-* An estimated frame rate as experienced by the user.
-* The source which triggered change detection.
-
-<img src="assets/images/guide/devtools/profiler-selected-bar.png" alt="A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu displays 'Bar chart`, showing a second bar chart underneath it. The new chart has two bars which take up the majority of the space, one labeled `TodosComponent` and the other labeled `NgForOf`. The other bars are small enough to be negligible in comparison.">
-
-### Understand component execution
-
-The bar chart displayed after clicking on a change detection cycle displays a detailed view about how much time your application spent running change detection in that particular component or directive.
-
-This example shows the total time spent by the `NgForOf` directive and which method was called on it.
-
-<img src="assets/images/guide/devtools/directive-details.png" alt="A screenshot of the 'Profiler' tab where the `NgForOf` bar is selected. A detailed view of `NgForOf` is visible to the right where it lists 'Total time spent: 1.76 ms'. It includes a with exactly one row, listing `NgForOf` as a directives with an `ngDoCheck` method which took 1.76 ms. It also includes a list labeled 'Parent Hierarchy' containing the parent components of this directive.">
-
-### Hierarchical views
-
-<img src="assets/images/guide/devtools/flame-graph-view.png" alt="A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu now displays 'Flame graph', showing a flame graph underneath it. The flame graph starts with a row called 'Entire application' and another row called 'AppComponent'. Beneath those, the rows start to break up into multiple items, starting with `[RouterOutlet]` and `DemoAppComponent` on the third row. A few layers deep, one cell is highlighted red.">
-
-You can also visualize the change detection execution in a flame graph-like view.
-
-Each tile in the graph represents an element on the screen at a specific position in the render tree.
-For example, consider a change detection cycle where a `LoggedOutUserComponent` is removed and in its place Angular rendered a `LoggedInUserComponent`. In this scenario both components will be displayed in the same tile.
-
-The x-axis represents the full time it took to render this change detection cycle.
-The y-axis represents the element hierarchy. Running change detection for an element requires render its directives and child components.
-Together, this graph visualizes which components are taking the longest time to render and where that time is going.
-
-Each tile is colored depending on how much time Angular spent there.
-Angular DevTools determines the intensity of the color by the time spent relative to the tile where rendering took the most time.
-
-When you click on a certain tile, you'll see details about it in the panel on the right.
-Double-clicking the tile zooms it in so you can more easily view its nested children.
-
-### Debug change detection and `OnPush` components
-
-Normally, the graph visualizes the time it takes to *render* an application, for any given change detection frame. However some components such as `OnPush` components will only re-render if their input properties change. It can be useful to visualize the flame graph without these components for particular frames.
-
-To visualize only the components in a change detection frame that went through the change detection process, select the **Change detection** checkbox at the top, above the flame graph.
-
-This view highlights all the components that went through change detection and displays those that did not in gray, such as `OnPush` components that did not re-render.
-
-<img src="assets/images/guide/devtools/debugging-onpush.png" alt="A screenshot of the 'Profiler' tab displaying a flame chart visualization of a change detection cycle. A checkbox labeled 'Show only change detection' is now checked. The flame graph looks very similar to before, however the color of components has changed from orange to blue. Several tiles labeled `[RouterOutlet]` are no longer highlighted with any color.">
-
-### Import and export recordings
-
-Click the **Save Profile** button at the top-right of a recorded profiling session to export it as a JSON file and save it to the disk.
-Later, import the file in the initial view of the profiler by clicking the **Choose file** input.
-
-<img src="assets/images/guide/devtools/save-profile.png" alt="A screenshot of the 'Profiler' tab displaying change detection cycles. On the right side a 'Save Profile' button is visible.">
-
- ## Inspect your injectors
-
- NOTE: The Injector Tree is available for Angular Applications built with version 17 or higher.
-
-### View the injector hierarchy of your application
-
- The **Injector Tree** tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the [injector hierarchy](guide/di/hierarchical-dependency-injection) of your application. One tree is your environment hierarchy, the other is your element hierarchy.
-
-<img src="assets/images/guide/devtools/di-injector-tree.png" alt="A screenshot of the 'Profiler' tab displaying the injector tree tab in Angular Devtools visualizing the injector graph for an example application.">
-
- ### Visualize resolution paths
-
- When a specific injector is selected, the path that Angular's dependency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy.
-
-See [resolution rules](guide/di/hierarchical-dependency-injection#resolution-rules) for more details about how Angular resolves resolution paths.
-
-<img src="assets/images/guide/devtools/di-injector-tree-selected.png" alt="A screenshot of the 'Profiler' tab displaying how the injector tree visualize highlights resolution paths when an injector is selected.">
-
- ### View injector providers
-
- Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type.
-
-<img src="assets/images/guide/devtools/di-injector-tree-providers.png" alt="A screenshot of the 'Profiler' tab displaying how providers are made visible when an injector is selected.">
diff --git a/adev-ja/src/content/tools/devtools.md b/adev-ja/src/content/tools/devtools.md
deleted file mode 100644
index c554526e5..000000000
--- a/adev-ja/src/content/tools/devtools.md
+++ /dev/null
@@ -1,196 +0,0 @@
-# DevToolsの概要
-
-Angular DevToolsは、Angularアプリケーションのデバッグとプロファイリング機能を提供するブラウザ拡張機能です。
-
-<docs-video src="https://www.youtube.com/embed/bavWOHZM6zE"/>
-
-Angular DevToolsは、[Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh)または[Firefox Addons](https://addons.mozilla.org/firefox/addon/angular-devtools/)からインストールできます。
-
-<kbd>F12</kbd>または<kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd></kbd>（WindowsまたはLinux）および<kbd><kbd>Fn</kbd>+<kbd>F12</kbd></kbd>または<kbd><kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd></kbd>（Mac）を押して、任意のWebページでChromeまたはFirefoxのDevToolsを開くことができます。
-ブラウザのDevToolsが開いていてAngular DevToolsがインストールされている場合は、「Angular」タブで見つけることができます。
-
-HELPFUL: Chromeの新しいタブページではインストールされている拡張機能は実行されないため、DevToolsに「Angular」タブは表示されません。表示するには、他のページにアクセスしてください。
-
-<img src="assets/images/guide/devtools/devtools.png" alt="アプリケーションのコンポーネントツリーを示すAngular DevToolsの概要。">
-
-## アプリケーションを開く
-
-拡張機能を開くと、次の2つの追加タブが表示されます。
-
-| タブ                                     | 詳細 |
-|:---                                      |:---     |
-| [Components](tools/devtools#debug-your-application) | アプリケーション内のコンポーネントとディレクティブを探索し、それらの状態をプレビューまたは編集できます。                    |
-| [Profiler](tools/devtools#profile-your-application)     | アプリケーションをプロファイルし、変更検知の実行中のパフォーマンスのボトルネックがどこにあるかを理解できます。 |
-
-<img src="assets/images/guide/devtools/devtools-tabs.png" alt="Angular DevToolsの上部を示すスクリーンショットで、左上の角に2つのタブが表示されています。1つは「Components」とラベル付けされ、もう1つは「Profiler」とラベル付けされています。">
-
-Angular DevToolsの右上隅には、ページで実行されているAngularのバージョンと、拡張機能の最新のコミットハッシュが表示されます。
-
-### Angularアプリケーションが検出されません
-
-Angular DevToolsを開くと、「Angularアプリケーションが検出されませんでした」というエラーメッセージが表示される場合、これはページ上のAngularアプリケーションと通信できないことを意味します。
-これは、検査しているWebページにAngularアプリケーションが含まれていないためです。
-適切なWebページを検査していること、およびAngularアプリケーションが実行されていることを確認してください。
-
-### プロダクション構成でビルドされたアプリケーションが検出されました
-
-「プロダクション構成でビルドされたアプリケーションが検出されました。Angular DevToolsは開発ビルドのみサポートしています。」というエラーメッセージが表示される場合、ページにAngularアプリケーションが見つかりましたが、プロダクション最適化でコンパイルされたことを意味します。
-プロダクション用にコンパイルすると、Angular CLIはパフォーマンスを向上させるために、ページ上のJavaScriptの量を最小限に抑えるために、さまざまなデバッグ機能を削除します。これには、DevToolsと通信するために必要な機能も含まれます。
-
-DevToolsを実行するには、最適化を無効にしてアプリケーションをコンパイルする必要があります。`ng serve`は、デフォルトでこれを実行します。
-デプロイされたアプリケーションをデバッグする必要がある場合は、[`optimization`構成オプション](reference/configs/workspace-config#optimization-configuration) (`{"optimization": false}`)を使用して、ビルドの最適化を無効にします。
-
-## アプリケーションのデバッグ {#debug-your-application}
-
-**Components**タブでは、アプリケーションの構造を探索できます。
-DOM内のコンポーネントとディレクティブのインスタンスを視覚化し、それらの状態を検査または変更できます。
-
-### アプリケーション構造の探索
-
-コンポーネントツリーは、アプリケーション内の*コンポーネントとディレクティブ*の階層的な関係を表示します。
-
-<img src="assets/images/guide/devtools/component-explorer.png" alt="アプリケーションのルートから始まるAngularコンポーネントとディレクティブのツリーを示す「Components」タブのスクリーンショット。">
-
-コンポーネントエクスプローラ内の個々のコンポーネントまたはディレクティブをクリックして選択し、それらのプロパティをプレビューします。
-Angular DevToolsは、コンポーネントツリーの右側で、プロパティとメタデータを表示します。
-
-コンポーネントツリーの上にある検索ボックスを使用して、名前でコンポーネントまたはディレクティブを検索します。
-
-<img src="assets/images/guide/devtools/search.png" alt="「Components」タブのスクリーンショット。タブのすぐ下にあるフィルタバーは「todo」を検索しており、「todo」が名前にあるすべてのコンポーネントがツリー内で強調表示されています。 `app-todos`が現在選択されており、右側のサイドバーにコンポーネントのプロパティに関する情報が表示されます。これには、`@Output`フィールドのセクションと、他のプロパティのセクションが含まれます。">
-
-### ホストノードに移動
-
-特定のコンポーネントやディレクティブのホスト要素に移動するには、コンポーネントエクスプローラでダブルクリックします。
-Angular DevToolsはChromeのElementsタブまたはFirefoxのInspectorタブを開き、関連するDOMノードを選択します。
-
-### ソースに移動
-
-コンポーネントの場合、Angular DevToolsはSourcesタブ（Chrome）とDebuggerタブ（Firefox）でコンポーネント定義に移動できます。
-特定のコンポーネントを選択したら、プロパティビューの右上にあるアイコンをクリックします。
-
-<img src="assets/images/guide/devtools/navigate-source.png" alt="「Components」タブのスクリーンショット。右側にコンポーネントのプロパティビューが表示され、マウスがビューの右上隅にある`<>`アイコンの上にあります。隣接するツールチップには「Open component source」と表示されます。">
-
-### プロパティ値の更新
-
-ブラウザのDevToolsと同様に、プロパティビューでは入力と出力、またはその他のプロパティの値を編集できます。
-プロパティ値を右クリックし、この値の種類で編集機能が利用可能な場合は、テキスト入力フィールドが表示されます。
-新しい値を入力して`Enter`キーを押すと、この値がプロパティに適用されます。
-
-<img src="assets/images/guide/devtools/update-property.png" alt="コンポーネントのプロパティビューが開いている「Components」タブのスクリーンショット。`todo`という`@Input`には、現在選択されており、値が「牛乳を買う」に手動で更新されている`label`プロパティが含まれています。">
-
-### コンソールで選択したコンポーネントまたはディレクティブにアクセス
-
-コンソールのショートカットとして、Angular DevToolsは、最近選択したコンポーネントやディレクティブのインスタンスへのアクセスを提供します。
-現在選択されているコンポーネントやディレクティブのインスタンスを参照するには`$ng0`と入力し、以前に選択したインスタンスを参照するには`$ng1`と入力し、さらに前に選択したインスタンスを参照するには`$ng2`と入力するなどします。
-
-<img src="assets/images/guide/devtools/access-console.png" alt="ブラウザコンソールの下にある「Components」タブのスクリーンショット。コンソールで、ユーザーは3つのコマンド、`$ng0`、`$ng1`、`$ng2`を入力して、最近選択した3つの要素を表示しています。各ステートメントの後、コンソールは異なるコンポーネント参照を出力します。">
-
-### ディレクティブまたはコンポーネントの選択
-
-ブラウザのDevToolsと同様にページを検査して、特定のコンポーネントやディレクティブを選択できます。
-Angular DevToolsの左上隅にある ***Inspect element*** アイコンをクリックし、ページ上のDOM要素の上にマウスを置きます。
-拡張機能は関連するディレクティブやコンポーネントを認識し、コンポーネントツリーで対応する要素を選択できます。
-
-<img src="assets/images/guide/devtools/inspect-element.png" alt="Angular todoアプリケーションが表示されている「Components」タブのスクリーンショット。Angular DevToolsの左上隅にある画面にマウスアイコンが表示されたアイコンが選択されています。マウスはAngularアプリケーションのUIのtodo要素の上にあります。要素は`<TodoComponent>`ラベルで強調表示され、隣接するツールチップに表示されます。">
-
-## アプリケーションのプロファイリング {#profile-your-application}
-
-**Profiler**タブでは、Angularの変更検知の実行を視覚化できます。
-これは、変更検知がいつどのようにアプリケーションのパフォーマンスに影響を与えるかを判断するのに役立ちます。
-
-<img src="assets/images/guide/devtools/profiler.png" alt="「Profiler」タブのスクリーンショットで、「再生ボタンをクリックして新しい記録を開始するか、プロファイラデータを含むjsonファイルをアップロードします。」と表示されています。その横に、新しいプロファイルを記録を開始する記録ボタンと、既存のプロファイルを選択するファイルピッカーがあります。">
-
-プロファイラタブでは、現在のアプリケーションのプロファイリングを開始したり、以前の実行からの既存のプロファイルをインポートしたりできます。
-アプリケーションのプロファイリングを開始するには、**Profiler**タブの左上隅にある丸の上にマウスを置いて、**Start recording**をクリックします。
-
-プロファイリング中は、Angular DevToolsは、変更検知やライフサイクルフックの実行などの実行イベントをキャプチャします。
-変更検知をトリガーしてAngular DevToolsが使用できるデータを作成するために、アプリケーションと対話してください。
-記録を終了するには、丸を再びクリックして**Stop recording**します。
-
-既存の記録のインポートもできます。
-この機能の詳細については、[記録のインポート](tools/devtools#import-and-export-recordings)セクションをご覧ください。
-
-### アプリケーションの実行の理解
-
-プロファイルを記録またはインポートした後、Angular DevToolsは変更検知サイクルの視覚化を表示します。
-
-<img src="assets/images/guide/devtools/default-profiler-view.png" alt="記録またはアップロードされたプロファイル後の「Profiler」タブのスクリーンショット。いくつかのテキストが表示され、「特定の変更検出サイクルをプレビューするには、バーを選択します」と表示されています。">
-
-シーケンスの各バーは、アプリケーションの変更検知サイクルを表しています。
-バーが高いほど、アプリケーションは変更検知をこのサイクルで実行するのに時間がかかっています。
-バーを選択すると、DevToolsは次のような役立つ情報を表示します。
-
-* このサイクルでキャプチャされたすべてのコンポーネントとディレクティブを含むバーチャート
-* Angularが変更検知をこのサイクルで実行するのにかかった時間。
-* ユーザーが経験した推定フレームレート。
-* 変更検知をトリガーしたソース。
-
-<img src="assets/images/guide/devtools/profiler-selected-bar.png" alt="「Profiler」タブのスクリーンショット。ユーザーによって単一のバーが選択されており、近くのドロップダウンメニューに「バーチャート」が表示され、その下に2番目のバーチャートが表示されています。新しいチャートには、大部分のスペースを占める2つのバーがあり、1つは「TodosComponent」とラベル付けされ、もう1つは「NgForOf」とラベル付けされています。他のバーは、これらに比べて小さいため、無視できます。">
-
-### コンポーネント実行の理解
-
-変更検知サイクルをクリックすると表示されるバーチャートは、アプリケーションがその特定のコンポーネントまたはディレクティブで変更検知を実行するのにどれだけ時間がかかったかを示す詳細ビューを表示します。
-
-この例では、`NgForOf`ディレクティブでかかった合計時間と、そのディレクティブで呼び出されたメソッドが表示されています。
-
-<img src="assets/images/guide/devtools/directive-details.png" alt="「Profiler」タブのスクリーンショットで、`NgForOf`バーが選択されています。右側に`NgForOf`の詳細ビューが表示され、「かかった合計時間: 1.76 ms」と表示されています。`NgForOf`を1.76 msかかった`ngDoCheck`メソッドを持つディレクティブとしてリストした行が1つだけ含まれています。また、「親階層」というラベルの付いたリストも含まれており、このディレクティブの親コンポーネントが含まれています。">
-
-### 階層ビュー
-
-<img src="assets/images/guide/devtools/flame-graph-view.png" alt="「Profiler」タブのスクリーンショット。ユーザーによって単一のバーが選択されており、近くのドロップダウンメニューに「フレームグラフ」が表示され、その下にフレームグラフが表示されています。フレームグラフは、「Entire application」という行と「AppComponent」という行から始まります。その下は、3行目で「[RouterOutlet]」と「DemoAppComponent」から始まり、複数のアイテムに分割され始めます。数層深く、1つのセルが赤で強調表示されています。">
-
-変更検知の実行をフレームグラフのようなビューで視覚化できます。
-
-グラフの各タイルは、レンダリングツリーの特定の位置にある画面上の要素を表します。
-たとえば、`LoggedOutUserComponent`が削除され、その代わりにAngularが`LoggedInUserComponent`をレンダリングした変更検知サイクルを考えます。このシナリオでは、両方のコンポーネントは同じタイルに表示されます。
-
-X軸は、この変更検知サイクルのレンダリングにかかった合計時間を表します。
-Y軸は要素階層を表します。要素の変更検知を実行するには、そのディレクティブと子コンポーネントをレンダリングする必要があります。
-これらを組み合わせると、どのコンポーネントのレンダリングに時間がかかっているのか、その時間がどこに使われているのかが視覚化されます。
-
-各タイルは、Angularがそこでかかった時間に依存して色が付けられます。
-Angular DevToolsは、レンダリングに最も時間がかかったタイルに対するかかった時間によって、色の濃淡を決定します。
-
-特定のタイルをクリックすると、右側のパネルにそのタイルに関する詳細が表示されます。
-タイルをダブルクリックすると、タイルが拡大され、ネストされた子要素をより簡単に表示できます。
-
-### 変更検知と`OnPush`コンポーネントのデバッグ
-
-通常、グラフは、特定の変更検知フレームの、アプリケーションの*レンダリング*にかかる時間を視覚化します。しかし、`OnPush`コンポーネントなど、入力プロパティが変更された場合にのみ再レンダリングされるコンポーネントもあります。特定のフレームのこれらのコンポーネントなしでフレームグラフを視覚化すると役立つ場合があります。
-
-変更検知フレーム内で変更検知プロセスを経たコンポーネントのみを視覚化するには、フレームグラフの上部にある**変更検知**チェックボックスをオンにします。
-
-このビューでは、変更検知を経たすべてのコンポーネントが強調表示され、再レンダリングされなかった`OnPush`コンポーネントなど、変更検知を経なかったコンポーネントが灰色で表示されます。
-
-<img src="assets/images/guide/devtools/debugging-onpush.png" alt="変更検出サイクルのフレームチャート視覚化を表示する「Profiler」タブのスクリーンショット。「Show only change detection」というラベルの付いたチェックボックスがオンになっています。フレームグラフは以前と非常によく似ていますが、コンポーネントの色がオレンジから青に変わっています。`[RouterOutlet]`というラベルの付いたいくつかのタイルは、もうどの色でも強調表示されていません。">
-
-### 記録のインポートとエクスポート {#import-and-export-recordings}
-
-記録されたプロファイリングセッションの右上にある**Save Profile**ボタンをクリックして、JSONファイルとしてエクスポートし、ディスクに保存します。
-後で、プロファイラの初期ビューで、**Choose file**入力をクリックしてファイルをインポートします。
-
-<img src="assets/images/guide/devtools/save-profile.png" alt="変更検出サイクルを表示する「Profiler」タブのスクリーンショット。右側に「プロファイルの保存」ボタンが表示されています。">
-
- ## インジェクターの検査
-
-NOTE: インジェクターツリーは、バージョン17以降を使ってビルドされたAngularアプリケーションで使用できます。
-
-### アプリケーションのインジェクター階層を表示
-
- **Injector Tree**タブでは、アプリケーションに構成されたインジェクターの構造を探索できます。ここでは、アプリケーションの[インジェクタ階層](guide/di/hierarchical-dependency-injection)を表す2つのツリーが表示されます。1つのツリーは環境階層、もう1つのツリーは要素階層です。
-
-<img src="assets/images/guide/devtools/di-injector-tree.png" alt="例となるアプリケーションのインジェクタグラフを視覚化しているAngular Devtoolsの「Profiler」タブのスクリーンショットで、インジェクタツリータブが表示されています。">
-
- ### 解決パスを視覚化する
-
- 特定のインジェクターが選択されると、そのインジェクターからルートへのAngularの依存性の注入アルゴリズムがたどるパスが強調表示されます。要素インジェクターの場合、これには、依存関係が要素階層で解決できない場合に依存性の注入アルゴリズムがジャンプする環境インジェクターの強調表示も含まれます。
-
-Angularが解決パスをどのように解決するかについての詳細は、[解決ルール](guide/di/hierarchical-dependency-injection#resolution-rules)を参照してください。 
-
-<img src="assets/images/guide/devtools/di-injector-tree-selected.png" alt="インジェクタツリーがインジェクタが選択されたときに解決パスをどのように強調表示するかを示す「Profiler」タブのスクリーンショット。">
-
- ### インジェクタープロバイダーを表示
-
- プロバイダーが構成されているインジェクターをクリックすると、右側にあるインジェクターツリービューにプロバイダーのリストが表示されます。ここでは、提供されたトークンとそのタイプを表示できます。
-
-<img src="assets/images/guide/devtools/di-injector-tree-providers.png" alt="インジェクタが選択されたときにプロバイダがどのように表示されるかを示す「Profiler」タブのスクリーンショット。">
diff --git a/adev-ja/src/content/tools/devtools/component.en.md b/adev-ja/src/content/tools/devtools/component.en.md
new file mode 100644
index 000000000..3c93452fb
--- /dev/null
+++ b/adev-ja/src/content/tools/devtools/component.en.md
@@ -0,0 +1,76 @@
+# Inspect the component tree
+
+## Debug your application
+
+The **Components** tab lets you explore the structure of your application.
+You can visualize the component and directive instances in the DOM and inspect or modify their state.
+
+### Explore the application structure
+
+The component tree displays a hierarchical relationship of the _components and directives_ within your application.
+
+<img src="assets/images/guide/devtools/component-explorer.png" alt="A screenshot of the 'Components' tab showing a tree of Angular components and directives starting the root of the application.">
+
+Click the individual components or directives in the component explorer to select them and preview their properties.
+Angular DevTools displays properties and metadata on the right side of the component tree.
+
+To look up a component or directive by name use the search box above the component tree.
+
+<img src="assets/images/guide/devtools/search.png" alt="A screenshot of the 'Components' tab. The filter bar immediately underneath the tab is searching for 'todo' and all components with 'todo' in the name are highlighted in the tree. `app-todos` is currently selected and a sidebar to the right displays information about the component's properties. This includes a section of `@Output` fields and another section for other properties.">
+
+### Navigate to the host node
+
+To go to the host element of a particular component or directive, double-click it in the component explorer.
+Angular DevTools will open the Elements tab in Chrome or the Inspector tab in Firefox, and select the associated DOM node.
+
+### Navigate to source
+
+For components, Angular DevTools lets you navigate to the component definition in the Sources tab (Chrome) and Debugger tab (Firefox).
+After you select a particular component, click the icon at the top-right of the properties view:
+
+<img src="assets/images/guide/devtools/navigate-source.png" alt="A screenshot of the 'Components' tab. The properties view on the right is visible for a component and the mouse rests in the upper right corner of that view on top of a `<>` icon. An adjacent tooltip reads 'Open component source'.">
+
+### Update property value
+
+Like browsers' DevTools, the properties view lets you edit the value of an input, output, or other properties.
+Right-click on the property value and if edit functionality is available for this value type, a text input will appear.
+Type the new value and press `Enter` to apply this value to the property.
+
+<img src="assets/images/guide/devtools/update-property.png" alt="A screenshot of the 'Components' tab with the properties view open for a component. An `@Input` named `todo` contains a `label` property which is currently selected and has been manually updated to the value 'Buy milk'.">
+
+### Access selected component or directive in console
+
+As a shortcut in the console, Angular DevTools provides access to instances of recently selected components or directives.
+Type `$ng0` to get a reference to the instance of the currently selected component or directive, and type `$ng1` for the previously selected instance, `$ng2` for the instance selected before that, and so on.
+
+<img src="assets/images/guide/devtools/access-console.png" alt="A screenshot of the 'Components' tab with the browser console underneath. In the console, the user has typed three commands, `$ng0`, `$ng1`, and `$ng2` to view the three most recently selected elements. After each statement, the console prints a different component reference.">
+
+### Select a directive or component
+
+Similar to browsers' DevTools, you can inspect the page to select a particular component or directive.
+Click the **_Inspect element_** icon in the top left corner within Angular DevTools and hover over a DOM element on the page.
+The extension recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree.
+
+<img src="assets/images/guide/devtools/inspect-element.png" alt="A screenshot of the 'Components' tab with an Angular todo application visible. In the very top-left corner of Angular DevTools, an icon of a screen with a mouse icon inside it is selected. The mouse rests on a todo element in the Angular application UI. The element is highlighted with a `<TodoComponent>` label displayed in an adjacent tooltip.">
+
+### Inspect Deferrable views
+
+Alongside the directives, the directive tree also includes [`@defer` blocks](/guide/templates/defer).
+
+<img src="assets/images/guide/devtools/defer-block.png" />
+
+Clicking a defer block shows more details in the properties sidebar: the different optional blocks (for example `@loading`, `@placeholder`, and `@error`), the configured triggers (defer triggers, prefetch triggers, and hydrate triggers), and timing options such as the `minimum` and `after` values.
+
+### Hydration
+
+When [hydration](/guide/hydration) is enabled on your SSR/SSG application, the directive tree shows the hydration status of each component.
+
+In case of errors, an error message is displayed on the affected component.
+
+<img src="assets/images/guide/devtools/hydration-status.png" />
+
+The hydration status can also be visualized on the application itself by enabling the overlay.
+
+<img src="assets/images/guide/devtools/hydration-overlay-ecom.png" />
+
+Here is an illustration of the hydration overlays on a Angular e-shop example app.
diff --git a/adev-ja/src/content/tools/devtools/component.md b/adev-ja/src/content/tools/devtools/component.md
index 3c93452fb..e9983d766 100644
--- a/adev-ja/src/content/tools/devtools/component.md
+++ b/adev-ja/src/content/tools/devtools/component.md
@@ -1,59 +1,59 @@
-# Inspect the component tree
+# コンポーネントツリーの検査 {#inspect-the-component-tree}
 
-## Debug your application
+## アプリケーションのデバッグ {#debug-your-application}
 
-The **Components** tab lets you explore the structure of your application.
-You can visualize the component and directive instances in the DOM and inspect or modify their state.
+**Components**タブでは、アプリケーションの構造を探索できます。
+DOM内のコンポーネントとディレクティブのインスタンスを視覚化し、それらの状態を検査または変更できます。
 
-### Explore the application structure
+### アプリケーション構造の探索 {#explore-the-application-structure}
 
-The component tree displays a hierarchical relationship of the _components and directives_ within your application.
+コンポーネントツリーは、アプリケーション内の*コンポーネントとディレクティブ*の階層的な関係を表示します。
 
-<img src="assets/images/guide/devtools/component-explorer.png" alt="A screenshot of the 'Components' tab showing a tree of Angular components and directives starting the root of the application.">
+<img src="assets/images/guide/devtools/component-explorer.png" alt="アプリケーションのルートから始まるAngularコンポーネントとディレクティブのツリーを示す「Components」タブのスクリーンショット。">
 
-Click the individual components or directives in the component explorer to select them and preview their properties.
-Angular DevTools displays properties and metadata on the right side of the component tree.
+コンポーネントエクスプローラ内の個々のコンポーネントまたはディレクティブをクリックして選択し、それらのプロパティをプレビューします。
+Angular DevToolsは、コンポーネントツリーの右側で、プロパティとメタデータを表示します。
 
-To look up a component or directive by name use the search box above the component tree.
+コンポーネントツリーの上にある検索ボックスを使用して、名前でコンポーネントまたはディレクティブを検索します。
 
-<img src="assets/images/guide/devtools/search.png" alt="A screenshot of the 'Components' tab. The filter bar immediately underneath the tab is searching for 'todo' and all components with 'todo' in the name are highlighted in the tree. `app-todos` is currently selected and a sidebar to the right displays information about the component's properties. This includes a section of `@Output` fields and another section for other properties.">
+<img src="assets/images/guide/devtools/search.png" alt="「Components」タブのスクリーンショット。タブのすぐ下にあるフィルタバーは「todo」を検索しており、「todo」が名前にあるすべてのコンポーネントがツリー内で強調表示されています。`app-todos`が現在選択されており、右側のサイドバーにコンポーネントのプロパティに関する情報が表示されます。これには、`@Output`フィールドのセクションと、他のプロパティのセクションが含まれます。">
 
-### Navigate to the host node
+### ホストノードに移動 {#navigate-to-the-host-node}
 
-To go to the host element of a particular component or directive, double-click it in the component explorer.
-Angular DevTools will open the Elements tab in Chrome or the Inspector tab in Firefox, and select the associated DOM node.
+特定のコンポーネントやディレクティブのホスト要素に移動するには、コンポーネントエクスプローラでダブルクリックします。
+Angular DevToolsはChromeのElementsタブまたはFirefoxのInspectorタブを開き、関連するDOMノードを選択します。
 
-### Navigate to source
+### ソースに移動 {#navigate-to-source}
 
-For components, Angular DevTools lets you navigate to the component definition in the Sources tab (Chrome) and Debugger tab (Firefox).
-After you select a particular component, click the icon at the top-right of the properties view:
+コンポーネントの場合、Angular DevToolsはSourcesタブ（Chrome）とDebuggerタブ（Firefox）でコンポーネント定義に移動できます。
+特定のコンポーネントを選択したら、プロパティビューの右上にあるアイコンをクリックします。
 
-<img src="assets/images/guide/devtools/navigate-source.png" alt="A screenshot of the 'Components' tab. The properties view on the right is visible for a component and the mouse rests in the upper right corner of that view on top of a `<>` icon. An adjacent tooltip reads 'Open component source'.">
+<img src="assets/images/guide/devtools/navigate-source.png" alt="「Components」タブのスクリーンショット。右側にコンポーネントのプロパティビューが表示され、マウスがビューの右上隅にある`<>`アイコンの上にあります。隣接するツールチップには「Open component source」と表示されます。">
 
-### Update property value
+### プロパティ値の更新 {#update-property-value}
 
-Like browsers' DevTools, the properties view lets you edit the value of an input, output, or other properties.
-Right-click on the property value and if edit functionality is available for this value type, a text input will appear.
-Type the new value and press `Enter` to apply this value to the property.
+ブラウザのDevToolsと同様に、プロパティビューでは入力と出力、またはその他のプロパティの値を編集できます。
+プロパティ値を右クリックし、この値の種類で編集機能が利用可能な場合は、テキスト入力フィールドが表示されます。
+新しい値を入力して`Enter`キーを押すと、この値がプロパティに適用されます。
 
-<img src="assets/images/guide/devtools/update-property.png" alt="A screenshot of the 'Components' tab with the properties view open for a component. An `@Input` named `todo` contains a `label` property which is currently selected and has been manually updated to the value 'Buy milk'.">
+<img src="assets/images/guide/devtools/update-property.png" alt="コンポーネントのプロパティビューが開いている「Components」タブのスクリーンショット。`todo`という`@Input`には、現在選択されており、値が「牛乳を買う」に手動で更新されている`label`プロパティが含まれています。">
 
-### Access selected component or directive in console
+### コンソールで選択したコンポーネントまたはディレクティブにアクセス {#access-selected-component-or-directive-in-console}
 
-As a shortcut in the console, Angular DevTools provides access to instances of recently selected components or directives.
-Type `$ng0` to get a reference to the instance of the currently selected component or directive, and type `$ng1` for the previously selected instance, `$ng2` for the instance selected before that, and so on.
+コンソールのショートカットとして、Angular DevToolsは、最近選択したコンポーネントやディレクティブのインスタンスへのアクセスを提供します。
+現在選択されているコンポーネントやディレクティブのインスタンスを参照するには`$ng0`と入力し、以前に選択したインスタンスを参照するには`$ng1`と入力し、さらに前に選択したインスタンスを参照するには`$ng2`と入力するなどします。
 
-<img src="assets/images/guide/devtools/access-console.png" alt="A screenshot of the 'Components' tab with the browser console underneath. In the console, the user has typed three commands, `$ng0`, `$ng1`, and `$ng2` to view the three most recently selected elements. After each statement, the console prints a different component reference.">
+<img src="assets/images/guide/devtools/access-console.png" alt="ブラウザコンソールの下にある「Components」タブのスクリーンショット。コンソールで、ユーザーは3つのコマンド、`$ng0`、`$ng1`、`$ng2`を入力して、最近選択した3つの要素を表示しています。各ステートメントの後、コンソールは異なるコンポーネント参照を出力します。">
 
-### Select a directive or component
+### ディレクティブまたはコンポーネントの選択 {#select-a-directive-or-component}
 
-Similar to browsers' DevTools, you can inspect the page to select a particular component or directive.
-Click the **_Inspect element_** icon in the top left corner within Angular DevTools and hover over a DOM element on the page.
-The extension recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree.
+ブラウザのDevToolsと同様にページを検査して、特定のコンポーネントやディレクティブを選択できます。
+Angular DevToolsの左上隅にある ***Inspect element*** アイコンをクリックし、ページ上のDOM要素の上にマウスを置きます。
+拡張機能は関連するディレクティブやコンポーネントを認識し、コンポーネントツリーで対応する要素を選択できます。
 
-<img src="assets/images/guide/devtools/inspect-element.png" alt="A screenshot of the 'Components' tab with an Angular todo application visible. In the very top-left corner of Angular DevTools, an icon of a screen with a mouse icon inside it is selected. The mouse rests on a todo element in the Angular application UI. The element is highlighted with a `<TodoComponent>` label displayed in an adjacent tooltip.">
+<img src="assets/images/guide/devtools/inspect-element.png" alt="Angular todoアプリケーションが表示されている「Components」タブのスクリーンショット。Angular DevToolsの左上隅にある画面にマウスアイコンが表示されたアイコンが選択されています。マウスはAngularアプリケーションのUIのtodo要素の上にあります。要素は`<TodoComponent>`ラベルで強調表示され、隣接するツールチップに表示されます。">
 
-### Inspect Deferrable views
+### Inspect Deferrable views {#inspect-deferrable-views}
 
 Alongside the directives, the directive tree also includes [`@defer` blocks](/guide/templates/defer).
 
@@ -61,7 +61,7 @@ Alongside the directives, the directive tree also includes [`@defer` blocks](/gu
 
 Clicking a defer block shows more details in the properties sidebar: the different optional blocks (for example `@loading`, `@placeholder`, and `@error`), the configured triggers (defer triggers, prefetch triggers, and hydrate triggers), and timing options such as the `minimum` and `after` values.
 
-### Hydration
+### Hydration {#hydration}
 
 When [hydration](/guide/hydration) is enabled on your SSR/SSG application, the directive tree shows the hydration status of each component.
 
diff --git a/adev-ja/src/content/tools/devtools/injectors.en.md b/adev-ja/src/content/tools/devtools/injectors.en.md
new file mode 100644
index 000000000..f84a95aa0
--- /dev/null
+++ b/adev-ja/src/content/tools/devtools/injectors.en.md
@@ -0,0 +1,23 @@
+## Inspect your injectors
+
+NOTE: The Injector Tree is available for Angular Applications built with version 17 or higher.
+
+### View the injector hierarchy of your application
+
+The **Injector Tree** tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the [injector hierarchy](guide/di/hierarchical-dependency-injection) of your application. One tree is your environment hierarchy, the other is your element hierarchy.
+
+<img src="assets/images/guide/devtools/di-injector-tree.png" alt="A screenshot of the 'Profiler' tab displaying the injector tree tab in Angular Devtools visualizing the injector graph for an example application.">
+
+### Visualize resolution paths
+
+When a specific injector is selected, the path that Angular's dependency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy.
+
+See [resolution rules](guide/di/hierarchical-dependency-injection#resolution-rules) for more details about how Angular resolves resolution paths.
+
+<img src="assets/images/guide/devtools/di-injector-tree-selected.png" alt="A screenshot of the 'Profiler' tab displaying how the injector tree visualize highlights resolution paths when an injector is selected.">
+
+### View injector providers
+
+Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type. The button on the right of each provider allows you to log the provider in the console.
+
+<img src="assets/images/guide/devtools/di-injector-tree-providers.png" alt="A screenshot of the 'Profiler' tab displaying how providers are made visible when an injector is selected.">
diff --git a/adev-ja/src/content/tools/devtools/injectors.md b/adev-ja/src/content/tools/devtools/injectors.md
index f84a95aa0..02bc882d5 100644
--- a/adev-ja/src/content/tools/devtools/injectors.md
+++ b/adev-ja/src/content/tools/devtools/injectors.md
@@ -1,23 +1,23 @@
-## Inspect your injectors
+## インジェクターの検査 {#inspect-your-injectors}
 
-NOTE: The Injector Tree is available for Angular Applications built with version 17 or higher.
+NOTE: インジェクターツリーは、バージョン17以降を使ってビルドされたAngularアプリケーションで使用できます。
 
-### View the injector hierarchy of your application
+### アプリケーションのインジェクター階層を表示 {#view-the-injector-hierarchy-of-your-application}
 
-The **Injector Tree** tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the [injector hierarchy](guide/di/hierarchical-dependency-injection) of your application. One tree is your environment hierarchy, the other is your element hierarchy.
+**Injector Tree**タブでは、アプリケーションに構成されたインジェクターの構造を探索できます。ここでは、アプリケーションの[インジェクタ階層](guide/di/hierarchical-dependency-injection)を表す2つのツリーが表示されます。1つのツリーは環境階層、もう1つのツリーは要素階層です。
 
-<img src="assets/images/guide/devtools/di-injector-tree.png" alt="A screenshot of the 'Profiler' tab displaying the injector tree tab in Angular Devtools visualizing the injector graph for an example application.">
+<img src="assets/images/guide/devtools/di-injector-tree.png" alt="例となるアプリケーションのインジェクタグラフを視覚化しているAngular Devtoolsの「Profiler」タブのスクリーンショットで、インジェクタツリータブが表示されています。">
 
-### Visualize resolution paths
+### 解決パスを視覚化する {#visualize-resolution-paths}
 
-When a specific injector is selected, the path that Angular's dependency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy.
+特定のインジェクターが選択されると、そのインジェクターからルートへのAngularの依存性の注入アルゴリズムがたどるパスが強調表示されます。要素インジェクターの場合、これには、依存関係が要素階層で解決できない場合に依存性の注入アルゴリズムがジャンプする環境インジェクターの強調表示も含まれます。
 
-See [resolution rules](guide/di/hierarchical-dependency-injection#resolution-rules) for more details about how Angular resolves resolution paths.
+Angularが解決パスをどのように解決するかについての詳細は、[解決ルール](guide/di/hierarchical-dependency-injection#resolution-rules)を参照してください。
 
-<img src="assets/images/guide/devtools/di-injector-tree-selected.png" alt="A screenshot of the 'Profiler' tab displaying how the injector tree visualize highlights resolution paths when an injector is selected.">
+<img src="assets/images/guide/devtools/di-injector-tree-selected.png" alt="インジェクタツリーがインジェクタが選択されたときに解決パスをどのように強調表示するかを示す「Profiler」タブのスクリーンショット。">
 
-### View injector providers
+### インジェクタープロバイダーを表示 {#view-injector-providers}
 
-Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type. The button on the right of each provider allows you to log the provider in the console.
+プロバイダーが構成されているインジェクターをクリックすると、右側にあるインジェクターツリービューにプロバイダーのリストが表示されます。ここでは、提供されたトークンとそのタイプを表示できます。各プロバイダーの右側のボタンを使用すると、コンソールにプロバイダーをログ出力できます。
 
-<img src="assets/images/guide/devtools/di-injector-tree-providers.png" alt="A screenshot of the 'Profiler' tab displaying how providers are made visible when an injector is selected.">
+<img src="assets/images/guide/devtools/di-injector-tree-providers.png" alt="インジェクタが選択されたときにプロバイダがどのように表示されるかを示す「Profiler」タブのスクリーンショット。">
diff --git a/adev-ja/src/content/tools/devtools/overview.en.md b/adev-ja/src/content/tools/devtools/overview.en.md
new file mode 100644
index 000000000..40cf26bcf
--- /dev/null
+++ b/adev-ja/src/content/tools/devtools/overview.en.md
@@ -0,0 +1,47 @@
+# DevTools Overview
+
+Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications.
+
+<docs-video src="https://www.youtube.com/embed/bavWOHZM6zE"/>
+
+Install Angular DevTools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) or from [Firefox Addons](https://addons.mozilla.org/firefox/addon/angular-devtools/).
+
+You can open Chrome or Firefox DevTools on any web page by pressing <kbd>F12</kbd> or <kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd></kbd> (Windows or Linux) and <kbd><kbd>Fn</kbd>+<kbd>F12</kbd></kbd> or <kbd><kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd></kbd> (Mac).
+Once browser DevTools is open and Angular DevTools is installed, you can find it under the "Angular" tab.
+
+HELPFUL: Chrome's new tab page does not run installed extensions, so the Angular tab will not appear in DevTools. Visit any other page to see it.
+
+<img src="assets/images/guide/devtools/devtools.png" alt="An overview of Angular DevTools showing a tree of components for an application.">
+
+## Open your application
+
+When you open the extension, you'll see three additional tabs:
+
+| Tabs                                      | Details                                                                                                                |
+| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- |
+| [Components](tools/devtools/component)    | Lets you explore the components and directives in your application and preview or edit their state.                    |
+| [Profiler](tools/devtools/profiler)       | Lets you profile your application and understand what the performance bottleneck is during change detection execution. |
+| [Injector Tree](tools/devtools/injectors) | Lets you visualize the Environment and Element Injector hierarchy                                                      |
+
+Other tabs like `Router Tree` or `Transfer State` are experimental and can be enabled via the devtools settings and are not documented yet.
+
+HELPFUL: For users of Chromium based browsers, you might be interested in the [Performance panel integration](/best-practices/profiling-with-chrome-devtools).
+
+<img src="assets/images/guide/devtools/devtools-tabs.png" alt="A screenshot of the top of Angular DevTools illustrating two tabs in the upper-left corner, one labeled 'Components' and another labeled 'Profiler'.">
+
+In the top-right corner of Angular DevTools you'll find the information button which open a popover.
+The information popover contains among others what version of Angular is running on the page as well as the devtools version.
+
+### Angular application not detected
+
+If you see an error message "Angular application not detected" when opening Angular DevTools, this means it is not able to communicate with an Angular app on the page.
+The most common reason for this is because the web page you are inspecting does not contain an Angular application.
+Double check that you are inspecting the right web page and that the Angular app is running.
+
+### We detected an application built with production configuration
+
+If you see an error message "We detected an application built with production configuration. Angular DevTools only supports development builds.", this means that an Angular application was found on the page, but it was compiled with production optimizations.
+When compiling for production, Angular CLI removes various debug features to minimize the amount of the JavaScript on the page to improve performance. This includes features needed to communicate with DevTools.
+
+To run DevTools, you need to compile your application with optimizations disabled. `ng serve` does this by default.
+If you need to debug a deployed application, disable optimizations in your build with the [`optimization` configuration option](reference/configs/workspace-config#optimization-configuration) (`{"optimization": false}`).
diff --git a/adev-ja/src/content/tools/devtools/overview.md b/adev-ja/src/content/tools/devtools/overview.md
index 40cf26bcf..a778de260 100644
--- a/adev-ja/src/content/tools/devtools/overview.md
+++ b/adev-ja/src/content/tools/devtools/overview.md
@@ -1,47 +1,47 @@
-# DevTools Overview
+# DevToolsの概要 {#devtools-overview}
 
-Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications.
+Angular DevToolsは、Angularアプリケーションのデバッグとプロファイリング機能を提供するブラウザ拡張機能です。
 
 <docs-video src="https://www.youtube.com/embed/bavWOHZM6zE"/>
 
-Install Angular DevTools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh) or from [Firefox Addons](https://addons.mozilla.org/firefox/addon/angular-devtools/).
+Angular DevToolsは、[Chrome Web Store](https://chrome.google.com/webstore/detail/angular-developer-tools/ienfalfjdbdpebioblfackkekamfmbnh)または[Firefox Addons](https://addons.mozilla.org/firefox/addon/angular-devtools/)からインストールできます。
 
-You can open Chrome or Firefox DevTools on any web page by pressing <kbd>F12</kbd> or <kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd></kbd> (Windows or Linux) and <kbd><kbd>Fn</kbd>+<kbd>F12</kbd></kbd> or <kbd><kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd></kbd> (Mac).
-Once browser DevTools is open and Angular DevTools is installed, you can find it under the "Angular" tab.
+<kbd>F12</kbd>または<kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd></kbd>（WindowsまたはLinux）および<kbd><kbd>Fn</kbd>+<kbd>F12</kbd></kbd>または<kbd><kbd>Cmd</kbd>+<kbd>Option</kbd>+<kbd>I</kbd></kbd>（Mac）を押して、任意のWebページでChromeまたはFirefoxのDevToolsを開くことができます。
+ブラウザのDevToolsが開いていてAngular DevToolsがインストールされている場合は、「Angular」タブで見つけることができます。
 
-HELPFUL: Chrome's new tab page does not run installed extensions, so the Angular tab will not appear in DevTools. Visit any other page to see it.
+HELPFUL: Chromeの新しいタブページではインストールされている拡張機能は実行されないため、DevToolsに「Angular」タブは表示されません。表示するには、他のページにアクセスしてください。
 
-<img src="assets/images/guide/devtools/devtools.png" alt="An overview of Angular DevTools showing a tree of components for an application.">
+<img src="assets/images/guide/devtools/devtools.png" alt="アプリケーションのコンポーネントツリーを示すAngular DevToolsの概要。">
 
-## Open your application
+## アプリケーションを開く {#open-your-application}
 
-When you open the extension, you'll see three additional tabs:
+拡張機能を開くと、次の3つの追加タブが表示されます。
 
-| Tabs                                      | Details                                                                                                                |
-| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- |
-| [Components](tools/devtools/component)    | Lets you explore the components and directives in your application and preview or edit their state.                    |
-| [Profiler](tools/devtools/profiler)       | Lets you profile your application and understand what the performance bottleneck is during change detection execution. |
-| [Injector Tree](tools/devtools/injectors) | Lets you visualize the Environment and Element Injector hierarchy                                                      |
+| タブ                                      | 詳細                                                                                                                 |
+| :---------------------------------------- | :------------------------------------------------------------------------------------------------------------------- |
+| [Components](tools/devtools/component)    | アプリケーション内のコンポーネントとディレクティブを探索し、それらの状態をプレビューまたは編集できます。                    |
+| [Profiler](tools/devtools/profiler)       | アプリケーションをプロファイルし、変更検知の実行中のパフォーマンスのボトルネックがどこにあるかを理解できます。 |
+| [Injector Tree](tools/devtools/injectors) | 環境インジェクターと要素インジェクターの階層を視覚化できます。                                                      |
 
-Other tabs like `Router Tree` or `Transfer State` are experimental and can be enabled via the devtools settings and are not documented yet.
+`Router Tree`や`Transfer State`などの他のタブは実験的であり、DevToolsの設定から有効にできますが、まだドキュメント化されていません。
 
-HELPFUL: For users of Chromium based browsers, you might be interested in the [Performance panel integration](/best-practices/profiling-with-chrome-devtools).
+HELPFUL: Chromiumベースのブラウザのユーザーには、[パフォーマンスパネル統合](/best-practices/profiling-with-chrome-devtools)が興味深いかもしれません。
 
-<img src="assets/images/guide/devtools/devtools-tabs.png" alt="A screenshot of the top of Angular DevTools illustrating two tabs in the upper-left corner, one labeled 'Components' and another labeled 'Profiler'.">
+<img src="assets/images/guide/devtools/devtools-tabs.png" alt="Angular DevToolsの上部を示すスクリーンショットで、左上の角に2つのタブが表示されています。1つは「Components」とラベル付けされ、もう1つは「Profiler」とラベル付けされています。">
 
-In the top-right corner of Angular DevTools you'll find the information button which open a popover.
-The information popover contains among others what version of Angular is running on the page as well as the devtools version.
+Angular DevToolsの右上隅には、ポップオーバーを開く情報ボタンがあります。
+情報ポップオーバーには、ページで実行されているAngularのバージョンとDevToolsのバージョンなどが含まれています。
 
-### Angular application not detected
+### Angularアプリケーションが検出されません {#angular-application-not-detected}
 
-If you see an error message "Angular application not detected" when opening Angular DevTools, this means it is not able to communicate with an Angular app on the page.
-The most common reason for this is because the web page you are inspecting does not contain an Angular application.
-Double check that you are inspecting the right web page and that the Angular app is running.
+Angular DevToolsを開くと、「Angularアプリケーションが検出されませんでした」というエラーメッセージが表示される場合、これはページ上のAngularアプリケーションと通信できないことを意味します。
+これは、検査しているWebページにAngularアプリケーションが含まれていないためです。
+適切なWebページを検査していること、およびAngularアプリケーションが実行されていることを確認してください。
 
-### We detected an application built with production configuration
+### プロダクション構成でビルドされたアプリケーションが検出されました {#we-detected-an-application-built-with-production-configuration}
 
-If you see an error message "We detected an application built with production configuration. Angular DevTools only supports development builds.", this means that an Angular application was found on the page, but it was compiled with production optimizations.
-When compiling for production, Angular CLI removes various debug features to minimize the amount of the JavaScript on the page to improve performance. This includes features needed to communicate with DevTools.
+「プロダクション構成でビルドされたアプリケーションが検出されました。Angular DevToolsは開発ビルドのみサポートしています。」というエラーメッセージが表示される場合、ページにAngularアプリケーションが見つかりましたが、プロダクション最適化でコンパイルされたことを意味します。
+プロダクション用にコンパイルすると、Angular CLIはパフォーマンスを向上させるために、ページ上のJavaScriptの量を最小限に抑えるために、さまざまなデバッグ機能を削除します。これには、DevToolsと通信するために必要な機能も含まれます。
 
-To run DevTools, you need to compile your application with optimizations disabled. `ng serve` does this by default.
-If you need to debug a deployed application, disable optimizations in your build with the [`optimization` configuration option](reference/configs/workspace-config#optimization-configuration) (`{"optimization": false}`).
+DevToolsを実行するには、最適化を無効にしてアプリケーションをコンパイルする必要があります。`ng serve`は、デフォルトでこれを実行します。
+デプロイされたアプリケーションをデバッグする必要がある場合は、[`optimization`構成オプション](reference/configs/workspace-config#optimization-configuration) (`{"optimization": false}`)を使用して、ビルドの最適化を無効にします。
diff --git a/adev-ja/src/content/tools/devtools/profiler.en.md b/adev-ja/src/content/tools/devtools/profiler.en.md
new file mode 100644
index 000000000..b3ec6dbd7
--- /dev/null
+++ b/adev-ja/src/content/tools/devtools/profiler.en.md
@@ -0,0 +1,76 @@
+# Profile your application
+
+The **Profiler** tab lets you visualize the execution of Angular's change detection.
+This is useful for determining when and how change detection impacts your application's performance.
+
+<img src="assets/images/guide/devtools/profiler.png" alt="A screenshot of the 'Profiler' tab which reads 'Click the play button to start a new recording, or upload a json file containing profiler data.' Next to this is a record button to begin recording a new profile as well as a file picker to select an existing profile.">
+
+The Profiler tab lets you start profiling the current application or import an existing profile from a previous run.
+To start profiling your application, hover over the circle in the top-left corner within the **Profiler** tab and click **Start recording**.
+
+During profiling, Angular DevTools captures execution events, such as change detection and lifecycle hook execution.
+Interact with your application to trigger change detection and generate data Angular DevTools can use.
+To finish recording, click the circle again to **Stop recording**.
+
+You can also import an existing recording.
+Read more about this feature in the [Import recording](tools/devtools/profiler#import-and-export-recordings) section.
+
+## Understand your application's execution
+
+After recording or importing a profile, Angular DevTools displays a visualization of change detection cycles.
+
+<img src="assets/images/guide/devtools/default-profiler-view.png" alt="A screenshot of the 'Profiler' tab after a profile has been recorded or uploaded. It displays a bar chart illustrating various change detection cycles with some text which reads 'Select a bar to preview a particular change detection cycle'.">
+
+Each bar in the sequence represents a change detection cycle in your app.
+The taller a bar is, the longer the application spent running change detection in this cycle.
+When you select a bar, DevTools displays useful information about it including:
+
+- A bar chart with all the components and directives that it captured during this cycle
+- How much time Angular spent running change detection in this cycle.
+- An estimated frame rate as experienced by the user (if below 60fps)
+
+<img src="assets/images/guide/devtools/profiler-selected-bar.png" alt="A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu displays 'Bar chart`, showing a second bar chart underneath it. The new chart has two bars which take up the majority of the space, one labeled `TodosComponent` and the other labeled `NgForOf`. The other bars are small enough to be negligible in comparison.">
+
+## Understand component execution
+
+The bar chart displayed after clicking on a change detection cycle displays a detailed view about how much time your application spent running change detection in that particular component or directive.
+
+This example shows the total time spent by the `NgForOf` directive and which method was called on it.
+
+<img src="assets/images/guide/devtools/directive-details.png" alt="A screenshot of the 'Profiler' tab where the `NgForOf` bar is selected. A detailed view of `NgForOf` is visible to the right where it lists 'Total time spent: 1.76 ms'. It includes a with exactly one row, listing `NgForOf` as a directives with an `ngDoCheck` method which took 1.76 ms. It also includes a list labeled 'Parent Hierarchy' containing the parent components of this directive.">
+
+## Hierarchical views
+
+<img src="assets/images/guide/devtools/flame-graph-view.png" alt="A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu now displays 'Flame graph', showing a flame graph underneath it. The flame graph starts with a row called 'Entire application' and another row called 'AppComponent'. Beneath those, the rows start to break up into multiple items, starting with `[RouterOutlet]` and `DemoAppComponent` on the third row. A few layers deep, one cell is highlighted red.">
+
+You can also visualize the change detection execution in a flame graph-like view.
+
+Each tile in the graph represents an element on the screen at a specific position in the render tree.
+For example, consider a change detection cycle where a `LoggedOutUserComponent` is removed and in its place Angular rendered a `LoggedInUserComponent`. In this scenario both components will be displayed in the same tile.
+
+The x-axis represents the full time it took to render this change detection cycle.
+The y-axis represents the element hierarchy. Running change detection for an element requires rendering its directives and child components.
+Together, this graph visualizes which components are taking the longest time to render and where that time is going.
+
+Each tile is colored depending on how much time Angular spent there.
+Angular DevTools determines the intensity of the color by the time spent relative to the tile where rendering took the most time.
+
+When you click on a certain tile, you'll see details about it in the panel on the right.
+Double-clicking the tile zooms it in so you can more easily view its nested children.
+
+## Debug change detection and `OnPush` components
+
+Normally, the graph visualizes the time it takes to _render_ an application, for any given change detection frame. However some components such as `OnPush` components will only re-render if their input properties change. It can be useful to visualize the flame graph without these components for particular frames.
+
+To visualize only the components in a change detection frame that went through the change detection process, select the **Change detection** checkbox at the top, above the flame graph.
+
+This view highlights all the components that went through change detection and displays those that did not in gray, such as `OnPush` components that did not re-render.
+
+<img src="assets/images/guide/devtools/debugging-onpush.png" alt="A screenshot of the 'Profiler' tab displaying a flame chart visualization of a change detection cycle. A checkbox labeled 'Show only change detection' is now checked. The flame graph looks very similar to before, however the color of components has changed from orange to blue. Several tiles labeled `[RouterOutlet]` are no longer highlighted with any color.">
+
+## Import and export recordings
+
+Click the **Save Profile** button at the top-right of a recorded profiling session to export it as a JSON file and save it to the disk.
+Later, import the file in the initial view of the profiler by clicking the **Choose file** input.
+
+<img src="assets/images/guide/devtools/save-profile.png" alt="A screenshot of the 'Profiler' tab displaying change detection cycles. On the right side a 'Save Profile' button is visible.">
diff --git a/adev-ja/src/content/tools/devtools/profiler.md b/adev-ja/src/content/tools/devtools/profiler.md
index b3ec6dbd7..5bf00c88c 100644
--- a/adev-ja/src/content/tools/devtools/profiler.md
+++ b/adev-ja/src/content/tools/devtools/profiler.md
@@ -1,76 +1,76 @@
-# Profile your application
+# アプリケーションのプロファイリング {#profile-your-application}
 
-The **Profiler** tab lets you visualize the execution of Angular's change detection.
-This is useful for determining when and how change detection impacts your application's performance.
+**Profiler**タブでは、Angularの変更検知の実行を視覚化できます。
+これは、変更検知がいつどのようにアプリケーションのパフォーマンスに影響を与えるかを判断するのに役立ちます。
 
-<img src="assets/images/guide/devtools/profiler.png" alt="A screenshot of the 'Profiler' tab which reads 'Click the play button to start a new recording, or upload a json file containing profiler data.' Next to this is a record button to begin recording a new profile as well as a file picker to select an existing profile.">
+<img src="assets/images/guide/devtools/profiler.png" alt="「Profiler」タブのスクリーンショットで、「再生ボタンをクリックして新しい記録を開始するか、プロファイラデータを含むjsonファイルをアップロードします。」と表示されています。その横に、新しいプロファイルを記録を開始する記録ボタンと、既存のプロファイルを選択するファイルピッカーがあります。">
 
-The Profiler tab lets you start profiling the current application or import an existing profile from a previous run.
-To start profiling your application, hover over the circle in the top-left corner within the **Profiler** tab and click **Start recording**.
+プロファイラタブでは、現在のアプリケーションのプロファイリングを開始したり、以前の実行からの既存のプロファイルをインポートしたりできます。
+アプリケーションのプロファイリングを開始するには、**Profiler**タブの左上隅にある丸の上にマウスを置いて、**Start recording**をクリックします。
 
-During profiling, Angular DevTools captures execution events, such as change detection and lifecycle hook execution.
-Interact with your application to trigger change detection and generate data Angular DevTools can use.
-To finish recording, click the circle again to **Stop recording**.
+プロファイリング中は、Angular DevToolsは、変更検知やライフサイクルフックの実行などの実行イベントをキャプチャします。
+変更検知をトリガーしてAngular DevToolsが使用できるデータを作成するために、アプリケーションと対話してください。
+記録を終了するには、丸を再びクリックして**Stop recording**します。
 
-You can also import an existing recording.
-Read more about this feature in the [Import recording](tools/devtools/profiler#import-and-export-recordings) section.
+既存の記録のインポートもできます。
+この機能の詳細については、[記録のインポート](tools/devtools/profiler#import-and-export-recordings)セクションをご覧ください。
 
-## Understand your application's execution
+## アプリケーションの実行の理解 {#understand-your-applications-execution}
 
-After recording or importing a profile, Angular DevTools displays a visualization of change detection cycles.
+プロファイルを記録またはインポートした後、Angular DevToolsは変更検知サイクルの視覚化を表示します。
 
-<img src="assets/images/guide/devtools/default-profiler-view.png" alt="A screenshot of the 'Profiler' tab after a profile has been recorded or uploaded. It displays a bar chart illustrating various change detection cycles with some text which reads 'Select a bar to preview a particular change detection cycle'.">
+<img src="assets/images/guide/devtools/default-profiler-view.png" alt="記録またはアップロードされたプロファイル後の「Profiler」タブのスクリーンショット。いくつかのテキストが表示され、「特定の変更検出サイクルをプレビューするには、バーを選択します」と表示されています。">
 
-Each bar in the sequence represents a change detection cycle in your app.
-The taller a bar is, the longer the application spent running change detection in this cycle.
-When you select a bar, DevTools displays useful information about it including:
+シーケンスの各バーは、アプリケーションの変更検知サイクルを表しています。
+バーが高いほど、アプリケーションは変更検知をこのサイクルで実行するのに時間がかかっています。
+バーを選択すると、DevToolsは次のような役立つ情報を表示します。
 
-- A bar chart with all the components and directives that it captured during this cycle
-- How much time Angular spent running change detection in this cycle.
-- An estimated frame rate as experienced by the user (if below 60fps)
+- このサイクルでキャプチャされたすべてのコンポーネントとディレクティブを含むバーチャート
+- Angularが変更検知をこのサイクルで実行するのにかかった時間。
+- ユーザーが経験した推定フレームレート（60fps未満の場合）
 
-<img src="assets/images/guide/devtools/profiler-selected-bar.png" alt="A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu displays 'Bar chart`, showing a second bar chart underneath it. The new chart has two bars which take up the majority of the space, one labeled `TodosComponent` and the other labeled `NgForOf`. The other bars are small enough to be negligible in comparison.">
+<img src="assets/images/guide/devtools/profiler-selected-bar.png" alt="「Profiler」タブのスクリーンショット。ユーザーによって単一のバーが選択されており、近くのドロップダウンメニューに「バーチャート」が表示され、その下に2番目のバーチャートが表示されています。新しいチャートには、大部分のスペースを占める2つのバーがあり、1つは「TodosComponent」とラベル付けされ、もう1つは「NgForOf」とラベル付けされています。他のバーは、これらに比べて小さいため、無視できます。">
 
-## Understand component execution
+## コンポーネント実行の理解 {#understand-component-execution}
 
-The bar chart displayed after clicking on a change detection cycle displays a detailed view about how much time your application spent running change detection in that particular component or directive.
+変更検知サイクルをクリックすると表示されるバーチャートは、アプリケーションがその特定のコンポーネントまたはディレクティブで変更検知を実行するのにどれだけ時間がかかったかを示す詳細ビューを表示します。
 
-This example shows the total time spent by the `NgForOf` directive and which method was called on it.
+この例では、`NgForOf`ディレクティブでかかった合計時間と、そのディレクティブで呼び出されたメソッドが表示されています。
 
-<img src="assets/images/guide/devtools/directive-details.png" alt="A screenshot of the 'Profiler' tab where the `NgForOf` bar is selected. A detailed view of `NgForOf` is visible to the right where it lists 'Total time spent: 1.76 ms'. It includes a with exactly one row, listing `NgForOf` as a directives with an `ngDoCheck` method which took 1.76 ms. It also includes a list labeled 'Parent Hierarchy' containing the parent components of this directive.">
+<img src="assets/images/guide/devtools/directive-details.png" alt="「Profiler」タブのスクリーンショットで、`NgForOf`バーが選択されています。右側に`NgForOf`の詳細ビューが表示され、「かかった合計時間: 1.76 ms」と表示されています。`NgForOf`を1.76 msかかった`ngDoCheck`メソッドを持つディレクティブとしてリストした行が1つだけ含まれています。また、「親階層」というラベルの付いたリストも含まれており、このディレクティブの親コンポーネントが含まれています。">
 
-## Hierarchical views
+## 階層ビュー {#hierarchical-views}
 
-<img src="assets/images/guide/devtools/flame-graph-view.png" alt="A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu now displays 'Flame graph', showing a flame graph underneath it. The flame graph starts with a row called 'Entire application' and another row called 'AppComponent'. Beneath those, the rows start to break up into multiple items, starting with `[RouterOutlet]` and `DemoAppComponent` on the third row. A few layers deep, one cell is highlighted red.">
+<img src="assets/images/guide/devtools/flame-graph-view.png" alt="「Profiler」タブのスクリーンショット。ユーザーによって単一のバーが選択されており、近くのドロップダウンメニューに「フレームグラフ」が表示され、その下にフレームグラフが表示されています。フレームグラフは、「Entire application」という行と「AppComponent」という行から始まります。その下は、3行目で「[RouterOutlet]」と「DemoAppComponent」から始まり、複数のアイテムに分割され始めます。数層深く、1つのセルが赤で強調表示されています。">
 
-You can also visualize the change detection execution in a flame graph-like view.
+変更検知の実行をフレームグラフのようなビューで視覚化できます。
 
-Each tile in the graph represents an element on the screen at a specific position in the render tree.
-For example, consider a change detection cycle where a `LoggedOutUserComponent` is removed and in its place Angular rendered a `LoggedInUserComponent`. In this scenario both components will be displayed in the same tile.
+グラフの各タイルは、レンダリングツリーの特定の位置にある画面上の要素を表します。
+たとえば、`LoggedOutUserComponent`が削除され、その代わりにAngularが`LoggedInUserComponent`をレンダリングした変更検知サイクルを考えます。このシナリオでは、両方のコンポーネントは同じタイルに表示されます。
 
-The x-axis represents the full time it took to render this change detection cycle.
-The y-axis represents the element hierarchy. Running change detection for an element requires rendering its directives and child components.
-Together, this graph visualizes which components are taking the longest time to render and where that time is going.
+X軸は、この変更検知サイクルのレンダリングにかかった合計時間を表します。
+Y軸は要素階層を表します。要素の変更検知を実行するには、そのディレクティブと子コンポーネントをレンダリングする必要があります。
+これらを組み合わせると、どのコンポーネントのレンダリングに時間がかかっているのか、その時間がどこに使われているのかが視覚化されます。
 
-Each tile is colored depending on how much time Angular spent there.
-Angular DevTools determines the intensity of the color by the time spent relative to the tile where rendering took the most time.
+各タイルは、Angularがそこでかかった時間に依存して色が付けられます。
+Angular DevToolsは、レンダリングに最も時間がかかったタイルに対するかかった時間によって、色の濃淡を決定します。
 
-When you click on a certain tile, you'll see details about it in the panel on the right.
-Double-clicking the tile zooms it in so you can more easily view its nested children.
+特定のタイルをクリックすると、右側のパネルにそのタイルに関する詳細が表示されます。
+タイルをダブルクリックすると、タイルが拡大され、ネストされた子要素をより簡単に表示できます。
 
-## Debug change detection and `OnPush` components
+## 変更検知と`OnPush`コンポーネントのデバッグ {#debug-change-detection-and-onpush-components}
 
-Normally, the graph visualizes the time it takes to _render_ an application, for any given change detection frame. However some components such as `OnPush` components will only re-render if their input properties change. It can be useful to visualize the flame graph without these components for particular frames.
+通常、グラフは、特定の変更検知フレームの、アプリケーションの*レンダリング*にかかる時間を視覚化します。しかし、`OnPush`コンポーネントなど、入力プロパティが変更された場合にのみ再レンダリングされるコンポーネントもあります。特定のフレームのこれらのコンポーネントなしでフレームグラフを視覚化すると役立つ場合があります。
 
-To visualize only the components in a change detection frame that went through the change detection process, select the **Change detection** checkbox at the top, above the flame graph.
+変更検知フレーム内で変更検知プロセスを経たコンポーネントのみを視覚化するには、フレームグラフの上部にある**変更検知**チェックボックスをオンにします。
 
-This view highlights all the components that went through change detection and displays those that did not in gray, such as `OnPush` components that did not re-render.
+このビューでは、変更検知を経たすべてのコンポーネントが強調表示され、再レンダリングされなかった`OnPush`コンポーネントなど、変更検知を経なかったコンポーネントが灰色で表示されます。
 
-<img src="assets/images/guide/devtools/debugging-onpush.png" alt="A screenshot of the 'Profiler' tab displaying a flame chart visualization of a change detection cycle. A checkbox labeled 'Show only change detection' is now checked. The flame graph looks very similar to before, however the color of components has changed from orange to blue. Several tiles labeled `[RouterOutlet]` are no longer highlighted with any color.">
+<img src="assets/images/guide/devtools/debugging-onpush.png" alt="変更検出サイクルのフレームチャート視覚化を表示する「Profiler」タブのスクリーンショット。「Show only change detection」というラベルの付いたチェックボックスがオンになっています。フレームグラフは以前と非常によく似ていますが、コンポーネントの色がオレンジから青に変わっています。`[RouterOutlet]`というラベルの付いたいくつかのタイルは、もうどの色でも強調表示されていません。">
 
-## Import and export recordings
+## 記録のインポートとエクスポート {#import-and-export-recordings}
 
-Click the **Save Profile** button at the top-right of a recorded profiling session to export it as a JSON file and save it to the disk.
-Later, import the file in the initial view of the profiler by clicking the **Choose file** input.
+記録されたプロファイリングセッションの右上にある**Save Profile**ボタンをクリックして、JSONファイルとしてエクスポートし、ディスクに保存します。
+後で、プロファイラの初期ビューで、**Choose file**入力をクリックしてファイルをインポートします。
 
-<img src="assets/images/guide/devtools/save-profile.png" alt="A screenshot of the 'Profiler' tab displaying change detection cycles. On the right side a 'Save Profile' button is visible.">
+<img src="assets/images/guide/devtools/save-profile.png" alt="変更検出サイクルを表示する「Profiler」タブのスクリーンショット。右側に「プロファイルの保存」ボタンが表示されています。">

From 2a0dd4e99e8e032758f7d7301f78bac81c6df247 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:17:31 +0900
Subject: [PATCH 36/55] fix(docs): remove route-animations.md (deleted in
 origin)

---
 .../guide/animations/route-animations.md      | 157 ------------------
 1 file changed, 157 deletions(-)
 delete mode 100644 adev-ja/src/content/guide/animations/route-animations.md

diff --git a/adev-ja/src/content/guide/animations/route-animations.md b/adev-ja/src/content/guide/animations/route-animations.md
deleted file mode 100644
index 1fbbd973d..000000000
--- a/adev-ja/src/content/guide/animations/route-animations.md
+++ /dev/null
@@ -1,157 +0,0 @@
-# Route transition animations
-
-When a user navigates from one route to another, the Angular Router maps the URL path to the relevant component and displays its view. Animating this route transition can greatly enhance the user experience. The Router has support for the View Transitions API when navigating between routes in Chrome/Chromium browsers.
-
-HELPFUL: The Router's native View Transitions integration is currently in [developer preview](/reference/releases#developer-preview). Native View Transitions are also a relatively new feature so there may be limited support in some browsers.
-
-## How View Transitions work
-
-The native browser method that’s used for view transitions is `document.startViewTransition`. When `startViewTransition()` is called, the browser captures the current state of the page which includes taking a screenshot. The method takes a callback that updates the DOM and this function can be asynchronous. The new state is captured and the transition begins in the next animation frame when the promise returned by the callback resolves.
-
-Here’s an example of the startViewTransition api:
-
-```ts
-document.startViewTransition(async () => {
-  await updateTheDOMSomehow();
-});
-```
-
-If you’re curious to read more about the details of the browser API, the [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions) is an invaluable resource.
-
-## How the Router uses view transitions
-
-Several things happen after navigation starts in the router: route matching, loading lazy routes and components, executing guards and resolvers to name a few. Once these have completed successfully, the new routes are ready to be activated. This route activation is the DOM update that we want to perform as part of the view transition.
-
-When the view transition feature is enabled, navigation “pauses” and a call is made to the browser’s `startViewTransition` method. Once the `startViewTransition` callback executes (this happens asynchronously, as outlined in the spec here), navigation “resumes”. The remaining steps for the router navigation include updating the browser URL and activating or deactivating the matched routes (the DOM update).
-
-Finally, the callback passed to `startViewTransition` returns a Promise that resolves once Angular has finished rendering. As described above, this indicates to the browser that the new DOM state should be captured and the transition should begin.
-
-View transitions are a [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). If the browser does not support the API, the Router will perform the DOM updates without calling `startViewTransition` and the navigation will not be animated.
-
-## Enabling View Transitions in the Router
-
-To enable this feature, simply add `withViewTransitions` to the `provideRouter` or set `enableViewTransitions: true` in `RouterModule.forRoot`:
-
-```ts
-// Standalone bootstrap
-bootstrapApplication(MyApp, {providers: [
-  provideRouter(ROUTES, withViewTransitions()),
-]});
-
-// NgModule bootstrap
-@NgModule({
-  imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})]
-})
-export class AppRouting {}
-```
-
-[Try the “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-2dnvtm?file=src%2Fmain.ts)
-
-This example uses the counter application from the Chrome explainer and replaces the direct call to startViewTransition when the counter increments with a router navigation.
-
-## Using CSS to customize transitions
-
-View transitions can be customized with CSS. We can also instruct the browser to create separate elements for the transition by setting a view-transition-name. We can expand the first example by adding view-transition-name: count to the .count style in the Counter component. Then, in the global styles, we can define a custom animation for this view transition:
-
-```css
-/* Custom transition */
-@keyframes rotate-out {
- to {
-   transform: rotate(90deg);
- }
-}
-@keyframes rotate-in {
- from {
-   transform: rotate(-90deg);
- }
-}
-::view-transition-old(count),
-::view-transition-new(count) {
- animation-duration: 200ms;
- animation-name: -ua-view-transition-fade-in, rotate-in;
-}
-::view-transition-old(count) {
- animation-name: -ua-view-transition-fade-out, rotate-out;
-}
-```
-
-It is important that the view transition animations are defined in a global style file. They cannot be defined in the component styles because the default view encapsulation will scope the styles to the component.
-
-[Try the updated “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
-
-## Controlling transitions with onViewTransitionCreated
-
-The `withViewTransitions` router feature can also be called with an options object that includes an `onViewTransitionCreated` callback. This callback is run in an [injection context](/guide/di/dependency-injection-context#run-within-an-injection-context) and receives a [ViewTransitionInfo](/api/router/ViewTransitionInfo) object that includes the `ViewTransition` returned from `startViewTransition`, as well as the `ActivatedRouteSnapshot` that the navigation is transitioning from and the new one that it is transitioning to.
-
-This callback can be used for any number of customizations. For example, you might want to skip transitions under certain conditions. We use this on the new angular.dev docs site:
-
-```ts
-withViewTransitions({
- onViewTransitionCreated: ({transition}) => {
-   const router = inject(Router);
-   const targetUrl = router.getCurrentNavigation()!.finalUrl!;
-   // Skip the transition if the only thing 
-   // changing is the fragment and queryParams
-   const config = { 
-     paths: 'exact', 
-     matrixParams: 'exact',
-     fragment: 'ignored',
-     queryParams: 'ignored',
-   };
-
-   if (router.isActive(targetUrl, config)) {
-     transition.skipTransition();
-   }
- },
-}),
-```
-
-In this code snippet, we create a `UrlTree` from the `ActivatedRouteSnapshot` the navigation is going to. We then check with the Router to see if this `UrlTree` is already active, ignoring any differences in the fragment or query parameters. If it is already active, we call skipTransition which will skip the animation portion of the view transition. This is the case when clicking on an anchor link that will only scroll to another location in the same document.
-
-## Examples from the Chrome explainer adapted to Angular
-
-We’ve recreated some of the great examples from the Chrome Team in Angular for you to explore.
-
-### Transitioning elements don’t need to be the same DOM element
-
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning_elements_dont_need_to_be_the_same_dom_element)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-dh8npr?file=src%2Fmain.ts)
-
-### Custom entry and exit animations
-
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#custom_entry_and_exit_transitions)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-8kly3o)
-
-### Async DOM updates and waiting for content
-
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#async_dom_updates_and_waiting_for_content)
-
-> During this time, the page is frozen, so delays here should be kept to a minimum…in some cases it’s better to avoid the delay altogether, and use the content you already have.
-
-The view transition feature in the Angular router does not provide a way to delay the animation. For the moment, our stance is that it’s always better to use the content you have rather than making the page non-interactive for any additional amount of time.
-
-### Handle multiple view transition styles with view transition types
-
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-vxzcam)
-
-### Handle multiple view transition styles with a class name on the view transition root (deprecated)
-
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#changing-on-navigation-type)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-nmnzzg?file=src%2Fmain.ts)
-
-### Transitioning without freezing other animations
-
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning-without-freezing)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-76kgww)
-
-### Animating with Javascript
-
-* [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#animating-with-javascript)
-* [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-cklnkm)
-
-## Native View Transitions Alternative
-
-Animating the transition between routes can also be done with the `@angular/animations` package. 
-The animation [triggers and transitions](/guide/animations/transition-and-triggers)
-can be derived from the router state, such as the current URL or `ActivatedRoute`.

From c9b0b979f6d7402cfc097afd25666ad67f8aa21e Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:17:49 +0900
Subject: [PATCH 37/55] fix(docs): remove hybrid-rendering.md (merged into
 ssr.md)

---
 .../src/content/guide/hybrid-rendering.en.md  | 324 -----------------
 adev-ja/src/content/guide/hybrid-rendering.md | 325 ------------------
 2 files changed, 649 deletions(-)
 delete mode 100644 adev-ja/src/content/guide/hybrid-rendering.en.md
 delete mode 100644 adev-ja/src/content/guide/hybrid-rendering.md

diff --git a/adev-ja/src/content/guide/hybrid-rendering.en.md b/adev-ja/src/content/guide/hybrid-rendering.en.md
deleted file mode 100644
index 8db63ebf9..000000000
--- a/adev-ja/src/content/guide/hybrid-rendering.en.md
+++ /dev/null
@@ -1,324 +0,0 @@
-# Hybrid rendering
-
-## What is hybrid rendering?
-
-Hybrid rendering combines the benefits of server-side rendering (SSR), pre-rendering (also known as "static site generation" or SSG) and client-side rendering (CSR) to optimize your Angular application. It allows you to render different parts of your application using different strategies, giving you fine-grained control over how your app is delivered to users.
-
-Angular’s new **developer preview** server rendering APIs offer a more efficient and adaptable approach to building modern web applications. These APIs give you complete control over your app’s rendering, allowing for optimizations that enhance performance, Search Engine Optimization (SEO), and overall user experience.
-
-**Benefits of these new APIs:**
-
-- **Greater flexibility:**
-  - Leverage fine-grained control over rendering allows you to optimize for performance and user experience in different parts of your application.
-  - Choose the best rendering strategy for each route, whether it's server-side rendering for fast initial load times, client-side rendering for dynamic interactivity, or a hybrid approach.
-- **Built-in internationalization (i18n):**
-  - Easily adapt your application to different languages and regions with out-of-the-box i18n support.
-- **Environment agnostic:**
-  - Use these APIs with any JavaScript runtime environment, not just Node.js.
-  - Enjoy the benefits of enhanced rendering capabilities regardless of your technology stack.
-- **Seamless dev server integration:**
-  - Take advantage of a smooth and efficient development experience from a fully integrated development server.
-
-This developer preview gives you a first look at these powerful new features. The Angular team encourages you to explore them and provide feedback to help shape the future of Angular server rendering.
-
-## Setting up hybrid rendering
-
-You can create a **new** project with server-side routing with the Angular CLI:
-
-```shell
-ng new --ssr --server-routing
-```
-
-You can also add server-side routing to an existing project with the `ng add` command:
-
-```shell
-ng add @angular/ssr --server-routing
-```
-
-## Server routing
-
-### Configuring server routes
-
-You can create a server route config by declaring an array of [`ServerRoute`](api/ssr/ServerRoute 'API reference') objects. This configuration typically lives in a file named `app.routes.server.ts`.
-
-```typescript
-// app.routes.server.ts
-import { RenderMode, ServerRoute } from '@angular/ssr';
-
-export const serverRoutes: ServerRoute[] = [
-  {
-    path: '', // This renders the "/" route on the client (CSR)
-    renderMode: RenderMode.Client,
-  },
-  {
-    path: 'about', // This page is static, so we prerender it (SSG)
-    renderMode: RenderMode.Prerender,
-  },
-  {
-    path: 'profile', // This page requires user-specific data, so we use SSR
-    renderMode: RenderMode.Server,
-  },
-  {
-    path: '**', // All other routes will be rendered on the server (SSR)
-    renderMode: RenderMode.Server,
-  },
-];
-```
-
-You can add this config to your application using the [`provideServerRouting`](api/ssr/provideServerRouting 'API reference') function.
-
-```typescript
-import { provideServerRouting } from '@angular/ssr';
-import { serverRoutes } from './app.routes.server';
-
-// app.config.server.ts
-const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering(),
-    provideServerRouting(serverRoutes),
-    // ... other providers ...
-  ]
-};
-```
-
-When using the [App shell pattern](ecosystem/service-workers/app-shell), you must specify the route to be used as the app shell for client-side rendered routes. To do this, provide an options object with the `appShellRoute` property to [`provideServerRouting`](api/ssr/provideServerRouting 'API reference'):
-
-```typescript
-import { provideServerRouting, withAppShell } from '@angular/ssr';
-import { AppShellComponent } from './app-shell/app-shell.component';
-
-const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRouting(serverRoutes, withAppShell(AppShellComponent)),
-    // ... other providers ...
-  ]
-};
-```
-
-### Rendering modes
-
-The server routing configuration lets you specify how each route in your application should render by setting a [`RenderMode`](api/ssr/RenderMode 'API reference'):
-
-| Rendering mode      | Description                                                                                                                                                                                                                                          |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Server (SSR)**    | Renders the application on the server for each request, sending a fully populated HTML page to the browser. See the [Server-Side Rendering (SSR) guide](guide/ssr) for more information.                                                             |
-| **Client (CSR)**    | Renders the application in the browser. This is the default Angular behavior.                                                                                                                                                                        |
-| **Prerender (SSG)** | Prerenders the application at build time, generating static HTML files for each route. See the [Prerendering guide](guide/prerendering) for more information.                                                                                        |
-
-#### Choosing a rendering mode
-
-Each rendering mode has different benefits and drawbacks. You can choose rendering modes based on the specific needs of your application.
-
-##### Client-side rendering
-
-Client-side rendering has the simplest development model, as you can write code that assumes it always runs in a web browser. This lets you use a wide range of client-side libraries that also assume they run in a browser.
-
-Client-side rendering generally has worse performance than other rendering modes, as it must download, parse, and execute your page's JavaScript before the user can see any rendered content. If your page fetches more data from the server as it renders, users also have to wait for those additional requests before they can view the complete content.
-
-If your page is indexed by search crawlers, client-side rendering may negatively affect search engine optimization (SEO), as search crawlers have limits to how much JavaScript they execute when indexing a page.
-
-When client-side rendering, the server does not need to do any work to render a page beyond serving static JavaScript assets. You may consider this factor if server cost is a concern.
-
-Applications that support installable, offline experiences with [service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) can rely on client-side rendering without needing to communicate with a server.
-
-##### Server-side rendering
-
-Server-side rendering offers faster page loads than client-side rendering. Instead of waiting for JavaScript to download and run, the server directly renders an HTML document upon receiving a request from the browser. The user experiences only the latency necessary for the server to fetch data and render the requested page. This mode also eliminates the need for additional network requests from the browser, as your code can fetch data during rendering on the server.
-
-Server-side rendering generally has excellent search engine optimization (SEO), as search crawlers receive a fully rendered HTML document.
-
-Server-side rendering requires you to author code that does not strictly depend on browser APIs and limits your selection of JavaScript libraries that assume they run in a browser.
-
-When server-side rendering, your server runs Angular to produce an HTML response for every request. This additional cost may affect server hosting costs.
-
-##### Build-time prerendering
-
-Prerendering offers faster page loads than both client-side rendering and server-side rendering. Because prerendering creates HTML documents at _build-time_, the server can directly respond to requests with the static HTML document without any additional work.
-
-Prerendering requires that all information necessary to render a page is available at _build-time_. This means that prerendered pages cannot include any data to the specific user loading the page. This means that prerendering is primarily useful for pages that are the same for all users of your application.
-
-Because prerendering occurs at build-time, it may add significant time to your production builds. Using [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') to produce a large number of HTML documents may affect the total file size of your deployments, and thus lead to slower deployments.
-
-It may also add time to your deployments based on the number of static HTML documents included in your build output.
-
-Prerendering generally has excellent search engine optimization (SEO), as search crawlers receive a fully rendered HTML document.
-
-Prerendering requires you to author code that does not strictly depend on browser APIs and limits your selection of JavaScript libraries that assume they run in a browser.
-
-Prerendering incurs extremely little overhead per server request, as your server responds with static HTML documents. Static files are also easily cached by Content Delivery Networks (CDNs), browsers, and intermediate caching layers for even faster subsequent page loads. Deploying static HTML files to a CDN improves scalability by offloading work from your application web server, which is impactful for high-traffic applications.
-
-### Setting headers and status codes
-
-You can set custom headers and status codes for individual server routes using the `headers` and `status` properties in the `ServerRoute` configuration.
-
-```typescript
-// app.routes.server.ts
-import { RenderMode, ServerRoute } from '@angular/ssr';
-
-export const serverRoutes: ServerRoute[] = [
-  {
-    path: 'profile',
-    renderMode: RenderMode.Server,
-    headers: {
-      'X-My-Custom-Header': 'some-value',
-    },
-    status: 201,
-  },
-  // ... other routes
-];
-```
-
-### Redirects
-
-Angular handles redirects specified by the [`redirectTo`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') property in route configurations, differently on the server-side.
-
-**Server-Side Rendering (SSR)**
-Redirects are performed using standard HTTP redirects (e.g., 301, 302) within the server-side rendering process.
-
-**Prerendering (SSG)**
-Redirects are implemented as "soft redirects" using `<meta http-equiv="refresh">` tags in the prerendered HTML. This allows for redirects without requiring a round trip to the server.
-
-### Customizing build-time prerendering (SSG)
-
-When using [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), you can specify several configuration options to customize the prerendering and serving process.
-
-#### Parameterized routes
-
-For each route with [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), you can specify a [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') function. This function lets you control which specific parameters produce separate prerendered documents.
-
-The [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') function returns a `Promise` that resolves to an array of objects. Each object is a key-value map of route parameter name to value. For example, if you define a route like `posts/:id`, `getPrerenderParams ` could return the array `[{id: 123}, {id: 456}]`, and thus render separate documents for `posts/123` and `posts/456`.
-
-The body of [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') can use Angular's [`inject`](api/core/inject 'API reference') function to inject dependencies and perform any work to determine which routes to prerender. This typically includes making requests to fetch data to construct the array of parameter values.
-
-```typescript
-// app.routes.server.ts
-import { RenderMode, ServerRoute } from '@angular/ssr';
-
-export const serverRoutes: ServerRoute[] = [
-  {
-    path: 'post/:id',
-    renderMode: RenderMode.Prerender,
-    async getPrerenderParams() {
-      const dataService = inject(PostService);
-      const ids = await dataService.getIds(); // Assuming this returns ['1', '2', '3']
-
-      return ids.map(id => ({ id })); // Transforms IDs into an array of objects for prerendering
-
-      // This will prerender the paths: `/post/1`, `/post/2` and `/post/3`
-    },
-  },
-];
-```
-
-Because [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') exclusively applies to [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), this function always runs at _build-time_. `getPrerenderParams` must not rely on any browser-specific or server-specific APIs for data. If the route does not specify a [`fallback`](api/ssr/ServerRoutePrerenderWithParams#fallback 'API reference') option, the route falls back to [`PrerenderFallback.Server`](api/ssr/PrerenderFallback#Server 'API reference') (SSR) by default.
-
-IMPORTANT: When using [`inject`](api/core/inject 'API reference') inside `getPrerenderParams`, please remember that `inject` must be used synchronously. It cannot be invoked within asynchronous callbacks or following any `await` statements. For more information, refer to [`runInInjectionContext` API reference](api/core/runInInjectionContext).
-
-#### Fallback strategies
-
-When using [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference') mode, you can specify a fallback strategy to handle requests for paths that haven't been prerendered.
-
-The available fallback strategies are:
-
-- **Server:** Fallback to server-side rendering. This is the **default** behavior if no `fallback` property is specified.
-- **Client:** Fallback to client-side rendering.
-- **None:** No fallback. Angular will not handle requests for paths that are not prerendered.
-
-```typescript
-// app.routes.server.ts
-import { RenderMode, PrerenderFallback, ServerRoute } from '@angular/ssr';
-
-export const serverRoutes: ServerRoute[] = [
-  {
-    path: 'post/:id',
-    renderMode: RenderMode.Prerender,
-    fallback: PrerenderFallback.Client, // Fallback to CSR if not prerendered
-    async getPrerenderParams() {
-      // This function returns an array of objects representing prerendered posts at the paths:
-      // `/post/1`, `/post/2`, and `/post/3`.
-      // The path `/post/4` will utilize the fallback behavior if it's requested.
-      return [{ id: 1 }, { id: 2 }, { id: 3 }];
-    },
-  },
-];
-```
-
-## Accessing Request and Response via DI
-
-The `@angular/core` package provides several tokens for interacting with the server-side rendering environment. These tokens give you access to crucial information and objects within your Angular application during SSR.
-
-- **[`REQUEST`](api/core/REQUEST 'API reference'):** Provides access to the current request object, which is of type [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) from the Web API. This allows you to access headers, cookies, and other request information.
-- **[`RESPONSE_INIT`](api/core/RESPONSE_INIT 'API reference'):** Provides access to the response initialization options, which is of type [`ResponseInit`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#parameters) from the Web API. This allows you to set headers and the status code for the response dynamically. Use this token to set headers or status codes that need to be determined at runtime.
-- **[`REQUEST_CONTEXT`](api/core/REQUEST_CONTEXT 'API reference'):** Provides access to additional context related to the current request. This context can be passed as the second parameter of the [`handle`](api/ssr/AngularAppEngine#handle 'API reference') function. Typically, this is used to provide additional request-related information that is not part of the standard Web API.
-
-```angular-ts
-import { inject, REQUEST } from '@angular/core';
-
-@Component({
-  selector: 'app-my-component',
-  template: `<h1>My Component</h1>`,
-})
-export class MyComponent {
-  constructor() {
-    const request = inject(REQUEST);
-    console.log(request?.url);
-  }
-}
-```
-
-IMPORTANT: The above tokens will be `null` in the following scenarios:
-- During the build processes.
-- When the application is rendered in the browser (client-side rendering).
-- When performing static site generation (SSG).
-- During route extraction in development (at the time of the request).
-
-## Configuring a non-Node.js Server
-
-The `@angular/ssr` provides essential APIs for server-side rendering your Angular application on platforms other than Node.js. It leverages the standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects from the Web API, enabling you to integrate Angular SSR into various server environments. For detailed information and examples, refer to the [`@angular/ssr` API reference](api/ssr/AngularAppEngine).
-
-```typescript
-// server.ts
-import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
-
-const angularApp = new AngularAppEngine();
-
-/**
- * This is a request handler used by the Angular CLI (dev-server and during build).
- */
-const reqHandler = createRequestHandler(async (req: Request) => {
-  const res: Response|null = await angularApp.render(req);
-
-  // ...
-});
-```
-
-## Configuring a Node.js Server
-
-The `@angular/ssr/node` extends `@angular/ssr` specifically for Node.js environments. It provides APIs that make it easier to implement server-side rendering within your Node.js application. For a complete list of functions and usage examples, refer to the [`@angular/ssr/node` API reference](api/ssr/node/AngularNodeAppEngine) API reference.
-
-```typescript
-// server.ts
-import { AngularNodeAppEngine, createNodeRequestHandler, writeResponseToNodeResponse } from '@angular/ssr/node';
-import express from 'express';
-
-const app = express();
-const angularApp = new AngularNodeAppEngine();
-
-app.use('*', (req, res, next) => {
-  angularApp
-    .handle(req)
-    .then(response => {
-      if (response) {
-        writeResponseToNodeResponse(response, res);
-      } else {
-        next(); // Pass control to the next middleware
-      }
-    })
-    .catch(next);
-});
-
-/**
- * The request handler used by the Angular CLI (dev-server and during build).
- */
-export const reqHandler = createNodeRequestHandler(app);
-```
diff --git a/adev-ja/src/content/guide/hybrid-rendering.md b/adev-ja/src/content/guide/hybrid-rendering.md
deleted file mode 100644
index 25ccb9322..000000000
--- a/adev-ja/src/content/guide/hybrid-rendering.md
+++ /dev/null
@@ -1,325 +0,0 @@
-# ハイブリッドレンダリング
-
-## ハイブリッドレンダリングとは何か？
-
-ハイブリッドレンダリングは、サーバーサイドレンダリング（SSR）、プリレンダリング（「静的サイト生成」またはSSGとしても知られています）、クライアントサイドレンダリング（CSR）の利点を組み合わせて、Angularアプリケーションを最適化します。これにより、アプリケーションのさまざまな部分を異なる戦略を使用してレンダリングでき、アプリケーションがユーザーに配信される方法をきめ細かく制御できます。
-
-Angularの新しい**開発者プレビュー**のサーバーレンダリングAPIは、最新のウェブアプリケーションを構築するためのより効率的で適応性の高いアプローチを提供します。これらのAPIは、アプリケーションのレンダリングを完全に制御できるため、パフォーマンスや検索エンジン最適化（SEO）、および全体的なユーザー体験を向上させる最適化が可能です。
-
-**これらの新しいAPIのメリット：**
-
-- **柔軟性の向上：**
-  - レンダリングに対するきめ細かい制御を活用することで、アプリケーションのさまざまな部分のパフォーマンスとユーザー体験を最適化できます。
-  - 各ルートに最適なレンダリング戦略を選択できます。高速な初期ロード時間のためのサーバーサイドレンダリング、動的なインタラクティブ性のためのクライアントサイドレンダリング、またはハイブリッドアプローチなどです。
-- **組み込みの国際化（i18n）：**
-  - すぐに使えるi18nサポートにより、アプリケーションをさまざまな言語や地域に簡単に適応させることができます。
-- **環境に依存しない：**
-  - Node.jsだけでなく、任意のJavaScriptランタイム環境でこれらのAPIを使用できます。
-  - テクノロジースタックに関係なく、強化されたレンダリング機能の利点を享受できます。
-- **シームレスな開発サーバー統合：**
-  - 完全統合された開発サーバーからスムーズで効率的な開発エクスペリエンスを活用できます。
-
-この開発者プレビューでは、これらの強力な新機能をいち早く確認できます。Angularチームは、みなさんがこれらの機能を探索し、フィードバックを提供してAngularサーバーレンダリングの将来を形作ることを奨励しています。
-
-## ハイブリッドレンダリングの設定
-
-Angular CLIを使用して、サーバーサイドルーティングを備えた**新しい**プロジェクトを作成できます。
-
-```shell
-ng new --ssr --server-routing
-```
-
-`ng add`コマンドを使用して、既存のプロジェクトにサーバーサイドルーティングの追加もできます。
-
-```shell
-ng add @angular/ssr --server-routing
-```
-
-## サーバールーティング
-
-### サーバールートの設定
-
-`ServerRoute`オブジェクトの配列を宣言することで、サーバールート設定を作成できます。この設定は、通常`app.routes.server.ts`という名前のファイルに格納されます。
-
-```typescript
-// app.routes.server.ts
-import { RenderMode, ServerRoute } from '@angular/ssr';
-
-export const serverRoutes: ServerRoute[] = [
-  {
-    path: '', // これはクライアントで "/" ルートをレンダリングします (CSR)
-    renderMode: RenderMode.Client,
-  },
-  {
-    path: 'about', // このページは静的なので、プリレンダリングします (SSG)
-    renderMode: RenderMode.Prerender,
-  },
-  {
-    path: 'profile', // このページはユーザー固有のデータが必要なので、SSR を使用します
-    renderMode: RenderMode.Server,
-  },
-  {
-    path: '**', // その他すべてのルートはサーバーでレンダリングされます (SSR)
-    renderMode: RenderMode.Server,
-  },
-];
-```
-
-[`provideServerRouting`](api/ssr/provideServerRouting 'API reference')関数を使用して、この設定をアプリケーションに追加できます。
-
-```typescript
-import { provideServerRouting } from '@angular/ssr';
-import { serverRoutes } from './app.routes.server';
-
-// app.config.server.ts
-const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering(),
-    provideServerRouting(serverRoutes),
-    // ... other providers ...
-  ]
-};
-```
-
-[App Shellパターン](ecosystem/service-workers/app-shell)を使用する場合は、クライアントサイドでレンダリングされたルートのアプリケーションシェルとして使用するルートを指定する必要があります。これを行うには、`appShellRoute`プロパティを持つオプションオブジェクトを[`provideServerRouting`](api/ssr/provideServerRouting 'API reference')に提供します。
-
-```typescript
-import { provideServerRouting, withAppShell } from '@angular/ssr';
-import { AppShellComponent } from './app-shell/app-shell.component';
-
-const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRouting(serverRoutes, withAppShell(AppShellComponent)),
-    // ... other providers ...
-  ]
-};
-```
-
-### レンダリングモード
-
-サーバールーティング設定では、`RenderMode`を設定することで、アプリケーションの各ルートがどのようにレンダリングされるかを指定できます。
-
-| レンダリングモード      | 説明                                                                                                                                                                                                                                          |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Server (SSR)**    | 各リクエストに対してサーバーでアプリケーションをレンダリングし、完全に完成したHTMLページをブラウザに送信します。詳細については、[サーバーサイドレンダリング（SSR）ガイド](guide/ssr)を参照してください。                                                             |
-| **Client (CSR)**    | ブラウザでアプリケーションをレンダリングします。これはAngularのデフォルトの動作です。                                                                                                                                                                        |
-| **Prerender (SSG)** | ビルド時にアプリケーションをプリレンダリングし、各ルートの静的HTMLファイルを生成します。詳細については、[プリレンダリングガイド](guide/prerendering)を参照してください。                                                                                        |
-
-#### レンダリングモードの選択
-
-各レンダリングモードには、それぞれ異なる利点と欠点があります。アプリケーションの具体的なニーズに基づいてレンダリングモードを選択できます。
-
-##### クライアントサイドレンダリング
-
-クライアントサイドレンダリングは、常にウェブブラウザで実行されると仮定してコードを記述できるため、最もシンプルな開発モデルです。これにより、ブラウザで実行されると仮定する広範なクライアントサイドライブラリを使用できます。
-
-クライアントサイドレンダリングは、一般的に他のレンダリングモードよりもパフォーマンスが劣ります。ユーザーがレンダリングされたコンテンツを表示する前に、ページのJavaScriptをダウンロード、解析、および実行する必要があるためです。ページがレンダリング中にサーバーからさらにデータを取得する場合、ユーザーは完全なコンテンツを表示する前に、それらの追加リクエストを待つ必要もあります。
-
-ページが検索クローラーによってインデックス付けされている場合、クライアントサイドレンダリングは検索エンジン最適化（SEO）に悪影響を与える可能性があります。検索クローラーは、ページをインデックス付けする際に実行するJavaScriptの量に制限があるためです。
-
-クライアントサイドレンダリングの場合、サーバーは静的JavaScriptアセットを提供する以外に、ページをレンダリングするための作業はありません。サーバーコストが懸念事項である場合は、この要素を考慮できます。
-
-[サービスワーカー](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)を使用してインストール可能なオフラインエクスペリエンスをサポートするアプリケーションは、サーバーと通信する必要なく、クライアントサイドレンダリングに依存できます。
-
-##### サーバーサイドレンダリング
-
-サーバーサイドレンダリングは、クライアントサイドレンダリングよりもページのロードが高速になります。JavaScriptのダウンロードと実行を待つ代わりに、サーバーはブラウザからリクエストを受信すると、直接HTMLドキュメントをレンダリングします。ユーザーは、サーバーがデータを取得して要求されたページをレンダリングするために必要な待ち時間しか経験しません。このモードでは、ブラウザからの追加のネットワークリクエストも不要になります。コードはサーバーでレンダリング中にデータを取得できるためです。
-
-サーバーサイドレンダリングは、一般的に検索エンジン最適化（SEO）に優れています。検索クローラーは完全にレンダリングされたHTMLドキュメントを受け取るためです。
-
-サーバーサイドレンダリングでは、ブラウザAPIに厳密に依存しないコードを作成する必要があり、ブラウザで実行されると仮定するJavaScriptライブラリの選択が制限されます。
-
-サーバーサイドレンダリングの場合、サーバーはAngularを実行して、すべてのリクエストに対してHTMLレスポンスを生成します。この追加コストは、サーバーのホスティングコストに影響を与える可能性があります。
-
-##### ビルド時のプリレンダリング
-
-プリレンダリングは、クライアントサイドレンダリングとサーバーサイドレンダリングの両方よりもページのロードが高速になります。プリレンダリングは_ビルド時_にHTMLドキュメントを作成するため、サーバーは追加の作業をすることなく、静的HTMLドキュメントですぐにリクエストに応答できます。
-
-プリレンダリングでは、ページをレンダリングするために必要なすべての情報が_ビルド時_に利用可能である必要があります。つまり、プリレンダリングされたページには、ページを読み込んでいる特定のユーザーへのデータを含めることができません。これは、プリレンダリングは主に、アプリケーションのすべてのユーザーに対して同じであるページに役立つことを意味します。
-
-プリレンダリングはビルド時に行われるため、本番ビルドにかなりの時間がかかる可能性があります。[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')を使用して多数のHTMLドキュメントを生成すると、展開ファイルの総サイズに影響し、デプロイが遅くなる可能性があります。
-
-ビルド出力に含まれる静的HTMLドキュメントの数によっては、デプロイ時間が長くなる可能性もあります。
-
-プリレンダリングは、一般的に検索エンジン最適化（SEO）に優れています。検索クローラーは完全にレンダリングされたHTMLドキュメントを受け取るためです。
-
-プリレンダリングでは、ブラウザAPIに厳密に依存しないコードを作成する必要があり、ブラウザで実行されると仮定するJavaScriptライブラリの選択が制限されます。
-
-プリレンダリングは、サーバーが静的HTMLドキュメントで応答するため、サーバーリクエストごとのオーバーヘッドが非常に少なくなります。静的ファイルは、コンテンツデリバリーネットワーク（CDN）、ブラウザ、および中間キャッシュレイヤーによって簡単にキャッシュされるため、その後のページロードがさらに高速になります。静的HTMLファイルをCDNに展開すると、アプリケーションウェブサーバーからの作業負荷を軽減できるため、トラフィックの多いアプリケーションにとって大きな影響があります。
-
-### ヘッダーとステータスコードの設定
-
-`ServerRoute`設定の`headers`プロパティと`status`プロパティを使用して、個々のサーバールートのカスタムヘッダーとステータスコードを設定できます。
-
-```typescript
-// app.routes.server.ts
-import { RenderMode, ServerRoute } from '@angular/ssr';
-
-export const serverRoutes: ServerRoute[] = [
-  {
-    path: 'profile',
-    renderMode: RenderMode.Server,
-    headers: {
-      'X-My-Custom-Header': 'some-value',
-    },
-    status: 201,
-  },
-  // ... other routes
-];
-```
-
-### リダイレクト
-
-Angularは、ルート設定の[`redirectTo`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')プロパティで指定されたリダイレクトを、サーバーサイドでは異なる方法で処理します。
-
-**サーバーサイドレンダリング（SSR）**
-リダイレクトは、サーバーサイドレンダリングプロセス内で標準のHTTPリダイレクト（例：301、302）を使用して実行されます。
-
-**プリレンダリング（SSG）**
-リダイレクトは、プリレンダリングされたHTMLで`<meta http-equiv="refresh">`タグを使用して「ソフトリダイレクト」として実装されます。これにより、サーバーへのラウンドトリップを行うことなくリダイレクトが可能になります。
-
-### ビルド時のプリレンダリング（SSG）のカスタマイズ
-
-[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')を使用する場合、プリレンダリングとサービスプロセスをカスタマイズするためのいくつかの設定オプションを指定できます。
-
-#### パラメータ化されたルート
-
-[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')を持つ各ルートについて、[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')関数を指定できます。この関数を使用すると、どの特定のパラメータで個別のプリレンダリングされたドキュメントを生成するかを制御できます。
-
-[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')関数は、オブジェクトの配列に解決される`Promise`を返します。各オブジェクトは、ルートパラメータ名と値のキーと値のマップです。たとえば、`posts/:id`のようなルートを定義した場合、`getPrerenderParams`は配列`[{id: 123}, {id: 456}]`を返し、`posts/123`と`posts/456`の個別のドキュメントをレンダリングします。
-
-[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')の本文では、Angularの[`inject`](api/core/inject 'API reference')関数を使用して依存関係を注入し、プリレンダリングするルートを決定するための任意の作業ができます。これには、通常、データを取得するためのリクエストを実行して、パラメータ値の配列を作成することが含まれます。
-
-```typescript
-// app.routes.server.ts
-import { RenderMode, ServerRoute } from '@angular/ssr';
-
-export const serverRoutes: ServerRoute[] = [
-  {
-    path: 'post/:id',
-    renderMode: RenderMode.Prerender,
-    async getPrerenderParams() {
-      const dataService = inject(PostService);
-      const ids = await dataService.getIds(); // これは ['1', '2', '3'] を返すことを想定しています
-
-      return ids.map(id => ({ id })); // プリレンダリング用のオブジェクトの配列に変換します
-
-      // これにより、パス `/post/1`、`/post/2`、`/post/3` がプリレンダリングされます
-    },
-  },
-];
-```
-
-[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference')は[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')のみに適用されるため、この関数は常に_ビルド時_に実行されます。`getPrerenderParams`は、データに対してブラウザ固有またはサーバー固有のAPIに依存してはなりません。ルートが[`fallback`](api/ssr/ServerRoutePrerenderWithParams#fallback 'API reference')オプションを指定しない場合、ルートはデフォルトで[`PrerenderFallback.Server`](api/ssr/PrerenderFallback#Server 'API reference')（SSR）にフォールバックします。
-
-IMPORTANT: `getPrerenderParams`内で[`inject`](api/core/inject 'API reference')を使用する場合は、`inject`を同期的に使用する必要があることを覚えておいてください。非同期コールバック内、または`await`ステートメントの後で使用できません。詳細については、[`runInInjectionContext` APIリファレンス](api/core/runInInjectionContext)を参照してください。
-
-#### フォールバック戦略
-
-[`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference')モードを使用する場合、プリレンダリングされていないパスのリクエストを処理するためのフォールバック戦略を指定できます。
-
-利用可能なフォールバック戦略は次のとおりです。
-
-- **Server:** サーバーサイドレンダリングにフォールバックします。これは、`fallback`プロパティが指定されていない場合の**デフォルト**の動作です。
-- **Client:** クライアントサイドレンダリングにフォールバックします。
-- **None:** フォールバックはありません。Angularは、プリレンダリングされていないパスのリクエストを処理しません。
-
-```typescript
-// app.routes.server.ts
-import { RenderMode, PrerenderFallback, ServerRoute } from '@angular/ssr';
-
-export const serverRoutes: ServerRoute[] = [
-  {
-    path: 'post/:id',
-    renderMode: RenderMode.Prerender,
-    fallback: PrerenderFallback.Client, // プリレンダリングされていない場合はCSRにフォールバックします
-    async getPrerenderParams() {
-      // この関数は、パス `/post/1`、`/post/2`、`/post/3` で
-      // プリレンダリングされた投稿を表すオブジェクトの配列を返します。
-      // パス `/post/4` は、要求された場合にフォールバック動作を使用します。
-      return [{ id: 1 }, { id: 2 }, { id: 3 }];
-    },
-  },
-];
-```
-
-## DIによるリクエストとレスポンスへのアクセス
-
-`@angular/core`パッケージは、サーバーサイドレンダリング環境とやり取りするためのいくつかのトークンを提供します。これらのトークンを使用すると、SSR中にAngularアプリケーション内で重要な情報とオブジェクトにアクセスできます。
-
-- **[`REQUEST`](api/core/REQUEST 'API reference'):** Web APIの[`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)型である現在のリクエストオブジェクトへのアクセスを提供します。これにより、ヘッダー、Cookie、その他のリクエスト情報にアクセスできます。
-- **[`RESPONSE_INIT`](api/core/RESPONSE_INIT 'API reference'):** Web APIの[`ResponseInit`](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#parameters)型であるレスポンス初期化オプションへのアクセスを提供します。これにより、ヘッダーとレスポンスのステータスコードを動的に設定できます。ランタイムで決定する必要があるヘッダーまたはステータスコードを設定するには、このトークンを使用します。
-- **[`REQUEST_CONTEXT`](api/core/REQUEST_CONTEXT 'API reference'):** 現在のリクエストに関する追加のコンテキストへのアクセスを提供します。このコンテキストは、[`handle`](api/ssr/AngularAppEngine#handle 'API reference')関数の2番目のパラメータとして渡すことができます。通常、これは標準のWeb APIの一部ではない追加のリクエスト関連情報を提供するために使用されます。
-
-```angular-ts
-import { inject, REQUEST } from '@angular/core';
-
-@Component({
-  selector: 'app-my-component',
-  template: `<h1>My Component</h1>`,
-})
-export class MyComponent {
-  constructor() {
-    const request = inject(REQUEST);
-    console.log(request?.url);
-  }
-}
-```
-
-IMPORTANT: 上記のトークンは、次のシナリオでは`null`になります。
-
-- ビルドプロセス中。
-- アプリケーションがブラウザでレンダリングされる場合（クライアントサイドレンダリング）。
-- 静的サイト生成（SSG）を実行する場合。
-- 開発中のルート抽出時（リクエスト時）。
-
-## Node.js以外のサーバーの設定
-
-`@angular/ssr`は、Node.js以外のプラットフォームでAngularアプリケーションをサーバーサイドレンダリングするための重要なAPIを提供します。Web APIの標準的な[`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)と[`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)オブジェクトを活用することで、さまざまなサーバー環境にAngular SSRを統合できます。詳細情報と例については、[`@angular/ssr` APIリファレンス](api/ssr/AngularAppEngine)を参照してください。
-
-```typescript
-// server.ts
-import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
-
-const angularApp = new AngularAppEngine();
-
-/**
- * これはAngular CLI（開発サーバーとビルド中）で使用されるリクエストハンドラーです。
- */
-const reqHandler = createRequestHandler(async (req: Request) => {
-  const res: Response|null = await angularApp.render(req);
-
-  // ...
-});
-```
-
-## Node.jsサーバーの設定
-
-`@angular/ssr/node`は、Node.js環境用に`@angular/ssr`を拡張したものです。Node.jsアプリケーション内でサーバーサイドレンダリングを実装しやすくするためのAPIを提供します。関数の完全なリストと使用例については、[`@angular/ssr/node` APIリファレンス](api/ssr/node/AngularNodeAppEngine) APIリファレンスを参照してください。
-
-```typescript
-// server.ts
-import { AngularNodeAppEngine, createNodeRequestHandler, writeResponseToNodeResponse } from '@angular/ssr/node';
-import express from 'express';
-
-const app = express();
-const angularApp = new AngularNodeAppEngine();
-
-app.use('*', (req, res, next) => {
-  angularApp
-    .handle(req)
-    .then(response => {
-      if (response) {
-        writeResponseToNodeResponse(response, res);
-      } else {
-        next(); // 次のミドルウェアに制御を渡します
-      }
-    })
-    .catch(next);
-);
-
-/**
- * Angular CLI（開発サーバーとビルド中）で使用されるリクエストハンドラーです。
- */
-export const reqHandler = createNodeRequestHandler(app);
-```

From 35bbaf8f365345644ef0be5c56aed102ee300c82 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:18:04 +0900
Subject: [PATCH 38/55] fix(docs): remove router-tutorial.md (deleted in
 origin)

---
 .../guide/routing/router-tutorial.en.md       | 276 ------------------
 .../content/guide/routing/router-tutorial.md  | 276 ------------------
 2 files changed, 552 deletions(-)
 delete mode 100644 adev-ja/src/content/guide/routing/router-tutorial.en.md
 delete mode 100644 adev-ja/src/content/guide/routing/router-tutorial.md

diff --git a/adev-ja/src/content/guide/routing/router-tutorial.en.md b/adev-ja/src/content/guide/routing/router-tutorial.en.md
deleted file mode 100644
index d816c1e74..000000000
--- a/adev-ja/src/content/guide/routing/router-tutorial.en.md
+++ /dev/null
@@ -1,276 +0,0 @@
-# Using Angular routes in a single-page application
-
-This tutorial describes how to build a single-page application, SPA that uses multiple Angular routes.
-
-In a Single Page Application \(SPA\), all of your application's functions exist in a single HTML page.
-As users access your application's features, the browser needs to render only the parts that matter to the user, instead of loading a new page.
-This pattern can significantly improve your application's user experience.
-
-To define how users navigate through your application, you use routes.
-Add routes to define how users navigate from one part of your application to another.
-You can also configure routes to guard against unexpected or unauthorized behavior.
-
-## Objectives
-
-- Organize a sample application's features into modules.
-- Define how to navigate to a component.
-- Pass information to a component using a parameter.
-- Structure routes by nesting several routes.
-- Check whether users can access a route.
-- Control whether the application can discard unsaved changes.
-- Improve performance by pre-fetching route data and lazy loading feature modules.
-- Require specific criteria to load components.
-
-## Create a sample application
-
-Using the Angular CLI, create a new application, _angular-router-sample_.
-This application will have two components: _crisis-list_ and _heroes-list_.
-
-1. Create a new Angular project, _angular-router-sample_.
-
-   ```shell
-   ng new angular-router-sample
-   ```
-
-   When prompted with `Would you like to add Angular routing?`, select `N`.
-
-   When prompted with `Which stylesheet format would you like to use?`, select `CSS`.
-
-   After a few moments, a new project, `angular-router-sample`, is ready.
-
-1. From your terminal, navigate to the `angular-router-sample` directory.
-1. Create a component, _crisis-list_.
-
-```shell
-ng generate component crisis-list
-```
-
-1. In your code editor, locate the file, `crisis-list.component.html` and replace the placeholder content with the following HTML.
-
-<docs-code header="crisis-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.html"/>
-
-1. Create a second component, _heroes-list_.
-
-```shell
-ng generate component heroes-list
-```
-
-1. In your code editor, locate the file, `heroes-list.component.html` and replace the placeholder content with the following HTML.
-
-<docs-code header="heroes-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.html"/>
-
-1. In your code editor, open the file, `app.component.html` and replace its contents with the following HTML.
-
-<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="setup"/>
-
-1. Verify that your new application runs as expected by running the `ng serve` command.
-
-```shell
-ng serve
-```
-
-1. Open a browser to `http://localhost:4200`.
-
-   You should see a single web page, consisting of a title and the HTML of your two components.
-
-## Define your routes
-
-In this section, you'll define two routes:
-
-- The route `/crisis-center` opens the `crisis-center` component.
-- The route `/heroes-list` opens the `heroes-list` component.
-
-A route definition is a JavaScript object.
-Each route typically has two properties.
-The first property, `path`, is a string that specifies the URL path for the route.
-The second property, `component`, is a string that specifies what component your application should display for that path.
-
-1. From your code editor, create and open the `app.routes.ts` file.
-1. Create and export a routes list for your application:
-
-   ```ts
-   import {Routes} from '@angular/router';
-
-   export const routes = [];
-   ```
-
-1. Add two routes for your first two components:
-
-   ```ts
-   {path: 'crisis-list', component: CrisisListComponent},
-   {path: 'heroes-list', component: HeroesListComponent},
-   ```
-
-This routes list is an array of JavaScript objects, with each object defining the properties of a route.
-
-## Import `provideRouter` from `@angular/router`
-
-Routing lets you display specific views of your application depending on the URL path.
-To add this functionality to your sample application, you need to update the `app.config.ts` file to use the router providers function, `provideRouter`.
-You import this provider function from `@angular/router`.
-
-1. From your code editor, open the `app.config.ts` file.
-1. Add the following import statements:
-
-   ```ts
-   import {provideRouter} from '@angular/router';
-   import {routes} from './app.routes';
-   ```
-
-1. Update the providers in the `appConfig`:
-
-   ```ts
-   providers: [provideRouter(routes)];
-   ```
-
-For `NgModule` based applications, put the `provideRouter` in the `providers` list of the `AppModule`, or whichever module is passed to `bootstrapModule` in the application.
-
-## Update your component with `router-outlet`
-
-At this point, you have defined two routes for your application.
-However, your application still has both the `crisis-list` and `heroes-list` components hard-coded in your `app.component.html` template.
-For your routes to work, you need to update your template to dynamically load a component based on the URL path.
-
-To implement this functionality, you add the `router-outlet` directive to your template file.
-
-1. From your code editor, open the `app.component.html` file.
-1. Delete the following lines.
-
-<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="components"/>
-
-1. Add the `router-outlet` directive.
-
-<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="router-outlet"/>
-
-1. Add `RouterOutlet` to the imports of the `AppComponent` in `app.component.ts`
-
-   ```ts
-   imports: [RouterOutlet],
-   ```
-
-View your updated application in your browser.
-You should see only the application title.
-To view the `crisis-list` component, add `crisis-list` to the end of the path in your browser's address bar.
-For example:
-
-<docs-code language="http">
-http://localhost:4200/crisis-list
-</docs-code>
-
-Notice that the `crisis-list` component displays.
-Angular is using the route you defined to dynamically load the component.
-You can load the `heroes-list` component the same way:
-
-<docs-code language="http">
-http://localhost:4200/heroes-list
-</docs-code>
-
-## Control navigation with UI elements
-
-Currently, your application supports two routes.
-However, the only way to use those routes is for the user to manually type the path in the browser's address bar.
-In this section, you'll add two links that users can click to navigate between the `heroes-list` and `crisis-list` components.
-You'll also add some CSS styles.
-While these styles are not required, they make it easier to identify the link for the currently-displayed component.
-You'll add that functionality in the next section.
-
-1. Open the `app.component.html` file and add the following HTML below the title.
-
-   <docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="nav"/>
-
-   This HTML uses an Angular directive, `routerLink`.
-   This directive connects the routes you defined to your template files.
-
-1. Add the `RouterLink` directive to the imports list of `AppComponent` in `app.component.ts`.
-
-1. Open the `app.component.css` file and add the following styles.
-
-<docs-code header="app.component.css" path="adev/src/content/examples/router-tutorial/src/app/app.component.css"/>
-
-If you view your application in the browser, you should see these two links.
-When you click on a link, the corresponding component appears.
-
-## Identify the active route
-
-While users can navigate your application using the links you added in the previous section, they don't have a straightforward way to identify what the active route is.
-Add this functionality using Angular's `routerLinkActive` directive.
-
-1. From your code editor, open the `app.component.html` file.
-1. Update the anchor tags to include the `routerLinkActive` directive.
-
-<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="routeractivelink"/>
-
-1. Add the `RouterLinkActive` directive to the `imports` list of `AppComponent` in `app.component.ts`.
-
-View your application again.
-As you click one of the buttons, the style for that button updates automatically, identifying the active component to the user.
-By adding the `routerLinkActive` directive, you inform your application to apply a specific CSS class to the active route.
-In this tutorial, that CSS class is `activebutton`, but you could use any class that you want.
-
-Note that we are also specifying a value for the `routerLinkActive`'s `ariaCurrentWhenActive`. This makes sure that visually impaired users (which may not perceive the different styling being applied) can also identify the active button. For more information see the Accessibility Best Practices [Active links identification section](/best-practices/a11y#active-links-identification).
-
-## Adding a redirect
-
-In this step of the tutorial, you add a route that redirects the user to display the `/heroes-list` component.
-
-1. From your code editor, open the `app.routes.ts` file.
-1. Update the `routes` section as follows.
-
-   ```ts
-   {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
-   ```
-
-   Notice that this new route uses an empty string as its path.
-   In addition, it replaces the `component` property with two new ones:
-
-   | Properties   | Details                                                                                                                                                                                                                                                                                           |
-   | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-   | `redirectTo` | This property instructs Angular to redirect from an empty path to the `heroes-list` path.                                                                                                                                                                                                         |
-   | `pathMatch`  | This property instructs Angular on how much of the URL to match. For this tutorial, you should set this property to `full`. This strategy is recommended when you have an empty string for a path. For more information about this property, see the [Route API documentation](api/router/Route). |
-
-Now when you open your application, it displays the `heroes-list` component by default.
-
-## Adding a 404 page
-
-It is possible for a user to try to access a route that you have not defined.
-To account for this behavior, the best practice is to display a 404 page.
-In this section, you'll create a 404 page and update your route configuration to show that page for any unspecified routes.
-
-1. From the terminal, create a new component, `PageNotFound`.
-
-```shell
-ng generate component page-not-found
-```
-
-1. From your code editor, open the `page-not-found.component.html` file and replace its contents with the following HTML.
-
-<docs-code header="page-not-found.component.html" path="adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.html"/>
-
-1. Open the `app.routes.ts` file and add the following route to the routes list:
-
-   ```ts
-   {path: '**', component: PageNotFoundComponent}
-   ```
-
-   The new route uses a path, `**`.
-   This path is how Angular identifies a wildcard route.
-   Any route that does not match an existing route in your configuration will use this route.
-
-IMPORTANT: Notice that the wildcard route is placed at the end of the array.
-The order of your routes is important, as Angular applies routes in order and uses the first match it finds.
-
-Try navigating to a non-existing route on your application, such as `http://localhost:4200/powers`.
-This route doesn't match anything defined in your `app.routes.ts` file.
-However, because you defined a wildcard route, the application automatically displays your `PageNotFound` component.
-
-## Next steps
-
-At this point, you have a basic application that uses Angular's routing feature to change what components the user can see based on the URL address.
-You have extended these features to include a redirect, as well as a wildcard route to display a custom 404 page.
-
-For more information about routing, see the following topics:
-
-<docs-pill-row>
-  <docs-pill href="guide/routing/common-router-tasks" title="In-app Routing and Navigation"/>
-  <docs-pill href="api/router/Router" title="Router API"/>
-</docs-pill-row>
diff --git a/adev-ja/src/content/guide/routing/router-tutorial.md b/adev-ja/src/content/guide/routing/router-tutorial.md
deleted file mode 100644
index 134424507..000000000
--- a/adev-ja/src/content/guide/routing/router-tutorial.md
+++ /dev/null
@@ -1,276 +0,0 @@
-# シングルページアプリケーションでAngularルートを使う
-
-このチュートリアルでは、複数のAngularルートを使用するシングルページアプリケーション（SPA）を構築する方法について説明します。
-
-シングルページアプリケーション（SPA）では、アプリケーションのすべての機能が単一のHTMLページに存在します。
-ユーザーがアプリケーションの機能にアクセスすると、ブラウザは新しいページを読み込む代わりに、ユーザーにとって重要な部分のみをレンダリングする必要があります。
-このパターンは、アプリケーションのユーザー体験を大幅に向上させることができます。
-
-ユーザーがアプリケーション内をどのように移動するかを定義するには、ルートを使用します。
-ユーザーがアプリケーションのある部分から別の部分へ移動する方法を定義するために、ルートを追加します。
-また、予期せぬ動作や不正な動作から保護するために、ルートを設定できます。
-
-## 目的 {#objectives}
-
-- サンプルアプリケーションの機能をモジュールに整理する。
-- コンポーネントへのナビゲーション方法を定義する。
-- パラメーターを使用してコンポーネントに情報を渡す。
-- 複数のルートをネストしてルートを構成する。
-- ユーザーがルートにアクセスできるか確認する。
-- アプリケーションが未保存の変更を破棄できるかどうかを制御する。
-- ルートデータのプリフェッチと機能モジュールの遅延読み込みによってパフォーマンスを向上させる。
-- コンポーネントをロードするための特定の条件を要求する。
-
-## サンプルアプリケーションを作成 {#create-a-sample-application}
-
-Angular CLIを使用して、新しいアプリケーション_angular-router-sample_を作成します。
-このアプリケーションには、_crisis-list_と_heroes-list_の2つのコンポーネントが含まれます。
-
-1. 新しいAngularプロジェクト_angular-router-sample_を作成します。
-
-   ```shell
-   ng new angular-router-sample
-   ```
-
-   `Would you like to add Angular routing?`と表示されたら、`N`を選択します。
-
-   `Which stylesheet format would you like to use?`と表示されたら、`CSS`を選択します。
-
-   しばらくすると、新しいプロジェクト`angular-router-sample`の準備が整います。
-
-1. ターミナルから、`angular-router-sample`ディレクトリに移動します。
-1. コンポーネント_crisis-list_を作成します。
-
-```shell
-ng generate component crisis-list
-```
-
-1. コードエディターで、ファイル`crisis-list.component.html`を見つけて、プレースホルダーの内容を以下のHTMLに置き換えます。
-
-<docs-code header="crisis-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.html"/>
-
-1. 2番目のコンポーネント_heroes-list_を作成します。
-
-```shell
-ng generate component heroes-list
-```
-
-1. コードエディターで、ファイル`heroes-list.component.html`を見つけて、プレースホルダーの内容を以下のHTMLに置き換えます。
-
-<docs-code header="heroes-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.html"/>
-
-1. コードエディターで、ファイル`app.component.html`を開き、その内容を以下のHTMLに置き換えます。
-
-<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="setup"/>
-
-1. 新しいアプリケーションが期待どおりに動作することを確認するには、`ng serve`コマンドを実行します。
-
-```shell
-ng serve
-```
-
-1. ブラウザで`http://localhost:4200`を開きます。
-
-   タイトルと2つのコンポーネントのHTMLで構成される単一のWebページが表示されるはずです。
-
-## ルートを定義する {#define-your-routes}
-
-このセクションでは、2つのルートを定義します。
-
-- ルート`/crisis-center`は`crisis-center`コンポーネントを開きます。
-- ルート`/heroes-list`は`heroes-list`コンポーネントを開きます。
-
-ルート定義はJavaScriptオブジェクトです。
-各ルートには通常2つのプロパティがあります。
-最初のプロパティである`path`は、ルートのURLパスを指定する文字列です。
-2番目のプロパティである`component`は、アプリケーションがそのパスに表示すべきコンポーネントを指定する文字列です。
-
-1. コードエディターから、`app.routes.ts`ファイルを作成して開きます。
-1. アプリケーションのルートリストを作成してエクスポートします。
-
-   ```ts
-   import {Routes} from '@angular/router';
-
-   export const routes = [];
-   ```
-
-1. 最初の2つのコンポーネントに2つのルートを追加します。
-
-   ```ts
-   {path: 'crisis-list', component: CrisisListComponent},
-   {path: 'heroes-list', component: HeroesListComponent},
-   ```
-
-このルートリストはJavaScriptオブジェクトの配列であり、各オブジェクトがルートのプロパティを定義しています。
-
-## `@angular/router`から`provideRouter`をインポートする {#import-providerouter-from-angularrouter}
-
-ルーティングを使用すると、URLパスに応じてアプリケーションの特定のビューを表示できます。
-この機能をサンプルアプリケーションに追加するには、`app.config.ts`ファイルを更新して、ルータープロバイダー関数である`provideRouter`を使用する必要があります。
-このプロバイダー関数は`@angular/router`からインポートします。
-
-1. コードエディターで`app.config.ts`ファイルを開きます。
-1. 次のインポートステートメントを追加します。
-
-   ```ts
-   import {provideRouter} from '@angular/router';
-   import {routes} from './app.routes';
-   ```
-
-1. `appConfig`のプロバイダーを更新します。
-
-   ```ts
-   providers: [provideRouter(routes)];
-   ```
-
-`NgModule`ベースのアプリケーションの場合、`provideRouter`は`AppModule`の`providers`リスト、またはアプリケーションで`bootstrapModule`に渡されるモジュールに配置します。
-
-## `router-outlet`を使ってコンポーネントを更新する {#update-your-component-with-router-outlet}
-
-この時点で、アプリケーションに2つのルートを定義しました。
-しかし、アプリケーションの`app.component.html`テンプレートには、`crisis-list`と`heroes-list`の両コンポーネントがまだハードコードされています。
-ルートが機能するためには、URLパスに基づいてコンポーネントを動的にロードするようにテンプレートを更新する必要があります。
-
-この機能を実装するには、テンプレートファイルに`router-outlet`ディレクティブを追加します。
-
-1. コードエディターで`app.component.html`ファイルを開きます。
-1. 以下の行を削除します。
-
-<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="components"/>
-
-1. `router-outlet`ディレクティブを追加します。
-
-<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="router-outlet"/>
-
-1. `app.component.ts`の`AppComponent`のインポートに`RouterOutlet`を追加します。
-
-   ```ts
-   imports: [RouterOutlet],
-   ```
-
-更新されたアプリケーションをブラウザで表示します。
-アプリケーションのタイトルのみが表示されるはずです。
-`crisis-list`コンポーネントを表示するには、ブラウザのアドレスバーのパスの末尾に`crisis-list`を追加します。
-例:
-
-<docs-code language="http">
-http://localhost:4200/crisis-list
-</docs-code>
-
-`crisis-list`コンポーネントが表示されることに注目してください。
-Angularは、定義したルートを使用してコンポーネントを動的にロードしています。
-同じ方法で`heroes-list`コンポーネントをロードできます。
-
-<docs-code language="http">
-http://localhost:4200/heroes-list
-</docs-code>
-
-## UI要素でナビゲーションを制御する {#control-navigation-with-ui-elements}
-
-現在、アプリケーションは2つのルートをサポートしています。
-しかし、これらのルートを使用する唯一の方法は、ユーザーがブラウザのアドレスバーにパスを手動で入力することです。
-このセクションでは、ユーザーがクリックして`heroes-list`コンポーネントと`crisis-list`コンポーネント間を移動できる2つのリンクを追加します。
-また、いくつかのCSSスタイルも追加します。
-これらのスタイルは必須ではありませんが、現在表示されているコンポーネントのリンクを識別しやすくします。
-この機能は次のセクションで追加します。
-
-1. `app.component.html`ファイルを開き、タイトルの下に以下のHTMLを追加します。
-
-   <docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="nav"/>
-
-   このHTMLはAngularディレクティブである`routerLink`を使用しています。
-   このディレクティブは、定義したルートをテンプレートファイルに接続します。
-
-1. `app.component.ts`の`AppComponent`のimportsリストに`RouterLink`ディレクティブを追加します。
-
-1. `app.component.css`ファイルを開き、以下のスタイルを追加します。
-
-<docs-code header="app.component.css" path="adev/src/content/examples/router-tutorial/src/app/app.component.css"/>
-
-ブラウザでアプリケーションを表示すると、これら2つのリンクが表示されるはずです。
-リンクをクリックすると、対応するコンポーネントが表示されます。
-
-## アクティブルートの特定 {#identify-the-active-route}
-
-ユーザーは前のセクションで追加したリンクを使用してアプリケーションをナビゲートできますが、アクティブルートが何かを特定する簡単な方法がありません。
-Angularの`routerLinkActive`ディレクティブを使用してこの機能を追加します。
-
-1. コードエディターで、`app.component.html`ファイルを開きます。
-1. アンカータグを更新して、`routerLinkActive`ディレクティブを含めるようにします。
-
-<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" region="routeractivelink"/>
-
-1. `app.component.ts`の`AppComponent`の`imports`リストに`RouterLinkActive`ディレクティブを追加します。
-
-アプリケーションを再度表示します。
-いずれかのボタンをクリックすると、そのボタンのスタイルが自動的に更新され、アクティブなコンポーネントをユーザーに特定します。
-`routerLinkActive`ディレクティブを追加することで、アプリケーションに特定のCSSクラスをアクティブルートに適用するよう指示します。
-このチュートリアルでは、そのCSSクラスは`activebutton`ですが、好きな任意のクラスを使用できます。
-
-Note: `routerLinkActive`の`ariaCurrentWhenActive`に値を指定していることにも注意してください。これにより、視覚に障がいのあるユーザー（適用されている異なるスタイルを認識できない可能性のあるユーザー）もアクティブなボタンを特定できます。詳細については、アクセシビリティのベストプラクティス[アクティブリンクの識別セクション](/best-practices/a11y#active-links-identification)を参照してください。
-
-## リダイレクトの追加 {#adding-a-redirect}
-
-このチュートリアルのステップでは、ユーザーを`/heroes-list`コンポーネントの表示にリダイレクトするルートを追加します。
-
-1. コードエディターで`app.routes.ts`ファイルを開きます。
-1. `routes`セクションを次のように更新します。
-
-   ```ts
-   {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
-   ```
-
-   この新しいルートは、パスとして空の文字列を使用していることに注意してください。
-   さらに、`component`プロパティを2つの新しいプロパティに置き換えます。
-
-   | プロパティ   | 詳細                                                                                                                                                                                                                                                                          |
-   | :----------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-   | `redirectTo` | このプロパティは、Angularに空のパスから`heroes-list`パスへのリダイレクトを指示します。                                                                                                                                                                                        |
-   | `pathMatch`  | このプロパティは、AngularにURLのどの部分を一致させるかを指示します。このチュートリアルでは、このプロパティを`full`に設定する必要があります。この戦略は、パスに空の文字列がある場合に推奨されます。このプロパティの詳細については、[Route API documentation](api/router/Route)を参照してください。 |
-
-これでアプリケーションを開くと、デフォルトで`heroes-list`コンポーネントが表示されます。
-
-## 404ページを追加する {#adding-a-404-page}
-
-ユーザーが未定義のルートにアクセスしようとする可能性があります。
-この動作に対応するには、404ページを表示するのがベストプラクティスです。
-このセクションでは、404ページを作成し、未指定のルートに対してそのページを表示するようにルート設定を更新します。
-
-1. ターミナルから、新しいコンポーネント`PageNotFound`を作成します。
-
-```shell
-ng generate component page-not-found
-```
-
-1. コードエディターで、`page-not-found.component.html`ファイルを開き、その内容を以下のHTMLに置き換えます。
-
-<docs-code header="page-not-found.component.html" path="adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.html"/>
-
-1. `app.routes.ts`ファイルを開き、以下のルートをルートリストに追加します。
-
-   ```ts
-   {path: '**', component: PageNotFoundComponent}
-   ```
-
-   新しいルートはパス`**`を使用します。
-   このパスは、Angularがワイルドカードルートを識別する方法です。
-   設定内の既存のルートと一致しないルートは、すべてこのルートを使用します。
-
-IMPORTANT: ワイルドカードルートが配列の最後に配置されていることに注意してください。
-Angularはルートを順番に適用し、最初に見つかった一致を使用するため、ルートの順序は重要です。
-
-`http://localhost:4200/powers`のような、アプリケーション上に存在しないルートに移動してみてください。
-このルートは、`app.routes.ts`ファイルで定義されているものと一致しません。
-しかし、ワイルドカードルートを定義したため、アプリケーションは自動的に`PageNotFound`コンポーネントを表示します。
-
-## 次のステップ {#next-steps}
-
-この時点で、Angularのルーティング機能を使用して、URLアドレスに基づいてユーザーが見ることができるコンポーネントを変更する基本的なアプリケーションができています。
-これらの機能を拡張して、リダイレクトや、カスタムの404ページを表示するためのワイルドカードルートを含めました。
-
-ルーティングの詳細については、以下のトピックを参照してください。
-
-<docs-pill-row>
-  <docs-pill href="guide/routing/common-router-tasks" title="アプリ内ルーティングとナビゲーション"/>
-  <docs-pill href="api/router/Router" title="Router API"/>
-</docs-pill-row>

From a2cdf74989abdbc00010658babc9dbfd749d70a6 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:18:18 +0900
Subject: [PATCH 39/55] fix(docs): remove constructor-based-di tutorial step
 (deleted in origin)

---
 .../21-constructor-based-di/README.en.md      | 54 -------------------
 .../steps/21-constructor-based-di/README.md   | 54 -------------------
 .../21-constructor-based-di/config.en.json    |  5 --
 .../steps/21-constructor-based-di/config.json |  5 --
 4 files changed, 118 deletions(-)
 delete mode 100644 adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.en.md
 delete mode 100644 adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
 delete mode 100644 adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/config.en.json
 delete mode 100644 adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/config.json

diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.en.md
deleted file mode 100644
index 534dfd4a7..000000000
--- a/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.en.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# Constructor-based dependency injection
-
-In previous activities you used the `inject()` function to make resources available, "providing" them to your components. The `inject()` function is one pattern and it is useful to know that there is another pattern for injecting resources called constructor-based dependency injection.
-
-You specify the resources as parameters to the `constructor` function of a component. Angular will make those resources available to your component.
-
-Note: Learn more about [injecting services in the in-depth guide](/guide/di/creating-injectable-service#injecting-services).
-
-In this activity, you will learn how to use constructor-based dependency injection.
-
-<hr>
-
-To inject a service or some other injectable resource into your component use the following syntax:
-
-<docs-code language="ts" highlight="[3]">
-@Component({...})
-class PetCarDashboard {
-    constructor(private petCareService: PetCareService) {
-        ...
-    }
-}
-</docs-code>
-
-There are a few things to notice here:
-
-- Use the `private` keyword
-- The `petCareService` becomes a property you can use in your class
-- The `PetCareService` class is the injected class
-
-Alright, now you give this a try:
-
-<docs-workflow>
-
-<docs-step title="Update the code to use constructor-based DI">
-
-In `app.ts`, update the constructor code to match the code below:
-
-TIP: Remember, if you get stuck refer to the example on this activity page.
-
-```ts
-constructor(private carService: CarService) {
-    this.display = this.carService.getCars().join(' ⭐️ ');
-}
-```
-
-</docs-step>
-
-</docs-workflow>
-
-Congratulations on completing this activity. The example code works the same as with using the `inject` function. While these two approaches are largely the same, there are some small differences that are beyond the scope of this tutorial.
-
-<br>
-
-You can find out more information about dependency injection in the [Angular Documentation](guide/di).
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
deleted file mode 100644
index 0d711062b..000000000
--- a/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# コンストラクターベースの依存性の注入
-
-以前のアクティビティでは、`inject()`関数を用いてリソースをコンポーネントに「提供」することで、リソースをコンポーネントで使用できるようにしていました。`inject()`関数は、依存性の注入のパターンの1つです。コンストラクターベースの依存性の注入という別の注入パターンも存在することを知っておくことは重要です。
-
-コンストラクターベースの依存性の注入では、コンポーネントの`constructor`関数にパラメータとしてリソースを指定します。Angularは、これらのリソースをコンポーネントで使用できるようにします。
-
-NOTE: 詳しくは、[サービスの注入に関する詳細ガイド](/guide/di/creating-injectable-service#injecting-services)をご覧ください。
-
-このアクティビティでは、コンストラクターベースの依存性の注入の使い方を学びます。
-
-<hr>
-
-サービスやその他の注入可能なリソースをコンポーネントに注入するには、以下の構文を使用します。
-
-<docs-code language="ts" highlight="[3]">
-@Component({...})
-class PetCarDashboard {
-    constructor(private petCareService: PetCareService) {
-        ...
-    }
-}
-</docs-code>
-
-ここで注意すべき点がいくつかあります。
-
-- `private`キーワードを使用します。
-- `petCareService`は、クラスで使用できるプロパティになります。
-- `PetCareService`クラスは、注入されるクラスです。
-
-それでは、実際に試してみましょう。
-
-<docs-workflow>
-
-<docs-step title="コンストラクタベースのDIを使用するようにコードを更新する">
-
-`app.ts`で、以下のコードに合わせてコンストラクターコードを更新します。
-
-TIP: 詰まってしまった場合は、この演習ページの例を参照してください。
-
-```ts
-constructor(private carService: CarService) {
-    this.display = this.carService.getCars().join(' ⭐️ ');
-}
-```
-
-</docs-step>
-
-</docs-workflow>
-
-このアクティビティの完了、おめでとうございます。例となるコードは、`inject`関数を使った場合と同じように動作します。これらの2つのアプローチはほぼ同じですが、このチュートリアルでは説明できない小さな違いがいくつかあります。
-
-<br>
-
-依存性の注入の詳細については、[Angularドキュメント](guide/di)を参照してください。
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/config.en.json b/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/config.en.json
deleted file mode 100644
index 03c1c2125..000000000
--- a/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/config.en.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "openFiles": ["src/app/car.service.ts", "src/app/app.ts"],
-  "title": "Constructor-based dependency injection",
-  "type": "editor"
-}
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/config.json b/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/config.json
deleted file mode 100644
index 5846d7c4f..000000000
--- a/adev-ja/src/content/tutorials/learn-angular/steps/21-constructor-based-di/config.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "openFiles": ["src/app/car.service.ts", "src/app/app.ts"],
-  "title": "コンストラクタベースの依存性の注入",
-  "type": "editor"
-}

From 043dcffdea3012aafeab64ce5fe6d9e86dacc1dd Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:18:31 +0900
Subject: [PATCH 40/55] fix(docs): migrate guide/components changes

---
 adev-ja/src/content/guide/components/inputs.md    | 4 ++--
 adev-ja/src/content/guide/components/outputs.md   | 2 +-
 adev-ja/src/content/guide/components/queries.md   | 4 ++--
 adev-ja/src/content/guide/components/selectors.md | 4 ++--
 adev-ja/src/content/guide/components/styling.md   | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/adev-ja/src/content/guide/components/inputs.md b/adev-ja/src/content/guide/components/inputs.md
index 8556f71f0..de1424f92 100644
--- a/adev-ja/src/content/guide/components/inputs.md
+++ b/adev-ja/src/content/guide/components/inputs.md
@@ -281,13 +281,13 @@ export class CustomCheckbox {
 
 コンポーネントが双方向バインディングをサポートする場合に、モデル入力を使用します。これは通常、ユーザーの操作に基づいて値を変更するためにコンポーネントが存在する場合に適しています。最も一般的には、日付ピッカーやコンボボックスなどのカスタムフォームコントロールは、主要な値にモデル入力を使用する必要があります。
 
-# 入力名の選択
+## 入力名の選択 {#choosing-input-names}
 
 DOM要素のプロパティ（HTMLElementなど）と競合する入力名を選択することは避けてください。名前の競合は、バインドされたプロパティがコンポーネントのものであるか、DOM要素のものであるかについて混乱を招きます。
 
 コンポーネントセレクターのように、コンポーネント入力にプレフィックスを追加することは避けてください。特定の要素は1つのコンポーネントしかホストできないため、カスタムプロパティはすべてコンポーネントに属すると見なすことができます。
 
-# `@Input`デコレーターによる入力の宣言
+## `@Input`デコレーターによる入力の宣言 {#declaring-inputs-with-the-input-decorator}
 
 TIP: Angularチームは新しいプロジェクトにはシグナルベースの`input`関数の使用を推奨していますが、元のデコレーターベースの`@Input` APIは引き続き完全にサポートされています。
 
diff --git a/adev-ja/src/content/guide/components/outputs.md b/adev-ja/src/content/guide/components/outputs.md
index 0c27cb940..4b8599ff5 100644
--- a/adev-ja/src/content/guide/components/outputs.md
+++ b/adev-ja/src/content/guide/components/outputs.md
@@ -114,7 +114,7 @@ const eventSubscription = someComponent.someEventProperty.subscribe((eventData)
 eventSubscription.unsubscribe();
 ```
 
-## イベント名の選択
+## イベント名の選択 {#choosing-event-names}
 
 HTMLElementなどのDOM要素のイベントと衝突する出力名を選択することは避けてください。名前の衝突は、バインドされたプロパティがコンポーネントのものであるか、DOM要素のものであるかについて混乱を招きます。
 
diff --git a/adev-ja/src/content/guide/components/queries.md b/adev-ja/src/content/guide/components/queries.md
index 7dd26afef..1b233b472 100644
--- a/adev-ja/src/content/guide/components/queries.md
+++ b/adev-ja/src/content/guide/components/queries.md
@@ -11,7 +11,7 @@ TIP: このガイドでは、[基本概念のガイド](essentials)を読んで
 
 クエリには、**ビュークエリ**と**コンテンツクエリ**の2つのカテゴリーがあります。
 
-## ビュークエリ
+## ビュークエリ {#view-queries}
 
 ビュークエリは、コンポーネントの_ビュー_（コンポーネント自身のテンプレートで定義された要素）内の要素から結果を取得します。`viewChild`関数を使用して単一の結果をクエリできます。
 
@@ -66,7 +66,7 @@ export class CustomCard {
 
 **クエリはコンポーネントの境界を貫通することはありません。**ビュークエリは、コンポーネントのテンプレートからの結果のみを取得できます。
 
-## コンテンツクエリ
+## コンテンツクエリ {#content-queries}
 
 コンテンツクエリは、コンポーネントの_コンテンツ_（コンポーネントが使用されているテンプレート内でコンポーネントの中にネストされた要素）内の要素から結果を取得します。`contentChild`関数を使用して単一の結果をクエリできます。
 
diff --git a/adev-ja/src/content/guide/components/selectors.md b/adev-ja/src/content/guide/components/selectors.md
index f08313f6f..628f51a6b 100644
--- a/adev-ja/src/content/guide/components/selectors.md
+++ b/adev-ja/src/content/guide/components/selectors.md
@@ -98,7 +98,7 @@ export class DropZone { }
 
 Angularは、リスト内の_いずれか_のセレクターにマッチングする要素ごとにコンポーネントを作成します。
 
-## セレクターの選択
+## セレクターの選択 {#choosing-a-selector}
 
 ほとんどのコンポーネントは、カスタム要素名をセレクターとして使用する必要があります。
 すべてのカスタム要素名は、
@@ -110,7 +110,7 @@ Angularテンプレートで
 [ネイティブ カスタム要素](https://developer.mozilla.org/docs/Web/Web_Components) を使用する方法の詳細については、
 [コンポーネントの高度な設定](guide/components/advanced-configuration) を参照してください。
 
-### セレクターのプレフィックス
+### セレクターのプレフィックス {#selector-prefixes}
 
 Angularチームは、プロジェクト内で定義されているすべてのカスタムコンポーネントに
 短い一貫性のあるプレフィックスを使用することをお勧めします。
diff --git a/adev-ja/src/content/guide/components/styling.md b/adev-ja/src/content/guide/components/styling.md
index 50253433a..c8dca8ca9 100644
--- a/adev-ja/src/content/guide/components/styling.md
+++ b/adev-ja/src/content/guide/components/styling.md
@@ -37,7 +37,7 @@ Angularは、[Sass](https://sass-lang.com)、
 [less](https://lesscss.org)、[stylus](https://stylus-lang.com)など、
 CSSを出力するすべてのツールと連携します。
 
-## スタイルのスコープ
+## スタイルのスコープ {#style-scoping}
 
 各コンポーネントには、**ビューカプセル化**設定があり、フレームワークがコンポーネントのスタイルをどのようにスコープするかを決定します。
 ビューカプセル化モードには、`Emulated`、`ShadowDom`、`ExperimentalIsolatedShadowDom`、`None`の4つのモードがあります。

From 4bde94d92e5bf518e9577ae53db545274bc1f969 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:18:36 +0900
Subject: [PATCH 41/55] fix(docs): migrate guide/signals changes

---
 adev-ja/src/content/guide/signals/linked-signal.md | 4 ++--
 adev-ja/src/content/guide/signals/overview.md      | 4 ++--
 adev-ja/src/content/guide/signals/resource.md      | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/adev-ja/src/content/guide/signals/linked-signal.md b/adev-ja/src/content/guide/signals/linked-signal.md
index be1bcd787..c38e77388 100644
--- a/adev-ja/src/content/guide/signals/linked-signal.md
+++ b/adev-ja/src/content/guide/signals/linked-signal.md
@@ -54,7 +54,7 @@ shippingOptions.set(['Email', 'Will Call', 'Postal service']);
 console.log(selectedOption()); // 'Email'
 ```
 
-## 以前の状態を考慮する
+## 以前の状態を考慮する {#accounting-for-previous-state}
 
 場合によっては、`linkedSignal`の計算で`linkedSignal`の以前の値を考慮する必要があります。
 
@@ -114,7 +114,7 @@ export class ShippingMethodPicker {
 
 HELPFUL: `previous`パラメーターを使用する場合、`linkedSignal`のジェネリック型引数を明示的に指定する必要があります。最初のジェネリック型は`source`の型に対応し、2番目のジェネリック型は`computation`の出力型を決定します。
 
-## カスタムの等価比較
+## カスタムの等価比較 {#custom-equality-comparison}
 
 `linkedSignal`は他のシグナルと同様に、カスタムの等価比較関数を設定できます。この関数は、下流の依存関係によって`linkedSignal`の値（計算結果）が変更されたかどうかを判断するために使用されます。
 
diff --git a/adev-ja/src/content/guide/signals/overview.md b/adev-ja/src/content/guide/signals/overview.md
index 1715e7491..338bd69d1 100644
--- a/adev-ja/src/content/guide/signals/overview.md
+++ b/adev-ja/src/content/guide/signals/overview.md
@@ -73,7 +73,7 @@ export class AwesomeCounter {
 
 IMPORTANT: 読み取り専用のシグナルには、その値の深い変更を防ぐ組み込みのメカニズムは**ありません**。
 
-### 算出シグナル
+### 算出シグナル {#computed-signals}
 
 **算出シグナル**は、他のシグナルから値を派生させる読み取り専用のシグナルです。算出シグナルは、`computed`関数を使用して、派生を指定することで定義します。
 
@@ -124,7 +124,7 @@ const conditionalCount = computed(() => {
 
 依存関係は、派生中に追加されるだけでなく、削除されることもできます。後で`showCount`を再び偽に設定すると、`count`は`conditionalCount`の依存関係として扱われなくなります。
 
-## リアクティブコンテキスト
+## リアクティブコンテキスト {#reactive-contexts}
 
 **リアクティブコンテキスト**は、Angularがシグナルの読み取りを監視して依存関係を確立する実行時の状態です。シグナルを読み取るコードは_コンシューマー_であり、読み取られるシグナルは_プロデューサー_です。
 
diff --git a/adev-ja/src/content/guide/signals/resource.md b/adev-ja/src/content/guide/signals/resource.md
index 552e50f67..94d729074 100644
--- a/adev-ja/src/content/guide/signals/resource.md
+++ b/adev-ja/src/content/guide/signals/resource.md
@@ -97,7 +97,7 @@ const userResource = resource({
 userResource.reload();
 ```
 
-## リソースの状態
+## リソースの状態 {#resource-status}
 
 リソースオブジェクトには、非同期ローダーの状態を読み取るためのいくつかのシグナルプロパティがあります。
 
@@ -122,6 +122,6 @@ userResource.reload();
 
 この状態情報を使用して、ローディングインジケーターやエラーメッセージなどのユーザーインターフェース要素を条件付きで表示できます。
 
-## `httpResource` を使用したリアクティブデータ取得
+## `httpResource` を使用したリアクティブデータ取得 {#reactive-data-fetching-with-httpresource}
 
 [`httpResource`](/guide/http/http-resource) は `HttpClient` のラッパーで、リクエストの状態とレスポンスをシグナルとして提供します。これはインターセプターを含むAngular HTTPスタックを通してHTTPリクエストを行います。

From f53d4dd7148ff5ab567686fdb83c7847d0859316 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:18:40 +0900
Subject: [PATCH 42/55] fix(docs): migrate guide/templates changes

---
 adev-ja/src/content/guide/templates/binding.md      | 2 +-
 adev-ja/src/content/guide/templates/control-flow.md | 4 ++--
 adev-ja/src/content/guide/templates/defer.md        | 2 +-
 adev-ja/src/content/guide/templates/pipes.md        | 2 +-
 adev-ja/src/content/guide/templates/variables.md    | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/adev-ja/src/content/guide/templates/binding.md b/adev-ja/src/content/guide/templates/binding.md
index c79cf5264..15d3d5e4b 100644
--- a/adev-ja/src/content/guide/templates/binding.md
+++ b/adev-ja/src/content/guide/templates/binding.md
@@ -194,7 +194,7 @@ Angularは、レンダリングされた要素のCSSクラスの特定の順序
 
 NOTE: クラスバインディングは、単一のキーでスペース区切りのクラス名をサポートしていません。また、バインディングの参照が同じままであるため、オブジェクトの変更もサポートしていません。どちらかが必要な場合は、[ngClass](/api/common/NgClass)ディレクティブを使用してください。
 
-### CSSスタイルプロパティ
+### CSSスタイルプロパティ {#css-style-properties}
 
 要素に直接CSSスタイルプロパティをバインドできます。
 
diff --git a/adev-ja/src/content/guide/templates/control-flow.md b/adev-ja/src/content/guide/templates/control-flow.md
index dc9ab20b7..111cfcb61 100644
--- a/adev-ja/src/content/guide/templates/control-flow.md
+++ b/adev-ja/src/content/guide/templates/control-flow.md
@@ -36,7 +36,7 @@ Angularテンプレートは制御フローブロックをサポートしてお
 
 これは、テンプレート内で読みやすく保守しやすいように長い式を参照するのに便利です。
 
-## `@for`ブロックでコンテンツを繰り返す
+## `@for`ブロックでコンテンツを繰り返す {#repeat-content-with-the-for-block}
 
 `@for` ブロックは、コレクションをループし、ブロックのコンテンツを繰り返しレンダリングします。 コレクションは、任意のJavaScriptの[反復可能オブジェクト](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols)にできますが、Angularは `Array` 値に対して追加のパフォーマンス最適化を行っています。
 
@@ -50,7 +50,7 @@ Angularテンプレートは制御フローブロックをサポートしてお
 
 Angularの `@for` ブロックは、JavaScriptの `continue` や `break` のようなフロー変更のステートメントをサポートしていません。
 
-### なぜ `@for` ブロックの `track` は重要なのか？
+### なぜ `@for` ブロックの `track` は重要なのか？ {#why-is-track-in-for-blocks-important}
 
 `track` 式を使用すると、Angularはデータとページ上のDOMノードの関係を維持できます。 これにより、Angularはデータが変更されたときに、必要なDOM操作を最小限に抑えてパフォーマンスを最適化できます。
 
diff --git a/adev-ja/src/content/guide/templates/defer.md b/adev-ja/src/content/guide/templates/defer.md
index b9735d92b..4bc5889ab 100644
--- a/adev-ja/src/content/guide/templates/defer.md
+++ b/adev-ja/src/content/guide/templates/defer.md
@@ -116,7 +116,7 @@ Angularは、読み込みが完了すると、プレースホルダーコンテ
 }
 ```
 
-## トリガーを使用した遅延コンテンツ読み込みの制御
+## トリガーを使用した遅延コンテンツ読み込みの制御 {#controlling-deferred-content-loading-with-triggers}
 
 遅延コンテンツがいつ読み込まれて表示されるかを制御する**トリガー**を指定できます。
 
diff --git a/adev-ja/src/content/guide/templates/pipes.md b/adev-ja/src/content/guide/templates/pipes.md
index 39a8e2ec4..bdf115953 100644
--- a/adev-ja/src/content/guide/templates/pipes.md
+++ b/adev-ja/src/content/guide/templates/pipes.md
@@ -166,7 +166,7 @@ By default, all pipes are considered `pure`, which means that it only executes w
 
 その結果、オブジェクトプロパティや配列項目の変更は、オブジェクトまたは配列参照の全体が別のインスタンスに置き換えられない限り検出されません。このレベルの変更検知が必要な場合は、[配列やオブジェクト内の変更の検出](#detecting-change-within-arrays-or-objects)を参照してください。
 
-## カスタムパイプの作成
+## カスタムパイプの作成 {#creating-custom-pipes}
 
 `@Pipe`デコレーターを使用してTypeScriptクラスを実装することで、カスタムパイプを定義できます。パイプには、次の2つの要素が必要です。
 
diff --git a/adev-ja/src/content/guide/templates/variables.md b/adev-ja/src/content/guide/templates/variables.md
index c33c0b20e..fee97e0c8 100644
--- a/adev-ja/src/content/guide/templates/variables.md
+++ b/adev-ja/src/content/guide/templates/variables.md
@@ -113,7 +113,7 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 
 テンプレート参照変数を使用すると、テンプレートの1つの部分から同じテンプレートの別の部分の情報を取得できます。
 
-### テンプレート参照変数を宣言する
+### テンプレート参照変数を宣言する {#declaring-a-template-reference-variable}
 
 テンプレート内の要素に、ハッシュ記号 (`#`) と変数名の後に続く属性を追加することで、変数を宣言できます。
 

From 5489f8d6e7f23d4ce39d88f775b1206669f2500b Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:18:44 +0900
Subject: [PATCH 43/55] fix(docs): migrate guide/forms changes

---
 adev-ja/src/content/guide/forms/reactive-forms.md        | 2 +-
 adev-ja/src/content/guide/forms/template-driven-forms.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/adev-ja/src/content/guide/forms/reactive-forms.md b/adev-ja/src/content/guide/forms/reactive-forms.md
index 3e6b8d463..272376627 100644
--- a/adev-ja/src/content/guide/forms/reactive-forms.md
+++ b/adev-ja/src/content/guide/forms/reactive-forms.md
@@ -18,7 +18,7 @@
 テンプレート駆動型フォームでは、テンプレート内の直接アクセスを使用してデータを変更できますが、リアクティブフォームほど明示的ではありません。これは、テンプレートに埋め込まれたディレクティブと、変更を非同期的に追跡するミュータブルデータに依存するためです。
 2つのパラダイムの詳細な比較については、[フォームの概要](guide/forms)を参照してください。
 
-## 基本的なフォームコントロールの追加
+## 基本的なフォームコントロールの追加 {#adding-a-basic-form-control}
 
 フォームコントロールを使用するには、次の3つの手順があります。
 
diff --git a/adev-ja/src/content/guide/forms/template-driven-forms.md b/adev-ja/src/content/guide/forms/template-driven-forms.md
index d293c46d1..d8d4c4874 100644
--- a/adev-ja/src/content/guide/forms/template-driven-forms.md
+++ b/adev-ja/src/content/guide/forms/template-driven-forms.md
@@ -169,7 +169,7 @@ Angularは、割り当てられた名前を使用して、親`<form>`要素に
 
 Angularは、フォームが送信された後に`form`要素に`ng-submitted`クラスを適用します。このクラスは、フォームが送信された後にフォームのスタイルを変更するために使用できます。
 
-## コントロールの状態を追跡する
+## コントロールの状態を追跡する {#track-control-states}
 
 コントロールに`NgModel`ディレクティブを追加すると、コントロールの状態を表すクラス名がコントロールに追加されます。
 これらのクラスは、コントロールの状態に基づいてコントロールのスタイルを変更するために使用できます。

From 9af449850926d46788e03c4135f90e0e9806adee Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:18:49 +0900
Subject: [PATCH 44/55] fix(docs): migrate guide misc changes (aria, di,
 directives, testing)

---
 adev-ja/src/content/guide/aria/listbox.md                     | 2 +-
 adev-ja/src/content/guide/di/dependency-injection-context.md  | 4 ++--
 adev-ja/src/content/guide/directives/structural-directives.md | 2 +-
 .../src/content/guide/testing/using-component-harnesses.md    | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/adev-ja/src/content/guide/aria/listbox.md b/adev-ja/src/content/guide/aria/listbox.md
index e5621c4e7..8cc24a22e 100644
--- a/adev-ja/src/content/guide/aria/listbox.md
+++ b/adev-ja/src/content/guide/aria/listbox.md
@@ -133,7 +133,7 @@ Angularのリストボックスは、以下の機能を備えた完全にアク
 
 TIP: ドロップダウンパターンでは、通常、単一選択のために`'follow'`モードが使用されます。
 
-## API
+## API {#apis}
 
 ### Listboxディレクティブ {#listbox-directive}
 
diff --git a/adev-ja/src/content/guide/di/dependency-injection-context.md b/adev-ja/src/content/guide/di/dependency-injection-context.md
index d986c1313..e23ba8eb6 100644
--- a/adev-ja/src/content/guide/di/dependency-injection-context.md
+++ b/adev-ja/src/content/guide/di/dependency-injection-context.md
@@ -31,7 +31,7 @@ const canActivateTeam: CanActivateFn = (
 };
 ```
 
-## 注入コンテキスト内で実行する
+## 注入コンテキスト内で実行する {#run-within-an-injection-context}
 
 すでに注入コンテキスト内にいない状態で、特定の関数を注入コンテキスト内で実行したい場合は、`runInInjectionContext` を使用できます。
 これには、たとえば `EnvironmentInjector` のような特定のインジェクターへのアクセスが必要です。
@@ -53,7 +53,7 @@ export class HeroService {
 
 [`inject`](/api/core/inject) は、インジェクターが要求されたトークンを解決できる場合にのみインスタンスを返します。
 
-## コンテキストのアサート
+## コンテキストのアサート {#asserts-the-context}
 
 Angularは、現在のコンテキストが注入コンテキストであることをアサートし、そうでない場合は明確なエラーをスローするための `assertInInjectionContext` ヘルパー関数を提供します。呼び出し元の関数への参照を渡すと、エラーメッセージが正しいAPIエントリーポイントを指し示すようになります。これにより、デフォルトの汎用的な注入エラーよりも明確で実用的なメッセージが生成されます。
 
diff --git a/adev-ja/src/content/guide/directives/structural-directives.md b/adev-ja/src/content/guide/directives/structural-directives.md
index f02cef947..952a27507 100644
--- a/adev-ja/src/content/guide/directives/structural-directives.md
+++ b/adev-ja/src/content/guide/directives/structural-directives.md
@@ -167,7 +167,7 @@ Angularは、構造ディレクティブの省略記法を次の通常のバイ
 | `*ngComponentOutlet="componentClass; inputs: myInputs";`              | `<ng-template [ngComponentOutlet]="componentClass" [ngComponentOutletInputs]="myInputs">`                     |
 | `*myDir="exp as value"`                                               | `<ng-template [myDir]="exp" let-value="myDir">`                                                               |
 
-## カスタムディレクティブのテンプレートタイプチェックを改善する
+## カスタムディレクティブのテンプレートタイプチェックを改善する {#improving-template-type-checking-for-custom-directives}
 
 カスタムディレクティブのテンプレートタイプチェックを改善するには、ディレクティブ定義にテンプレートガードを追加します。
 これらのガードは、Angularテンプレートタイプチェッカーがコンパイル時にテンプレート内の間違いを見つけるのに役立ち、ランタイムエラーを回避できます。
diff --git a/adev-ja/src/content/guide/testing/using-component-harnesses.md b/adev-ja/src/content/guide/testing/using-component-harnesses.md
index df8467e3a..95467836e 100644
--- a/adev-ja/src/content/guide/testing/using-component-harnesses.md
+++ b/adev-ja/src/content/guide/testing/using-component-harnesses.md
@@ -12,7 +12,7 @@ TIP: このガイドは、すでに[コンポーネントハーネスの概要
 ng add @angular/cdk
 ```
 
-## テストハーネス環境とローダー
+## テストハーネス環境とローダー {#test-harness-environments-and-loaders}
 
 コンポーネントテストハーネスはさまざまなテスト環境で使用できます。AngularCDKは2つの組み込み環境をサポートしています。
 

From be1fabc3ed48ae68d6957d031e81270bb2998ff7 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:20:33 +0900
Subject: [PATCH 45/55] fix(docs): migrate best-practices/runtime-performance
 changes

---
 .../best-practices/runtime-performance/skipping-subtrees.md     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md
index 77167acbe..2f549e418 100644
--- a/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md
+++ b/adev-ja/src/content/best-practices/runtime-performance/skipping-subtrees.md
@@ -6,7 +6,7 @@ JavaScriptは、デフォルトでは、複数の異なるコンポーネント
 
 アプリケーションの一部が状態変化の影響を受けないと確信できる場合は、[OnPush](/api/core/ChangeDetectionStrategy)を使用して、コンポーネントのサブツリー全体の変更検知をスキップできます。
 
-## `OnPush`の使用
+## `OnPush`の使用 {#using-onpush}
 
 OnPush変更検知は、Angularにコンポーネントのサブツリーの変更検知を次の場合**のみ**実行するように指示します。
 

From fbd76145ad2d4180d70c9ba905e9f8120eb8780b Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:21:05 +0900
Subject: [PATCH 46/55] fix(docs): migrate introduction/essentials changes

---
 adev-ja/src/content/introduction/essentials/overview.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adev-ja/src/content/introduction/essentials/overview.md b/adev-ja/src/content/introduction/essentials/overview.md
index 022540699..e049f22db 100644
--- a/adev-ja/src/content/introduction/essentials/overview.md
+++ b/adev-ja/src/content/introduction/essentials/overview.md
@@ -4,7 +4,7 @@ Angularの主要なコンセプトを簡単に紹介します
 
 ## Angularに興味がありますか？
 
-ようこそ！この_基本概念_ガイドでは、Angularの主要なコンセプトのいくつかを説明し、フレームワークの使い方を理解する手助けをします。このガイドは短い入門編として、いくつかのビルディングブロックに焦点を当てています。深く包括的なドキュメントをお探しの場合は、[ドキュメントランディングページ](概要)から特定の_詳細ガイド_に移動できます。
+ようこそ！この_基本概念_ガイドでは、Angularの主要なコンセプトのいくつかを説明し、フレームワークの使い方を理解する手助けをします。このガイドは短い入門編として、いくつかのビルディングブロックに焦点を当てています。深く包括的なドキュメントをお探しの場合は、[ドキュメントランディングページ](overview)から特定の_詳細ガイド_に移動できます。
 
 すぐにコードを書き始めたい場合は、[ハンズオンチュートリアルまでスキップする](tutorials/learn-angular)ことができます。
 

From 5702644cdca7d98260a341ac5d7fff80a9e0f493 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:21:19 +0900
Subject: [PATCH 47/55] fix(docs): migrate reference/configs changes

---
 adev-ja/src/content/reference/configs/file-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adev-ja/src/content/reference/configs/file-structure.md b/adev-ja/src/content/reference/configs/file-structure.md
index 1f977fd00..c7192be56 100644
--- a/adev-ja/src/content/reference/configs/file-structure.md
+++ b/adev-ja/src/content/reference/configs/file-structure.md
@@ -131,7 +131,7 @@ my-workspace/
 └── … (ライブラリ固有のコードと構成)
 ```
 
-## ライブラリプロジェクトファイル
+## ライブラリプロジェクトファイル {#library-project-files}
 
 CLIを使用してライブラリを生成する（`ng generate library my-lib` などのコマンド）と、生成されたファイルはワークスペースの `projects/` フォルダーに格納されます。
 独自のライブラリを作成する方法の詳細については、[ライブラリの作成](tools/libraries/creating-libraries) を参照してください。

From c530ecaba25faa80f7547eb5018c873852a0e75f Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:23:59 +0900
Subject: [PATCH 48/55] fix(docs): add anchor ID to roadmap heading

---
 adev-ja/src/content/reference/roadmap.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adev-ja/src/content/reference/roadmap.md b/adev-ja/src/content/reference/roadmap.md
index 2bd020624..9fa9a46c1 100644
--- a/adev-ja/src/content/reference/roadmap.md
+++ b/adev-ja/src/content/reference/roadmap.md
@@ -31,7 +31,7 @@
 - [Event replay with SSR](/api/platform-browser/withEventReplay)
 - [Route-level render mode](/guide/ssr)
 
-## Angular開発者体験の改善
+## Angular開発者体験の改善 {#improving-the-angular-developer-experience}
 
 ### 開発速度
 

From a567deeb4f08bd22d11b189f03c73d2eba7fadd8 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:24:15 +0900
Subject: [PATCH 49/55] fix(build): add patch for generate-routes explicit
 anchor ID

---
 .../fix-generate-routes-explicit-id.patch       | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 tools/adev-patches/fix-generate-routes-explicit-id.patch

diff --git a/tools/adev-patches/fix-generate-routes-explicit-id.patch b/tools/adev-patches/fix-generate-routes-explicit-id.patch
new file mode 100644
index 000000000..3c6f7c27a
--- /dev/null
+++ b/tools/adev-patches/fix-generate-routes-explicit-id.patch
@@ -0,0 +1,17 @@
+# Workaround until this issue has been resolved: https://github.com/angular/angular/pull/67201
+diff --git a/adev/scripts/routes/generate-routes.mts b/adev/scripts/routes/generate-routes.mts
+index 605262d172..8ef9d7ead2 100644
+--- a/adev/scripts/routes/generate-routes.mts
++++ b/adev/scripts/routes/generate-routes.mts
+@@ -75,6 +75,11 @@ main();
+ 
+ // TODO: refactor so this function is shared with the generation pipeline (adev/shared-docs/pipeline/shared/marked/transformations/heading.mts)
+ function getIdFromHeading(heading: string): string {
++  // Check for explicit ID in {#id} format (used in translations)
++  const explicitIdMatch = heading.match(/\{#([^}]+)\}/);
++  if (explicitIdMatch) {
++    return explicitIdMatch[1];
++  }
+   return heading
+     .toLowerCase()
+     .replace(/\s|\//g, '-') // replace spaces and slashes with dashes

From 989361c3ad5a758c7878bc1abc3d0a3aac4fbaa0 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:53:12 +0900
Subject: [PATCH 50/55] fix(docs): add explicit anchor ID to image-optimization
 docs-step

The Japanese translated docs-step title generates Japanese anchor ID.
Adding explicit English anchor ID for link compatibility with NG0913.
---
 adev-ja/src/content/guide/image-optimization.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/adev-ja/src/content/guide/image-optimization.md b/adev-ja/src/content/guide/image-optimization.md
index c774960c4..734dbc1af 100644
--- a/adev-ja/src/content/guide/image-optimization.md
+++ b/adev-ja/src/content/guide/image-optimization.md
@@ -55,7 +55,7 @@ NgOptimizedImageを使用するために画像ローダーは**必須ではあ
 
 [組み込みのサードパーティローダー](#built-in-loaders)を使用している場合は、`src`からベースURLパスを省略してください。これはローダーによって自動的に前置されます。
 </docs-step>
-<docs-step title="画像を`priority`としてマークする">
+<docs-step title="画像を`priority`としてマークする {#mark-images-as-priority}">
 ページの[LCP画像](https://web.dev/lcp/#what-elements-are-considered)は、その読み込みを優先するために常に`priority`としてマークしてください。
 
 ```html

From e913b7e7fd24b9bfa93dd2bce0170333ae499e4e Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 17:53:26 +0900
Subject: [PATCH 51/55] fix(docs): update deployment.md links and add anchor
 IDs

- Update CLI builder link path: guide/cli-builder -> tools/cli/cli-builder
- Add explicit anchor IDs to translated headings for link compatibility
---
 adev-ja/src/content/tools/cli/deployment.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/adev-ja/src/content/tools/cli/deployment.md b/adev-ja/src/content/tools/cli/deployment.md
index bc3d61d3f..4ba2c3a3b 100644
--- a/adev-ja/src/content/tools/cli/deployment.md
+++ b/adev-ja/src/content/tools/cli/deployment.md
@@ -4,7 +4,7 @@ Angularアプリケーションをリモートサーバーにデプロイする
 
 ## CLIによる自動デプロイ
 
-AngularのCLIコマンドである`ng deploy`はあなたのプロジェクトに紐づいた`deploy` [CLI builder](guide/cli-builder)を実行します。
+AngularのCLIコマンドである`ng deploy`はあなたのプロジェクトに紐づいた`deploy` [CLI builder](tools/cli/cli-builder)を実行します。
 多数のサードパーティのビルダーが異なるプラットフォームで機能するよう実装しています。
 `ng add`によって、それらのいずれかをあなたのプロジェクトに追加できます。
 
@@ -88,7 +88,7 @@ Angularのルーターを迂回して、ブラウザは`/users/42`に対する
 _サーバー_はアプリケーションのリクエストを受け付けるよう設定されていなければなりません。
 特定のサーバーでCORSを有効にする方法は[enable-cors.org](https://enable-cors.org/server.html 'CORSサーバーの有効化')を読んでください。
 
-## プロダクションの最適化
+## プロダクションの最適化 {#production-optimizations}
 
 `ng build`は特に設定しない限り`production`設定を使います。この設定はビルド最適化機能を有効にします。
 
@@ -103,7 +103,7 @@ _サーバー_はアプリケーションのリクエストを受け付けるよ
 
 CLIのビルドオプションとそれらの効果についてより多く知るために[`ng build`](cli/build)を参照してください。
 
-### 開発時のみの機能
+### 開発時のみの機能 {#development-only-features}
 
 `ng serve`を使ってローカルでアプリケーションを起動するとき、Angularは開発用の設定を使用することで、
 実行時に以下が使用可能になります:

From 7739a1c3d84506bc22178950fa7c61cba0c0302f Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 20:23:41 +0900
Subject: [PATCH 52/55] fix(docs): correct animation guide links

Fix incorrect link target guide/animations/enter-and-leave to guide/animations
---
 .../content/guide/animations/complex-sequences.en.md   | 10 +++++-----
 .../src/content/guide/animations/complex-sequences.md  |  2 +-
 adev-ja/src/content/guide/animations/css.md            |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/adev-ja/src/content/guide/animations/complex-sequences.en.md b/adev-ja/src/content/guide/animations/complex-sequences.en.md
index ddd3fe389..4070303ce 100644
--- a/adev-ja/src/content/guide/animations/complex-sequences.en.md
+++ b/adev-ja/src/content/guide/animations/complex-sequences.en.md
@@ -1,6 +1,6 @@
 # Complex animation sequences
 
-IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](/guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
 
 So far, we've learned simple animations of single HTML elements.
 Angular also lets you animate coordinated sequences, such as an entire grid or list of elements as they enter and leave a page.
@@ -54,7 +54,7 @@ The following example demonstrates how to use the `query()` and `stagger()` func
 - Use `stagger()` to delay each animation by 30 milliseconds
 - Animate each element on screen for 0.5 seconds using a custom-defined easing curve, simultaneously fading it in and un-transforming it
 
-<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="page-animations"/>
+<docs-code header="hero-list-page.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.ts" region="page-animations"/>
 
 ## Parallel animation using group() function
 
@@ -67,7 +67,7 @@ HELPFUL: The [`group()`](api/animations/group) function is used to group animati
 
 The following example uses [`group()`](api/animations/group)s on both `:enter` and `:leave` for two different timing configurations, thus applying two independent animations to the same element in parallel.
 
-<docs-code header="hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" region="animationdef"/>
+<docs-code header="hero-list-groups.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.ts" region="animationdef"/>
 
 ## Sequential vs. parallel animations
 
@@ -91,11 +91,11 @@ The heroes list gradually re-enters the page as you delete each letter in the fi
 
 The HTML template contains a trigger called `filterAnimation`.
 
-<docs-code header="hero-list-page.component.html" path="adev/src/content/examples/animations/src/app/hero-list-page.component.html" region="filter-animations" language="angular-html"/>
+<docs-code header="hero-list-page.html" path="adev/src/content/examples/animations/src/app/hero-list-page.html" region="filter-animations" language="angular-html"/>
 
 The `filterAnimation` in the component's decorator contains three transitions.
 
-<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="filter-animations"/>
+<docs-code header="hero-list-page.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.ts" region="filter-animations"/>
 
 The code in this example performs the following tasks:
 
diff --git a/adev-ja/src/content/guide/animations/complex-sequences.md b/adev-ja/src/content/guide/animations/complex-sequences.md
index bff306dec..1db4035b4 100644
--- a/adev-ja/src/content/guide/animations/complex-sequences.md
+++ b/adev-ja/src/content/guide/animations/complex-sequences.md
@@ -1,6 +1,6 @@
 # 複雑なアニメーションシーケンス
 
-IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](guide/animations/enter-and-leave)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。
+IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](/guide/animations)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。
 
 ここまで、単一のHTML要素のシンプルなアニメーションを学んできました。
 Angularでは、ページに出入りする要素のグリッド全体やリスト全体など、連携したシーケンスもアニメーション化できます。
diff --git a/adev-ja/src/content/guide/animations/css.md b/adev-ja/src/content/guide/animations/css.md
index 7f524b3e6..9c991483c 100644
--- a/adev-ja/src/content/guide/animations/css.md
+++ b/adev-ja/src/content/guide/animations/css.md
@@ -90,7 +90,7 @@ CSS Gridを使用すると、`height: auto`へのアニメーションを実現
     <docs-code header="remove.css" path="adev/src/content/examples/animations/src/app/native-css/remove.css"  />
 </docs-code-multifile>
 
-`animate.enter`と`animate.leave`について詳しくは、[EnterとLeaveのアニメーションガイド](guide/animations/enter-and-leave)を参照してください。
+`animate.enter`と`animate.leave`について詳しくは、[EnterとLeaveのアニメーションガイド](guide/animations)を参照してください。
 
 ### インクリメントとデクリメントをアニメーション化する {#animating-increment-and-decrement}
 

From ca6ea86f92d206d4481c2a735864fda652e1f439 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 20:33:48 +0900
Subject: [PATCH 53/55] fix(docs): correct file paths in complex-sequences.md

---
 adev-ja/src/content/guide/animations/complex-sequences.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/adev-ja/src/content/guide/animations/complex-sequences.md b/adev-ja/src/content/guide/animations/complex-sequences.md
index 1db4035b4..cda43b2a7 100644
--- a/adev-ja/src/content/guide/animations/complex-sequences.md
+++ b/adev-ja/src/content/guide/animations/complex-sequences.md
@@ -54,7 +54,7 @@ Angularでは、ページに出入りする要素のグリッド全体やリス
 - `stagger()` を使って各アニメーションを30ミリ秒ずつ遅らせます。
 - カスタム定義のイージングカーブを使って各要素を0.5秒かけてアニメーションし、フェードインと`transform`の解除を同時に行います。
 
-<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="page-animations"/>
+<docs-code header="hero-list-page.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.ts" region="page-animations"/>
 
 ## group() 関数を使った並行アニメーション {#parallel-animation-using-group-function}
 
@@ -91,11 +91,11 @@ Filter/Staggerタブで、**Search Heroes** テキストボックスに `Magnet`
 
 HTMLテンプレートには `filterAnimation` というトリガーが含まれます。
 
-<docs-code header="hero-list-page.component.html" path="adev/src/content/examples/animations/src/app/hero-list-page.component.html" region="filter-animations" language="angular-html"/>
+<docs-code header="hero-list-page.html" path="adev/src/content/examples/animations/src/app/hero-list-page.html" region="filter-animations" language="angular-html"/>
 
 コンポーネントのデコレーターにある `filterAnimation` には3つのトランジションが含まれます。
 
-<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="filter-animations"/>
+<docs-code header="hero-list-page.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.ts" region="filter-animations"/>
 
 この例のコードは次のタスクを実行します：
 

From ddc8ecfd86892eeb1c79c1faa3548705a6fc0b64 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Mon, 23 Feb 2026 21:07:14 +0900
Subject: [PATCH 54/55] fix(docs): update animation file paths to match origin

---
 .../guide/animations/complex-sequences.md     |  2 +-
 .../src/content/guide/animations/css.en.md    | 56 +++++++++----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/adev-ja/src/content/guide/animations/complex-sequences.md b/adev-ja/src/content/guide/animations/complex-sequences.md
index cda43b2a7..f68ddbd37 100644
--- a/adev-ja/src/content/guide/animations/complex-sequences.md
+++ b/adev-ja/src/content/guide/animations/complex-sequences.md
@@ -67,7 +67,7 @@ HELPFUL: [`group()`](api/animations/group) 関数は、アニメーション化
 
 次の例は、`:enter` と `:leave` の両方で [`group()`](api/animations/group) を使用し、2つの異なるタイミング設定を適用します。これにより、同じ要素に2つの独立したアニメーションを並行して適用できます。
 
-<docs-code header="hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" region="animationdef"/>
+<docs-code header="hero-list-groups.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.ts" region="animationdef"/>
 
 ## 順次アニメーションと並行アニメーション {#sequential-vs-parallel-animations}
 
diff --git a/adev-ja/src/content/guide/animations/css.en.md b/adev-ja/src/content/guide/animations/css.en.md
index a88a32ef7..8d08ff0e5 100644
--- a/adev-ja/src/content/guide/animations/css.en.md
+++ b/adev-ja/src/content/guide/animations/css.en.md
@@ -52,10 +52,10 @@ Similarly, you can use `transition-duration`, `transition-delay`, and `transitio
 
 Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. Here's an example:
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
-    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
-    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
-    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.ts">
+    <docs-code header="open-close.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.ts" />
+    <docs-code header="open-close.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.html" />
+    <docs-code header="open-close.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.css"/>
 </docs-code-multifile>
 
 ## Transition and Triggers
@@ -64,10 +64,10 @@ Animations can be triggered by toggling CSS styles or classes. Once a class is p
 
 You can use css-grid to animate to auto height.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
-    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
-    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
-    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts">
+    <docs-code header="auto-height.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.ts" />
+    <docs-code header="auto-height.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.html" />
+    <docs-code header="auto-height.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.css"  />
 </docs-code-multifile>
 
 If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information.
@@ -76,18 +76,18 @@ If you don't have to worry about supporting all browsers, you can also check out
 
 You can create animations for when an item enters a view or leaves a view. Let's start by looking at how to animate an element entering a view. We'll do this with `animate.enter`, which will apply animation classes when an element enters the view.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
-    <docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
-    <docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
-    <docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.ts">
+    <docs-code header="insert.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.ts" />
+    <docs-code header="insert.html" path="adev/src/content/examples/animations/src/app/native-css/insert.html" />
+    <docs-code header="insert.css" path="adev/src/content/examples/animations/src/app/native-css/insert.css"  />
 </docs-code-multifile>
 
 Animating an element when it leaves the view is similar to animating when entering a view. Use `animate.leave` to specify which CSS classes to apply when the element leaves the view.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
-    <docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
-    <docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
-    <docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.ts">
+    <docs-code header="remove.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.ts" />
+    <docs-code header="remove.html" path="adev/src/content/examples/animations/src/app/native-css/remove.html" />
+    <docs-code header="remove.css" path="adev/src/content/examples/animations/src/app/native-css/remove.css"  />
 </docs-code-multifile>
 
 For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
@@ -96,10 +96,10 @@ For more information on `animate.enter` and `animate.leave`, see the [Enter and
 
 Animating on increment and decrement is a common pattern in applications. Here's an example of how you can accomplish that behavior.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
-    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
-    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
-    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts">
+    <docs-code header="increment-decrement.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts" />
+    <docs-code header="increment-decrement.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.html" />
+    <docs-code header="increment-decrement.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.css" />
 </docs-code-multifile>
 
 ### Disabling an animation or all animations
@@ -147,10 +147,10 @@ Animations are often more complicated than just a simple fade in or fade out. Yo
 
 One common effect is to stagger the animations of each item in a list to create a cascade effect. This can be accomplished by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
-    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
-    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
-    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.ts">
+    <docs-code header="stagger.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.ts" />
+    <docs-code header="stagger.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.html" />
+    <docs-code header="stagger.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.css" />
 </docs-code-multifile>
 
 ### Parallel Animations
@@ -171,10 +171,10 @@ In this example, the `rotate` and `fade-in` animations fire at the same time, bu
 
 Items in a `@for` loop will be removed and re-added, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example below.
 
-<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
-    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
-    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
-    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
+<docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.ts">
+    <docs-code header="reorder.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.ts" />
+    <docs-code header="reorder.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.html" />
+    <docs-code header="reorder.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.css" />
 </docs-code-multifile>
 
 ## Programmatic control of animations

From 2d95da3ad5bb6294f9e76ca52a147ce49d44143a Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Tue, 24 Feb 2026 00:15:15 +0900
Subject: [PATCH 55/55] fix(docs): translate home page feature demos

Translated the following home page demo components:
- signals-demo: Signals demo
- control-flow: Control flow demo
- deferrable-views-example: Deferrable views demo
- hydration-example: Hydration demo

Also improved the main catchphrase translation.
---
 .../control-flow/control-flow-example.en.html |  27 +++
 .../control-flow/control-flow-example.html    |  27 +++
 .../deferrable-views-example.en.html          |  38 +++
 .../deferrable-views-example.html             |  37 +++
 .../hydration-example.en.html                 | 216 ++++++++++++++++++
 .../hydration-example/hydration-example.html  | 216 ++++++++++++++++++
 .../signals-demo/signals-demo.en.html         |  51 +++++
 .../components/signals-demo/signals-demo.html |  51 +++++
 .../src/app/features/home/home.component.html |  10 +-
 tools/update-origin.ts                        |   4 +
 10 files changed, 672 insertions(+), 5 deletions(-)
 create mode 100644 adev-ja/src/app/features/home/components/control-flow/control-flow-example.en.html
 create mode 100644 adev-ja/src/app/features/home/components/control-flow/control-flow-example.html
 create mode 100644 adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.en.html
 create mode 100644 adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.html
 create mode 100644 adev-ja/src/app/features/home/components/hydration-example/hydration-example.en.html
 create mode 100644 adev-ja/src/app/features/home/components/hydration-example/hydration-example.html
 create mode 100644 adev-ja/src/app/features/home/components/signals-demo/signals-demo.en.html
 create mode 100644 adev-ja/src/app/features/home/components/signals-demo/signals-demo.html

diff --git a/adev-ja/src/app/features/home/components/control-flow/control-flow-example.en.html b/adev-ja/src/app/features/home/components/control-flow/control-flow-example.en.html
new file mode 100644
index 000000000..0222cc26e
--- /dev/null
+++ b/adev-ja/src/app/features/home/components/control-flow/control-flow-example.en.html
@@ -0,0 +1,27 @@
+<div class="two-column-step">
+  <div class="step-description">
+    <div class="header">Control Flow</div>
+    <div class="description">
+      Angular's new control flow syntax makes templates easier to write and understand.
+    </div>
+
+    <button
+      class="docs-primary-btn"
+      [attr.text]="'Learn more about Control Flow'"
+      routerLink="/guide/templates/control-flow"
+    >
+      Learn more about Control Flow
+    </button>
+  </div>
+
+  <div class="step-code">
+    <div class="code-block">
+      <div class="code-header">
+        <span>my-template.html</span>
+        <span class="copy-icon"></span>
+      </div>
+
+      <adev-code-block [code]="Example" language="angular-html" />
+    </div>
+  </div>
+</div>
diff --git a/adev-ja/src/app/features/home/components/control-flow/control-flow-example.html b/adev-ja/src/app/features/home/components/control-flow/control-flow-example.html
new file mode 100644
index 000000000..fd30694a6
--- /dev/null
+++ b/adev-ja/src/app/features/home/components/control-flow/control-flow-example.html
@@ -0,0 +1,27 @@
+<div class="two-column-step">
+  <div class="step-description">
+    <div class="header">制御フロー</div>
+    <div class="description">
+      Angularの新しい制御フロー構文により、テンプレートがより書きやすく理解しやすくなります。
+    </div>
+
+    <button
+      class="docs-primary-btn"
+      [attr.text]="'制御フローについて詳しく'"
+      routerLink="/guide/templates/control-flow"
+    >
+      制御フローについて詳しく
+    </button>
+  </div>
+
+  <div class="step-code">
+    <div class="code-block">
+      <div class="code-header">
+        <span>my-template.html</span>
+        <span class="copy-icon"></span>
+      </div>
+
+      <adev-code-block [code]="Example" language="angular-html" />
+    </div>
+  </div>
+</div>
diff --git a/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.en.html b/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.en.html
new file mode 100644
index 000000000..819ce423b
--- /dev/null
+++ b/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.en.html
@@ -0,0 +1,38 @@
+<div class="two-column-step">
+  <div class="step-description">
+    <div class="header">Deferrable Views</div>
+    <div class="description">
+      Deferrable views (also known as <code>&#64;defer</code> blocks) reduce the initial bundle size
+      of your application by deferring the loading of code that is not strictly necessary for the
+      initial rendering of a page.
+    </div>
+
+    <button
+      class="docs-primary-btn"
+      [attr.text]="'Learn more about deferred loading'"
+      routerLink="/guide/templates/defer"
+    >
+      Learn more about deferred loading
+    </button>
+  </div>
+
+  <div class="step-code">
+    <div class="code-block">
+      <div class="code-header">
+        <span>data-visualization-page.html</span>
+        <span class="copy-icon"></span>
+      </div>
+
+      <adev-code-block [code]="exampleHtml" language="angular-html" />
+    </div>
+
+    <div class="code-block">
+      <div class="code-header">
+        <span>data-visualization-page.ts</span>
+        <span class="copy-icon"></span>
+      </div>
+
+      <adev-code-block [code]="exampleTs" />
+    </div>
+  </div>
+</div>
diff --git a/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.html b/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.html
new file mode 100644
index 000000000..8753b0d41
--- /dev/null
+++ b/adev-ja/src/app/features/home/components/deferrable-views-example/deferrable-views-example.html
@@ -0,0 +1,37 @@
+<div class="two-column-step">
+  <div class="step-description">
+    <div class="header">遅延可能ビュー</div>
+    <div class="description">
+      遅延可能ビュー（<code>&#64;defer</code>ブロックとも呼ばれます）は、ページの初期レンダリングに
+      厳密には必要でないコードの読み込みを遅延させることで、アプリケーションの初期バンドルサイズを削減します。
+    </div>
+
+    <button
+      class="docs-primary-btn"
+      [attr.text]="'遅延読み込みについて詳しく'"
+      routerLink="/guide/templates/defer"
+    >
+      遅延読み込みについて詳しく
+    </button>
+  </div>
+
+  <div class="step-code">
+    <div class="code-block">
+      <div class="code-header">
+        <span>data-visualization-page.html</span>
+        <span class="copy-icon"></span>
+      </div>
+
+      <adev-code-block [code]="exampleHtml" language="angular-html" />
+    </div>
+
+    <div class="code-block">
+      <div class="code-header">
+        <span>data-visualization-page.ts</span>
+        <span class="copy-icon"></span>
+      </div>
+
+      <adev-code-block [code]="exampleTs" />
+    </div>
+  </div>
+</div>
diff --git a/adev-ja/src/app/features/home/components/hydration-example/hydration-example.en.html b/adev-ja/src/app/features/home/components/hydration-example/hydration-example.en.html
new file mode 100644
index 000000000..24af1eda1
--- /dev/null
+++ b/adev-ja/src/app/features/home/components/hydration-example/hydration-example.en.html
@@ -0,0 +1,216 @@
+<div class="header">Hydration</div>
+<div class="description">
+  Hydration is the process that restores the server-side rendered application on the client
+
+  <p>
+    This demo showcases Angular's hydration strategies, allowing you to simulate network latency and
+    observe how different components hydrate based on their configured triggers.
+  </p>
+</div>
+
+<div class="demo-container">
+  <div class="max-width-wrapper">
+    <div class="main-layout">
+      <!-- Controls & Logs -->
+      <div class="sidebar">
+        <div class="card config-card">
+          <h3 class="sidebar-title font-mono">
+            <docs-icon>schedule</docs-icon>
+            Simulation Config
+          </h3>
+
+          <div class="config-controls">
+            <div class="control-group">
+              <div class="label-row">
+                <label>Network Latency</label>
+                <span class="latency-value font-mono">{{ latency() }}ms</span>
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="4000"
+                step="100"
+                [value]="latency()"
+                (input)="updateLatency($event)"
+                class="range-input"
+              />
+            </div>
+
+            <button
+              (click)="resetSimulation()"
+              [disabled]="isSimulationRunning()"
+              class="btn-reset"
+            >
+              <docs-icon>refresh</docs-icon>
+              Reset Lifecycle
+            </button>
+          </div>
+        </div>
+
+        <!-- Terminal Log -->
+        <div class="terminal">
+          <h3 class="terminal-title font-mono">Hydration Engine Log</h3>
+          <div class="terminal-body font-mono custom-scrollbar">
+            @for (evt of eventQueue(); track $index) {
+              <div class="log-entry animate-in">
+                <span class="log-index">0{{ $index + 1 }}</span>
+                <span class="log-tag">event:</span>
+                <span class="log-msg">{{ evt }}</span>
+              </div>
+            }
+            @if (eventQueue().length === 0) {
+              <div class="log-placeholder">Awaiting app bootstrap...</div>
+            }
+          </div>
+        </div>
+      </div>
+
+      <!-- Simulator Stage -->
+      <div class="simulator-stage">
+        <div class="browser-window">
+          <!-- Browser UI -->
+          <div class="browser-header">
+            <div class="window-controls">
+              <div class="dot-win"></div>
+              <div class="dot-win"></div>
+              <div class="dot-win"></div>
+            </div>
+            <div class="address-bar font-mono">
+              <docs-icon>lock</docs-icon>
+              angular.dev/hydration-strategies
+            </div>
+          </div>
+
+          <!-- Viewport Content -->
+          <div class="viewport">
+            @if (currentState() === 'Server-Side Rendering...') {
+              <div class="ssr-overlay animate-fade">
+                <div class="ssr-spinner">
+                  <div class="spinner-outer"></div>
+                  <div class="spinner-inner"></div>
+                </div>
+                <p class="ssr-title">Generating SSR Markup...</p>
+              </div>
+            }
+
+            <div class="viewport-flex">
+              <div class="viewport-header">
+                <div class="header-text">
+                  <h4 class="viewport-title">Component Strategies</h4>
+                  <p class="viewport-subtitle">Mixing eager and deferred hydration triggers.</p>
+                </div>
+                <div class="viewport-stats">
+                  <div class="stats-label">Main App</div>
+                  <div class="stats-value font-tabular">{{ progress() }}%</div>
+                </div>
+              </div>
+
+              <div class="component-grid">
+                @for (card of [card1(), card2(), card3(), card4()]; track $index) {
+                  <div
+                    (click)="handleCardClick(card.id)"
+                    class="component-card transition-all"
+                    [class]="{
+                      'interactive': isInteractive() || card.strategy === 'on-interaction',
+                      'static': !isInteractive() && card.strategy !== 'on-interaction',
+                      'active-card': card.clickCount > 0,
+                      'dashed-border': !card.isHydrated,
+                    }"
+                  >
+                    <div class="card-top">
+                      <div
+                        class="icon-box transition-all"
+                        [class]="card.isHydrated ? 'icon-hydrated' : 'icon-static'"
+                      >
+                        @if (card.isHydrating) {
+                          <div class="loading-spinner"></div>
+                        } @else {
+                          <docs-icon>water_drop</docs-icon>
+                        }
+                      </div>
+                      @if (card.clickCount > 0) {
+                        <div class="click-badge font-tabular animate-zoom">
+                          <span class="badge-label">CLICKS:</span> {{ card.clickCount }}
+                        </div>
+                      }
+                    </div>
+
+                    <div class="card-body">
+                      <h5 class="card-title">{{ card.title }}</h5>
+                      <p class="card-desc">{{ card.description }}</p>
+                    </div>
+
+                    <div class="card-footer">
+                      @if (card.isHydrating) {
+                        <div class="tag tag-deferred animate-slide-in">
+                          <span class="tag-dot spin"></span>
+                          Hydrating...
+                        </div>
+                      } @else if (!card.isHydrated) {
+                        <div class="tag tag-deferred">
+                          <span class="tag-dot pulse"></span>
+                          Static
+                        </div>
+                      } @else {
+                        <div class="tag tag-hydrated animate-slide-in">
+                          <span class="tag-dot"></span>
+                          Hydrated
+                        </div>
+                      }
+                    </div>
+
+                    @if (card.syntax) {
+                      <div
+                        class="syntax-badge font-mono"
+                        [class]="card.isHydrated ? 'syntax-inactive' : 'syntax-active'"
+                      >
+                        {{ card.syntax }}
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          <!-- Main Lifecycle Progress -->
+          <div class="lifecycle-progress-bar">
+            <div class="progress-fill transition-all" [style.width.%]="progress()"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Explanatory Feature Cards -->
+    <div class="explainer-grid">
+      <div class="explainer-item">
+        <h5 class="explainer-title"><span class="dot-red"></span> Eager Hydration</h5>
+        <p class="explainer-text">
+          Essential components (like navigation or top-fold content) hydrate as soon as the main
+          application bundle is ready.
+        </p>
+      </div>
+      <div class="explainer-item">
+        <h5 class="explainer-title"><span class="dot-violet"></span> Incremental Hydration</h5>
+        <p class="explainer-text">
+          Use hydration triggers like <code>on interaction</code> or <code>on timer</code> to delay
+          JS execution for non-critical elements.
+        </p>
+      </div>
+      <div class="explainer-item">
+        <h5 class="explainer-title"><span class="dot-green"></span> Event Replay</h5>
+        <p class="explainer-text">
+          User clicks are never lost. Angular records events during the "Static" phase and
+          re-dispatches them once hydrated.
+        </p>
+      </div>
+    </div>
+  </div>
+  <button
+    class="docs-primary-btn"
+    [attr.text]="'Learn more about hydration'"
+    routerLink="/guide/hydration"
+  >
+    Learn more about hydration
+  </button>
+</div>
diff --git a/adev-ja/src/app/features/home/components/hydration-example/hydration-example.html b/adev-ja/src/app/features/home/components/hydration-example/hydration-example.html
new file mode 100644
index 000000000..1133d9f57
--- /dev/null
+++ b/adev-ja/src/app/features/home/components/hydration-example/hydration-example.html
@@ -0,0 +1,216 @@
+<div class="header">ハイドレーション</div>
+<div class="description">
+  ハイドレーションは、サーバーサイドでレンダリングされたアプリケーションをクライアント上で復元するプロセスです
+
+  <p>
+    このデモでは、Angularのハイドレーション戦略を紹介します。ネットワーク遅延をシミュレートし、
+    設定されたトリガーに基づいて各コンポーネントがどのようにハイドレートされるかを観察できます。
+  </p>
+</div>
+
+<div class="demo-container">
+  <div class="max-width-wrapper">
+    <div class="main-layout">
+      <!-- Controls & Logs -->
+      <div class="sidebar">
+        <div class="card config-card">
+          <h3 class="sidebar-title font-mono">
+            <docs-icon>schedule</docs-icon>
+            シミュレーション設定
+          </h3>
+
+          <div class="config-controls">
+            <div class="control-group">
+              <div class="label-row">
+                <label>ネットワーク遅延</label>
+                <span class="latency-value font-mono">{{ latency() }}ms</span>
+              </div>
+              <input
+                type="range"
+                min="0"
+                max="4000"
+                step="100"
+                [value]="latency()"
+                (input)="updateLatency($event)"
+                class="range-input"
+              />
+            </div>
+
+            <button
+              (click)="resetSimulation()"
+              [disabled]="isSimulationRunning()"
+              class="btn-reset"
+            >
+              <docs-icon>refresh</docs-icon>
+              ライフサイクルをリセット
+            </button>
+          </div>
+        </div>
+
+        <!-- Terminal Log -->
+        <div class="terminal">
+          <h3 class="terminal-title font-mono">ハイドレーションエンジンログ</h3>
+          <div class="terminal-body font-mono custom-scrollbar">
+            @for (evt of eventQueue(); track $index) {
+              <div class="log-entry animate-in">
+                <span class="log-index">0{{ $index + 1 }}</span>
+                <span class="log-tag">event:</span>
+                <span class="log-msg">{{ evt }}</span>
+              </div>
+            }
+            @if (eventQueue().length === 0) {
+              <div class="log-placeholder">アプリのブートストラップを待機中...</div>
+            }
+          </div>
+        </div>
+      </div>
+
+      <!-- Simulator Stage -->
+      <div class="simulator-stage">
+        <div class="browser-window">
+          <!-- Browser UI -->
+          <div class="browser-header">
+            <div class="window-controls">
+              <div class="dot-win"></div>
+              <div class="dot-win"></div>
+              <div class="dot-win"></div>
+            </div>
+            <div class="address-bar font-mono">
+              <docs-icon>lock</docs-icon>
+              angular.dev/hydration-strategies
+            </div>
+          </div>
+
+          <!-- Viewport Content -->
+          <div class="viewport">
+            @if (currentState() === 'Server-Side Rendering...') {
+              <div class="ssr-overlay animate-fade">
+                <div class="ssr-spinner">
+                  <div class="spinner-outer"></div>
+                  <div class="spinner-inner"></div>
+                </div>
+                <p class="ssr-title">SSRマークアップを生成中...</p>
+              </div>
+            }
+
+            <div class="viewport-flex">
+              <div class="viewport-header">
+                <div class="header-text">
+                  <h4 class="viewport-title">コンポーネント戦略</h4>
+                  <p class="viewport-subtitle">即時ハイドレーションと遅延ハイドレーションの組み合わせ</p>
+                </div>
+                <div class="viewport-stats">
+                  <div class="stats-label">メインアプリ</div>
+                  <div class="stats-value font-tabular">{{ progress() }}%</div>
+                </div>
+              </div>
+
+              <div class="component-grid">
+                @for (card of [card1(), card2(), card3(), card4()]; track $index) {
+                  <div
+                    (click)="handleCardClick(card.id)"
+                    class="component-card transition-all"
+                    [class]="{
+                      'interactive': isInteractive() || card.strategy === 'on-interaction',
+                      'static': !isInteractive() && card.strategy !== 'on-interaction',
+                      'active-card': card.clickCount > 0,
+                      'dashed-border': !card.isHydrated,
+                    }"
+                  >
+                    <div class="card-top">
+                      <div
+                        class="icon-box transition-all"
+                        [class]="card.isHydrated ? 'icon-hydrated' : 'icon-static'"
+                      >
+                        @if (card.isHydrating) {
+                          <div class="loading-spinner"></div>
+                        } @else {
+                          <docs-icon>water_drop</docs-icon>
+                        }
+                      </div>
+                      @if (card.clickCount > 0) {
+                        <div class="click-badge font-tabular animate-zoom">
+                          <span class="badge-label">クリック:</span> {{ card.clickCount }}
+                        </div>
+                      }
+                    </div>
+
+                    <div class="card-body">
+                      <h5 class="card-title">{{ card.title }}</h5>
+                      <p class="card-desc">{{ card.description }}</p>
+                    </div>
+
+                    <div class="card-footer">
+                      @if (card.isHydrating) {
+                        <div class="tag tag-deferred animate-slide-in">
+                          <span class="tag-dot spin"></span>
+                          ハイドレート中...
+                        </div>
+                      } @else if (!card.isHydrated) {
+                        <div class="tag tag-deferred">
+                          <span class="tag-dot pulse"></span>
+                          静的
+                        </div>
+                      } @else {
+                        <div class="tag tag-hydrated animate-slide-in">
+                          <span class="tag-dot"></span>
+                          ハイドレート済み
+                        </div>
+                      }
+                    </div>
+
+                    @if (card.syntax) {
+                      <div
+                        class="syntax-badge font-mono"
+                        [class]="card.isHydrated ? 'syntax-inactive' : 'syntax-active'"
+                      >
+                        {{ card.syntax }}
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+
+          <!-- Main Lifecycle Progress -->
+          <div class="lifecycle-progress-bar">
+            <div class="progress-fill transition-all" [style.width.%]="progress()"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Explanatory Feature Cards -->
+    <div class="explainer-grid">
+      <div class="explainer-item">
+        <h5 class="explainer-title"><span class="dot-red"></span> 即時ハイドレーション</h5>
+        <p class="explainer-text">
+          ナビゲーションやファーストビューのコンテンツなど、重要なコンポーネントは
+          メインアプリケーションバンドルの準備が完了するとすぐにハイドレートされます。
+        </p>
+      </div>
+      <div class="explainer-item">
+        <h5 class="explainer-title"><span class="dot-violet"></span> インクリメンタルハイドレーション</h5>
+        <p class="explainer-text">
+          <code>on interaction</code>や<code>on timer</code>などのハイドレーショントリガーを使用して、
+          重要度の低い要素のJS実行を遅延させます。
+        </p>
+      </div>
+      <div class="explainer-item">
+        <h5 class="explainer-title"><span class="dot-green"></span> イベントリプレイ</h5>
+        <p class="explainer-text">
+          ユーザーのクリックは失われません。Angularは「静的」フェーズ中のイベントを記録し、
+          ハイドレート後に再ディスパッチします。
+        </p>
+      </div>
+    </div>
+  </div>
+  <button
+    class="docs-primary-btn"
+    [attr.text]="'ハイドレーションについて詳しく'"
+    routerLink="/guide/hydration"
+  >
+    ハイドレーションについて詳しく
+  </button>
+</div>
diff --git a/adev-ja/src/app/features/home/components/signals-demo/signals-demo.en.html b/adev-ja/src/app/features/home/components/signals-demo/signals-demo.en.html
new file mode 100644
index 000000000..19575c5c4
--- /dev/null
+++ b/adev-ja/src/app/features/home/components/signals-demo/signals-demo.en.html
@@ -0,0 +1,51 @@
+<div class="two-column-step">
+  <div class="step-description">
+    <div class="header">Signals: Fine-Grained Reactivity</div>
+    <div class="description">
+      Type in the search box to filter the list. A
+      <code>computed</code> signal automatically recalculates the
+      <code>filteredItems</code> whenever the <code>searchTerm</code> signal changes.
+    </div>
+
+    <div class="demo-display">
+      <input
+        [value]="searchTerm()"
+        (input)="onSearch($event.target.value)"
+        placeholder="Search for fruit..."
+        class="demo-input"
+      />
+      <div class="demo-list">
+        @for (item of filteredItems(); track item) {
+          <div class="demo-item">{{ item }}</div>
+        }
+      </div>
+    </div>
+
+    <button
+      class="docs-primary-btn"
+      [attr.text]="'Learn more about signals'"
+      routerLink="/guide/signals"
+    >
+      Learn more about signals
+    </button>
+  </div>
+
+  <div class="step-code">
+    <div class="code-block">
+      <div class="code-header">
+        <span>component.ts</span>
+        <span class="copy-icon"></span>
+      </div>
+
+      <adev-code-block [code]="tsExample" />
+    </div>
+
+    <div class="code-block">
+      <div class="code-header">
+        <span>component.html</span>
+        <span class="copy-icon"></span>
+      </div>
+      <adev-code-block [code]="htmlExample" language="angular-html" />
+    </div>
+  </div>
+</div>
diff --git a/adev-ja/src/app/features/home/components/signals-demo/signals-demo.html b/adev-ja/src/app/features/home/components/signals-demo/signals-demo.html
new file mode 100644
index 000000000..7422c01a9
--- /dev/null
+++ b/adev-ja/src/app/features/home/components/signals-demo/signals-demo.html
@@ -0,0 +1,51 @@
+<div class="two-column-step">
+  <div class="step-description">
+    <div class="header">シグナル: きめ細やかなリアクティビティ</div>
+    <div class="description">
+      検索ボックスに入力してリストをフィルタリングしてみましょう。
+      <code>computed</code>シグナルは、<code>searchTerm</code>シグナルが変更されるたびに
+      <code>filteredItems</code>を自動的に再計算します。
+    </div>
+
+    <div class="demo-display">
+      <input
+        [value]="searchTerm()"
+        (input)="onSearch($event.target.value)"
+        placeholder="果物を検索..."
+        class="demo-input"
+      />
+      <div class="demo-list">
+        @for (item of filteredItems(); track item) {
+          <div class="demo-item">{{ item }}</div>
+        }
+      </div>
+    </div>
+
+    <button
+      class="docs-primary-btn"
+      [attr.text]="'シグナルについて詳しく'"
+      routerLink="/guide/signals"
+    >
+      シグナルについて詳しく
+    </button>
+  </div>
+
+  <div class="step-code">
+    <div class="code-block">
+      <div class="code-header">
+        <span>component.ts</span>
+        <span class="copy-icon"></span>
+      </div>
+
+      <adev-code-block [code]="tsExample" />
+    </div>
+
+    <div class="code-block">
+      <div class="code-header">
+        <span>component.html</span>
+        <span class="copy-icon"></span>
+      </div>
+      <adev-code-block [code]="htmlExample" language="angular-html" />
+    </div>
+  </div>
+</div>
diff --git a/adev-ja/src/app/features/home/home.component.html b/adev-ja/src/app/features/home/home.component.html
index c1dc3a432..2d03a0c2f 100644
--- a/adev-ja/src/app/features/home/home.component.html
+++ b/adev-ja/src/app/features/home/home.component.html
@@ -15,7 +15,7 @@ <h1 tabindex="-1">Angular v21がリリースされました！</h1>
 
       @if (!isUwu) {
         <div class="title">
-          <h2>生産性 × スケーラビリティ</h2>
+          <h2>開発効率と<br />スケーラビリティの融合</h2>
           <h3>スケーラブルなWebアプリを確信を持って構築できるフレームワーク</h3>
         </div>
       } @else {
@@ -42,10 +42,10 @@ <h2 id="features">問題解決に役立つ機能</h2>
     <div ngTabs class="material-tabs">
       <div ngTabList selectionMode="follow" selectedTab="signals">
         <div class="tab-background"></div>
-        <div ngTab value="signals">Signals</div>
-        <div ngTab value="control-flow">Control Flow</div>
-        <div ngTab value="deferrable-views">Deferrable Views</div>
-        <div ngTab value="hydration">Hydration</div>
+        <div ngTab value="signals">シグナル</div>
+        <div ngTab value="control-flow">制御フロー</div>
+        <div ngTab value="deferrable-views">遅延可能ビュー</div>
+        <div ngTab value="hydration">ハイドレーション</div>
       </div>
 
       <div class="sliding-window">
diff --git a/tools/update-origin.ts b/tools/update-origin.ts
index 41074fd88..e41fbdc39 100644
--- a/tools/update-origin.ts
+++ b/tools/update-origin.ts
@@ -20,6 +20,10 @@ const localizedFilePatterns: Array<string | readonly string[]> = [
   'src/content/tutorials/**/config.json',
   // Update home files
   'src/app/features/home/home.component.html',
+  'src/app/features/home/components/signals-demo/signals-demo.html',
+  'src/app/features/home/components/control-flow/control-flow-example.html',
+  'src/app/features/home/components/deferrable-views-example/deferrable-views-example.html',
+  'src/app/features/home/components/hydration-example/hydration-example.html',
   // Update guide files
   'src/app/features/update/recommendations.ts',
   'src/app/features/update/update.component.ts',