From 2ae0d3432bf6422e5e076a5bfa71bbceb3e8d0c4 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:05:11 +0900
Subject: [PATCH 01/51] chore: update origin to 4e4df4a

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

diff --git a/origin b/origin
index ef0359676..4e4df4a69 160000
--- a/origin
+++ b/origin
@@ -1 +1 @@
-Subproject commit ef0359676c8e25e363ee39e8060cf13933cfe1d9
+Subproject commit 4e4df4a696aa426885af44afbcb13ee58014455d

From 9291494954fcefcdecea2132ad2e8f1dd968ecec Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:05:46 +0900
Subject: [PATCH 02/51] fix: migrate untranslated files

---
 adev-ja/src/content/ai/mcp-server-setup.md    | 12 ++--
 .../ecosystem/rxjs-interop/output-interop.md  |  4 +-
 .../ecosystem/rxjs-interop/signals-interop.md |  7 +-
 .../rxjs-interop/take-until-destroyed.md      |  1 +
 .../service-workers/getting-started.md        |  2 +
 .../di/debugging-and-troubleshooting-di.md    | 43 ++++++------
 .../guide/di/defining-dependency-providers.md |  5 +-
 .../guide/forms/signals/async-operations.md   |  5 +-
 .../forms/signals/dynamic-forms-with-json.md  | 16 +++--
 .../guide/forms/signals/field-metadata.md     |  3 +-
 .../content/guide/forms/signals/form-logic.md |  2 +-
 .../guide/forms/signals/form-submission.md    |  6 +-
 .../content/guide/forms/signals/migration.md  | 20 +++++-
 .../content/guide/forms/signals/schemas.md    |  4 +-
 adev-ja/src/content/guide/i18n/deploy.md      |  3 +-
 adev-ja/src/content/guide/i18n/merge.md       |  2 +-
 adev-ja/src/content/guide/i18n/overview.md    |  3 +-
 .../src/content/guide/ngmodules/overview.md   |  1 +
 .../src/content/guide/signals/debounced.md    |  2 +-
 adev-ja/src/content/guide/testing/services.md |  2 +-
 .../src/content/reference/errors/NG01055.md   | 39 +++++++++++
 .../src/content/reference/errors/NG01354.md   |  2 +
 .../src/content/reference/errors/NG02825.md   |  1 +
 .../src/content/reference/errors/NG05101.md   | 10 +--
 .../src/content/reference/errors/NG05201.md   | 52 ++++++---------
 .../src/content/reference/errors/NG0904.md    | 66 +++++++++++++++++++
 .../src/content/reference/errors/NG0991.md    |  1 +
 .../reference/extended-diagnostics/NG8103.md  |  4 +-
 .../reference/migrations/inject-function.md   | 14 ++--
 .../migrations/route-lazy-loading.md          |  2 +
 .../router-testing-module-migration.md        |  6 +-
 .../reference/migrations/signal-queries.md    |  8 +--
 .../reference/migrations/standalone.md        |  2 +-
 adev-ja/src/content/reference/press-kit.md    |  6 +-
 .../content/tools/cli/aot-metadata-errors.md  |  5 +-
 adev-ja/src/content/tools/cli/end-to-end.md   |  8 +--
 .../content/tools/cli/template-typecheck.md   | 32 +++++----
 adev-ja/src/content/tools/devtools/signals.md | 60 +++++++++++++++++
 adev-ja/src/content/tools/language-service.md |  4 +-
 .../first-app/steps/09-services/README.md     |  6 +-
 .../first-app/steps/11-details-page/README.md |  2 +-
 .../first-app/steps/14-http/README.md         |  2 +-
 42 files changed, 336 insertions(+), 139 deletions(-)
 create mode 100644 adev-ja/src/content/reference/errors/NG01055.md
 create mode 100644 adev-ja/src/content/reference/errors/NG0904.md
 create mode 100644 adev-ja/src/content/tools/devtools/signals.md

diff --git a/adev-ja/src/content/ai/mcp-server-setup.md b/adev-ja/src/content/ai/mcp-server-setup.md
index f8901dd2f..2d96fd5f2 100644
--- a/adev-ja/src/content/ai/mcp-server-setup.md
+++ b/adev-ja/src/content/ai/mcp-server-setup.md
@@ -67,9 +67,9 @@ When the MCP server is enabled, AI agents have access to the following tools:
 | Name                        | Description                                                                                               |
 | :-------------------------- | :-------------------------------------------------------------------------------------------------------- |
 | `ai_tutor`                  | Launches an interactive AI-powered Angular tutor.                                                         |
-| `devserver.start`           | Asynchronously starts a dev server (`ng serve`). Returns immediately.                                     |
-| `devserver.stop`            | Stops the dev server.                                                                                     |
-| `devserver.wait_for_build`  | Returns the logs of the most recent build in a running dev server.                                        |
+| `devserver_start`           | Asynchronously starts a dev server (`ng serve`). Returns immediately.                                     |
+| `devserver_stop`            | Stops the dev server.                                                                                     |
+| `devserver_wait_for_build`  | Returns the logs of the most recent build in a running dev server.                                        |
 | `get_best_practices`        | Retrieves the Angular Best Practices Guide (crucial for standalone components, typed forms, etc.).        |
 | `list_projects`             | Lists all applications and libraries in the workspace by reading `angular.json`.                          |
 | `onpush_zoneless_migration` | Analyzes code and provides a plan to migrate it to `OnPush` change detection (prerequisite for zoneless). |
@@ -97,10 +97,10 @@ The AI agent automates research, implementation, and verification when developin
 
 1. **API & Syntax Research**: The AI agent uses `search_documentation` to look up Angular APIs or syntax rules (e.g., `@defer` block options).
 2. **Load Coding Standards**: The AI agent calls `get_best_practices` with the workspace path to load Angular version-aligned coding rules.
-3. **Start Local Dev Server**: The AI agent starts a background server by calling `devserver.start`.
-4. **Monitor Build**: The AI agent uses `devserver.wait_for_build` to watch build logs and ensure compilation succeeds as it edits the code.
+3. **Start Local Dev Server**: The AI agent starts a background server by calling `devserver_start`.
+4. **Monitor Build**: The AI agent uses `devserver_wait_for_build` to watch build logs and ensure compilation succeeds as it edits the code.
 5. **Write and Execute Tests**: The AI agent identifies the project's test framework (e.g., Jasmine, Jest, Vitest) via `list_projects`, writes the corresponding test file, and runs the tests using `run_target` with `"test"`.
-6. **Stop Dev Server**: When finished, the AI agent stops the active dev server by calling `devserver.stop`.
+6. **Stop Dev Server**: When finished, the AI agent stops the active dev server by calling `devserver_stop`.
 
 ### 3. Developer Onboarding and Learning
 
diff --git a/adev-ja/src/content/ecosystem/rxjs-interop/output-interop.md b/adev-ja/src/content/ecosystem/rxjs-interop/output-interop.md
index d2fe7e59e..75f6165f7 100644
--- a/adev-ja/src/content/ecosystem/rxjs-interop/output-interop.md
+++ b/adev-ja/src/content/ecosystem/rxjs-interop/output-interop.md
@@ -4,13 +4,14 @@ TIP: This guide assumes you're familiar with [component and directive outputs](g
 
 The `@angular/core/rxjs-interop` package offers two APIs related to component and directive outputs.
 
-## Creating an output based on an RxJs Observable
+## Creating an output based on an RxJS Observable
 
 The `outputFromObservable` lets you create a component or directive output that emits based on an RxJS observable:
 
 ```ts {highlight:[9]}
 import {Directive} from '@angular/core';
 import {outputFromObservable} from '@angular/core/rxjs-interop';
+import {Observable} from 'rxjs';
 
 @Directive(/* ... */)
 class Draggable {
@@ -33,6 +34,7 @@ The `outputToObservable` function lets you create an RxJS observable from a comp
 
 ```ts {highlight:[11]}
 import {outputToObservable} from '@angular/core/rxjs-interop';
+import {Component, output} from '@angular/core';
 
 @Component(/*...*/)
 class CustomSlider {
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 db1ff3699..f7f96e338 100644
--- a/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md
+++ b/adev-ja/src/content/ecosystem/rxjs-interop/signals-interop.md
@@ -2,7 +2,7 @@
 
 The `@angular/core/rxjs-interop` package offers APIs that help you integrate RxJS and Angular signals.
 
-## Create a signal from an RxJs Observable with `toSignal`
+## Create a signal from an RxJS Observable with `toSignal`
 
 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.
 
@@ -91,8 +91,9 @@ If an Observable used in `toSignal` completes, the signal continues to return th
 Use the `toObservable` utility to create an `Observable` which tracks the value of a signal. The signal's value is monitored with an `effect` which emits the value to the Observable when it changes.
 
 ```ts
-import {Component, signal} from '@angular/core';
+import {Component, signal, Signal, inject} from '@angular/core';
 import {toObservable} from '@angular/core/rxjs-interop';
+import {switchMap} from 'rxjs';
 
 @Component(/* ... */)
 export class SearchResults {
@@ -131,7 +132,7 @@ Here, only the last value (3) will be logged.
 Angular's [`resource` function](/guide/signals/resource) gives you a way to incorporate async data into your application's signal-based code. Building on top of this pattern, `rxResource` lets you define a resource where the source of your data is defined in terms of an RxJS `Observable`. Instead of accepting a `loader` function, `rxResource` accepts a `stream` function that returns an RxJS `Observable`.
 
 ```typescript
-import {Component, inject} from '@angular/core';
+import {Component, inject, input} from '@angular/core';
 import {rxResource} from '@angular/core/rxjs-interop';
 
 @Component(/* ... */)
diff --git a/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md b/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
index fc94b13d5..00179aa5f 100644
--- a/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
+++ b/adev-ja/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
@@ -7,6 +7,7 @@ The `takeUntilDestroyed` operator, from `@angular/core/rxjs-interop`, provides a
 ```typescript
 import {Component, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {Observable} from 'rxjs';
 import {NotificationDispatcher, CustomPopupShower} from './some-shared-project-code';
 
 @Component(/* ... */)
diff --git a/adev-ja/src/content/ecosystem/service-workers/getting-started.md b/adev-ja/src/content/ecosystem/service-workers/getting-started.md
index 26c2bfc8d..bcd7908ca 100644
--- a/adev-ja/src/content/ecosystem/service-workers/getting-started.md
+++ b/adev-ja/src/content/ecosystem/service-workers/getting-started.md
@@ -285,6 +285,8 @@ export const delayedConfig: ApplicationConfig = {
 You can also provide an Observable factory function for custom registration timing:
 
 ```ts
+import {ApplicationConfig, isDevMode} from '@angular/core';
+import {provideServiceWorker} from '@angular/service-worker';
 import {timer} from 'rxjs';
 
 export const customConfig: ApplicationConfig = {
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
index 581f3b726..8407acc00 100644
--- a/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md
+++ b/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md
@@ -148,7 +148,7 @@ export class UserClient {
 Sometimes you want separate instances per component for component-specific state.
 
 ```angular-ts {header: 'Intentional: Component-scoped state'}
-import {Injectable, signal} from '@angular/core';
+import {Injectable, signal, Component, inject} from '@angular/core';
 
 @Injectable() // No providedIn - must be provided explicitly
 export class FormStateStore {
@@ -390,6 +390,7 @@ export const APP_CONFIG = new InjectionToken<AppConfig>('app config');
 ```
 
 ```ts {header: 'app.config.ts'}
+import {bootstrapApplication} from '@angular/platform-browser';
 import {APP_CONFIG} from './config.token';
 
 export const appConfig: AppConfig = {
@@ -403,7 +404,7 @@ bootstrapApplication(App, {
 
 ```angular-ts {avoid, header: 'feature-view.ts'}
 // Creating new token with same description
-import {InjectionToken, inject} from '@angular/core';
+import {InjectionToken, inject, Component} from '@angular/core';
 import {AppConfig} from './config.token';
 
 const APP_CONFIG = new InjectionToken<AppConfig>('app config');
@@ -422,7 +423,7 @@ Even though both tokens have the description `'app config'`, they are different
 **Solution:** Import the same token instance.
 
 ```angular-ts {prefer, header: 'feature-view.ts'}
-import {inject} from '@angular/core';
+import {inject, Component} from '@angular/core';
 import {APP_CONFIG, AppConfig} from './config.token';
 
 @Component({
@@ -459,7 +460,8 @@ export class UserProfile {
 **Solution:** Use `InjectionToken` for interface types.
 
 ```angular-ts {prefer, header: 'Use InjectionToken for interfaces'}
-import {InjectionToken, inject} from '@angular/core';
+import {InjectionToken, inject, Component} from '@angular/core';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 interface UserConfig {
   name: string;
@@ -676,11 +678,10 @@ This section provides detailed information about specific Angular DI error codes
 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
+NG0201: No provider found for `UserClient`. Path: AuthClient -> UserClient.
 ```
 
-The dependency path shows that `App` injected `AuthClient`, which tried to inject `UserClient`, but no provider was found.
+The dependency path shows that `AuthClient` tried to inject `UserClient`, but no provider was found.
 
 #### Missing the `@Service ` or `@Injectable` decorator
 
@@ -749,7 +750,7 @@ import {UserClient} from './user-client';
 
 @Component({
   selector: 'app-profile',
-  template: '<p>User: {{user().name}}</p>',
+  template: '<p>User: {{user.name}}</p>',
 })
 export class UserProfile {
   private userService = inject(UserClient); // ERROR: No provider
@@ -765,7 +766,7 @@ import {UserClient} from './user-client';
 
 @Component({
   selector: 'app-profile',
-  template: '<p>User: {{user().name}}</p>',
+  template: '<p>User: {{user.name}}</p>',
 })
 export class UserProfile {
   private userService = inject(UserClient); // Works: providedIn: 'root'
@@ -778,16 +779,14 @@ export class UserProfile {
 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
+NG0201: No provider found for `LoggerStore`. Path: 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
+1. `DataStore` injected `ApiClient`
+2. `ApiClient` tried to inject `LoggerStore`
+3. No provider for `LoggerStore` was found
 
 Start your investigation at the end of the chain (`LoggerStore`) and verify it has proper configuration.
 
@@ -818,9 +817,10 @@ Optional injection returns `null` if no provider is found, allowing you to handl
 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`.
+NG0203: The `UserClient` token injection failed. `inject()` function 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
@@ -835,7 +835,7 @@ Angular allows `inject()` in these locations:
 
    @Component({
      selector: 'app-profile',
-     template: '<p>User: {{user().name}}</p>',
+     template: '<p>User: {{user.name}}</p>',
    })
    export class UserProfile {
      private userService = inject(UserClient); // Valid
@@ -851,7 +851,7 @@ Angular allows `inject()` in these locations:
 
    @Component({
      selector: 'app-profile',
-     template: '<p>User: {{user().name}}</p>',
+     template: '<p>User: {{user.name}}</p>',
    })
    export class UserProfile {
      private userService: UserClient;
@@ -963,8 +963,7 @@ setTimeout(() => {
 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
+NG0200: Circular dependency detected for `AuthClient`. Path: AuthClient -> UserClient -> AuthClient.
 ```
 
 The dependency path shows the cycle: `AuthClient` depends on `UserClient`, which depends back on `AuthClient`.
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 5784af27f..3d620f02b 100644
--- a/adev-ja/src/content/guide/di/defining-dependency-providers.md
+++ b/adev-ja/src/content/guide/di/defining-dependency-providers.md
@@ -39,7 +39,7 @@ NOTE: The string parameter (e.g., `'api.url'`) is a description purely for debug
 An `InjectionToken` that has a `factory` results in `providedIn: 'root'` by default (but can be overridden via the `providedIn` prop).
 
 ```ts {header: "/app/config.token.ts"}
-import {InjectionToken} from '@angular/core';
+import {InjectionToken, Component, inject} from '@angular/core';
 
 export interface AppConfig {
   apiUrl: string;
@@ -548,7 +548,7 @@ class ApiClient {
 }
 
 // Factory function that configures based on user tier
-import {inject} from '@angular/core';
+import {inject, Component} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 const apiClientFactory = () => {
   const http = inject(HttpClient);
@@ -786,6 +786,7 @@ For more complex scenarios, you can combine multiple configuration approaches:
 
 ```ts {header: "/libs/http-client/src/provider.ts"}
 import {Provider, InjectionToken, inject} from '@angular/core';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 // Feature flags for optional functionality
 export enum HttpFeatures {
diff --git a/adev-ja/src/content/guide/forms/signals/async-operations.md b/adev-ja/src/content/guide/forms/signals/async-operations.md
index 9c318793a..11c25911b 100644
--- a/adev-ja/src/content/guide/forms/signals/async-operations.md
+++ b/adev-ja/src/content/guide/forms/signals/async-operations.md
@@ -215,6 +215,7 @@ Customize the HTTP request by returning an `HttpResourceRequest` object from the
 
 ```ts
 import {HttpHeaders} from '@angular/common/http';
+import {validateHttp} from '@angular/forms/signals';
 
 validateHttp(schemaPath.field, {
   request: ({value}) => ({
@@ -445,7 +446,7 @@ With `'blur'`, the model keeps its previous value while the user is typing. Sync
 For timing logic that a duration or `'blur'` can't express, pass a `Debouncer` function. The function receives the field context and an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal), and returns a `Promise<void>` that resolves when the model should update:
 
 ```ts
-import {debounce, type Debouncer} from '@angular/forms/signals';
+import {debounce, type Debouncer, form} from '@angular/forms/signals';
 
 const shorterWhenLonger: Debouncer<string> = ({value}, abortSignal) => {
   // Shorter queries get a longer delay since the user is likely still typing.
@@ -635,6 +636,7 @@ Async validation only runs after synchronous validation passes. This prevents un
 
 ```ts
 import {form, required, minLength, validateHttp} from '@angular/forms/signals';
+import {model} from '@angular/core';
 
 form(model, (schemaPath) => {
   // 1. These synchronous validation rules run first
@@ -673,6 +675,7 @@ Always validate format before making async requests. This catches errors instant
 
 ```ts
 import {form, required, email, validateHttp} from '@angular/forms/signals';
+import {model} from '@angular/core';
 
 form(model, (schemaPath) => {
   // Validate format first
diff --git a/adev-ja/src/content/guide/forms/signals/dynamic-forms-with-json.md b/adev-ja/src/content/guide/forms/signals/dynamic-forms-with-json.md
index 5076120b6..0f3f71e8f 100644
--- a/adev-ja/src/content/guide/forms/signals/dynamic-forms-with-json.md
+++ b/adev-ja/src/content/guide/forms/signals/dynamic-forms-with-json.md
@@ -61,7 +61,7 @@ In addition, numeric fields initialize to `null` rather than `0` so an empty fie
 The schema is also derived from the config. You can loop through each entry and apply the validators that match its kind:
 
 ```ts
-import {required, min, max, SchemaFn} from '@angular/forms/signals';
+import {required, min, max, SchemaFn, SchemaPath} from '@angular/forms/signals';
 
 function buildSchema(configs: FieldConfig[]): SchemaFn<Record<string, string | number | null>> {
   return (path) => {
@@ -73,8 +73,9 @@ function buildSchema(configs: FieldConfig[]): SchemaFn<Record<string, string | n
       }
 
       if (config.kind === 'number') {
-        if (config.min !== undefined) min(fieldPath, config.min);
-        if (config.max !== undefined) max(fieldPath, config.max);
+        const numberPath = fieldPath as unknown as SchemaPath<number | null>;
+        if (config.min !== undefined) min(numberPath, config.min);
+        if (config.max !== undefined) max(numberPath, config.max);
       }
     }
   };
@@ -106,7 +107,7 @@ type FieldConfig =
 Update `buildSchema()` to translate `when` into an [`applyWhen()`](api/forms/signals/applyWhen) call. Shared rule application logic moves into a small closure so the conditional and unconditional branches both call the same function:
 
 ```ts
-import {applyWhen, required, min, max, SchemaFn} from '@angular/forms/signals';
+import {applyWhen, required, min, max, SchemaFn, SchemaPath} from '@angular/forms/signals';
 
 function buildSchema(configs: FieldConfig[]): SchemaFn<Record<string, string | number | null>> {
   return (rootPath) => {
@@ -115,8 +116,9 @@ function buildSchema(configs: FieldConfig[]): SchemaFn<Record<string, string | n
         const fieldPath = path[config.name];
         if (config.required) required(fieldPath);
         if (config.kind === 'number') {
-          if (config.min !== undefined) min(fieldPath, config.min);
-          if (config.max !== undefined) max(fieldPath, config.max);
+          const numberPath = fieldPath as unknown as SchemaPath<number | null>;
+          if (config.min !== undefined) min(numberPath, config.min);
+          if (config.max !== undefined) max(numberPath, config.max);
         }
       };
 
@@ -291,7 +293,7 @@ In the template, render an array case like this:
 }
 ```
 
-The `addItem()` method extends the model; the form re-derives the array's fields automatically. New items start with fresh validation state. `removeItem()` filters the model; the dropped item's field state goes with it.
+The `addItem()` method extends the model; the form re-derives the array's fields automatically. New items start with fresh validation state. The `removeItem()` method filters the model. Because arrays of primitives are [tracked by position](#tracking-item-identity), field state is tied to the index rather than the value: when an item is removed, subsequent values shift into earlier positions and inherit their existing field state, while the trailing field is dropped.
 
 ### Tracking item identity
 
diff --git a/adev-ja/src/content/guide/forms/signals/field-metadata.md b/adev-ja/src/content/guide/forms/signals/field-metadata.md
index fee677e44..77fdc8259 100644
--- a/adev-ja/src/content/guide/forms/signals/field-metadata.md
+++ b/adev-ja/src/content/guide/forms/signals/field-metadata.md
@@ -180,7 +180,8 @@ After both rules run, `state.metadata(HELP)!()` returns only the second message.
 To combine contributions, pass a reducer to `createMetadataKey()`. A reducer describes how to fold individual values into an accumulated result:
 
 ```ts
-import {createMetadataKey, MetadataReducer} from '@angular/forms/signals';
+import {createMetadataKey, MetadataReducer, form, metadata} from '@angular/forms/signals';
+import {model} from '@angular/core';
 
 const HELP = createMetadataKey<string, string[]>(MetadataReducer.list());
 
diff --git a/adev-ja/src/content/guide/forms/signals/form-logic.md b/adev-ja/src/content/guide/forms/signals/form-logic.md
index 11e6c5d38..f7f15cfa2 100644
--- a/adev-ja/src/content/guide/forms/signals/form-logic.md
+++ b/adev-ja/src/content/guide/forms/signals/form-logic.md
@@ -695,7 +695,7 @@ The conditional rules only run when the condition is true. This is useful for co
 Extract common rule configurations into reusable functions:
 
 ```ts
-import {SchemaPath, debounce, metadata, maxLength} from '@angular/forms/signals';
+import {SchemaPath, debounce, metadata, maxLength, form} from '@angular/forms/signals';
 import {PLACEHOLDER} from './metadata-keys';
 
 function emailFieldConfig(path: SchemaPath<string>) {
diff --git a/adev-ja/src/content/guide/forms/signals/form-submission.md b/adev-ja/src/content/guide/forms/signals/form-submission.md
index 633374844..72012936a 100644
--- a/adev-ja/src/content/guide/forms/signals/form-submission.md
+++ b/adev-ja/src/content/guide/forms/signals/form-submission.md
@@ -13,7 +13,7 @@ The `submit()` function runs through a specific sequence:
 1. **Run the action** — The `action` function executes with the form's current value. While it runs, `submitting()` returns `true`.
 1. **Handle the result** — If the action returns errors, they are routed to their target fields. If it returns nothing, the submission is treated as successful.
 
-The `submit()` function returns a `Promise<boolean>` that resolves to `true` when the action completes without errors, and `false` when validation fails or the action returns errors.
+The `submit()` function returns a `Promise<boolean>` that resolves to `true` when the action completes without errors, and `false` when validation fails, the action returns errors, or a submission is already in progress. If the action throws, the promise rejects with that error.
 
 ## Setting up form submission with `FormRoot`
 
@@ -23,7 +23,7 @@ The `FormRoot` directive handles three things automatically when bound to a `<fo
 
 1. **Sets [`novalidate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form#novalidate)** — Disables the browser's built-in validation so Signal Forms manages validation instead
 1. **Prevents default** — Stops the browser from navigating on form submission
-1. **Calls `submit()`** — Triggers the submission flow when the user submits the form
+1. **Calls `submit()`** — Triggers the submission flow when the user submits the form, if the form was created with a `submission` option
 
 NOTE: The `FormRoot` directive sets the `novalidate` attribute on the `form` element automatically. You do not need to add it manually when using `FormRoot`.
 
@@ -271,7 +271,7 @@ export class Contact {
 
 ## Handling side effects
 
-The `submit()` function returns a `Promise<boolean>` — `true` when the action completes without errors, `false` when validation fails or the action returns errors. Use this to trigger side effects like navigation or notifications.
+The `submit()` function returns a `Promise<boolean>` — `true` when the action completes without errors, `false` when validation fails, the action returns errors, or a submission is already in progress. If the action throws, the promise rejects. Use this to trigger side effects like navigation or notifications.
 
 ```ts
 async onSave() {
diff --git a/adev-ja/src/content/guide/forms/signals/migration.md b/adev-ja/src/content/guide/forms/signals/migration.md
index 1b21e489a..f9e059b7e 100644
--- a/adev-ja/src/content/guide/forms/signals/migration.md
+++ b/adev-ja/src/content/guide/forms/signals/migration.md
@@ -68,7 +68,7 @@ In the template, use standard reactive syntax by binding the underlying control:
     @if (f.password().touched() && f.password().invalid()) {
       <div class="error-list">
         @for (error of f.password().errors(); track error) {
-          <p>{{ error.message || error.kind }}</p>
+          <p>{{ errorMessage(error) }}</p>
         }
       </div>
     }
@@ -76,6 +76,20 @@ In the template, use standard reactive syntax by binding the underlying control:
 </form>
 ```
 
+Errors from the existing validators are `CompatValidationError`s. They don't set `message`; the error object returned by the validator is available as `context` instead:
+
+```typescript
+import {ValidationError} from '@angular/forms/signals';
+import {CompatValidationError} from '@angular/forms/signals/compat';
+
+errorMessage(error: ValidationError) {
+  if (error instanceof CompatValidationError) {
+    return (error.context as {message?: string} | null)?.message ?? error.kind;
+  }
+  return error.message ?? error.kind;
+}
+```
+
 <docs-code-multifile preview path="adev/src/content/examples/signal-forms/src/compat-form-control-integration/app/app.ts">
   <docs-code header="app.ts" path="adev/src/content/examples/signal-forms/src/compat-form-control-integration/app/app.ts"/>
   <docs-code header="app.html" path="adev/src/content/examples/signal-forms/src/compat-form-control-integration/app/app.html"/>
@@ -90,6 +104,7 @@ You can also wrap an entire `FormGroup`. This is common when a reusable sub-sect
 import {signal} from '@angular/core';
 import {FormGroup, FormControl, Validators} from '@angular/forms';
 import {compatForm} from '@angular/forms/signals/compat';
+import {required} from '@angular/forms/signals';
 
 // 1. An existing address group with its own validation logic
 const addressGroup = new FormGroup({
@@ -316,6 +331,7 @@ Attempting to call disable/enable would throw an error.
 
 ```typescript {avoid}
 import {signal, effect} from '@angular/core';
+import {SignalFormControl} from '@angular/forms/signals/compat';
 
 export class UserProfile {
   readonly emailControl = new SignalFormControl('');
@@ -421,6 +437,7 @@ If you want to preserve this behavior, you can provide the `NG_STATUS_CLASSES` p
 ```typescript
 import {provideSignalFormsConfig} from '@angular/forms/signals';
 import {NG_STATUS_CLASSES} from '@angular/forms/signals/compat';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [
@@ -435,6 +452,7 @@ You can also provide your own custom configuration to apply whatever classes you
 
 ```typescript
 import {provideSignalFormsConfig} from '@angular/forms/signals';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [
diff --git a/adev-ja/src/content/guide/forms/signals/schemas.md b/adev-ja/src/content/guide/forms/signals/schemas.md
index 1a21ffee5..121258441 100644
--- a/adev-ja/src/content/guide/forms/signals/schemas.md
+++ b/adev-ja/src/content/guide/forms/signals/schemas.md
@@ -19,7 +19,7 @@ contactForm = form(this.contactModel, (schemaPath) => {
 graph TD
     A["form(model, schemaFn)"] --> B["Schema function runs ONCE"]
     B --> C["required(path)"]
-    B --> D["disabled(path, logicFn)"]
+    B --> D["disabled(path, {when: logicFn})"]
     B --> E["validate(path, logicFn)"]
     B --> F["apply(path, schema)"]
     C --> G["Reactive: recomputes on signal change"]
@@ -55,7 +55,7 @@ TIP: If rules only appear in one place, an inline schema function works just as
 You can apply a reusable schema to a specific path in a form by using the `apply()` function. When you call `apply()`, the schema receives a scoped path that only sees the fields within that sub-path:
 
 ```ts
-import {apply} from '@angular/forms/signals';
+import {apply, form} from '@angular/forms/signals';
 
 profileForm = form(this.profileModel, (schemaPath) => {
   apply(schemaPath.name, nameSchema);
diff --git a/adev-ja/src/content/guide/i18n/deploy.md b/adev-ja/src/content/guide/i18n/deploy.md
index 26fe64523..440df8883 100644
--- a/adev-ja/src/content/guide/i18n/deploy.md
+++ b/adev-ja/src/content/guide/i18n/deploy.md
@@ -5,7 +5,8 @@ For example, your French version is located in the `myapp/fr` directory and the
 
 The HTML `base` tag with the `href` attribute specifies the base URI, or URL, for relative links.
 If you set the `"localize"` option in [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to `true` or to an array of locale IDs, the CLI adjusts the base `href` for each version of the application.
-To adjust the base `href` for each version of the application, the CLI adds the locale to the configured `"subPath"`.
+To adjust the base `href` for each version of the application, the CLI uses the configured `"subPath"` as the URL segment for the locale.
+If you don't set `"subPath"`, it defaults to the locale ID.
 Specify the `"subPath"` for each locale in your [`angular.json`][GuideWorkspaceConfig] workspace build configuration file.
 The following example displays `"subPath"` set to an empty string.
 
diff --git a/adev-ja/src/content/guide/i18n/merge.md b/adev-ja/src/content/guide/i18n/merge.md
index 2a819e5ce..b592eb1cd 100644
--- a/adev-ja/src/content/guide/i18n/merge.md
+++ b/adev-ja/src/content/guide/i18n/merge.md
@@ -57,7 +57,7 @@ HELPFUL: Ahead-of-time (AOT) compilation is required to localize component templ
 If you changed this setting, set `"aot"` to `true` in order to use AOT.
 
 HELPFUL: Due to the deployment complexities of i18n and the need to minimize rebuild time, the development server only supports localizing a single locale at a time.
-If you set the `"localize"` option to `true`, define more than one locale, and use `ng serve`; then an error occurs.
+If you set the `"localize"` option to `true` or to an array of more than one locale, and use `ng serve`, the development server logs a warning and disables localization.
 If you want to develop against a specific locale, set the `"localize"` option to a specific locale.
 For example, for French \(`fr`\), specify `"localize": ["fr"]`.
 
diff --git a/adev-ja/src/content/guide/i18n/overview.md b/adev-ja/src/content/guide/i18n/overview.md
index 5b2a7adc4..56911ef21 100644
--- a/adev-ja/src/content/guide/i18n/overview.md
+++ b/adev-ja/src/content/guide/i18n/overview.md
@@ -1,4 +1,5 @@
-# Angular Internationalization (i18n)
+<docs-decorative-header title="Angular Internationalization (i18n)" imgSrc="adev/src/assets/images/i18n.svg"> <!-- markdownlint-disable-line -->
+</docs-decorative-header>
 
 _Internationalization_, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world.
 _Localization_ is the process of building versions of your project for different locales.
diff --git a/adev-ja/src/content/guide/ngmodules/overview.md b/adev-ja/src/content/guide/ngmodules/overview.md
index a66b96124..0f849f716 100644
--- a/adev-ja/src/content/guide/ngmodules/overview.md
+++ b/adev-ja/src/content/guide/ngmodules/overview.md
@@ -177,6 +177,7 @@ You can use the [`bootstrapModule`](/api/core/PlatformRef#bootstrapModule) metho
 
 ```typescript
 import {platformBrowser} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
 
 @NgModule({
   bootstrap: [MyApplication],
diff --git a/adev-ja/src/content/guide/signals/debounced.md b/adev-ja/src/content/guide/signals/debounced.md
index 0d424d964..9766071b2 100644
--- a/adev-ja/src/content/guide/signals/debounced.md
+++ b/adev-ja/src/content/guide/signals/debounced.md
@@ -5,7 +5,7 @@ IMPORTANT: `debounced` is [experimental](reference/releases#experimental). It's
 Use `debounced` to delay reacting to a signal's value until it stops changing. It returns a `Resource` whose value reflects the debounced value of the source signal.
 
 ```angular-ts
-import {debounced, resource, signal} from '@angular/core';
+import {Component, debounced, resource, signal} from '@angular/core';
 
 @Component({
   template: `
diff --git a/adev-ja/src/content/guide/testing/services.md b/adev-ja/src/content/guide/testing/services.md
index d05bd0258..7af23d220 100644
--- a/adev-ja/src/content/guide/testing/services.md
+++ b/adev-ja/src/content/guide/testing/services.md
@@ -131,7 +131,7 @@ A stub controls what a dependency returns, but sometimes you also need to verify
 
 ```ts { header: 'order-total.spec.ts' }
 import {TestBed} from '@angular/core/testing';
-import {beforeEach, describe, expect, it, vi, type Mocked} from 'vitest';
+import {afterEach, beforeEach, describe, expect, it, vi, type Mocked} from 'vitest';
 import {OrderTotal} from './order-total';
 import {TaxCalculator} from './tax-calculator';
 
diff --git a/adev-ja/src/content/reference/errors/NG01055.md b/adev-ja/src/content/reference/errors/NG01055.md
new file mode 100644
index 000000000..c24c47cb3
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG01055.md
@@ -0,0 +1,39 @@
+# Missing control for `formControlName`
+
+A `formControlName` in the template points at a control that the `FormGroup` does not have. The directive looks the control up by its path and finds nothing.
+
+This can happen when the template and the form group are built from the same data but use different filters. One item is rendered in the template but was never given a control in the form group, so its `formControlName` has nothing to bind to.
+
+```angular-ts
+@Component({
+  template: `
+    <form [formGroup]="form">
+      <ng-container formGroupName="options">
+        @for (id of visibleIds; track id) {
+          <input [formControlName]="id" />
+        }
+      </ng-container>
+    </form>
+  `,
+})
+class App {
+  // The template renders an input for both ids...
+  visibleIds = [1, 2];
+  // ...but the form group only has a control for id 1.
+  form = new FormGroup({
+    options: new FormGroup({
+      1: new FormControl(''),
+    }),
+  });
+}
+```
+
+## Debugging the error
+
+The error message lists the controls that do exist at that level, for example:
+
+```
+Cannot find control with path: 'options -> 2'. Controls that do exist at this level: 1.
+```
+
+Compare it with the names your template binds to. Then either add the missing control to the `FormGroup`, or stop rendering the `formControlName` for the item that has no control.
diff --git a/adev-ja/src/content/reference/errors/NG01354.md b/adev-ja/src/content/reference/errors/NG01354.md
index d2e12681a..927da81bc 100644
--- a/adev-ja/src/content/reference/errors/NG01354.md
+++ b/adev-ja/src/content/reference/errors/NG01354.md
@@ -22,6 +22,7 @@ Use the same class that the warning names — `NgForm` for template-driven forms
 ```angular-ts
 // Parent uses a template-driven form: <form> ... <app-child> </form>
 import {ControlContainer, NgForm} from '@angular/forms';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-child',
@@ -36,6 +37,7 @@ export class Child {
 ```angular-ts
 // Parent uses a reactive form: <div [formGroup]="myGroup"> ... <app-child> </div>
 import {ControlContainer, FormGroupDirective} from '@angular/forms';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-child',
diff --git a/adev-ja/src/content/reference/errors/NG02825.md b/adev-ja/src/content/reference/errors/NG02825.md
index 3c9f7a754..55e6b82bd 100644
--- a/adev-ja/src/content/reference/errors/NG02825.md
+++ b/adev-ja/src/content/reference/errors/NG02825.md
@@ -8,6 +8,7 @@ Set `maxResponseBodySize` in the `provideServerRendering` options to increase th
 
 ```ts
 import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {ApplicationConfig} from '@angular/core';
 import {serverRoutes} from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
diff --git a/adev-ja/src/content/reference/errors/NG05101.md b/adev-ja/src/content/reference/errors/NG05101.md
index 1459c4ecb..8dc3c17a8 100644
--- a/adev-ja/src/content/reference/errors/NG05101.md
+++ b/adev-ja/src/content/reference/errors/NG05101.md
@@ -4,15 +4,7 @@ This error occurs when Angular tries to set up a listener for an event but none
 
 ## Debugging the error
 
-The error message includes the unrecognized event name, which is usually enough to spot the problem. The most common cause is a typo in the event binding:
-
-```html
-<!-- 'keyup.ente' is not recognized -->
-<input (keyup.ente)="onEnter()" />
-
-<!-- Correct -->
-<input (keyup.enter)="onEnter()" />
-```
+The error message includes the unrecognized event name. It occurs only when no registered plugin supports the event, for example when an `EventManager` is created with a custom plugin list that does not include `DomEventsPlugin`, as in unit tests or custom setups.
 
 If the event name is intentional and belongs to a third-party plugin (for example, a Hammer.js gesture event), make sure the plugin is provided via the `EVENT_MANAGER_PLUGINS` token:
 
diff --git a/adev-ja/src/content/reference/errors/NG05201.md b/adev-ja/src/content/reference/errors/NG05201.md
index 6c81b9292..a95821db7 100644
--- a/adev-ja/src/content/reference/errors/NG05201.md
+++ b/adev-ja/src/content/reference/errors/NG05201.md
@@ -1,43 +1,35 @@
-# Unsafe value used in a resource URL context
+# Unsafe resource URL passed to DomSanitizer
 
-Angular throws this error when you bind a value to an attribute that loads an external resource — like `<iframe src>`, or `<link href>` — and that value hasn't been explicitly marked as trusted.
+Angular throws this error, with the message `unsafe value used in a resource URL context`, when `DomSanitizer.sanitize()` is called with `SecurityContext.RESOURCE_URL` and a value that hasn't been explicitly marked as trusted.
 
-Resource URLs are treated differently from regular URLs. Angular can sanitize a plain URL (stripping `javascript:` schemes and so on), but it can't make an arbitrary resource URL safe because these attributes cause the browser to fetch and execute external content. So Angular rejects untrusted values rather than trying to sanitize them.
+Resource URLs are treated differently from regular URLs. Angular can sanitize a plain URL, but it can't make an arbitrary resource URL safe because resource URL attributes, like `<iframe src>` or `<link href>`, cause the browser to fetch and execute external content. So `sanitize()` rejects untrusted values rather than trying to sanitize them.
 
-The attributes that trigger this check are:
-
-| Element    | Attribute(s)       |
-| ---------- | ------------------ |
-| `<base>`   | `href`             |
-| `<embed>`  | `src`              |
-| `<frame>`  | `src`              |
-| `<iframe>` | `src`              |
-| `<link>`   | `href`             |
-| `<object>` | `codebase`, `data` |
+Binding an untrusted value to one of these attributes in a template or host binding throws [NG0904](errors/NG0904) instead.
 
 ## Debugging the error
 
-This error can also be thrown when calling `DomSanitizer.sanitize()` directly with `SecurityContext.RESOURCE_URL` and a plain string:
-
-```typescript
-inject(DomSanitizer).sanitize(SecurityContext.RESOURCE_URL, 'https://example.com'); // throws NG05201
-```
-
-`sanitize()` cannot make an arbitrary string safe in a resource URL context. Either use `bypassSecurityTrustResourceUrl` if the value is fully under your control, or bind the value to a regular URL attribute that Angular can sanitize.
-
-Look for a binding to one of the attributes above or a direct `sanitize()` call:
+Look for a `sanitize()` call that uses `SecurityContext.RESOURCE_URL`. The error is thrown for any plain string, even a static-looking URL:
 
-```html
-<iframe [src]="userUrl"></iframe>
+```angular-ts
+@Component({
+  selector: 'app-root',
+  template: `<iframe [src]="url"></iframe>`,
+})
+export class App {
+  private readonly sanitizer = inject(DomSanitizer);
+  url = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, 'https://example.com/embed'); // throws NG05201
+}
 ```
 
-If the URL comes from a trusted, controlled source, mark it safe using `DomSanitizer.bypassSecurityTrustResourceUrl`:
+If the URL comes from a trusted, controlled source, mark it safe using `DomSanitizer.bypassSecurityTrustResourceUrl` and bind the result directly:
 
-```typescript
+```angular-ts
 import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {Component, inject} from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
+  template: `<iframe [src]="safeUrl"></iframe>`,
 })
 export class App {
   safeUrl: SafeResourceUrl = inject(DomSanitizer).bypassSecurityTrustResourceUrl(
@@ -46,8 +38,6 @@ export class App {
 }
 ```
 
-```html
-<iframe [src]="safeUrl"></iframe>
-```
+CRITICAL: `bypassSecurityTrustResourceUrl` is an escape hatch, not a sanitizer. Never pass user-supplied URLs through it — that would allow an attacker to load arbitrary content, including malicious scripts. Only use it when the value is fully under your control.
 
-`bypassSecurityTrustResourceUrl` is an escape hatch, not a sanitizer. Never pass user-supplied URLs through it — that would allow an attacker to load arbitrary content, including malicious scripts. Only use it when the value is fully under your control.
+For more information, see the [Security guide](best-practices/security#trusting-safe-values).
diff --git a/adev-ja/src/content/reference/errors/NG0904.md b/adev-ja/src/content/reference/errors/NG0904.md
new file mode 100644
index 000000000..7b92c4807
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0904.md
@@ -0,0 +1,66 @@
+# Unsafe value used in a resource URL context
+
+Angular throws this error, with the message `unsafe value used in a resource URL context`, when a template or host binding sets an attribute that loads an external resource — like `<iframe src>` or `<link href>` — to a value that hasn't been explicitly marked as trusted.
+
+Resource URLs are treated differently from regular URLs. Angular can sanitize a plain URL, but it can't make an arbitrary resource URL safe because these attributes cause the browser to fetch and execute external content. So Angular rejects untrusted values rather than trying to sanitize them.
+
+The attributes that trigger this check are:
+
+| Element    | Attribute(s)       |
+| ---------- | ------------------ |
+| `<base>`   | `href`             |
+| `<embed>`  | `src`              |
+| `<frame>`  | `src`              |
+| `<iframe>` | `src`              |
+| `<link>`   | `href`             |
+| `<object>` | `codebase`, `data` |
+
+## Debugging the error
+
+The error is thrown when any plain string is bound to one of the attributes above, even a static-looking URL:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  template: `<iframe [src]="url"></iframe>`,
+})
+export class App {
+  url = 'https://example.com/embed';
+}
+```
+
+Passing the value through `DomSanitizer.sanitize()` with `SecurityContext.URL` does not help. `sanitize()` returns a plain string, and a plain string is never accepted in a resource URL context:
+
+```angular-ts
+@Component({
+  selector: 'app-root',
+  template: `<iframe [src]="sanitized"></iframe>`,
+})
+export class App {
+  private readonly sanitizer = inject(DomSanitizer);
+  sanitized = this.sanitizer.sanitize(SecurityContext.URL, 'https://example.com/embed'); // still throws NG0904
+}
+```
+
+Calling `sanitize()` with `SecurityContext.RESOURCE_URL` instead throws too, but with [NG05201](errors/NG05201), because `sanitize()` cannot make an arbitrary string safe in a resource URL context.
+
+If the URL comes from a trusted, controlled source, mark it safe using `DomSanitizer.bypassSecurityTrustResourceUrl`:
+
+```angular-ts
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+import {Component, inject} from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `<iframe [src]="safeUrl"></iframe>`,
+})
+export class App {
+  safeUrl: SafeResourceUrl = inject(DomSanitizer).bypassSecurityTrustResourceUrl(
+    'https://example.com/embed',
+  );
+}
+```
+
+CRITICAL: `bypassSecurityTrustResourceUrl` is an escape hatch, not a sanitizer. Never pass user-supplied URLs through it — that would allow an attacker to load arbitrary content, including malicious scripts. Only use it when the value is fully under your control.
+
+For more information, see the [Security guide](best-practices/security#trusting-safe-values).
diff --git a/adev-ja/src/content/reference/errors/NG0991.md b/adev-ja/src/content/reference/errors/NG0991.md
index 92480b7f3..dee88277f 100644
--- a/adev-ja/src/content/reference/errors/NG0991.md
+++ b/adev-ja/src/content/reference/errors/NG0991.md
@@ -31,6 +31,7 @@ Fix it the same way as you would in an interceptor pipeline generally: let the e
 The most common way to accidentally cause this is catching an error and swallowing it with `EMPTY`:
 
 ```typescript
+import {rxResource} from '@angular/core/rxjs-interop';
 import {EMPTY, catchError} from 'rxjs';
 
 const userResource = rxResource({
diff --git a/adev-ja/src/content/reference/extended-diagnostics/NG8103.md b/adev-ja/src/content/reference/extended-diagnostics/NG8103.md
index 831190915..902cdd7d5 100644
--- a/adev-ja/src/content/reference/extended-diagnostics/NG8103.md
+++ b/adev-ja/src/content/reference/extended-diagnostics/NG8103.md
@@ -1,8 +1,8 @@
 # Missing control flow directive
 
 This diagnostics ensures that a standalone component which uses known control flow directives
-(such as `*ngIf`, `*ngFor`, or `*ngSwitch`) in a template, also imports those directives either
-individually or by importing the `CommonModule`.
+(such as `*ngIf`, `*ngFor`, `*ngSwitchCase`, or `*ngSwitchDefault`) in a template, also imports
+those directives either individually or by importing the `CommonModule`.
 
 ```angular-ts
 import {Component} from '@angular/core';
diff --git a/adev-ja/src/content/reference/migrations/inject-function.md b/adev-ja/src/content/reference/migrations/inject-function.md
index 04bebe6bf..4f904a074 100644
--- a/adev-ja/src/content/reference/migrations/inject-function.md
+++ b/adev-ja/src/content/reference/migrations/inject-function.md
@@ -17,7 +17,7 @@ import {Component, Inject, Optional} from '@angular/core';
 import {MyService} from './service';
 import {DI_TOKEN} from './token';
 
-@Component()
+@Component({template: ''})
 export class MyComp {
   constructor(
     private service: MyService,
@@ -33,7 +33,7 @@ import {Component, inject} from '@angular/core';
 import {MyService} from './service';
 import {DI_TOKEN} from './token';
 
-@Component()
+@Component({template: ''})
 export class MyComp {
   private service = inject(MyService);
   readonly token = inject(DI_TOKEN, {optional: true});
@@ -70,7 +70,7 @@ additional constructor signature to keep it backwards compatible, at the expense
 import {Component} from '@angular/core';
 import {MyService} from './service';
 
-@Component()
+@Component({template: ''})
 export class MyComp {
   constructor(private service: MyService) {}
 }
@@ -82,7 +82,7 @@ export class MyComp {
 import {Component, inject} from '@angular/core';
 import {MyService} from './service';
 
-@Component()
+@Component({template: ''})
 export class MyComp {
   private service = inject(MyService);
 
@@ -102,7 +102,7 @@ fixed in `inject()` which can cause new compilation errors to show up. If you en
 the migration will produce a non-null assertion after the `inject()` call to match the old type,
 at the expense of potentially hiding type errors.
 
-**NOTE:** non-null assertions won't be added to parameters that are already typed to be nullable,
+NOTE: non-null assertions won't be added to parameters that are already typed to be nullable,
 because the code that depends on them likely already accounts for their nullability.
 
 #### Before {#non-nullable-optional-before}
@@ -111,7 +111,7 @@ because the code that depends on them likely already accounts for their nullabil
 import {Component, Inject, Optional} from '@angular/core';
 import {TOKEN_ONE, TOKEN_TWO} from './token';
 
-@Component()
+@Component({template: ''})
 export class MyComp {
   constructor(
     @Inject(TOKEN_ONE) @Optional() private tokenOne: number,
@@ -126,7 +126,7 @@ export class MyComp {
 import {Component, inject} from '@angular/core';
 import {TOKEN_ONE, TOKEN_TWO} from './token';
 
-@Component()
+@Component({template: ''})
 export class MyComp {
   // Note the `!` at the end.
   private tokenOne = inject(TOKEN_ONE, {optional: true})!;
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 16901a528..cd6f239e2 100644
--- a/adev-ja/src/content/reference/migrations/route-lazy-loading.md
+++ b/adev-ja/src/content/reference/migrations/route-lazy-loading.md
@@ -32,6 +32,8 @@ The migration will check all the components in the routes, check if they are sta
 #### Before
 
 ```typescript {header: "app.module.ts"}
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
 import {Home} from './home';
 
 @NgModule({
diff --git a/adev-ja/src/content/reference/migrations/router-testing-module-migration.md b/adev-ja/src/content/reference/migrations/router-testing-module-migration.md
index 6870b45c9..96e35e1c0 100644
--- a/adev-ja/src/content/reference/migrations/router-testing-module-migration.md
+++ b/adev-ja/src/content/reference/migrations/router-testing-module-migration.md
@@ -2,7 +2,7 @@
 
 This schematic migrates usages of `RouterTestingModule` inside tests to `RouterModule`.
 
-When a test imports `SpyLocation` from `@angular/common/testing` and uses `urlChanges` property , the schematic will also add `provideLocationMocks()` to preserve the original behavior.
+When a test imports `SpyLocation` from `@angular/common/testing` and uses the `urlChanges` property, the schematic will also add `provideLocationMocks()` to preserve the original behavior.
 
 Run the schematic with:
 
@@ -24,6 +24,7 @@ Before:
 
 ```ts
 import {RouterTestingModule} from '@angular/router/testing';
+import {TestBed} from '@angular/core/testing';
 import {SpyLocation} from '@angular/common/testing';
 
 describe('test', () => {
@@ -39,6 +40,7 @@ After:
 
 ```ts
 import {RouterModule} from '@angular/router';
+import {TestBed} from '@angular/core/testing';
 import {SpyLocation} from '@angular/common/testing';
 
 describe('test', () => {
@@ -56,6 +58,7 @@ Before:
 
 ```ts
 import {RouterTestingModule} from '@angular/router/testing';
+import {TestBed} from '@angular/core/testing';
 import {SpyLocation} from '@angular/common/testing';
 
 describe('test', () => {
@@ -78,6 +81,7 @@ After:
 
 ```ts
 import {RouterModule} from '@angular/router';
+import {TestBed} from '@angular/core/testing';
 import {SpyLocation, provideLocationMocks} from '@angular/common/testing';
 
 describe('test', () => {
diff --git a/adev-ja/src/content/reference/migrations/signal-queries.md b/adev-ja/src/content/reference/migrations/signal-queries.md
index 0081e37c0..fdad1a9e4 100644
--- a/adev-ja/src/content/reference/migrations/signal-queries.md
+++ b/adev-ja/src/content/reference/migrations/signal-queries.md
@@ -27,10 +27,10 @@ See more details in the section [below](#vscode-extension).
 **Before**
 
 ```angular-ts
-import {Component, ContentChild} from '@angular/core';
+import {Component, ContentChild, ElementRef} from '@angular/core';
 
 @Component({
-  template: `Has ref: {{ someRef ? 'Yes' : 'No' }}`,
+  template: `Has ref: {{ ref ? 'Yes' : 'No' }}`,
 })
 export class MyComponent {
   @ContentChild('someRef') ref: ElementRef | undefined = undefined;
@@ -46,10 +46,10 @@ export class MyComponent {
 **After**
 
 ```angular-ts
-import {Component, contentChild} from '@angular/core';
+import {Component, contentChild, ElementRef} from '@angular/core';
 
 @Component({
-  template: `Has ref: {{ someRef() ? 'Yes' : 'No' }}`,
+  template: `Has ref: {{ ref() ? '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 b6c816a2d..0db21adbc 100644
--- a/adev-ja/src/content/reference/migrations/standalone.md
+++ b/adev-ja/src/content/reference/migrations/standalone.md
@@ -191,7 +191,7 @@ export class App {}
 
 ```typescript {header: "./main.ts"}
 import {bootstrapApplication} from '@angular/platform-browser';
-import {App} from './app';
+import {App} from './app/app';
 
 bootstrapApplication(App).catch((e) => console.error(e));
 ```
diff --git a/adev-ja/src/content/reference/press-kit.md b/adev-ja/src/content/reference/press-kit.md
index 457cc5f86..46d4973bd 100644
--- a/adev-ja/src/content/reference/press-kit.md
+++ b/adev-ja/src/content/reference/press-kit.md
@@ -52,9 +52,9 @@ In this example, we’ve adapted the shield to create an Angular Signals logo va
 
 <docs-step title="Do’s and don’ts of using Angular's brand">
 If you are creating your own logo, we encourage differentiating your logo from ours to not cause confusion. When adapting the logo, you are free to change and adapt the colors and shape to make it your own.
-  
+
 When representing Angular with the original logo, please follow these guidelines:
-![Rhubarb the small cat](assets/images/press-kit/do_and_dont.png "Rhubarb the small cat")
+![Rhubarb the small cat](assets/images/press-kit/do_and_dont.png 'Rhubarb the small cat')
 </docs-step>
 
 </docs-workflow>
@@ -63,7 +63,7 @@ When representing Angular with the original logo, please follow these guidelines
 
 ### 2016 Angular (v3-v16)
 
-In 2023 , we announced a modernized logo with v17. We advise against using the former Angular logo to prevent confusion. You can view the old press kit on our [old docs site](https://angular.io/presskit).
+In 2023, we announced a modernized logo with v17. We advise against using the former Angular logo to prevent confusion. You can view the old press kit on our [old docs site](https://angular.io/presskit).
 
 ### AngularJS
 
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 9de616796..fbe9007f8 100644
--- a/adev-ja/src/content/tools/cli/aot-metadata-errors.md
+++ b/adev-ja/src/content/tools/cli/aot-metadata-errors.md
@@ -125,6 +125,7 @@ export class MyComponent {}
 You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there.
 
 ```ts
+import {Component} from '@angular/core';
 // ERROR - not initialized there either
 import {someTemplate} from './config';
 
@@ -256,7 +257,7 @@ Here's an illustrative example.
 
 ```ts
 // CORRECTED
-import { Inject } from '@angular/core';
+import {Inject, InjectionToken, Component} from '@angular/core';
 
 export const WINDOW = new InjectionToken('Window');
 export function _window() { return window; }
@@ -278,7 +279,7 @@ uses the `@Inject(WINDOW)` to generate the injection code.
 Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object \(or an abstraction of it, depending upon the platform in which the application runs\).
 
 ```ts
-import { Inject }   from '@angular/core';
+import {Inject, Component} from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 @Component({ … })
diff --git a/adev-ja/src/content/tools/cli/end-to-end.md b/adev-ja/src/content/tools/cli/end-to-end.md
index d2385dba7..da915ba7d 100644
--- a/adev-ja/src/content/tools/cli/end-to-end.md
+++ b/adev-ja/src/content/tools/cli/end-to-end.md
@@ -20,18 +20,18 @@ Cannot find "e2e" target for the specified project.
 You can add a package that implements these capabilities.
 
 For example:
+Playwright: ng add playwright-ng-schematics
 Cypress: ng add @cypress/schematic
 Nightwatch: ng add @nightwatch/schematics
 WebdriverIO: ng add @wdio/schematics
-Playwright: ng add playwright-ng-schematics
 Puppeteer: ng add @puppeteer/ng-schematics
 
 Would you like to add a package with "e2e" capabilities now?
-No
-❯ Cypress
+❯ No
+Playwright
+Cypress
 Nightwatch
 WebdriverIO
-Playwright
 Puppeteer
 
 ```
diff --git a/adev-ja/src/content/tools/cli/template-typecheck.md b/adev-ja/src/content/tools/cli/template-typecheck.md
index e394ced02..760d47033 100644
--- a/adev-ja/src/content/tools/cli/template-typecheck.md
+++ b/adev-ja/src/content/tools/cli/template-typecheck.md
@@ -3,7 +3,8 @@
 ## Overview of template type checking
 
 Just as TypeScript catches type errors in your code, Angular checks the expressions and bindings within the templates of your application and can report any type errors it finds.
-Angular has two modes of doing this, depending on the value of the `strictTemplates` flag in [Angular's compiler options](reference/configs/angular-compiler-options).
+By default, Angular checks templates in strict mode.
+If needed, you can temporarily opt out by setting the `strictTemplates` flag in [Angular's compiler options](reference/configs/angular-compiler-options) to `false`, which falls back to a less thorough basic mode.
 
 ### Basic mode
 
@@ -19,7 +20,7 @@ The compiler does not verify that the value of `user.address.city` is assignable
 
 The compiler also has some major limitations in this mode:
 
-- Importantly, it doesn't check embedded views, such as `*ngIf`, `*ngFor`, other `<ng-template>` embedded view.
+- Importantly, it doesn't check embedded views, such as `@if`, `@for`, `*ngIf`, `*ngFor`, or other `<ng-template>` embedded views.
 - It doesn't figure out the types of `#refs`, the results of pipes, or the type of `$event` in event bindings.
 
 In many cases, these things end up as type `any`, which can cause subsequent parts of the expression to go unchecked.
@@ -30,7 +31,7 @@ Strict mode is the default, and is enabled when the `strictTemplates` flag is `t
 
 In strict mode, Angular does the following:
 
-- Checks embedded views \(such as those within an `*ngIf` or `*ngFor`\)
+- Checks embedded views \(such as those within `@if`, `@for`, `*ngIf`, or `*ngFor`\)
 - Infers the correct return type of pipes
 - Infers the correct type of local references to directives and pipes
 - Verifies that component/directive bindings are assignable to their `input()`s
@@ -89,17 +90,20 @@ In case of a false positive like these, there are a few options:
 
 Each following option is set to the value for `strictTemplates` \(`true` when `strictTemplates` is `true` and conversely, the other way around\):
 
-| Strictness flag              | Effect                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| :--------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `strictInputTypes`           | Whether the assignability of a binding expression to the `@Input()` field is checked. Also affects the inference of directive generic types.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `strictNullInputTypes`       | Whether `strictNullChecks` is honored when checking `@Input()` bindings \(per `strictInputTypes`\). Turning this off can be useful when using a library that was not built with `strictNullChecks` in mind.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `strictAttributeTypes`       | Whether to check `@Input()` bindings that are made using text attributes. For example, `<input matInput disabled="true">` \(setting the `disabled` property to the string `'true'`\) vs `<input matInput [disabled]="true">` \(setting the `disabled` property to the boolean `true`\).                                                                                                                                                                                                                                                                                                                                                        |
-| `strictSafeNavigationTypes`  | Whether the return type of safe navigation operations \(for example, `user?.name` will be correctly inferred based on the type of `user`\). If disabled, `user?.name` will be of type `any`.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `strictDomLocalRefTypes`     | Whether local references to DOM elements will have the correct type. If disabled `ref` will be of type `any` for `<input #ref>`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `strictOutputEventTypes`     | Whether `$event` will have the correct type for event bindings to component/directive an `@Output()`, or to animation events. If disabled, it will be `any`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `strictDomEventTypes`        | Whether `$event` will have the correct type for event bindings to DOM events. If disabled, it will be `any`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `strictContextGenerics`      | Whether the type parameters of generic components will be inferred correctly \(including any generic bounds\). If disabled, any type parameters will be `any`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `strictLiteralTypes`         | Whether object and array literals declared in the template will have their type inferred. If disabled, the type of such literals will be `any`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| Strictness flag             | Effect                                                                                                                                                                                                                                                                                  |
+| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `strictInputTypes`          | Whether the assignability of a binding expression to the `@Input()` field is checked. Also affects the inference of directive generic types.                                                                                                                                            |
+| `strictNullInputTypes`      | Whether `strictNullChecks` is honored when checking `@Input()` bindings \(per `strictInputTypes`\). Turning this off can be useful when using a library that was not built with `strictNullChecks` in mind.                                                                             |
+| `strictAttributeTypes`      | Whether to check `@Input()` bindings that are made using text attributes. For example, `<input matInput disabled="true">` \(setting the `disabled` property to the string `'true'`\) vs `<input matInput [disabled]="true">` \(setting the `disabled` property to the boolean `true`\). |
+| `strictSafeNavigationTypes` | Whether the return type of safe navigation operations \(for example, `user?.name` will be correctly inferred based on the type of `user`\). If disabled, `user?.name` will be of type `any`.                                                                                            |
+| `strictDomLocalRefTypes`    | Whether local references to DOM elements will have the correct type. If disabled `ref` will be of type `any` for `<input #ref>`.                                                                                                                                                        |
+| `strictOutputEventTypes`    | Whether `$event` will have the correct type for event bindings to component/directive an `@Output()`, or to animation events. If disabled, it will be `any`.                                                                                                                            |
+| `strictDomEventTypes`       | Whether `$event` will have the correct type for event bindings to DOM events. If disabled, it will be `any`.                                                                                                                                                                            |
+| `strictContextGenerics`     | Whether the type parameters of generic components will be inferred correctly \(including any generic bounds\). If disabled, any type parameters will be `any`.                                                                                                                          |
+| `strictLiteralTypes`        | Whether object and array literals declared in the template will have their type inferred. If disabled, the type of such literals will be `any`.                                                                                                                                         |
+
+Other options (independent of `strictTemplates`):
+
 | Strictness flag              | Effect                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | :--------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `strictInputAccessModifiers` | Whether access modifiers such as `private`/`protected`/`readonly` are honored when assigning a binding expression to an `@Input()` or `input()`. If disabled, the access modifiers of the input are ignored; only the type is checked. Note: This checking only applies to inputs, not outputs.                                                                                                                                                                                                                                                                                                                                                |
diff --git a/adev-ja/src/content/tools/devtools/signals.md b/adev-ja/src/content/tools/devtools/signals.md
new file mode 100644
index 000000000..cdc1a53ff
--- /dev/null
+++ b/adev-ja/src/content/tools/devtools/signals.md
@@ -0,0 +1,60 @@
+# Debug the signal graph
+
+The **Components** tab can display a live signal graph for the selected component or directive.
+The graph shows how the signals, computeds, effects, and other reactive nodes in that component depend on each other, which makes it easier to understand and debug reactive data flows.
+
+<img src="assets/images/guide/devtools/signal-graph.png" alt="A screenshot of the 'Components' tab in Angular DevTools with the signal graph open for the selected component. The graph shows a signal node connected by edges to three computed nodes which the component's template reads, and the properties of the component are listed in a sidebar to the right.">
+
+## Open the signal graph
+
+In the **Components** tab, select a component or directive.
+In the property pane header, click **Show Signal Graph**.
+The signal graph opens next to the component tree.
+
+You can also jump directly to a specific signal: in the properties view, click the signal graph button next to the property, or, when the property has more than one action, open its actions menu and choose **Show in signal graph**.
+
+The **Show Signal Graph** button appears automatically when the inspected application supports the signal graph API — there is no setting to enable.
+
+## Read the graph
+
+Nodes in the graph represent the reactive nodes that participate in the selected component:
+
+- **Signal**: a writable signal created with `signal()`.
+- **Computed**: a derived value created with `computed()`.
+- **Effect**: a side effect created with `effect()` or `afterRenderEffect()`.
+- **Linked signal**: a writable signal created with `linkedSignal()`.
+- **Template**: the component's template, which reads signals when it renders.
+- **Resource**: signals that belong to a `resource()` or `rxResource()` are grouped into a collapsible cluster. Click **Expand** on the cluster node to see the individual nodes inside.
+
+Lines between nodes show reactive dependencies: each node is connected to the producers it reads from (upstream) and the dependants that read it (downstream).
+
+TIP: Nodes are labeled with the `debugName` of their reactive node. Giving your signals, computeds, and especially effects — which are usually not assigned to a class member — a `debugName` makes the graph much easier to read:
+
+```ts
+effect(
+  () => {
+    // ...
+  },
+  {debugName: 'name in graph'},
+);
+```
+
+## Search the graph
+
+Click the search icon in the graph toolbar to find a node by name.
+Angular DevTools highlights every match and lets you step through them.
+
+## Inspect a node
+
+Click a node to open its details panel, which shows the node's current value as an expandable tree and offers the following actions:
+
+- **View source**: navigate to the node's definition in the Sources tab (Chrome) or Debugger tab (Firefox). The action is disabled when the source location is not available.
+- **Set breakpoint**: pause execution when the signal updates. Breakpoints are only available in Chromium-based browsers.
+- **Watch signal**: log the signal's updates and invalidations to the browser console. Click the action again to stop watching.
+- **Highlight upstream / downstream**: trace the paths of the node's dependencies or its dependants.
+
+If the component uses no signals, Angular DevTools shows a "No signals in this component" message instead of the graph.
+
+## Version support
+
+The signal graph requires an application built with Angular 19 or later running in development mode.
diff --git a/adev-ja/src/content/tools/language-service.md b/adev-ja/src/content/tools/language-service.md
index 58d9aba8e..d6492cb35 100644
--- a/adev-ja/src/content/tools/language-service.md
+++ b/adev-ja/src/content/tools/language-service.md
@@ -58,6 +58,8 @@ You can then click "Go to definition" or press F12 to go directly to the definit
 
 Angular Language Service is currently available as an extension for [Visual Studio Code](https://code.visualstudio.com), [WebStorm](https://www.jetbrains.com/webstorm), [Sublime Text](https://www.sublimetext.com), [Zed](https://zed.dev), [Neovim](https://neovim.io), and [Eclipse IDE](https://www.eclipse.org/eclipseide).
 
+NOTE: The Angular team maintains and distributes the Visual Studio Code extension, which is supported in Visual Studio Code and VS Code-based editors such as Cursor and Antigravity. Integrations for other editors are maintained by their respective editor vendors or by the community. Report issues specific to those integrations to their maintainers.
+
 ### Visual Studio Code
 
 In [Visual Studio Code](https://code.visualstudio.com), install the extension from the [Extensions: Marketplace](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template).
@@ -170,7 +172,7 @@ Angular Language Service can be used with Neovim by using the [nvim-lspconfig](h
 
 ### Zed
 
-In [Zed](https://zed.dev), install the extension from [Extensions: Marketplace](https://zed.dev/extensions/angular).
+In [Zed](https://zed.dev), install the community-maintained extension from [Extensions: Marketplace](https://zed.dev/extensions/angular).
 
 ## How the Language Service works
 
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 46b3fdf0d..c70729cc0 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
@@ -51,9 +51,9 @@ For now, your app's new service uses the data that has, so far, been created loc
 
 In the **Edit** pane of your IDE:
 
-1. In `src/app/home/home.ts`, from `Home`, copy the `housingLocationList` variable and its array value.
+1. In `src/app/home/home.ts`, from `Home`, copy the `baseUrl` variable and the `housingLocationList` variable with its array value.
 1. In `src/app/housing.service.ts`:
-   1. Inside the `HousingService` class, paste the variable that you copied from `Home` in the previous step.
+   1. Inside the `HousingService` class, paste the variables that you copied from `Home` in the previous step.
    1. Inside the `HousingService` class, paste these functions after the data you just copied.
       These functions allow dependencies to access the service's data.
 
@@ -83,7 +83,7 @@ In the **Edit** pane of your IDE, in `src/app/home/home.ts`:
 
       <docs-code language="angular-ts" header="Add import to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[4]"/>
 
-1.  From `Home`, delete the `housingLocationList` array entries and assign `housingLocationList` the value of empty array (`[]`). In a few steps you will update the code to pull the data from the `HousingService`.
+1.  From `Home`, delete the `baseUrl` variable, delete the `housingLocationList` array entries and assign `housingLocationList` the value of empty array (`[]`). In a few steps you will update the code to pull the data from the `HousingService`.
 
 1.  In `Home`, add the following code to inject the new service and initialize the data for the app. The `constructor` is the first function that runs when this component is created. The code in the `constructor` will assign the `housingLocationList` the value returned from the call to `getAllHousingLocations`.
 
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 f16d29add..0893e571b 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
@@ -33,7 +33,7 @@ In this case, `:id` is dynamic and will change based on how the route is request
 
     The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data.
 
-    For the `routerLink` to work in the template, add a file level import of `RouterLink` and `RouterOutlet` from '@angular/router', then update the component `imports` array to include both `RouterLink` and `RouterOutlet`.
+    For the `routerLink` to work in the template, add a file level import of `RouterLink` from '@angular/router', then update the component `imports` array to include `RouterLink`.
 
 1.  At this point you can confirm that the routing is working in your app. In the browser, refresh the home page and click the "Learn More" button for a housing location.
 
diff --git a/adev-ja/src/content/tutorials/first-app/steps/14-http/README.md b/adev-ja/src/content/tutorials/first-app/steps/14-http/README.md
index 6fa5a6b7b..bf8a24598 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/14-http/README.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/14-http/README.md
@@ -176,7 +176,7 @@ The data source has been configured, the next step is to update your web app to
 
 1.  Once all the updates are complete, your updated service should match the following code.
 
-     <docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,25]" />
+     <docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,23]" />
 
 </docs-step>
 

From 4c1942a1a1e72aeacc512ea3968be12b62acb0bf Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:12 +0900
Subject: [PATCH 03/51] fix(app): apply upstream changes to translated strings
 in src/app/features/home

---
 adev-ja/src/app/features/home/home.component.en.html | 2 +-
 adev-ja/src/app/features/home/home.component.html    | 2 +-
 2 files changed, 2 insertions(+), 2 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 4e55dce26..5d6445209 100644
--- a/adev-ja/src/app/features/home/home.component.en.html
+++ b/adev-ja/src/app/features/home/home.component.en.html
@@ -13,7 +13,7 @@ <h1 tabindex="-1">Angular v22 is here!</h1>
         </div>
       </div>
 
-      @if (!isUwu) {
+      @if (!uwu()) {
         <div class="title">
           <h2>Productivity<br />Meets scalability</h2>
           <h3>The framework for building scalable web apps with confidence</h3>
diff --git a/adev-ja/src/app/features/home/home.component.html b/adev-ja/src/app/features/home/home.component.html
index 94b2a79f6..dd55dce33 100644
--- a/adev-ja/src/app/features/home/home.component.html
+++ b/adev-ja/src/app/features/home/home.component.html
@@ -13,7 +13,7 @@ <h1 tabindex="-1">Angular v22がリリースされました！</h1>
         </div>
       </div>
 
-      @if (!isUwu) {
+      @if (!uwu()) {
         <div class="title">
           <h2>Productivity<br />Meets scalability</h2>
           <h3>スケーラブルなWebアプリを確信を持って構築できるフレームワーク</h3>

From 6482826f9dddf31960dc96c6af04e6e78d7d8aad Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:13 +0900
Subject: [PATCH 04/51] fix(app): mirror upstream code changes in
 src/app/features/update

---
 .../features/update/update.component.en.ts    | 73 ++++++++++++-------
 .../app/features/update/update.component.ts   | 73 ++++++++++++-------
 2 files changed, 90 insertions(+), 56 deletions(-)

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 f0814b62d..793ed71ce 100644
--- a/adev-ja/src/app/features/update/update.component.en.ts
+++ b/adev-ja/src/app/features/update/update.component.en.ts
@@ -8,7 +8,7 @@
 
 import {Clipboard} from '@angular/cdk/clipboard';
 import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
-import {Component, inject, signal} from '@angular/core';
+import {afterNextRender, Component, inject, input, linkedSignal, signal} from '@angular/core';
 import {IconComponent} from '@angular/docs';
 import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle';
 import {MatCheckbox} from '@angular/material/checkbox';
@@ -39,6 +39,10 @@ interface Option {
 
 const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.includes('Windows');
 
+/** Versions selected when the URL doesn't specify any. */
+const DEFAULT_FROM_VERSION = '21.0';
+const DEFAULT_TO_VERSION = '22.0';
+
 @Component({
   selector: 'adev-update-guide',
   templateUrl: './update.component.html',
@@ -61,7 +65,8 @@ export default class UpdateComponent {
 
   protected title = signal('');
 
-  protected level = 1;
+  /** The application complexity level, initialized from the `l` query param. */
+  protected readonly level = linkedSignal(() => parseInt(this.levelParam() ?? '', 10) || 1);
   protected options: Record<string, boolean> = {
     ngUpgrade: false,
     material: false,
@@ -120,8 +125,17 @@ export default class UpdateComponent {
     {name: '2.1', number: 201},
     {name: '2.0', number: 200},
   ];
-  protected from = this.versions.find((version) => version.name === '21.0')!;
-  protected to = this.versions.find((version) => version.name === '22.0')!;
+  /** The versions to update from and to, initialized from the `v` query param. */
+  protected readonly from = linkedSignal(
+    () =>
+      this.findVersion(this.versionsParam()?.split('-')[0]) ??
+      this.findVersion(DEFAULT_FROM_VERSION)!,
+  );
+  protected readonly to = linkedSignal(
+    () =>
+      this.findVersion(this.versionsParam()?.split('-')[1]) ??
+      this.findVersion(DEFAULT_TO_VERSION)!,
+  );
   protected futureVersion = 2300;
 
   protected readonly steps: Step[] = RECOMMENDATIONS;
@@ -130,19 +144,22 @@ export default class UpdateComponent {
   private readonly router = inject(Router);
   private readonly activatedRoute = inject(ActivatedRoute);
 
+  /** Bound from the `v` query param, in the `<from>-<to>` format (e.g. `21.0-22.0`). */
+  readonly versionsParam = input<string>(undefined, {alias: 'v'});
+  /** Bound from the `l` query param, the application complexity level. */
+  readonly levelParam = input<string>(undefined, {alias: 'l'});
+
   constructor() {
-    const queryMap = this.activatedRoute.snapshot.queryParamMap;
-    // Detect settings in URL
-    this.level = parseInt(queryMap.get('l')!, 10) || this.level;
-
-    // Detect versions of from and to
-    const versions = queryMap.get('v');
-    if (versions) {
-      const [from, to] = versions.split('-');
-      this.from = this.versions.find((version) => version.name === from)!;
-      this.to = this.versions.find((version) => version.name === to)!;
-      this.showUpdatePath();
-    }
+    // Show the update path right away when the versions are provided in the URL.
+    afterNextRender(() => {
+      if (this.versionsParam()) {
+        this.showUpdatePath();
+      }
+    });
+  }
+
+  private findVersion(name: string | undefined) {
+    return this.versions.find((version) => version.name === name);
   }
 
   copyCode(event: Event) {
@@ -172,7 +189,7 @@ export default class UpdateComponent {
     this.afterRecommendations = [];
 
     // Refuse to generate recommendations for downgrades
-    if (this.to.number < this.from.number) {
+    if (this.to().number < this.from().number) {
       alert('We do not support downgrading versions of Angular.');
       return;
     }
@@ -182,13 +199,13 @@ export default class UpdateComponent {
     const labelMedium = 'medium applications';
     const labelAdvanced = 'advanced applications';
 
-    this.title.set(`${labelTitle} v${this.from.name} -> v${this.to.name}
+    this.title.set(`${labelTitle} v${this.from().name} -> v${this.to().name}
     for
-    ${this.level < 2 ? labelBasic : this.level < 3 ? labelMedium : labelAdvanced}`);
+    ${this.level() < 2 ? labelBasic : this.level() < 3 ? labelMedium : labelAdvanced}`);
 
     // Find applicable steps and organize them into before, during, and after upgrade
     for (const step of this.steps) {
-      if (step.level <= this.level && step.necessaryAsOf > this.from.number) {
+      if (step.level <= this.level() && step.necessaryAsOf > this.from().number) {
         // Check Options
         // Only show steps that don't have a required option
         // Or when the user has a matching option selected
@@ -213,12 +230,12 @@ export default class UpdateComponent {
         step.renderedStep = await marked(this.replaceVariables(step.action));
 
         // If you could do it before now, but didn't have to finish it before now
-        if (step.possibleIn <= this.from.number && step.necessaryAsOf >= this.from.number) {
+        if (step.possibleIn <= this.from().number && step.necessaryAsOf >= this.from().number) {
           this.beforeRecommendations.push(step);
           // If you couldn't do it before now, and you must do it now
-        } else if (step.possibleIn > this.from.number && step.necessaryAsOf <= this.to.number) {
+        } else if (step.possibleIn > this.from().number && step.necessaryAsOf <= this.to().number) {
           this.duringRecommendations.push(step);
-        } else if (step.possibleIn <= this.to.number) {
+        } else if (step.possibleIn <= this.to().number) {
           this.afterRecommendations.push(step);
         }
       }
@@ -227,7 +244,7 @@ export default class UpdateComponent {
     // Update the URL so users can link to this transition
     this.router.navigate([], {
       relativeTo: this.activatedRoute,
-      queryParams: {v: `${this.from.name}-${this.to.name}`, l: this.level},
+      queryParams: {v: `${this.from().name}-${this.to().name}`, l: this.level()},
       queryParamsHandling: 'merge',
     });
 
@@ -257,8 +274,8 @@ export default class UpdateComponent {
 
   private async renderPreV6Instructions(): Promise<void> {
     let upgradeStep: Step;
-    const additionalDeps = this.getAdditionalDependencies(this.to.number);
-    const angularVersion = this.getAngularVersion(this.to.number);
+    const additionalDeps = this.getAdditionalDependencies(this.to().number);
+    const angularVersion = this.getAngularVersion(this.to().number);
     const angularPackages = [
       'animations',
       'common',
@@ -274,7 +291,7 @@ export default class UpdateComponent {
     ];
 
     // Provide npm/yarn instructions for versions before 6
-    if (this.to.number < 600) {
+    if (this.to().number < 600) {
       const actionMessage = `Update all of your dependencies to the latest Angular and the right version of TypeScript.`;
 
       if (isWindows) {
@@ -305,7 +322,7 @@ export default class UpdateComponent {
 
       // Npm installs typescript wrong in v5, let's manually specify
       // https://github.com/npm/npm/issues/16813
-      if (this.packageManager === 'npm install' && this.to.number === 500) {
+      if (this.packageManager === 'npm install' && this.to().number === 500) {
         upgradeStep.action += `
 
 \`npm install typescript@2.4.2 --save-exact\``;
diff --git a/adev-ja/src/app/features/update/update.component.ts b/adev-ja/src/app/features/update/update.component.ts
index 2ec67d7f6..9589cee4e 100644
--- a/adev-ja/src/app/features/update/update.component.ts
+++ b/adev-ja/src/app/features/update/update.component.ts
@@ -8,7 +8,7 @@
 
 import {Clipboard} from '@angular/cdk/clipboard';
 import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
-import {Component, inject, signal} from '@angular/core';
+import {afterNextRender, Component, inject, input, linkedSignal, signal} from '@angular/core';
 import {IconComponent} from '@angular/docs';
 import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle';
 import {MatCheckbox} from '@angular/material/checkbox';
@@ -39,6 +39,10 @@ interface Option {
 
 const isWindows = typeof window !== 'undefined' && window.navigator.userAgent.includes('Windows');
 
+/** Versions selected when the URL doesn't specify any. */
+const DEFAULT_FROM_VERSION = '21.0';
+const DEFAULT_TO_VERSION = '22.0';
+
 @Component({
   selector: 'adev-update-guide',
   templateUrl: './update.component.html',
@@ -61,7 +65,8 @@ export default class UpdateComponent {
 
   protected title = signal('');
 
-  protected level = 1;
+  /** The application complexity level, initialized from the `l` query param. */
+  protected readonly level = linkedSignal(() => parseInt(this.levelParam() ?? '', 10) || 1);
   protected options: Record<string, boolean> = {
     ngUpgrade: false,
     material: false,
@@ -120,8 +125,17 @@ export default class UpdateComponent {
     {name: '2.1', number: 201},
     {name: '2.0', number: 200},
   ];
-  protected from = this.versions.find((version) => version.name === '21.0')!;
-  protected to = this.versions.find((version) => version.name === '22.0')!;
+  /** The versions to update from and to, initialized from the `v` query param. */
+  protected readonly from = linkedSignal(
+    () =>
+      this.findVersion(this.versionsParam()?.split('-')[0]) ??
+      this.findVersion(DEFAULT_FROM_VERSION)!,
+  );
+  protected readonly to = linkedSignal(
+    () =>
+      this.findVersion(this.versionsParam()?.split('-')[1]) ??
+      this.findVersion(DEFAULT_TO_VERSION)!,
+  );
   protected futureVersion = 2300;
 
   protected readonly steps: Step[] = RECOMMENDATIONS;
@@ -130,19 +144,22 @@ export default class UpdateComponent {
   private readonly router = inject(Router);
   private readonly activatedRoute = inject(ActivatedRoute);
 
+  /** Bound from the `v` query param, in the `<from>-<to>` format (e.g. `21.0-22.0`). */
+  readonly versionsParam = input<string>(undefined, {alias: 'v'});
+  /** Bound from the `l` query param, the application complexity level. */
+  readonly levelParam = input<string>(undefined, {alias: 'l'});
+
   constructor() {
-    const queryMap = this.activatedRoute.snapshot.queryParamMap;
-    // Detect settings in URL
-    this.level = parseInt(queryMap.get('l')!, 10) || this.level;
-
-    // Detect versions of from and to
-    const versions = queryMap.get('v');
-    if (versions) {
-      const [from, to] = versions.split('-');
-      this.from = this.versions.find((version) => version.name === from)!;
-      this.to = this.versions.find((version) => version.name === to)!;
-      this.showUpdatePath();
-    }
+    // Show the update path right away when the versions are provided in the URL.
+    afterNextRender(() => {
+      if (this.versionsParam()) {
+        this.showUpdatePath();
+      }
+    });
+  }
+
+  private findVersion(name: string | undefined) {
+    return this.versions.find((version) => version.name === name);
   }
 
   copyCode(event: Event) {
@@ -172,7 +189,7 @@ export default class UpdateComponent {
     this.afterRecommendations = [];
 
     // Refuse to generate recommendations for downgrades
-    if (this.to.number < this.from.number) {
+    if (this.to().number < this.from().number) {
       alert('We do not support downgrading versions of Angular.');
       return;
     }
@@ -182,13 +199,13 @@ export default class UpdateComponent {
     const labelMedium = '中級';
     const labelAdvanced = '上級';
 
-    this.title.set(`${labelTitle} v${this.from.name} -> v${this.to.name}
+    this.title.set(`${labelTitle} v${this.from().name} -> v${this.to().name}
     
-    （${this.level < 2 ? labelBasic : this.level < 3 ? labelMedium : labelAdvanced}）`);
+    （${this.level() < 2 ? labelBasic : this.level() < 3 ? labelMedium : labelAdvanced}）`);
 
     // Find applicable steps and organize them into before, during, and after upgrade
     for (const step of this.steps) {
-      if (step.level <= this.level && step.necessaryAsOf > this.from.number) {
+      if (step.level <= this.level() && step.necessaryAsOf > this.from().number) {
         // Check Options
         // Only show steps that don't have a required option
         // Or when the user has a matching option selected
@@ -213,12 +230,12 @@ export default class UpdateComponent {
         step.renderedStep = await marked(this.replaceVariables(step.action));
 
         // If you could do it before now, but didn't have to finish it before now
-        if (step.possibleIn <= this.from.number && step.necessaryAsOf >= this.from.number) {
+        if (step.possibleIn <= this.from().number && step.necessaryAsOf >= this.from().number) {
           this.beforeRecommendations.push(step);
           // If you couldn't do it before now, and you must do it now
-        } else if (step.possibleIn > this.from.number && step.necessaryAsOf <= this.to.number) {
+        } else if (step.possibleIn > this.from().number && step.necessaryAsOf <= this.to().number) {
           this.duringRecommendations.push(step);
-        } else if (step.possibleIn <= this.to.number) {
+        } else if (step.possibleIn <= this.to().number) {
           this.afterRecommendations.push(step);
         }
       }
@@ -227,7 +244,7 @@ export default class UpdateComponent {
     // Update the URL so users can link to this transition
     this.router.navigate([], {
       relativeTo: this.activatedRoute,
-      queryParams: {v: `${this.from.name}-${this.to.name}`, l: this.level},
+      queryParams: {v: `${this.from().name}-${this.to().name}`, l: this.level()},
       queryParamsHandling: 'merge',
     });
 
@@ -257,8 +274,8 @@ export default class UpdateComponent {
 
   private async renderPreV6Instructions(): Promise<void> {
     let upgradeStep: Step;
-    const additionalDeps = this.getAdditionalDependencies(this.to.number);
-    const angularVersion = this.getAngularVersion(this.to.number);
+    const additionalDeps = this.getAdditionalDependencies(this.to().number);
+    const angularVersion = this.getAngularVersion(this.to().number);
     const angularPackages = [
       'animations',
       'common',
@@ -274,7 +291,7 @@ export default class UpdateComponent {
     ];
 
     // Provide npm/yarn instructions for versions before 6
-    if (this.to.number < 600) {
+    if (this.to().number < 600) {
       const actionMessage = `依存関係をすべて最新のAngularと適切なバージョンのTypeScriptにあわせてアップデートします。`;
 
       if (isWindows) {
@@ -305,7 +322,7 @@ export default class UpdateComponent {
 
       // Npm installs typescript wrong in v5, let's manually specify
       // https://github.com/npm/npm/issues/16813
-      if (this.packageManager === 'npm install' && this.to.number === 500) {
+      if (this.packageManager === 'npm install' && this.to().number === 500) {
         upgradeStep.action += `
 
 \`npm install typescript@2.4.2 --save-exact\``;

From afbafa9d4a97836e537cae70c16680ffe62607a0 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:14 +0900
Subject: [PATCH 05/51] fix(app): apply upstream changes to translated strings
 in src/app/features/update

---
 .../features/update/update.component.en.html  | 35 +++++++++----------
 .../app/features/update/update.component.html | 35 +++++++++----------
 2 files changed, 32 insertions(+), 38 deletions(-)

diff --git a/adev-ja/src/app/features/update/update.component.en.html b/adev-ja/src/app/features/update/update.component.en.html
index 163a6ed63..a9afd70f1 100644
--- a/adev-ja/src/app/features/update/update.component.en.html
+++ b/adev-ja/src/app/features/update/update.component.en.html
@@ -11,7 +11,7 @@ <h3>Angular versions</h3>
           From v.
 
           <button type="button" [cdkMenuTriggerFor]="templatesMenuFrom">
-            <span>{{ from.name }}</span>
+            <span>{{ from().name }}</span>
             <docs-icon>expand_more</docs-icon>
           </button>
 
@@ -19,7 +19,7 @@ <h3>Angular versions</h3>
             <ul class="adev-template-dropdown" cdkMenu>
               @for (version of versions; track $index) {
                 <li>
-                  <button cdkMenuItem type="button" (click)="from = version; showUpdatePath()">
+                  <button cdkMenuItem type="button" (click)="from.set(version); showUpdatePath()">
                     <span>{{ version.name }}</span>
                   </button>
                 </li>
@@ -32,7 +32,7 @@ <h3>Angular versions</h3>
           <span class="adev-template-select">
             To v.
             <button type="button" [cdkMenuTriggerFor]="templatesMenuTo">
-              <span>{{ to.name }}</span>
+              <span>{{ to().name }}</span>
               <docs-icon>expand_more</docs-icon>
             </button>
 
@@ -40,7 +40,7 @@ <h3>Angular versions</h3>
               <ul class="adev-template-dropdown" cdkMenu>
                 @for (version of versions; track $index) {
                   <li>
-                    <button cdkMenuItem type="button" (click)="to = version; showUpdatePath()">
+                    <button cdkMenuItem type="button" (click)="to.set(version); showUpdatePath()">
                       <span>{{ version.name }}</span>
                     </button>
                   </li>
@@ -51,7 +51,7 @@ <h3>Angular versions</h3>
         </span>
       </div>
 
-      @if (from.number >= futureVersion || to.number >= futureVersion) {
+      @if (from().number >= futureVersion || to().number >= futureVersion) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>Warning:</strong>
@@ -61,7 +61,7 @@ <h3>Angular versions</h3>
         </div>
       }
 
-      @if (from.number > to.number) {
+      @if (from().number > to().number) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>Warning:</strong>
@@ -70,7 +70,7 @@ <h3>Angular versions</h3>
         </div>
       }
 
-      @if (to.number - from.number > 150 && from.number > 240) {
+      @if (to().number - from().number > 150 && from().number > 240) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>Warning:</strong>
@@ -84,19 +84,19 @@ <h3>Angular versions</h3>
 
       <h3>Application complexity</h3>
       <mat-button-toggle-group
-        (change)="level = $event.value; showUpdatePath()"
-        [value]="level"
+        (change)="level.set($event.value); showUpdatePath()"
+        [value]="level()"
         style="margin-bottom: 16px"
       >
         <mat-button-toggle [value]="1">Basic</mat-button-toggle>
         <mat-button-toggle [value]="2">Medium</mat-button-toggle>
         <mat-button-toggle [value]="3">Advanced</mat-button-toggle>
       </mat-button-toggle-group>
-      @if (level === 1) {
+      @if (level() === 1) {
         <p>Shows information for all Angular developers.</p>
-      } @else if (level === 2) {
+      } @else if (level() === 2) {
         <p>Shows information that's of interest to more advanced Angular developers.</p>
-      } @else if (level === 3) {
+      } @else if (level() === 3) {
         <p>Shows all the information we have about this update.</p>
       }
 
@@ -111,7 +111,7 @@ <h3>Other dependencies</h3>
         </div>
       }
 
-      @if (from.number < 600) {
+      @if (from().number < 600) {
         <h4>Package Manager</h4>
         <mat-button-toggle-group
           (change)="packageManager = $event.value; showUpdatePath()"
@@ -159,8 +159,7 @@ <h3>Before you update</h3>
             </span>
           </div>
         </div>
-      }
-      @if (beforeRecommendations.length <= 0) {
+      } @empty {
         <div>
           <em>You don't need to do anything before moving between these versions.</em>
         </div>
@@ -187,8 +186,7 @@ <h3>Update to the new version</h3>
             </span>
           </div>
         </div>
-      }
-      @if (duringRecommendations.length <= 0) {
+      } @empty {
         <div>
           <em>There aren't any recommendations for moving between these versions.</em>
         </div>
@@ -209,8 +207,7 @@ <h3>After you update</h3>
             </span>
           </div>
         </div>
-      }
-      @if (afterRecommendations.length <= 0) {
+      } @empty {
         <div>
           <em>You don't need to do anything after moving between these versions.</em>
         </div>
diff --git a/adev-ja/src/app/features/update/update.component.html b/adev-ja/src/app/features/update/update.component.html
index 1b8dca6b4..e7bdc9a50 100644
--- a/adev-ja/src/app/features/update/update.component.html
+++ b/adev-ja/src/app/features/update/update.component.html
@@ -11,7 +11,7 @@ <h3>Angularバージョン</h3>
           v.
 
           <button type="button" [cdkMenuTriggerFor]="templatesMenuFrom">
-            <span>{{ from.name }}</span>
+            <span>{{ from().name }}</span>
             <docs-icon>expand_more</docs-icon>
           </button>
 
@@ -19,7 +19,7 @@ <h3>Angularバージョン</h3>
             <ul class="adev-template-dropdown" cdkMenu>
               @for (version of versions; track $index) {
                 <li>
-                  <button cdkMenuItem type="button" (click)="from = version; showUpdatePath()">
+                  <button cdkMenuItem type="button" (click)="from.set(version); showUpdatePath()">
                     <span>{{ version.name }}</span>
                   </button>
                 </li>
@@ -32,7 +32,7 @@ <h3>Angularバージョン</h3>
           <span class="adev-template-select">
             から v.
             <button type="button" [cdkMenuTriggerFor]="templatesMenuTo">
-              <span>{{ to.name }}</span>
+              <span>{{ to().name }}</span>
               <docs-icon>expand_more</docs-icon>
             </button>
 
@@ -40,7 +40,7 @@ <h3>Angularバージョン</h3>
               <ul class="adev-template-dropdown" cdkMenu>
                 @for (version of versions; track $index) {
                   <li>
-                    <button cdkMenuItem type="button" (click)="to = version; showUpdatePath()">
+                    <button cdkMenuItem type="button" (click)="to.set(version); showUpdatePath()">
                       <span>{{ version.name }}</span>
                     </button>
                   </li>
@@ -51,7 +51,7 @@ <h3>Angularバージョン</h3>
         </span>
       </div>
 
-      @if (from.number >= futureVersion || to.number >= futureVersion) {
+      @if (from().number >= futureVersion || to().number >= futureVersion) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>警告:</strong>
@@ -61,7 +61,7 @@ <h3>Angularバージョン</h3>
         </div>
       }
 
-      @if (from.number > to.number) {
+      @if (from().number > to().number) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>警告:</strong>
@@ -70,7 +70,7 @@ <h3>Angularバージョン</h3>
         </div>
       }
 
-      @if (to.number - from.number > 150 && from.number > 240) {
+      @if (to().number - from().number > 150 && from().number > 240) {
         <div class="docs-alert docs-alert-critical">
           <p>
             <strong>警告:</strong>
@@ -84,19 +84,19 @@ <h3>Angularバージョン</h3>
 
       <h3>アプリケーションの複雑さ</h3>
       <mat-button-toggle-group
-        (change)="level = $event.value; showUpdatePath()"
-        [value]="level"
+        (change)="level.set($event.value); showUpdatePath()"
+        [value]="level()"
         style="margin-bottom: 16px"
       >
         <mat-button-toggle [value]="1">基本</mat-button-toggle>
         <mat-button-toggle [value]="2">中級</mat-button-toggle>
         <mat-button-toggle [value]="3">上級</mat-button-toggle>
       </mat-button-toggle-group>
-      @if (level === 1) {
+      @if (level() === 1) {
         <p>すべてのAngular開発者向けの情報を表示します。</p>
-      } @else if (level === 2) {
+      } @else if (level() === 2) {
         <p>より上級のAngular開発者向けの情報を表示します。</p>
-      } @else if (level === 3) {
+      } @else if (level() === 3) {
         <p>このアップデートに関するすべての情報を表示します。</p>
       }
 
@@ -111,7 +111,7 @@ <h3>その他の依存関係</h3>
         </div>
       }
 
-      @if (from.number < 600) {
+      @if (from().number < 600) {
         <h4>パッケージマネージャー</h4>
         <mat-button-toggle-group
           (change)="packageManager = $event.value; showUpdatePath()"
@@ -159,8 +159,7 @@ <h3>アップデート前</h3>
             </span>
           </div>
         </div>
-      }
-      @if (beforeRecommendations.length <= 0) {
+      } @empty {
         <div>
           <em>バージョン移行する前に、何もする必要はありません。</em>
         </div>
@@ -187,8 +186,7 @@ <h3>新しいバージョンにアップデートする</h3>
             </span>
           </div>
         </div>
-      }
-      @if (duringRecommendations.length <= 0) {
+      } @empty {
         <div>
           <em>バージョン移行するための推奨事項はありません。</em>
         </div>
@@ -209,8 +207,7 @@ <h3>アップデート後</h3>
             </span>
           </div>
         </div>
-      }
-      @if (afterRecommendations.length <= 0) {
+      } @empty {
         <div>
           <em>バージョン移行した後、何もする必要はありません。</em>
         </div>

From 7434eefc9fef6761a4f030c18945dc2fe4972e2c Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:15 +0900
Subject: [PATCH 06/51] fix(app): apply upstream changes to translated strings
 in src/app/routing/navigation-entries

---
 .../src/app/routing/navigation-entries/index.en.ts    | 11 +++++------
 adev-ja/src/app/routing/navigation-entries/index.ts   | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/adev-ja/src/app/routing/navigation-entries/index.en.ts b/adev-ja/src/app/routing/navigation-entries/index.en.ts
index d0d9e1998..8754e5e71 100644
--- a/adev-ja/src/app/routing/navigation-entries/index.en.ts
+++ b/adev-ja/src/app/routing/navigation-entries/index.en.ts
@@ -1087,12 +1087,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             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: 'Signals',
+            path: 'tools/devtools/signals',
+            contentPath: 'tools/devtools/signals',
+          },
           {
             label: 'Router Tree',
             path: 'tools/devtools/router',
diff --git a/adev-ja/src/app/routing/navigation-entries/index.ts b/adev-ja/src/app/routing/navigation-entries/index.ts
index 12340a7d7..97b18cf2e 100644
--- a/adev-ja/src/app/routing/navigation-entries/index.ts
+++ b/adev-ja/src/app/routing/navigation-entries/index.ts
@@ -1087,12 +1087,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             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: 'シグナル',
+            path: 'tools/devtools/signals',
+            contentPath: 'tools/devtools/signals',
+          },
           {
             label: 'ルーターツリー',
             path: 'tools/devtools/router',

From 5234ff814a7393e5264fe08d01570d5b3bf42f8e Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:16 +0900
Subject: [PATCH 07/51] fix(docs): apply upstream wording changes in
 src/content/ai

---
 adev-ja/src/content/ai/webmcp.en.md | 4 ++--
 adev-ja/src/content/ai/webmcp.md    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/adev-ja/src/content/ai/webmcp.en.md b/adev-ja/src/content/ai/webmcp.en.md
index 4d2d2a4be..684bc4e1a 100644
--- a/adev-ja/src/content/ai/webmcp.en.md
+++ b/adev-ja/src/content/ai/webmcp.en.md
@@ -1,6 +1,6 @@
 # WebMCP
 
-Web Model Context Protocol (WebMCP) is an [emerging web standard](https://github.com/webmachinelearning/webmcp/) that allows web applications to expose structured tools directly to AI agents running natively in the browser. Tools defined by an application allow AI assistants to interact with it directly, providing additional capabilities to the agent and reducing the need for DOM interactions.
+WebMCP is a [proposed web standard](https://github.com/webmachinelearning/webmcp/) that allows web applications to expose structured tools directly to AI agents running natively in the browser. Tools defined by an application allow AI assistants to interact with it directly, providing additional capabilities to the agent and reducing the need for DOM interactions.
 
 For example, an application to register a new user might provide a WebMCP tool for a browser's AI agent to create the user directly rather than requiring the agent to go through a complex wizard UI via DOM interactions.
 
@@ -231,7 +231,7 @@ In this example, Angular generates a WebMCP tool with a JSON schema which:
 
 Beyond inferring the input schema, Angular also connects the WebMCP tool to the form's validation logic and submission handler. This means the agent will observe any validation errors triggered by its inputs or any failures which happen during submission, allowing it to self-correct and potentially retry.
 
-NOTE: Async validators are _not_ triggered and should be handled by the submission action.
+NOTE: By default, async validators don't block submission: the submission action runs before they finish, so their errors aren't reported to the agent. Handle these checks in the submission action instead.
 
 #### Constraints
 
diff --git a/adev-ja/src/content/ai/webmcp.md b/adev-ja/src/content/ai/webmcp.md
index 0db7a57f9..f6b67c552 100644
--- a/adev-ja/src/content/ai/webmcp.md
+++ b/adev-ja/src/content/ai/webmcp.md
@@ -1,6 +1,6 @@
 # WebMCP
 
-Web Model Context Protocol (WebMCP)は、Webアプリケーションがブラウザ内でネイティブに実行されるAIエージェントに構造化されたツールを直接公開できるようにする[新興のWeb標準](https://github.com/webmachinelearning/webmcp/)です。アプリケーションによって定義されたツールにより、AIアシスタントはアプリケーションと直接対話できるようになり、エージェントに追加の機能を提供し、DOM操作の必要性を減らします。
+WebMCPは、Webアプリケーションがブラウザ内でネイティブに実行されるAIエージェントに構造化されたツールを直接公開できるようにする[提案中のWeb標準](https://github.com/webmachinelearning/webmcp/)です。アプリケーションによって定義されたツールにより、AIアシスタントはアプリケーションと直接やり取りでき、エージェントの機能が増え、DOM操作の必要性が減ります。
 
 例えば、新規ユーザーを登録するアプリケーションは、エージェントがDOM操作を通じて複雑なウィザードUIを操作することを要求する代わりに、ブラウザのAIエージェントがユーザーを直接作成するためのWebMCPツールを提供する場合があります。
 
@@ -231,7 +231,7 @@ export class UserRegistration {
 
 入力スキーマの推論にとどまらず、AngularはWebMCPツールをフォームの検証ロジックと送信ハンドラーにも接続します。これにより、エージェントは自身の入力によってトリガーされた検証エラーや送信中に発生した失敗を監視し、自己修正して再試行できるようになります。
 
-NOTE: 非同期バリデーターはトリガーされ_ない_ため、送信アクションで処理する必要があります。
+NOTE: デフォルトでは、非同期バリデーターは送信を妨げません。検証が完了する前に送信アクションが実行されるため、エラーはエージェントに報告されません。代わりに、送信アクションでこれらの検証を処理してください。
 
 #### 制約事項 {#constraints}
 

From c068c70ef2b35c01f74e75685c4f5b7ad6d53cb0 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:16 +0900
Subject: [PATCH 08/51] fix(docs): apply upstream wording changes in
 src/content/guide

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

diff --git a/adev-ja/src/content/guide/hydration.en.md b/adev-ja/src/content/guide/hydration.en.md
index 153e53834..a86cb18c4 100644
--- a/adev-ja/src/content/guide/hydration.en.md
+++ b/adev-ja/src/content/guide/hydration.en.md
@@ -72,6 +72,7 @@ import {
   provideClientHydration,
   withEventReplay,
   withNoIncrementalHydration,
+  bootstrapApplication,
 } from '@angular/platform-browser';
 
 bootstrapApplication(App, {
diff --git a/adev-ja/src/content/guide/hydration.md b/adev-ja/src/content/guide/hydration.md
index 540cf5f8e..a9afea9f6 100644
--- a/adev-ja/src/content/guide/hydration.md
+++ b/adev-ja/src/content/guide/hydration.md
@@ -72,6 +72,7 @@ import {
   provideClientHydration,
   withEventReplay,
   withNoIncrementalHydration,
+  bootstrapApplication,
 } from '@angular/platform-browser';
 
 bootstrapApplication(App, {

From 8ce6502f6985127eb90e1c008a8fe0d562314e05 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:17 +0900
Subject: [PATCH 09/51] fix(docs): retranslate updated sections in
 src/content/guide

---
 adev-ja/src/content/guide/ssr.en.md      | 21 ++++++++++++++-------
 adev-ja/src/content/guide/ssr.md         | 21 ++++++++++++++-------
 adev-ja/src/content/guide/zoneless.en.md |  9 ++++++++-
 adev-ja/src/content/guide/zoneless.md    |  9 ++++++++-
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/adev-ja/src/content/guide/ssr.en.md b/adev-ja/src/content/guide/ssr.en.md
index fb0f551d7..c30e340bb 100644
--- a/adev-ja/src/content/guide/ssr.en.md
+++ b/adev-ja/src/content/guide/ssr.en.md
@@ -55,6 +55,7 @@ You can add this config to your application with [`provideServerRendering`](api/
 
 ```typescript {header: "app.config.server.ts"}
 import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {ApplicationConfig} from '@angular/core';
 import {serverRoutes} from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
@@ -69,6 +70,7 @@ When using the [App shell pattern](ecosystem/service-workers/app-shell), you mus
 
 ```typescript
 import {provideServerRendering, withRoutes, withAppShell} from '@angular/ssr';
+import {ApplicationConfig} from '@angular/core';
 import {AppShell} from './app-shell';
 
 const serverConfig: ApplicationConfig = {
@@ -169,7 +171,7 @@ When using [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'
 
 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 `post/:id`, `getPrerenderParams ` could return the array `[{id: 123}, {id: 456}]`, and thus render separate documents for `post/123` and `post/456`.
+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 `post/:id`, `getPrerenderParams ` could return the array `[{id: '123'}, {id: '456'}]`, and thus render separate documents for `post/123` and `post/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.
 
@@ -177,6 +179,7 @@ You can also use this function with catch-all routes (e.g., `/**`), where the pa
 
 ```ts {header: "app.routes.server.ts"}
 import {RenderMode, ServerRoute} from '@angular/ssr';
+import {inject} from '@angular/core';
 
 export const serverRoutes: ServerRoute[] = [
   {
@@ -228,7 +231,7 @@ export const serverRoutes: ServerRoute[] = [
       // 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}];
+      return [{id: '1'}, {id: '2'}, {id: '3'}];
     },
   },
 ];
@@ -241,7 +244,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, ElementRef, viewChild, afterNextRender} from '@angular/core';
 
 @Component({
   selector: 'my-cmp',
@@ -364,7 +367,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, Component} from '@angular/core';
 
 @Component({
   selector: 'app-my-component',
@@ -426,6 +429,7 @@ If your application needs to fetch larger responses during server rendering, set
 
 ```ts
 import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {ApplicationConfig} from '@angular/core';
 import {serverRoutes} from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
@@ -454,8 +458,11 @@ This configuration is provided globally using `withHttpTransferCacheOptions` ins
 By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contain `Authorization`, `Proxy-Authorization`, or `Cookie` headers and are not sent with `withCredentials` or Fetch API `credentials` modes that can send credentials. Angular also skips transfer cache when a request or response includes `Cache-Control` directives that forbid caching (`no-store`, `no-cache`, or `private`), or when the Fetch API `cache` option is set to `no-store` or `no-cache`. Responses that carry a `Set-Cookie` header are also skipped. You can override the request filtering settings by using `withHttpTransferCacheOptions` in the hydration configuration.
 
 ```ts
-import {bootstrapApplication} from '@angular/platform-browser';
-import {provideClientHydration, withHttpTransferCacheOptions} from '@angular/platform-browser';
+import {
+  bootstrapApplication,
+  provideClientHydration,
+  withHttpTransferCacheOptions,
+} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [
@@ -620,7 +627,7 @@ import express from 'express';
 const app = express();
 const angularApp = new AngularNodeAppEngine();
 
-app.use('*', (req, res, next) => {
+app.use((req, res, next) => {
   angularApp
     .handle(req)
     .then((response) => {
diff --git a/adev-ja/src/content/guide/ssr.md b/adev-ja/src/content/guide/ssr.md
index a1d95450c..dd306dee1 100644
--- a/adev-ja/src/content/guide/ssr.md
+++ b/adev-ja/src/content/guide/ssr.md
@@ -55,6 +55,7 @@ export const serverRoutes: ServerRoute[] = [
 
 ```typescript {header: "app.config.server.ts"}
 import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {ApplicationConfig} from '@angular/core';
 import {serverRoutes} from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
@@ -69,6 +70,7 @@ const serverConfig: ApplicationConfig = {
 
 ```typescript
 import {provideServerRendering, withRoutes, withAppShell} from '@angular/ssr';
+import {ApplicationConfig} from '@angular/core';
 import {AppShell} from './app-shell';
 
 const serverConfig: ApplicationConfig = {
@@ -169,7 +171,7 @@ Angularは、ルート設定の [`redirectTo`](api/router/Route#redirectTo 'API
 
 [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference') を持つ各ルートについて、[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') 関数を指定できます。この関数を使用すると、どの特定のパラメーターが個別のプリレンダリングされたドキュメントを生成するかを制御できます。
 
-[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') 関数は、オブジェクトの配列に解決される `Promise` を返します。各オブジェクトは、ルートパラメーター名から値へのキーと値のマップです。たとえば、`post/:id` のようなルートを定義した場合、`getPrerenderParams` は配列 `[{id: 123}, {id: 456}]` を返し、`post/123` と `post/456` の個別のドキュメントをレンダリングできます。
+[`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') 関数は、オブジェクトの配列に解決される `Promise` を返します。各オブジェクトは、ルートパラメーター名から値へのキーと値のマップです。たとえば、`post/:id` というルートでは、`getPrerenderParams` が `[{id: '123'}, {id: '456'}]` を返すと、`post/123` と `post/456` の文書が個別にレンダリングされます。
 
 [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') の本体は、Angularの [`inject`](api/core/inject 'API reference') 関数を使用して依存性を注入し、どのルートをプリレンダリングするかを決定するための任意の作業ができます。これには通常、パラメーター値の配列を構築するためにデータを取得するリクエストを行うことが含まれます。
 
@@ -177,6 +179,7 @@ Angularは、ルート設定の [`redirectTo`](api/router/Route#redirectTo 'API
 
 ```ts {header: "app.routes.server.ts"}
 import {RenderMode, ServerRoute} from '@angular/ssr';
+import {inject} from '@angular/core';
 
 export const serverRoutes: ServerRoute[] = [
   {
@@ -228,7 +231,7 @@ export const serverRoutes: ServerRoute[] = [
       // この関数は、/post/1、/post/2、/post/3 のパスで
       // プリレンダリングされた投稿を表すオブジェクトの配列を返します。
       // /post/4 のパスがリクエストされた場合、フォールバック動作が利用されます。
-      return [{id: 1}, {id: 2}, {id: 3}];
+      return [{id: '1'}, {id: '2'}, {id: '3'}];
     },
   },
 ];
@@ -241,7 +244,7 @@ export const serverRoutes: ServerRoute[] = [
 一般に、ブラウザ固有のシンボルに依存するコードは、サーバーではなくブラウザでのみ実行されるべきです。これは、`afterEveryRender` および `afterNextRender` ライフサイクルフックによって強制できます。これらはブラウザでのみ実行され、サーバーではスキップされます。
 
 ```angular-ts
-import {Component, viewChild, afterNextRender} from '@angular/core';
+import {Component, ElementRef, viewChild, afterNextRender} from '@angular/core';
 
 @Component({
   selector: 'my-cmp',
@@ -364,7 +367,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, Component} from '@angular/core';
 
 @Component({
   selector: 'app-my-component',
@@ -426,6 +429,7 @@ If your application needs to fetch larger responses during server rendering, set
 
 ```ts
 import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {ApplicationConfig} from '@angular/core';
 import {serverRoutes} from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
@@ -454,8 +458,11 @@ CRITICAL: During SSR, the Fetch implementation reads the entire response body to
 デフォルトでは、`HttpClient` は `Authorization`、`Proxy-Authorization`、または `Cookie` ヘッダーを含まず、`withCredentials` で送信されないすべての `HEAD` および `GET` リクエストをキャッシュします。ハイドレーション設定に `withHttpTransferCacheOptions` を使用することで、これらの設定をオーバーライドできます。
 
 ```ts
-import {bootstrapApplication} from '@angular/platform-browser';
-import {provideClientHydration, withHttpTransferCacheOptions} from '@angular/platform-browser';
+import {
+  bootstrapApplication,
+  provideClientHydration,
+  withHttpTransferCacheOptions,
+} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [
@@ -620,7 +627,7 @@ import express from 'express';
 const app = express();
 const angularApp = new AngularNodeAppEngine();
 
-app.use('*', (req, res, next) => {
+app.use((req, res, next) => {
   angularApp
     .handle(req)
     .then((response) => {
diff --git a/adev-ja/src/content/guide/zoneless.en.md b/adev-ja/src/content/guide/zoneless.en.md
index 3c70f0eec..3e92a5a40 100644
--- a/adev-ja/src/content/guide/zoneless.en.md
+++ b/adev-ja/src/content/guide/zoneless.en.md
@@ -163,10 +163,17 @@ change notification (i.e. `fixture.componentInstance.someValue = 'newValue';`).
 If the component is used in production, this issue should be addressed by updating
 the component to use signals for state or call `ChangeDetectorRef.markForCheck()`.
 If the component is only used as a test wrapper and never used in an application,
-it is acceptable to use `fixture.changeDetectorRef.markForCheck()`.
+it is acceptable to use `ChangeDetectionStrategy.Eager` for it and call `fixture.changeDetectorRef.markForCheck()`.
+
+IMPORTANT: `fixture.changeDetectorRef` belongs to the fixture's host view, so its `markForCheck()`
+doesn't refresh the template of an `OnPush` component. Your application components shouldn't need it
+in tests. If a test needs it, the component usually isn't fully reactive or
+[zoneless compatible](#requirements-for-zoneless-compatibility).
 
 ### Debug-mode check to ensure updates are detected
 
+IMPORTANT: `provideCheckNoChangesConfig` is in [developer preview](reference/releases#developer-preview).
+
 Angular also provides an additional tool to help verify that an application is making
 updates to state in a zoneless-compatible way. `provideCheckNoChangesConfig({exhaustive: true, interval: <milliseconds>})`
 can be used to periodically check to ensure that no bindings have been updated
diff --git a/adev-ja/src/content/guide/zoneless.md b/adev-ja/src/content/guide/zoneless.md
index aeb02fcf1..c1c566cca 100644
--- a/adev-ja/src/content/guide/zoneless.md
+++ b/adev-ja/src/content/guide/zoneless.md
@@ -163,10 +163,17 @@ change notification (i.e. `fixture.componentInstance.someValue = 'newValue';`).
 If the component is used in production, this issue should be addressed by updating
 the component to use signals for state or call `ChangeDetectorRef.markForCheck()`.
 If the component is only used as a test wrapper and never used in an application,
-it is acceptable to use `fixture.changeDetectorRef.markForCheck()`.
+`ChangeDetectionStrategy.Eager`を使用し、`fixture.changeDetectorRef.markForCheck()`を呼び出してもかまいません。
+
+IMPORTANT: `fixture.changeDetectorRef`はフィクスチャのホストビューに属するため、その`markForCheck()`を
+呼び出しても、`OnPush`コンポーネントのテンプレートは更新されません。アプリケーションのコンポーネントでは、
+通常、テストでこの呼び出しは不要です。必要な場合、コンポーネントのリアクティブ性が不十分か、
+[ゾーンレスとの互換性](#requirements-for-zoneless-compatibility)を満たしていない可能性があります。
 
 ### 更新が検出されることを確認するためのデバッグモードチェック {#debug-mode-check-to-ensure-updates-are-detected}
 
+IMPORTANT: `provideCheckNoChangesConfig`は[開発者プレビュー](reference/releases#developer-preview)です。
+
 Angular also provides an additional tool to help verify that an application is making
 updates to state in a zoneless-compatible way. `provideCheckNoChangesConfig({exhaustive: true, interval: <milliseconds>})`
 can be used to periodically check to ensure that no bindings have been updated

From 36ad144d0bac8d6e78ef3832963ff22e8a88721b Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:18 +0900
Subject: [PATCH 10/51] fix(docs): apply upstream wording changes in
 src/content/guide/animations

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

diff --git a/adev-ja/src/content/guide/animations/css.en.md b/adev-ja/src/content/guide/animations/css.en.md
index 41267bd8a..a32f7cbc5 100644
--- a/adev-ja/src/content/guide/animations/css.en.md
+++ b/adev-ja/src/content/guide/animations/css.en.md
@@ -121,7 +121,7 @@ Applying this class to an element prevents any animation from firing on that ele
 
 2. Use the [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query to ensure no animations play for users that prefer less animation.
 
-3. Prevent adding animation classes programatically
+3. Prevent adding animation classes programmatically
 
 ### Animation Callbacks
 
diff --git a/adev-ja/src/content/guide/animations/migration.en.md b/adev-ja/src/content/guide/animations/migration.en.md
index 975683af6..37ab500b8 100644
--- a/adev-ja/src/content/guide/animations/migration.en.md
+++ b/adev-ja/src/content/guide/animations/migration.en.md
@@ -187,7 +187,7 @@ Applying this class to an element prevents any animation from firing on that ele
 
 2. Use the [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query to ensure no animations play for users that prefer less animation.
 
-3. Prevent adding animation classes programatically
+3. Prevent adding animation classes programmatically
 
 ### Animation Callbacks
 

From e632bb4b0a2f1a8a53968983ed0b31bfd6551d05 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:18 +0900
Subject: [PATCH 11/51] fix(docs): apply upstream wording changes in
 src/content/guide/aria

---
 adev-ja/src/content/guide/aria/autocomplete.en.md | 3 +--
 adev-ja/src/content/guide/aria/autocomplete.md    | 3 +--
 adev-ja/src/content/guide/aria/combobox.en.md     | 3 +--
 adev-ja/src/content/guide/aria/combobox.md        | 3 +--
 adev-ja/src/content/guide/aria/grid.en.md         | 3 +--
 adev-ja/src/content/guide/aria/grid.md            | 3 +--
 adev-ja/src/content/guide/aria/listbox.en.md      | 3 +--
 adev-ja/src/content/guide/aria/listbox.md         | 3 +--
 adev-ja/src/content/guide/aria/menu.en.md         | 3 +--
 adev-ja/src/content/guide/aria/menu.md            | 3 +--
 adev-ja/src/content/guide/aria/menubar.en.md      | 3 +--
 adev-ja/src/content/guide/aria/menubar.md         | 3 +--
 adev-ja/src/content/guide/aria/multiselect.en.md  | 3 +--
 adev-ja/src/content/guide/aria/multiselect.md     | 3 +--
 adev-ja/src/content/guide/aria/overview.en.md     | 2 +-
 adev-ja/src/content/guide/aria/overview.md        | 2 +-
 adev-ja/src/content/guide/aria/select.en.md       | 3 +--
 adev-ja/src/content/guide/aria/select.md          | 3 +--
 adev-ja/src/content/guide/aria/toolbar.en.md      | 3 +--
 adev-ja/src/content/guide/aria/toolbar.md         | 3 +--
 adev-ja/src/content/guide/aria/tree.en.md         | 3 +--
 adev-ja/src/content/guide/aria/tree.md            | 3 +--
 22 files changed, 22 insertions(+), 42 deletions(-)

diff --git a/adev-ja/src/content/guide/aria/autocomplete.en.md b/adev-ja/src/content/guide/aria/autocomplete.en.md
index 2b164bce3..c9afdf9ec 100644
--- a/adev-ja/src/content/guide/aria/autocomplete.en.md
+++ b/adev-ja/src/content/guide/aria/autocomplete.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Autocomplete">
-</docs-decorative-header>
+# Autocomplete
 
 ## Overview
 
diff --git a/adev-ja/src/content/guide/aria/autocomplete.md b/adev-ja/src/content/guide/aria/autocomplete.md
index e81570941..f30ec2bd7 100644
--- a/adev-ja/src/content/guide/aria/autocomplete.md
+++ b/adev-ja/src/content/guide/aria/autocomplete.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="オートコンプリート">
-</docs-decorative-header>
+# オートコンプリート
 
 ## 概要 {#overview}
 
diff --git a/adev-ja/src/content/guide/aria/combobox.en.md b/adev-ja/src/content/guide/aria/combobox.en.md
index aa2aa426b..09841bccb 100644
--- a/adev-ja/src/content/guide/aria/combobox.en.md
+++ b/adev-ja/src/content/guide/aria/combobox.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Combobox">
-</docs-decorative-header>
+# Combobox
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" title="Combobox ARIA pattern"/>
diff --git a/adev-ja/src/content/guide/aria/combobox.md b/adev-ja/src/content/guide/aria/combobox.md
index 4728da482..74fe1fc12 100644
--- a/adev-ja/src/content/guide/aria/combobox.md
+++ b/adev-ja/src/content/guide/aria/combobox.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="コンボボックス">
-</docs-decorative-header>
+# コンボボックス
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" title="コンボボックスARIAパターン"/>
diff --git a/adev-ja/src/content/guide/aria/grid.en.md b/adev-ja/src/content/guide/aria/grid.en.md
index 7a241fd48..3cc5621c9 100644
--- a/adev-ja/src/content/guide/aria/grid.en.md
+++ b/adev-ja/src/content/guide/aria/grid.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Grid">
-</docs-decorative-header>
+# Grid
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/grid/" title="Grid ARIA pattern"/>
diff --git a/adev-ja/src/content/guide/aria/grid.md b/adev-ja/src/content/guide/aria/grid.md
index 3a7039c30..7b1631b2c 100644
--- a/adev-ja/src/content/guide/aria/grid.md
+++ b/adev-ja/src/content/guide/aria/grid.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="グリッド">
-</docs-decorative-header>
+# グリッド
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/grid/" title="グリッドARIAパターン"/>
diff --git a/adev-ja/src/content/guide/aria/listbox.en.md b/adev-ja/src/content/guide/aria/listbox.en.md
index c4a6569e9..f322d8aaf 100644
--- a/adev-ja/src/content/guide/aria/listbox.en.md
+++ b/adev-ja/src/content/guide/aria/listbox.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Listbox">
-</docs-decorative-header>
+# Listbox
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" title="Listbox pattern"/>
diff --git a/adev-ja/src/content/guide/aria/listbox.md b/adev-ja/src/content/guide/aria/listbox.md
index 0d8321ec5..2f04f92c3 100644
--- a/adev-ja/src/content/guide/aria/listbox.md
+++ b/adev-ja/src/content/guide/aria/listbox.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="リストボックス">
-</docs-decorative-header>
+# リストボックス
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" title="リストボックスパターン"/>
diff --git a/adev-ja/src/content/guide/aria/menu.en.md b/adev-ja/src/content/guide/aria/menu.en.md
index dc2ebe467..5b82654a8 100644
--- a/adev-ja/src/content/guide/aria/menu.en.md
+++ b/adev-ja/src/content/guide/aria/menu.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Menu">
-</docs-decorative-header>
+# Menu
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/" title="Menu ARIA pattern"/>
diff --git a/adev-ja/src/content/guide/aria/menu.md b/adev-ja/src/content/guide/aria/menu.md
index 708cfb6a1..af76f5ba6 100644
--- a/adev-ja/src/content/guide/aria/menu.md
+++ b/adev-ja/src/content/guide/aria/menu.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="メニュー">
-</docs-decorative-header>
+# メニュー
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/" title="メニューARIAパターン"/>
diff --git a/adev-ja/src/content/guide/aria/menubar.en.md b/adev-ja/src/content/guide/aria/menubar.en.md
index 80f822117..1cd3e8ae3 100644
--- a/adev-ja/src/content/guide/aria/menubar.en.md
+++ b/adev-ja/src/content/guide/aria/menubar.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Menubar">
-</docs-decorative-header>
+# Menubar
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/" title="Menubar ARIA pattern"/>
diff --git a/adev-ja/src/content/guide/aria/menubar.md b/adev-ja/src/content/guide/aria/menubar.md
index a795b6ad4..eb71a241f 100644
--- a/adev-ja/src/content/guide/aria/menubar.md
+++ b/adev-ja/src/content/guide/aria/menubar.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="メニューバー">
-</docs-decorative-header>
+# メニューバー
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/" title="メニューバーARIAパターン"/>
diff --git a/adev-ja/src/content/guide/aria/multiselect.en.md b/adev-ja/src/content/guide/aria/multiselect.en.md
index c430db644..950254c4d 100644
--- a/adev-ja/src/content/guide/aria/multiselect.en.md
+++ b/adev-ja/src/content/guide/aria/multiselect.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Multiselect">
-</docs-decorative-header>
+# Multiselect
 
 ## Overview
 
diff --git a/adev-ja/src/content/guide/aria/multiselect.md b/adev-ja/src/content/guide/aria/multiselect.md
index 4015f5cd1..36d9509ea 100644
--- a/adev-ja/src/content/guide/aria/multiselect.md
+++ b/adev-ja/src/content/guide/aria/multiselect.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="マルチセレクト">
-</docs-decorative-header>
+# マルチセレクト
 
 ## 概要 {#overview}
 
diff --git a/adev-ja/src/content/guide/aria/overview.en.md b/adev-ja/src/content/guide/aria/overview.en.md
index 159425cde..ff581e810 100644
--- a/adev-ja/src/content/guide/aria/overview.en.md
+++ b/adev-ja/src/content/guide/aria/overview.en.md
@@ -1,4 +1,4 @@
-<docs-decorative-header title="Angular Aria">
+<docs-decorative-header title="Angular Aria" imgSrc="adev/src/assets/images/aria.svg"> <!-- markdownlint-disable-line -->
 </docs-decorative-header>
 
 ## What is Angular Aria?
diff --git a/adev-ja/src/content/guide/aria/overview.md b/adev-ja/src/content/guide/aria/overview.md
index 7b4690f4b..127774572 100644
--- a/adev-ja/src/content/guide/aria/overview.md
+++ b/adev-ja/src/content/guide/aria/overview.md
@@ -1,4 +1,4 @@
-<docs-decorative-header title="Angular Aria">
+<docs-decorative-header title="Angular Aria" imgSrc="adev/src/assets/images/aria.svg"> <!-- markdownlint-disable-line -->
 </docs-decorative-header>
 
 ## Angular Ariaとは？ {#what-is-angular-aria}
diff --git a/adev-ja/src/content/guide/aria/select.en.md b/adev-ja/src/content/guide/aria/select.en.md
index 7e01b1b18..5da7e6685 100644
--- a/adev-ja/src/content/guide/aria/select.en.md
+++ b/adev-ja/src/content/guide/aria/select.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Select">
-</docs-decorative-header>
+# Select
 
 ## Overview
 
diff --git a/adev-ja/src/content/guide/aria/select.md b/adev-ja/src/content/guide/aria/select.md
index 5876244a0..116366aa1 100644
--- a/adev-ja/src/content/guide/aria/select.md
+++ b/adev-ja/src/content/guide/aria/select.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="セレクト">
-</docs-decorative-header>
+# セレクト
 
 ## 概要 {#overview}
 
diff --git a/adev-ja/src/content/guide/aria/toolbar.en.md b/adev-ja/src/content/guide/aria/toolbar.en.md
index 53cc95aa8..03640eb4f 100644
--- a/adev-ja/src/content/guide/aria/toolbar.en.md
+++ b/adev-ja/src/content/guide/aria/toolbar.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Toolbar">
-</docs-decorative-header>
+# Toolbar
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" title="Toolbar ARIA pattern"/>
diff --git a/adev-ja/src/content/guide/aria/toolbar.md b/adev-ja/src/content/guide/aria/toolbar.md
index be2d19314..5c01d1fda 100644
--- a/adev-ja/src/content/guide/aria/toolbar.md
+++ b/adev-ja/src/content/guide/aria/toolbar.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="ツールバー">
-</docs-decorative-header>
+# ツールバー
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" title="ツールバーARIAパターン"/>
diff --git a/adev-ja/src/content/guide/aria/tree.en.md b/adev-ja/src/content/guide/aria/tree.en.md
index 9e7b93406..c0d915168 100644
--- a/adev-ja/src/content/guide/aria/tree.en.md
+++ b/adev-ja/src/content/guide/aria/tree.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Tree">
-</docs-decorative-header>
+# Tree
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/treeview/" title="Tree ARIA pattern"/>
diff --git a/adev-ja/src/content/guide/aria/tree.md b/adev-ja/src/content/guide/aria/tree.md
index 5d4c0f9c5..9db21dada 100644
--- a/adev-ja/src/content/guide/aria/tree.md
+++ b/adev-ja/src/content/guide/aria/tree.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="ツリー">
-</docs-decorative-header>
+# ツリー
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/treeview/" title="ツリーARIAパターン"/>

From f92028270615634afbe6a5edd2cf69573d9c446e Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:19 +0900
Subject: [PATCH 12/51] fix(docs): retranslate updated sections in
 src/content/guide/aria

---
 adev-ja/src/content/guide/aria/accordion.en.md | 11 +++++------
 adev-ja/src/content/guide/aria/accordion.md    | 11 +++++------
 adev-ja/src/content/guide/aria/tabs.en.md      | 13 ++++++-------
 adev-ja/src/content/guide/aria/tabs.md         | 13 ++++++-------
 4 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/adev-ja/src/content/guide/aria/accordion.en.md b/adev-ja/src/content/guide/aria/accordion.en.md
index b1449e8ac..d070fa851 100644
--- a/adev-ja/src/content/guide/aria/accordion.en.md
+++ b/adev-ja/src/content/guide/aria/accordion.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Accordion">
-</docs-decorative-header>
+# Accordion
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" title="Accordion ARIA pattern"/>
@@ -38,7 +37,7 @@ Accordions work well for organizing content into logical groups where users typi
 
 - **Expansion modes** - Control whether one or multiple panels can be open at the same time
 - **Keyboard navigation** - Navigate between triggers using arrow keys, Home, and End
-- **Lazy rendering** - Content is only created when a panel first expands, improving initial load performance
+- **Lazy rendering** - Content is only created when a panel expands, improving initial load performance
 - **Disabled states** - Disable the entire group or individual triggers
 - **Focus management** - Control whether disabled items can receive keyboard focus
 - **Programmatic control** - Expand, collapse, or toggle panels from your component code
@@ -140,7 +139,7 @@ When `[softDisabled]="true"` (the default), disabled items can receive focus but
 
 ### Lazy content rendering
 
-Use the `ngAccordionContent` directive on an `ng-template` to defer rendering content until the panel first expands. This improves performance for accordions with heavy content like images, charts, or complex components.
+Use the `ngAccordionContent` directive on an `ng-template` to defer rendering content until the panel expands. This improves performance for accordions with heavy content like images, charts, or complex components.
 
 ```angular-html
 <div ngAccordionGroup>
@@ -148,7 +147,7 @@ Use the `ngAccordionContent` directive on an `ng-template` to defer rendering co
     <button ngAccordionTrigger [panel]="panel1">Trigger Text</button>
     <div ngAccordionPanel #panel1="ngAccordionPanel">
       <ng-template ngAccordionContent>
-        <!-- This content only renders when the panel first opens -->
+        <!-- This content only renders when the panel opens -->
         <img src="large-image.jpg" alt="Description" />
         <app-expensive-component />
       </ng-template>
@@ -157,7 +156,7 @@ Use the `ngAccordionContent` directive on an `ng-template` to defer rendering co
 </div>
 ```
 
-By default, content remains in the DOM after the panel collapses. Set `[preserveContent]="false"` to remove the content from the DOM when the panel closes.
+By default, content is removed from the DOM when the panel collapses. Set `[preserveContent]="true"` to keep it, for example when the panel contains a video that shouldn't reset on collapse.
 
 ## Testing
 
diff --git a/adev-ja/src/content/guide/aria/accordion.md b/adev-ja/src/content/guide/aria/accordion.md
index 766378fb1..c0cf58ca9 100644
--- a/adev-ja/src/content/guide/aria/accordion.md
+++ b/adev-ja/src/content/guide/aria/accordion.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="アコーディオン">
-</docs-decorative-header>
+# アコーディオン
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" title="アコーディオンARIAパターン"/>
@@ -38,7 +37,7 @@
 
 - **展開モード** - 一度に1つまたは複数のパネルを開けるかどうかを制御します
 - **キーボードナビゲーション** - 矢印キー、Home、Endを使用してトリガー間を移動します
-- **遅延レンダリング** - コンテンツはパネルが最初に展開されたときにのみ作成され、初期読み込みのパフォーマンスを向上させます
+- **遅延レンダリング** - コンテンツはパネルが展開されたときにのみ作成され、初期読み込みのパフォーマンスを向上させます
 - **無効状態** - グループ全体または個々のトリガーを無効にします
 - **フォーカス管理** - 無効化されたアイテムがキーボードフォーカスを受け取れるかどうかを制御します
 - **プログラムによる制御** - コンポーネントのコードからパネルを展開、折りたたみ、または切り替えます
@@ -140,7 +139,7 @@ NOTE: `multiExpandable`入力はデフォルトで`true`です。単一展開の
 
 ### コンテンツの遅延レンダリング {#lazy-content-rendering}
 
-`ngAccordionContent`ディレクティブを`ng-template`で使用すると、パネルが最初に展開されるまでコンテンツのレンダリングを遅延させることができます。これにより、画像、チャート、または複雑なコンポーネントなどの重いコンテンツを持つアコーディオンのパフォーマンスが向上します。
+`ngAccordionContent`ディレクティブを`ng-template`で使用すると、パネルが展開されるまでコンテンツのレンダリングを遅延させることができます。これにより、画像、チャート、複雑なコンポーネントなどの重いコンテンツを持つアコーディオンのパフォーマンスが向上します。
 
 ```angular-html
 <div ngAccordionGroup>
@@ -148,7 +147,7 @@ NOTE: `multiExpandable`入力はデフォルトで`true`です。単一展開の
     <button ngAccordionTrigger [panel]="panel1">Trigger Text</button>
     <div ngAccordionPanel #panel1="ngAccordionPanel">
       <ng-template ngAccordionContent>
-        <!-- This content only renders when the panel first opens -->
+        <!-- This content only renders when the panel opens -->
         <img src="large-image.jpg" alt="Description" />
         <app-expensive-component />
       </ng-template>
@@ -157,7 +156,7 @@ NOTE: `multiExpandable`入力はデフォルトで`true`です。単一展開の
 </div>
 ```
 
-デフォルトでは、パネルが折りたたまれた後もコンテンツはDOMに残ります。パネルが閉じたときにDOMからコンテンツを削除するには、`[preserveContent]="false"`を設定します。
+デフォルトでは、パネルを折りたたむとコンテンツがDOMから削除されます。パネルに動画など、折りたたんだときに状態をリセットしたくないものが含まれる場合は、`[preserveContent]="true"`を設定してコンテンツを保持します。
 
 ## Testing {#testing}
 
diff --git a/adev-ja/src/content/guide/aria/tabs.en.md b/adev-ja/src/content/guide/aria/tabs.en.md
index b7d703ef6..877a6d2f9 100644
--- a/adev-ja/src/content/guide/aria/tabs.en.md
+++ b/adev-ja/src/content/guide/aria/tabs.en.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="Tabs">
-</docs-decorative-header>
+# Tabs
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" title="Tabs ARIA pattern"/>
@@ -60,7 +59,7 @@ Tabs work well for organizing related content into distinct sections where users
 - **Selection modes** - Tabs activate automatically on focus or require manual activation
 - **Keyboard navigation** - Arrow keys, Home, and End for efficient tab navigation
 - **Orientation** - Horizontal or vertical tab list layouts
-- **Lazy content** - Tab panels render only when first activated
+- **Lazy content** - Tab panels render only when activated
 - **Disabled tabs** - Disable individual tabs with focus management
 - **Focus modes** - Roving tabindex or activedescendant focus strategies
 - **RTL support** - Right-to-left language navigation
@@ -165,7 +164,7 @@ Set `[orientation]="'vertical'"` on the tab list. Navigation changes to Up/Down
 
 ### Lazy content rendering
 
-Use the `ngTabContent` directive on an `ng-template` to defer rendering tab panels until they're first shown.
+Use the `ngTabContent` directive on an `ng-template` to defer rendering tab panels until they're shown.
 
 ```angular-html
 <div ngTabs>
@@ -176,21 +175,21 @@ Use the `ngTabContent` directive on an `ng-template` to defer rendering tab pane
 
   <div ngTabPanel value="tab1">
     <ng-template ngTabContent>
-      <!-- This content only renders when Tab 1 is first shown -->
+      <!-- This content only renders when Tab 1 is shown -->
       <app-heavy-component />
     </ng-template>
   </div>
 
   <div ngTabPanel value="tab2">
     <ng-template ngTabContent>
-      <!-- This content only renders when Tab 2 is first shown -->
+      <!-- This content only renders when Tab 2 is shown -->
       <app-another-component />
     </ng-template>
   </div>
 </div>
 ```
 
-By default, content remains in the DOM after the panel is hidden. Set `[preserveContent]="false"` to remove content when the panel is deactivated.
+By default, content is removed from the DOM when the panel is hidden. Set `[preserveContent]="true"` to keep it, for example when the panel contains a video that shouldn't reset when switching tabs.
 
 ### Disabled tabs
 
diff --git a/adev-ja/src/content/guide/aria/tabs.md b/adev-ja/src/content/guide/aria/tabs.md
index 71fe7a4ed..19760dad5 100644
--- a/adev-ja/src/content/guide/aria/tabs.md
+++ b/adev-ja/src/content/guide/aria/tabs.md
@@ -1,5 +1,4 @@
-<docs-decorative-header title="タブ">
-</docs-decorative-header>
+# タブ
 
 <docs-pill-row>
   <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" title="タブのARIAパターン"/>
@@ -60,7 +59,7 @@
 - **選択モード** - フォーカス時にタブを自動的にアクティブにするか、手動でのアクティベーションを要求します
 - **キーボードナビゲーション** - 矢印キー、Home、Endキーによる効率的なタブナビゲーション
 - **向き** - 水平または垂直のタブリストレイアウト
-- **遅延コンテンツ** - タブパネルは最初にアクティブになったときにのみレンダリングされます
+- **遅延コンテンツ** - タブパネルはアクティブになったときにのみレンダリングされます
 - **無効化されたタブ** - フォーカス管理機能付きで個々のタブを無効化します
 - **フォーカスモード** - roving tabindexまたはactivedescendantによるフォーカス戦略
 - **RTLサポート** - 右から左へ記述する言語のナビゲーション
@@ -165,7 +164,7 @@
 
 ### コンテンツの遅延レンダリング {#lazy-content-rendering}
 
-`ng-template` で `ngTabContent` ディレクティブを使用すると、タブパネルが最初に表示されるまでレンダリングを遅延させることができます。
+`ng-template`で`ngTabContent`ディレクティブを使用すると、タブパネルが表示されるまでレンダリングを遅延させることができます。
 
 ```angular-html
 <div ngTabs>
@@ -176,21 +175,21 @@
 
   <div ngTabPanel value="tab1">
     <ng-template ngTabContent>
-      <!-- このコンテンツは、タブ1が最初に表示されたときにのみレンダリングされます -->
+      <!-- This content only renders when Tab 1 is shown -->
       <app-heavy-component />
     </ng-template>
   </div>
 
   <div ngTabPanel value="tab2">
     <ng-template ngTabContent>
-      <!-- このコンテンツは、タブ2が最初に表示されたときにのみレンダリングされます -->
+      <!-- This content only renders when Tab 2 is shown -->
       <app-another-component />
     </ng-template>
   </div>
 </div>
 ```
 
-デフォルトでは、パネルが非表示になった後もコンテンツはDOMに残ります。パネルが非アクティブ化されたときにコンテンツを削除するには、`[preserveContent]="false"` を設定します。
+デフォルトでは、パネルが非表示になるとコンテンツがDOMから削除されます。タブの切り替え時に動画の状態をリセットしたくない場合などは、`[preserveContent]="true"`を設定してコンテンツを保持します。
 
 ### 無効化されたタブ {#disabled-tabs}
 

From 07b3e6e374dbbde16eca1f37cf4d69449520a0a6 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:20 +0900
Subject: [PATCH 13/51] fix(docs): mirror upstream code and link changes in
 src/content/guide/components

---
 .../src/content/guide/components/anatomy-of-components.en.md    | 1 +
 adev-ja/src/content/guide/components/anatomy-of-components.md   | 1 +
 adev-ja/src/content/guide/components/lifecycle.en.md            | 2 +-
 adev-ja/src/content/guide/components/lifecycle.md               | 2 +-
 4 files changed, 4 insertions(+), 2 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 e08682b04..9ba87c9dc 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
@@ -63,6 +63,7 @@ To use a component, [directive](guide/directives), or [pipe](guide/templates/pip
 it to the `imports` array in the `@Component` decorator:
 
 ```ts
+import {Component} from '@angular/core';
 import {ProfilePhoto} from './profile-photo';
 
 @Component({
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 ff31ad1d4..4f1d858ce 100644
--- a/adev-ja/src/content/guide/components/anatomy-of-components.md
+++ b/adev-ja/src/content/guide/components/anatomy-of-components.md
@@ -63,6 +63,7 @@ export class ProfilePhoto {}
 `@Component`デコレーターの`imports`配列に追加する必要があります。
 
 ```ts
+import {Component} from '@angular/core';
 import {ProfilePhoto} from './profile-photo';
 
 @Component({
diff --git a/adev-ja/src/content/guide/components/lifecycle.en.md b/adev-ja/src/content/guide/components/lifecycle.en.md
index bb8c43abc..7fd60e1da 100644
--- a/adev-ja/src/content/guide/components/lifecycle.en.md
+++ b/adev-ja/src/content/guide/components/lifecycle.en.md
@@ -250,7 +250,7 @@ communicate across phases, a phase function may return a result value that can b
 next phase.
 
 ```ts
-import {Component, ElementRef, afterNextRender} from '@angular/core';
+import {Component, ElementRef, afterNextRender, inject} from '@angular/core';
 
 @Component(/* ... */)
 export class UserProfile {
diff --git a/adev-ja/src/content/guide/components/lifecycle.md b/adev-ja/src/content/guide/components/lifecycle.md
index 6ef800c4e..a990d60e6 100644
--- a/adev-ja/src/content/guide/components/lifecycle.md
+++ b/adev-ja/src/content/guide/components/lifecycle.md
@@ -250,7 +250,7 @@ AngularでDOMを操作する方法については、[DOM API の使用](guide/co
 次のフェーズでアクセスできる結果値を返すことができます。
 
 ```ts
-import {Component, ElementRef, afterNextRender} from '@angular/core';
+import {Component, ElementRef, afterNextRender, inject} from '@angular/core';
 
 @Component(/* ... */)
 export class UserProfile {

From 65b583e9ba8bd785defdd5aee1bf775797a2f554 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:20 +0900
Subject: [PATCH 14/51] fix(docs): apply upstream wording changes in
 src/content/guide/components

---
 .../src/content/guide/components/programmatic-rendering.en.md  | 3 +++
 adev-ja/src/content/guide/components/programmatic-rendering.md | 3 +++
 2 files changed, 6 insertions(+)

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 1a2f5dd30..68f36ff1a 100644
--- a/adev-ja/src/content/guide/components/programmatic-rendering.en.md
+++ b/adev-ja/src/content/guide/components/programmatic-rendering.en.md
@@ -21,6 +21,7 @@ template.
 
 ```angular-ts
 import {NgComponentOutlet} from '@angular/common';
+import {Component, input, computed} from '@angular/core';
 
 @Component({/*...*/})
 export class AdminBio {
@@ -406,6 +407,8 @@ export class PopupService {
 
 ## Handling rendering errors
 
+IMPORTANT: The `onError` option and its `ErrorDetails` parameter are in [developer preview](reference/releases#developer-preview).
+
 When dynamically creating components using `ViewContainerRef.createComponent` or the standalone `createComponent` function, you can provide an `onError` callback in the options object to handle errors that occur during the rendering or change detection phases. This is the programmatic equivalent of using an `@error` block in templates.
 
 ```ts
diff --git a/adev-ja/src/content/guide/components/programmatic-rendering.md b/adev-ja/src/content/guide/components/programmatic-rendering.md
index bf80c4550..fab9877d2 100644
--- a/adev-ja/src/content/guide/components/programmatic-rendering.md
+++ b/adev-ja/src/content/guide/components/programmatic-rendering.md
@@ -21,6 +21,7 @@ HELPFUL: 遅延読み込みのユースケース(たとえば、重いコンポ
 
 ```angular-ts
 import {NgComponentOutlet} from '@angular/common';
+import {Component, input, computed} from '@angular/core';
 
 @Component({/*...*/})
 export class AdminBio {
@@ -406,6 +407,8 @@ export class PopupService {
 
 ## Handling rendering errors
 
+IMPORTANT: `onError`オプションとその`ErrorDetails`パラメーターは[開発者プレビュー](reference/releases#developer-preview)です。
+
 When dynamically creating components using `ViewContainerRef.createComponent` or the standalone `createComponent` function, you can provide an `onError` callback in the options object to handle errors that occur during the rendering or change detection phases. This is the programmatic equivalent of using an `@error` block in templates.
 
 ```ts

From 7521b3e09c1fb62a975174e5be8b78b86157c0ac Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:21 +0900
Subject: [PATCH 15/51] fix(docs): retranslate updated sections in
 src/content/guide/di

---
 .../hierarchical-dependency-injection.en.md   | 36 +++++++++----------
 .../di/hierarchical-dependency-injection.md   | 34 ++++++++----------
 2 files changed, 31 insertions(+), 39 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 bd6873ea5..6fe64ebf2 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
@@ -303,7 +303,7 @@ export class Host {
 }
 ```
 
-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>.
+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
 
@@ -699,10 +699,10 @@ These four bindings demonstrate the difference between `providers` and `viewProv
 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>.
 
-You might wonder why the projected `<app-inspector>` can still see <code>🐳</code> from `App`'s `viewProviders`.
+You might wonder why the projected `<app-inspector>` can still see <code>🐳</code>, which is the root-provided `AnimalService`.
 The reason is that Angular DI tracks **where a component was declared**, not where it ends up being rendered.
-`<app-inspector>` lives in `App`'s template — inside `App`'s `<#VIEW>` — so `App`'s `viewProviders` are fair game.
-Projecting it into `Child` cuts off access to `Child`'s `viewProviders` (<code>🐶</code>), but `App`'s providers (<code>🐳</code>) are still reachable up the tree.
+`<app-inspector>` lives in `App`'s template, inside `App`'s `<#VIEW>`, so its lookup never goes through `Child`'s `<#VIEW>`.
+Projecting it into `Child` cuts off access to `Child`'s `viewProviders` (<code>🐶</code>), but the root `AnimalService` (<code>🐳</code>) is still reachable up the tree.
 
 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>.
 
@@ -741,7 +741,7 @@ The `AnimalService` in the logical tree would look like this:
 ```
 
 The projected `<app-inspector>` gets <code>🐳</code> because <code>🐶</code> belongs to `Child`'s view and projected content can't reach it.
-<code>🐳</code> is accessible because `<app-inspector>` was declared in `App`'s template, so it can still walk up to `App`'s `viewProviders`.
+<code>🐳</code> is accessible because `<app-inspector>` was declared in `App`'s template, so it can still walk up to the root `AnimalService`.
 
 The `<app-inspector>` that lives directly inside `Child`'s template (not projected) gets <code>🐶</code> — it's inside the `<#VIEW>`, so no boundary to cross.
 
@@ -1013,7 +1013,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 `HeroTaxReturn` had logic to manage and restore changes.
+Suppose that the `HeroTaxReturnEditor` 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.
@@ -1053,10 +1053,10 @@ export class HeroTaxReturnService {
 }
 ```
 
-Here is the `HeroTaxReturn` that makes use of `HeroTaxReturnService`.
+Here is the `HeroTaxReturnEditor` that makes use of `HeroTaxReturnService`.
 
 ```typescript
-import {Component, input, output} from '@angular/core';
+import {Component, effect, inject, input, output} from '@angular/core';
 import {HeroTaxReturn} from './hero';
 import {HeroTaxReturnService} from './hero-tax-return.service';
 
@@ -1066,25 +1066,21 @@ import {HeroTaxReturnService} from './hero-tax-return.service';
   styleUrls: ['./hero-tax-return.css'],
   providers: [HeroTaxReturnService],
 })
-export class HeroTaxReturn {
+export class HeroTaxReturnEditor {
   message = '';
 
   close = output<void>();
 
-  get taxReturn(): HeroTaxReturn {
-    return this.heroTaxReturnService.taxReturn;
-  }
-
   taxReturn = input.required<HeroTaxReturn>();
 
+  private heroTaxReturnService = inject(HeroTaxReturnService);
+
   constructor() {
     effect(() => {
       this.heroTaxReturnService.taxReturn = this.taxReturn();
     });
   }
 
-  private heroTaxReturnService = inject(HeroTaxReturnService);
-
   onCanceled() {
     this.flashMessage('Canceled');
     this.heroTaxReturnService.restoreTaxReturn();
@@ -1106,21 +1102,21 @@ export class HeroTaxReturn {
 }
 ```
 
-The _tax-return-to-edit_ arrives by way of the `input` property, which is implemented with getters and setters.
-The setter initializes the component's own instance of the `HeroTaxReturnService` with the incoming return.
-The getter always returns what that service says is the current state of the hero.
+The _tax-return-to-edit_ arrives by way of the `taxReturn` signal input.
+An `effect` initializes the component's own instance of the `HeroTaxReturnService` with the incoming return whenever the input changes.
+The service's getter always returns what the service says is the current state of the hero.
 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 `HeroTaxReturn` to provide the service, using the `providers` property in the component metadata.
+To prevent this, configure the component-level injector of `HeroTaxReturnEditor` to provide the service, using the `providers` property in the component metadata.
 
 ```typescript
 providers: [HeroTaxReturnService];
 ```
 
-The `HeroTaxReturn` has its own provider of the `HeroTaxReturnService`.
+The `HeroTaxReturnEditor` 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.
 
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 93dc31221..4066be2b3 100644
--- a/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md
+++ b/adev-ja/src/content/guide/di/hierarchical-dependency-injection.md
@@ -699,10 +699,10 @@ Emoji from AnimalService: 🐶
 犬の絵文字 <code>🐶</code> は、 `Child` の `<#VIEW>` 内に宣言され、投影されたコンテンツには可視ではないことを覚えておいてください。
 代わりに、投影されたコンテンツには、クジラ <code>🐳</code> が表示されます。
 
-なぜ投影された `<app-inspector>` が、`App` の `viewProviders` から <code>🐳</code> を依然として見られるのか疑問に思うかもしれません。
+投影された`<app-inspector>`が、ルートで提供される`AnimalService`の<code>🐳</code>を参照できる理由を疑問に思うかもしれません。
 その理由は、Angular DIは**コンポーネントが宣言された場所**を追跡し、最終的にレンダリングされる場所は追跡しないためです。
-`<app-inspector>` は `App` のテンプレート内、つまり `App` の `<#VIEW>` 内にあるので、`App` の `viewProviders` は利用可能です。
-`Child` に投影することで、`Child` の `viewProviders` (<code>🐶</code>) へのアクセスは遮断されますが、`App` のプロバイダー (<code>🐳</code>) はツリーを上に辿って引き続き到達可能です。
+`<app-inspector>`は`App`のテンプレート、つまり`App`の`<#VIEW>`内で宣言されているため、探索時に`Child`の`<#VIEW>`を通りません。
+`Child`に投影すると、`Child`の`viewProviders`（<code>🐶</code>）にはアクセスできませんが、ツリーの上位にあるルートの`AnimalService`（<code>🐳</code>）にはアクセスできます。
 
 ただし、次の出力セクションでは `Inspector` は `Child` の実際の子コンポーネントです。そして `Inspector` は `<#VIEW>` の内側にあるため、 `AnimalService` を要求すると、犬 <code>🐶</code> が表示されます。
 
@@ -741,7 +741,7 @@ Emoji from AnimalService: 🐶
 ```
 
 投影された `<app-inspector>` がクジラ <code>🐳</code> を取得するのは、犬 <code>🐶</code> が `Child` のビューに属しており、投影されたコンテンツからは到達できないためです。
-クジラ <code>🐳</code> にアクセスできるのは、`<app-inspector>` が `App` のテンプレートで宣言されているため、`App` の `viewProviders` まで辿れるからです。
+<code>🐳</code>にアクセスできるのは、`<app-inspector>`が`App`のテンプレートで宣言されており、ルートの`AnimalService`まで探索できるためです。
 
 一方、`Child` のテンプレート内に直接置かれた（投影されていない）`<app-inspector>` は、犬 <code>🐶</code> を取得します。これは `<#VIEW>` の内側にあるため、超えるべき境界がないからです。
 
@@ -1013,7 +1013,7 @@ export class VillainsList {}
 - 別のコンポーネントの申告に影響を与えずに税務申告を変更できます
 - 税務申告の変更を保存するか、キャンセルする機能があります
 
-`HeroTaxReturn` に、変更を管理および復元するためのロジックがあるとします。
+`HeroTaxReturnEditor`に、変更を管理および復元するロジックがあるとします。
 これは、ヒーローの税務申告にとっては簡単なタスクです。
 現実世界では、豊富な税務申告データモデルでは、変更管理が複雑になります。
 この例のように、この管理をヘルパーサービスに委任できます。
@@ -1053,10 +1053,10 @@ export class HeroTaxReturnService {
 }
 ```
 
-以下は、 `HeroTaxReturnService` を使用する `HeroTaxReturn` です。
+以下は、`HeroTaxReturnService`を使用する`HeroTaxReturnEditor`です。
 
 ```typescript
-import {Component, input, output} from '@angular/core';
+import {Component, effect, inject, input, output} from '@angular/core';
 import {HeroTaxReturn} from './hero';
 import {HeroTaxReturnService} from './hero-tax-return.service';
 
@@ -1066,25 +1066,21 @@ import {HeroTaxReturnService} from './hero-tax-return.service';
   styleUrls: ['./hero-tax-return.css'],
   providers: [HeroTaxReturnService],
 })
-export class HeroTaxReturn {
+export class HeroTaxReturnEditor {
   message = '';
 
   close = output<void>();
 
-  get taxReturn(): HeroTaxReturn {
-    return this.heroTaxReturnService.taxReturn;
-  }
-
   taxReturn = input.required<HeroTaxReturn>();
 
+  private heroTaxReturnService = inject(HeroTaxReturnService);
+
   constructor() {
     effect(() => {
       this.heroTaxReturnService.taxReturn = this.taxReturn();
     });
   }
 
-  private heroTaxReturnService = inject(HeroTaxReturnService);
-
   onCanceled() {
     this.flashMessage('Canceled');
     this.heroTaxReturnService.restoreTaxReturn();
@@ -1106,21 +1102,21 @@ export class HeroTaxReturn {
 }
 ```
 
-_編集対象の税務申告_ は、 `input` プロパティを介して到着します。これは、ゲッターとセッターで実装されています。
-セッターは、コンポーネント自身の `HeroTaxReturnService` インスタンスを、受信した申告で初期化します。
-ゲッターは常に、そのサービスがヒーローの現在の状態であると判断したものを返します。
+*編集対象の税務申告* は、`taxReturn`シグナル入力から渡されます。
+入力が変わるたびに、`effect`がコンポーネント固有の`HeroTaxReturnService`インスタンスを新しい申告で初期化します。
+サービスのゲッターは、サービスで保持している現在の申告状態を返します。
 コンポーネントは、この税務申告を保存および復元することもサービスに要求します。
 
 これは、サービスがアプリケーション全体のシングルトンである場合に機能しません。
 すべてのコンポーネントは同じサービスインスタンスを共有し、各コンポーネントは別のヒーローに属する税務申告を上書きします。
 
-これを防ぐために、コンポーネントレベルのインジェクター `HeroTaxReturn` を構成して、コンポーネントメタデータの `providers` プロパティを使用してサービスを提供します。
+これを防ぐため、コンポーネントメタデータの`providers`プロパティを使用し、`HeroTaxReturnEditor`のコンポーネントレベルのインジェクターでサービスを提供します。
 
 ```typescript
 providers: [HeroTaxReturnService];
 ```
 
-`HeroTaxReturn` には、 `HeroTaxReturnService` の独自の提供者がいます。
+`HeroTaxReturnEditor`には、独自の`HeroTaxReturnService`プロバイダーがあります。
 覚えておいてください。すべてのコンポーネントの _インスタンス_ には、独自のインジェクターがあります。
 コンポーネントレベルでサービスを提供すると、コンポーネントの _すべての_ インスタンスは、サービスのプライベートインスタンスを1つずつ取得することが保証されます。これにより、税務申告が上書きされないようにします。
 

From 732232ff1fc2b38a9db9977942eb56355195456c Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:21 +0900
Subject: [PATCH 16/51] fix(docs): apply upstream wording changes in
 src/content/guide/forms

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

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 afa079eda..6e3394c4c 100644
--- a/adev-ja/src/content/guide/forms/reactive-forms.en.md
+++ b/adev-ja/src/content/guide/forms/reactive-forms.en.md
@@ -408,10 +408,11 @@ This is useful when the form does not use a top-level `FormGroup`, and the array
 
 ```angular-ts
 import {Component} from '@angular/core';
-import {FormArray, FormControl} from '@angular/forms';
+import {FormArray, FormControl, ReactiveFormsModule} from '@angular/forms';
 
 @Component({
   selector: 'form-array-example',
+  imports: [ReactiveFormsModule],
   template: `
     <form [formArray]="form">
       @for (control of form.controls; track $index) {
@@ -638,7 +639,7 @@ export class BlogPostEditor {
 
 ### Understanding propagation control
 
-By default `onlySelf: false` , updates cascade to parent controls, recalculating their values and validation status. Setting `onlySelf: true` isolates the update to the current control, preventing parent notification. This is useful for batch operations where you want to manually trigger the parent update once.
+By default `onlySelf: false`, updates cascade to parent controls, recalculating their values and validation status. Setting `onlySelf: true` isolates the update to the current control, preventing parent notification. This is useful for batch operations where you want to manually trigger the parent update once.
 
 ```ts
 updatePostalCodeValidator(country: string) {
diff --git a/adev-ja/src/content/guide/forms/reactive-forms.md b/adev-ja/src/content/guide/forms/reactive-forms.md
index be5394462..4269b77fd 100644
--- a/adev-ja/src/content/guide/forms/reactive-forms.md
+++ b/adev-ja/src/content/guide/forms/reactive-forms.md
@@ -408,10 +408,11 @@ export class ProfileEditor {
 
 ```angular-ts
 import {Component} from '@angular/core';
-import {FormArray, FormControl} from '@angular/forms';
+import {FormArray, FormControl, ReactiveFormsModule} from '@angular/forms';
 
 @Component({
   selector: 'form-array-example',
+  imports: [ReactiveFormsModule],
   template: `
     <form [formArray]="form">
       @for (control of form.controls; track $index) {

From 41508cbc0cf79c55e75e0052b2315d266f04db58 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:21 +0900
Subject: [PATCH 17/51] fix(docs): apply upstream wording changes in
 src/content/guide/forms/signals

---
 adev-ja/src/content/guide/forms/signals/models.en.md | 4 +---
 adev-ja/src/content/guide/forms/signals/models.md    | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

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 ff503909a..a2aa1aa2f 100644
--- a/adev-ja/src/content/guide/forms/signals/models.en.md
+++ b/adev-ja/src/content/guide/forms/signals/models.en.md
@@ -193,8 +193,7 @@ Field state provides reactive signals for each field's value, making it suitable
 
 TIP: Field state includes many more signals beyond `value()`, such as validation state (e.g., valid, invalid, errors), interaction tracking (e.g., touched, dirty), and visibility (e.g., hidden, disabled).
 
-<!-- TODO: UNCOMMENT BELOW WHEN GUIDE IS AVAILABLE -->
-<!-- See the [Field State Management guide](guide/forms/signals/field-state-management) for complete coverage. -->
+See the [Field State Management guide](guide/forms/signals/field-state-management) for complete coverage.
 
 ## Updating form models programmatically
 
@@ -425,7 +424,6 @@ Array items containing objects automatically receive tracking identities, which
 
 This guide covered creating models and updating values. Related guides explore other aspects of Signal Forms:
 
-<!-- TODO: UNCOMMENT WHEN THE GUIDES ARE AVAILABLE -->
 <docs-pill-row>
   <docs-pill href="guide/forms/signals/field-state-management" title="Field state management" />
   <docs-pill href="guide/forms/signals/validation" title="Validation" />
diff --git a/adev-ja/src/content/guide/forms/signals/models.md b/adev-ja/src/content/guide/forms/signals/models.md
index 903be700e..d6c7dc8c7 100644
--- a/adev-ja/src/content/guide/forms/signals/models.md
+++ b/adev-ja/src/content/guide/forms/signals/models.md
@@ -193,8 +193,7 @@ export class LoginComponent {
 
 TIP: フィールドの状態には、`value()`以外にも、バリデーションの状態（例: valid、invalid、errors）、インタラクションの追跡（例: touched、dirty）、可視性（例: hidden、disabled）など、さらに多くのシグナルが含まれています。
 
-<!-- TODO: UNCOMMENT BELOW WHEN GUIDE IS AVAILABLE -->
-<!-- See the [Field State Management guide](guide/forms/signals/field-state-management) for complete coverage. -->
+詳しくは、[フィールド状態管理ガイド](guide/forms/signals/field-state-management)を参照してください。
 
 ## フォームモデルをプログラム的に更新する {#updating-form-models-programmatically}
 
@@ -425,7 +424,6 @@ orderForm.items[0].quantity; // FieldTree<number>
 
 このガイドでは、モデルの作成と値の更新について説明しました。関連ガイドでは、シグナルフォームの他の側面について探求します:
 
-<!-- TODO: UNCOMMENT WHEN THE GUIDES ARE AVAILABLE -->
 <docs-pill-row>
   <docs-pill href="guide/forms/signals/field-state-management" title="Field state management" />
   <docs-pill href="guide/forms/signals/validation" title="Validation" />

From 2a33adb6b65299435a84387c7b7c35d0caf989ee Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:22 +0900
Subject: [PATCH 18/51] fix(docs): retranslate updated sections in
 src/content/guide/forms/signals

---
 .../signals/field-state-management.en.md      | 26 ++++++++++++++++---
 .../forms/signals/field-state-management.md   | 26 ++++++++++++++++---
 2 files changed, 44 insertions(+), 8 deletions(-)

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 405c6213b..9ff769ab1 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
@@ -108,7 +108,7 @@ When checking validity in code, use `invalid()` instead of `!valid()` if you wan
 
 ### Reading validation errors
 
-Access the array of validation errors with `errors()`. Each error object contains:
+Access the array of validation errors with `errors()`, or an individual error with `getError()`. Each error object contains:
 
 | Property    | Description                                                     |
 | ----------- | --------------------------------------------------------------- |
@@ -118,7 +118,7 @@ Access the array of validation errors with `errors()`. Each error object contain
 
 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.
 
-Here's an example of how to display errors in your template:
+Here's an example of how to display errors in your template by an array of validation errors:
 
 ```angular-ts
 @Component({
@@ -138,6 +138,24 @@ Here's an example of how to display errors in your template:
 
 This approach loops through all errors for a field, displaying each error message to the user.
 
+Here's an example of how to display an error in your template with `getError()`:
+
+```angular-ts
+@Component({
+  template: `
+    <input type="email" [formField]="loginForm.email" />
+
+    @if (loginForm.email().getError('required'); as error) {
+      <div class="errors">
+        <p>{{ error.message }}</p>
+      </div>
+    }
+  `
+})
+```
+
+`getError()` accepts any string for an error's `kind`, and recognizes build-in validation error kinds (e.g., "required", "email", "minLength").
+
 ### Pending validation
 
 The `pending()` signal indicates async validation is in progress:
@@ -690,7 +708,8 @@ While field state typically updates through user interactions (typing, focusing,
 Signal Forms provides a `FormRoot` directive that simplifies form submission. It automatically prevents the default browser form submission behavior and sets the `novalidate` attribute on the `<form>` element.
 
 ```angular-ts
-import {FormField, FormRoot} from '@angular/forms/signals';
+import {FormField, FormRoot, form, required, email} from '@angular/forms/signals';
+import {Component, signal} from '@angular/core';
 
 @Component({
   imports: [FormRoot, FormField],
@@ -876,7 +895,6 @@ export class PasswordInput implements FormValueControl<string> {
 
 This guide covered validation and availability status handling, interaction tracking and field state propagation. Related guides explore other aspects of Signal Forms:
 
-<!-- TODO: UNCOMMENT WHEN THE GUIDES ARE AVAILABLE -->
 <docs-pill-row>
   <docs-pill href="guide/forms/signals/models" title="Form models" />
   <docs-pill href="guide/forms/signals/validation" title="Validation" />
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 b395fa448..d3a221422 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
@@ -108,7 +108,7 @@ export class Login {
 
 ### バリデーションエラーの読み取り {#reading-validation-errors}
 
-`errors()`でバリデーションエラーの配列にアクセスします。各エラーオブジェクトには以下が含まれます:
+`errors()`でバリデーションエラーの配列にアクセスするか、`getError()`で個々のエラーにアクセスします。各エラーオブジェクトには以下が含まれます:
 
 | プロパティ    | 説明                                                            |
 | ----------- | --------------------------------------------------------------- |
@@ -118,7 +118,7 @@ export class Login {
 
 NOTE: `message`プロパティはオプションです。バリデーターはカスタムエラーメッセージを提供できますが、指定されていない場合は、エラーの`kind`値を独自メッセージにマッピングする必要があるかもしれません。
 
-以下は、テンプレートでエラーを表示する方法の例です:
+以下は、バリデーションエラーの配列を使ってテンプレートにエラーを表示する例です:
 
 ```angular-ts
 @Component({
@@ -138,6 +138,24 @@ NOTE: `message`プロパティはオプションです。バリデーターは
 
 このアプローチでは、フィールドのすべてのエラーをループ処理し、各エラーメッセージをユーザーに表示します。
 
+以下は、`getError()`を使ってテンプレートにエラーを表示する例です:
+
+```angular-ts
+@Component({
+  template: `
+    <input type="email" [formField]="loginForm.email" />
+
+    @if (loginForm.email().getError('required'); as error) {
+      <div class="errors">
+        <p>{{ error.message }}</p>
+      </div>
+    }
+  `
+})
+```
+
+`getError()`にはエラーの`kind`を表す任意の文字列を指定できます。また、組み込みのバリデーションエラーの種類（`required`、`email`、`minLength`など）も認識します。
+
 ### 保留中のバリデーション {#pending-validation}
 
 `pending()`シグナルは、非同期バリデーションが進行中であることを示します:
@@ -690,7 +708,8 @@ export class Password {
 シグナルフォームprovides a `FormRoot` directive that simplifies form submission. It automatically prevents the default browser form submission behavior and sets the `novalidate` attribute on the `<form>` element.
 
 ```angular-ts
-import {FormField, FormRoot} from '@angular/forms/signals';
+import {FormField, FormRoot, form, required, email} from '@angular/forms/signals';
+import {Component, signal} from '@angular/core';
 
 @Component({
   imports: [FormRoot, FormField],
@@ -876,7 +895,6 @@ export class PasswordInput implements FormValueControl<string> {
 
 このガイドでは、バリデーションと可用性ステータスの処理、インタラクションの追跡、フィールド状態の伝播について説明しました。関連ガイドでは、シグナルフォームの他の側面について探求します:
 
-<!-- TODO: UNCOMMENT WHEN THE GUIDES ARE AVAILABLE -->
 <docs-pill-row>
   <docs-pill href="guide/forms/signals/models" title="Form models" />
   <docs-pill href="guide/forms/signals/validation" title="Validation" />

From acf0799d95b596ca02a3a733fc8ae86bc02b19ac Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:22 +0900
Subject: [PATCH 19/51] chore(docs): insert new upstream sections untranslated
 in src/content/guide/forms/signals

---
 .../guide/forms/signals/validation.en.md      | 48 +++++++++++++++++--
 .../content/guide/forms/signals/validation.md | 48 +++++++++++++++++--
 2 files changed, 90 insertions(+), 6 deletions(-)

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 07ef5af43..c094c0ea6 100644
--- a/adev-ja/src/content/guide/forms/signals/validation.en.md
+++ b/adev-ja/src/content/guide/forms/signals/validation.en.md
@@ -224,6 +224,49 @@ ageForm = form(this.ageModel, (schemaPath) => {
 });
 ```
 
+### minDate() and maxDate()
+
+The `minDate()` and `maxDate()` validation rules work with `Date` values, such as a field bound to `<input type="date">`. They also set the `min` and `max` attributes of that input.
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, minDate, maxDate} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-booking-form',
+  imports: [FormField],
+  template: `
+    <form novalidate>
+      <label>
+        Check-in
+        <input type="date" [formField]="bookingForm.checkIn" />
+      </label>
+    </form>
+  `,
+})
+export class BookingFormComponent {
+  bookingModel = signal<{checkIn: Date | null}>({checkIn: null});
+
+  bookingForm = form(this.bookingModel, (schemaPath) => {
+    minDate(schemaPath.checkIn, new Date('2026-06-01'), {message: 'Bookings open on June 1'});
+    maxDate(schemaPath.checkIn, new Date('2026-08-31'), {message: 'Bookings close on August 31'});
+  });
+}
+```
+
+IMPORTANT: An `<input type="date">` reads and writes `Date` values at midnight UTC, whatever the user's time zone, because that is how the browser's `valueAsDate` works. Build the limits the same way, for example with `new Date('2026-06-01')` or `new Date(Date.UTC(2026, 5, 1))`. A `Date` created from local time, such as `new Date(2026, 5, 1)` or `new Date()`, is shifted by the user's UTC offset. Depending on the time zone, the `min` or `max` attribute can then be off by a day, and the limit date itself can be rejected.
+
+To require a date that is not before today, use today's calendar date in the user's time zone, expressed at midnight UTC:
+
+```ts
+const now = new Date();
+const today = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+
+minDate(schemaPath.checkIn, today, {message: 'Check-in cannot be in the past'});
+```
+
+Passing `new Date()` directly can reject today's date, because the value picked in the input is midnight UTC, which is earlier than the current time. This happens in UTC and in the time zones behind it.
+
 ### minLength() and maxLength()
 
 The `minLength()` and `maxLength()` validation rules work with strings and arrays:
@@ -360,9 +403,7 @@ export class OrderComponent {
 
 When validation rules fail, they produce error objects that describe what went wrong. Understanding error structure helps you provide clear feedback to users.
 
-<!-- TODO: Uncomment when field state management guide is published
-
-NOTE: This section covers the errors that validation rules produce. For displaying and using validation errors in your UI, see the [Field State Management guide](guide/forms/signals/field-state-management). -->
+NOTE: This section covers the errors that validation rules produce. For displaying and using validation errors in your UI, see the [Field State Management guide](guide/forms/signals/field-state-management).
 
 ### Error structure
 
@@ -735,6 +776,7 @@ Signal Forms have built-in support for libraries that conform to [Standard Schem
 
 ```ts
 import {form, validateStandardSchema} from '@angular/forms/signals';
+import {signal} from '@angular/core';
 import * as z from 'zod';
 
 // Define your schema
diff --git a/adev-ja/src/content/guide/forms/signals/validation.md b/adev-ja/src/content/guide/forms/signals/validation.md
index c9ee8b4da..e82906060 100644
--- a/adev-ja/src/content/guide/forms/signals/validation.md
+++ b/adev-ja/src/content/guide/forms/signals/validation.md
@@ -224,6 +224,49 @@ ageForm = form(this.ageModel, (schemaPath) => {
 });
 ```
 
+### minDate() and maxDate()
+
+The `minDate()` and `maxDate()` validation rules work with `Date` values, such as a field bound to `<input type="date">`. They also set the `min` and `max` attributes of that input.
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, minDate, maxDate} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-booking-form',
+  imports: [FormField],
+  template: `
+    <form novalidate>
+      <label>
+        Check-in
+        <input type="date" [formField]="bookingForm.checkIn" />
+      </label>
+    </form>
+  `,
+})
+export class BookingFormComponent {
+  bookingModel = signal<{checkIn: Date | null}>({checkIn: null});
+
+  bookingForm = form(this.bookingModel, (schemaPath) => {
+    minDate(schemaPath.checkIn, new Date('2026-06-01'), {message: 'Bookings open on June 1'});
+    maxDate(schemaPath.checkIn, new Date('2026-08-31'), {message: 'Bookings close on August 31'});
+  });
+}
+```
+
+IMPORTANT: An `<input type="date">` reads and writes `Date` values at midnight UTC, whatever the user's time zone, because that is how the browser's `valueAsDate` works. Build the limits the same way, for example with `new Date('2026-06-01')` or `new Date(Date.UTC(2026, 5, 1))`. A `Date` created from local time, such as `new Date(2026, 5, 1)` or `new Date()`, is shifted by the user's UTC offset. Depending on the time zone, the `min` or `max` attribute can then be off by a day, and the limit date itself can be rejected.
+
+To require a date that is not before today, use today's calendar date in the user's time zone, expressed at midnight UTC:
+
+```ts
+const now = new Date();
+const today = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+
+minDate(schemaPath.checkIn, today, {message: 'Check-in cannot be in the past'});
+```
+
+Passing `new Date()` directly can reject today's date, because the value picked in the input is midnight UTC, which is earlier than the current time. This happens in UTC and in the time zones behind it.
+
 ### minLength()とmaxLength() {#minlength-and-maxlength}
 
 `minLength()`と`maxLength()`バリデーションルールは、文字列と配列に対して機能します:
@@ -360,9 +403,7 @@ export class OrderComponent {
 
 バリデーションルールが失敗すると、何が問題だったかを説明するエラーオブジェクトが生成されます。エラーの構造を理解することは、ユーザーに明確なフィードバックを提供するのに役立ちます。
 
-<!-- TODO: フィールド状態管理ガイドが公開されたらコメントを解除する
-
-NOTE: このセクションでは、バリデーションルールが生成するエラーについて説明します。UIでバリデーションエラーを表示して使用する方法については、[フィールド状態管理ガイド](guide/forms/signals/field-state-management)を参照してください。 -->
+NOTE: このセクションでは、バリデーションルールが生成するエラーについて説明します。UIでバリデーションエラーを表示して使用する方法については、[フィールド状態管理ガイド](guide/forms/signals/field-state-management)を参照してください。
 
 ### エラーの構造 {#error-structure}
 
@@ -735,6 +776,7 @@ export class UsernameFormComponent {
 
 ```ts
 import {form, validateStandardSchema} from '@angular/forms/signals';
+import {signal} from '@angular/core';
 import * as z from 'zod';
 
 // スキーマを定義

From 39cb3319feb2654ee0384da598d1b21678ed65ea Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:23 +0900
Subject: [PATCH 20/51] fix(docs): mirror upstream code and link changes in
 src/content/guide/http

---
 adev-ja/src/content/guide/http/making-requests.en.md | 2 ++
 adev-ja/src/content/guide/http/making-requests.md    | 2 ++
 adev-ja/src/content/guide/http/testing.en.md         | 5 +++++
 adev-ja/src/content/guide/http/testing.md            | 5 +++++
 4 files changed, 14 insertions(+)

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 81c800b11..457babf1c 100644
--- a/adev-ja/src/content/guide/http/making-requests.en.md
+++ b/adev-ja/src/content/guide/http/making-requests.en.md
@@ -655,6 +655,8 @@ Within a component, you can combine `@if` with the `async` pipe to render the UI
 
 ```angular-ts
 import {AsyncPipe} from '@angular/common';
+import {Component, input, inject, effect} from '@angular/core';
+import {Observable} from 'rxjs';
 
 @Component({
   imports: [AsyncPipe],
diff --git a/adev-ja/src/content/guide/http/making-requests.md b/adev-ja/src/content/guide/http/making-requests.md
index ba3e0854b..f8df3e304 100644
--- a/adev-ja/src/content/guide/http/making-requests.md
+++ b/adev-ja/src/content/guide/http/making-requests.md
@@ -655,6 +655,8 @@ export class UserService {
 
 ```angular-ts
 import {AsyncPipe} from '@angular/common';
+import {Component, input, inject, effect} from '@angular/core';
+import {Observable} from 'rxjs';
 
 @Component({
   imports: [AsyncPipe],
diff --git a/adev-ja/src/content/guide/http/testing.en.md b/adev-ja/src/content/guide/http/testing.en.md
index 902ab08ba..3bc46ba97 100644
--- a/adev-ja/src/content/guide/http/testing.en.md
+++ b/adev-ja/src/content/guide/http/testing.en.md
@@ -186,6 +186,11 @@ The `HttpTestingController` can retrieve the request instance that can then be i
 
 ```ts
 const service = TestBed.inject(AuthService);
+const http = TestBed.inject(HttpClient);
+
+// Make an HTTP request.
+const response = firstValueFrom(http.get('/api/config'));
+
 const req = httpTesting.expectOne('/api/config');
 
 expect(req.request.headers.get('X-Authentication-Token')).toEqual(service.getAuthToken());
diff --git a/adev-ja/src/content/guide/http/testing.md b/adev-ja/src/content/guide/http/testing.md
index bf16da47e..8bff569ba 100644
--- a/adev-ja/src/content/guide/http/testing.md
+++ b/adev-ja/src/content/guide/http/testing.md
@@ -186,6 +186,11 @@ TestBed.configureTestingModule({
 
 ```ts
 const service = TestBed.inject(AuthService);
+const http = TestBed.inject(HttpClient);
+
+// Make an HTTP request.
+const response = firstValueFrom(http.get('/api/config'));
+
 const req = httpTesting.expectOne('/api/config');
 
 expect(req.request.headers.get('X-Authentication-Token')).toEqual(service.getAuthToken());

From 0f9ea799c3b44bd26d3f84c5b93d884e86c397b2 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:23 +0900
Subject: [PATCH 21/51] fix(docs): retranslate updated sections in
 src/content/guide/http

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

diff --git a/adev-ja/src/content/guide/http/setup.en.md b/adev-ja/src/content/guide/http/setup.en.md
index 378cf849e..a05fc21a1 100644
--- a/adev-ja/src/content/guide/http/setup.en.md
+++ b/adev-ja/src/content/guide/http/setup.en.md
@@ -74,6 +74,12 @@ CRITICAL: You must configure an instance of `HttpClient` above the current injec
 
 ### `withJsonpSupport()`
 
+<docs-callout critical title="JSONP is deprecated">
+
+`withJsonpSupport`, `HttpClientJsonpModule`, and the `.jsonp()` method on `HttpClient` are deprecated because JSONP can cause cross-site scripting (XSS) vulnerabilities. Use standard HTTP requests with [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) instead.
+
+</docs-callout>
+
 Including `withJsonpSupport` enables the `.jsonp()` method on `HttpClient`, which makes a GET request via the [JSONP convention](https://en.wikipedia.org/wiki/JSONP) for cross-domain loading of data.
 
 HELPFUL: Prefer using [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) to make cross-domain requests instead of JSONP when possible.
@@ -95,10 +101,12 @@ This table lists the NgModules available from `@angular/common/http` and how the
 | **NgModule**                            | `provideHttpClient()` equivalent                         |
 | --------------------------------------- | -------------------------------------------------------- |
 | `HttpClientModule`                      | `provideHttpClient(withInterceptorsFromDi(), withXhr())` |
-| `HttpClientJsonpModule`                 | `withJsonpSupport()`                                     |
+| `HttpClientJsonpModule` (deprecated)    | `withJsonpSupport()` (deprecated)                        |
 | `HttpClientXsrfModule.withOptions(...)` | `withXsrfConfiguration(...)`                             |
 | `HttpClientXsrfModule.disable()`        | `withNoXsrfProtection()`                                 |
 
+NOTE: `HttpClientModule` and `HttpClientXsrfModule` are also deprecated. Use `provideHttpClient` with the corresponding features instead.
+
 <docs-callout important title="Use caution when using HttpClientModule in multiple injectors">
 When `HttpClientModule` is present in multiple injectors, the behavior of interceptors is poorly defined and depends on the exact options and provider/import ordering.
 
diff --git a/adev-ja/src/content/guide/http/setup.md b/adev-ja/src/content/guide/http/setup.md
index 1438a932c..11421ff27 100644
--- a/adev-ja/src/content/guide/http/setup.md
+++ b/adev-ja/src/content/guide/http/setup.md
@@ -74,6 +74,12 @@ CRITICAL: 現在のインジェクターよりも上の `HttpClient` のイン
 
 ### `withJsonpSupport()`
 
+<docs-callout critical title="JSONPは非推奨">
+
+`withJsonpSupport`、`HttpClientJsonpModule`、`HttpClient`の`.jsonp()`メソッドは、JSONPにクロスサイトスクリプティング（XSS）の脆弱性があるため非推奨です。代わりに[CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS)を使用した通常のHTTPリクエストを利用してください。
+
+</docs-callout>
+
 `withJsonpSupport` を含めると、`HttpClient` の `.jsonp()` メソッドが有効になり、[JSONP 規約](https://en.wikipedia.org/wiki/JSONP) を介してGETリクエストを行い、データのクロスドメインロードを行います。
 
 HELPFUL: 可能であれば、JSONPの代わりに [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) を使ってクロスドメインリクエストを行うことをお勧めします。
@@ -95,10 +101,12 @@ HELPFUL: 可能であれば、JSONPの代わりに [CORS](https://developer.mozi
 | **NgModule**                            | `provideHttpClient()` に相当する                         |
 | --------------------------------------- | -------------------------------------------------------- |
 | `HttpClientModule`                      | `provideHttpClient(withInterceptorsFromDi(), withXhr())` |
-| `HttpClientJsonpModule`                 | `withJsonpSupport()`                                     |
+| `HttpClientJsonpModule`（非推奨）    | `withJsonpSupport()`（非推奨）                        |
 | `HttpClientXsrfModule.withOptions(...)` | `withXsrfConfiguration(...)`                             |
 | `HttpClientXsrfModule.disable()`        | `withNoXsrfProtection()`                                 |
 
+NOTE: `HttpClientModule`と`HttpClientXsrfModule`も非推奨です。代わりに`provideHttpClient`と対応する機能を使用してください。
+
 <docs-callout important title="複数のインジェクターで HttpClientModule を使用する場合、注意してください。">
 `HttpClientModule` が複数のインジェクターに存在する場合、インターセプターの動作は明確に定義されておらず、オプションやプロバイダー/インポートの順序に依存します。
 

From a47571b45131bb3a0d591bc18f52bdbbe6e82670 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:24 +0900
Subject: [PATCH 22/51] fix(docs): mirror upstream code and link changes in
 src/content/guide/routing

---
 adev-ja/src/content/guide/routing/define-routes.en.md     | 2 ++
 adev-ja/src/content/guide/routing/define-routes.md        | 2 ++
 .../src/content/guide/routing/lifecycle-and-events.en.md  | 8 +++++---
 adev-ja/src/content/guide/routing/lifecycle-and-events.md | 8 +++++---
 .../src/content/guide/routing/navigate-to-routes.en.md    | 3 +++
 adev-ja/src/content/guide/routing/navigate-to-routes.md   | 3 +++
 adev-ja/src/content/guide/routing/read-route-state.en.md  | 8 +++++---
 adev-ja/src/content/guide/routing/read-route-state.md     | 8 +++++---
 .../content/guide/routing/show-routes-with-outlets.en.md  | 2 +-
 .../src/content/guide/routing/show-routes-with-outlets.md | 2 +-
 adev-ja/src/content/guide/routing/testing.en.md           | 2 +-
 adev-ja/src/content/guide/routing/testing.md              | 2 +-
 12 files changed, 34 insertions(+), 16 deletions(-)

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 ba5fbe898..10b1b09dd 100644
--- a/adev-ja/src/content/guide/routing/define-routes.en.md
+++ b/adev-ja/src/content/guide/routing/define-routes.en.md
@@ -127,6 +127,7 @@ 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 {Routes} from '@angular/router';
 import {Home} from './home/home';
 import {UserProfile} from './user-profile';
 import {NotFound} from './not-found';
@@ -171,6 +172,7 @@ If a user visits `/users/new`, Angular router would go through the following ste
 You can define a route that redirects to another route instead of rendering a component:
 
 ```ts
+import {Routes} from '@angular/router';
 import {Blog} from './home/blog';
 
 const routes: Routes = [
diff --git a/adev-ja/src/content/guide/routing/define-routes.md b/adev-ja/src/content/guide/routing/define-routes.md
index 3a2b60961..0ae080478 100644
--- a/adev-ja/src/content/guide/routing/define-routes.md
+++ b/adev-ja/src/content/guide/routing/define-routes.md
@@ -127,6 +127,7 @@ const routes: Routes = [
 一般的な例は、ページが見つかりませんコンポーネントの定義です。
 
 ```ts
+import {Routes} from '@angular/router';
 import {Home} from './home/home';
 import {UserProfile} from './user-profile';
 import {NotFound} from './not-found';
@@ -171,6 +172,7 @@ const routes: Routes = [
 コンポーネントをレンダリングする代わりに、別のルートにリダイレクトするルートを定義できます。
 
 ```ts
+import {Routes} from '@angular/router';
 import {Blog} from './home/blog';
 
 const routes: Routes = [
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 227355884..c8e8b7fd0 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
@@ -65,7 +65,8 @@ Debugging router navigation issues can be challenging without visibility into th
 When you need to inspect a Router event sequence, you can enable logging for internal navigation events for debugging. You can configure this by passing a configuration option (`withDebugTracing()`) that enables detailed console logging of all routing events.
 
 ```ts
-import {provideRouter, withDebugTracing} from '@angular/router';
+import {provideRouter, Routes, withDebugTracing} from '@angular/router';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 const appRoutes: Routes = [];
 bootstrapApplication(App, {
@@ -84,11 +85,12 @@ 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, computed, inject} from '@angular/core';
+import {Router, RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-root',
+  imports: [RouterOutlet],
   template: `
     @if (isNavigating()) {
       <div class="loading-bar">Loading...</div>
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 6a16723ee..1a422e41f 100644
--- a/adev-ja/src/content/guide/routing/lifecycle-and-events.md
+++ b/adev-ja/src/content/guide/routing/lifecycle-and-events.md
@@ -65,7 +65,8 @@ NOTE: `@angular/router`の[`Event`](api/router/Event)型は、通常のグロー
 ルーターイベントシーケンスを検査する必要がある場合、デバッグのために内部ナビゲーションイベントのログ記録を有効にできます。これは、すべてのルーティングイベントの詳細なコンソールログ記録を有効にする設定オプション（`withDebugTracing()`）を渡すことで設定できます。
 
 ```ts
-import {provideRouter, withDebugTracing} from '@angular/router';
+import {provideRouter, Routes, withDebugTracing} from '@angular/router';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 const appRoutes: Routes = [];
 bootstrapApplication(App, {
@@ -84,11 +85,12 @@ bootstrapApplication(App, {
 ナビゲーション中にローディングインジケーターを表示します。
 
 ```angular-ts
-import {Component, inject} from '@angular/core';
-import {Router} from '@angular/router';
+import {Component, computed, inject} from '@angular/core';
+import {Router, RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-root',
+  imports: [RouterOutlet],
   template: `
     @if (isNavigating()) {
       <div class="loading-bar">Loading...</div>
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 7cfa5fc1b..48057fe1e 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
@@ -8,6 +8,7 @@ Instead of using regular anchor elements `<a>` with an `href` attribute, you add
 
 ```angular-ts
 import {RouterLink} from '@angular/router';
+import {Component} from '@angular/core';
 
 @Component({
   template: `
@@ -80,6 +81,7 @@ You can use the `router.navigate()` method to programmatically navigate between
 
 ```angular-ts
 import {Router} from '@angular/router';
+import {Component, inject} from '@angular/core';
 
 @Component({
   selector: 'app-dashboard',
@@ -112,6 +114,7 @@ You can also build dynamic navigation paths relative to your component’s locat
 
 ```angular-ts
 import {Router, ActivatedRoute} from '@angular/router';
+import {Component, inject} from '@angular/core';
 
 @Component({
   selector: 'app-user-detail',
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 00904ceb2..b57cd2483 100644
--- a/adev-ja/src/content/guide/routing/navigate-to-routes.md
+++ b/adev-ja/src/content/guide/routing/navigate-to-routes.md
@@ -8,6 +8,7 @@
 
 ```angular-ts
 import {RouterLink} from '@angular/router';
+import {Component} from '@angular/core';
 
 @Component({
   template: `
@@ -80,6 +81,7 @@ HELPFUL: 文字列を渡すのが、相対URLを定義する最も一般的な
 
 ```angular-ts
 import {Router} from '@angular/router';
+import {Component, inject} from '@angular/core';
 
 @Component({
   selector: 'app-dashboard',
@@ -112,6 +114,7 @@ export class AppDashboard {
 
 ```angular-ts
 import {Router, ActivatedRoute} from '@angular/router';
+import {Component, inject} from '@angular/core';
 
 @Component({
   selector: 'app-user-detail',
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 0cbb458ed..b23421fbd 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,7 +7,7 @@ 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 {Component, inject} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 
 @Component({
@@ -43,11 +43,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 {Component, inject} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component(/* ... */)
 export class UserProfile {
-  readonly userId: string;
+  readonly userId: string | null;
   private route = inject(ActivatedRoute);
 
   constructor() {
@@ -138,6 +139,7 @@ You can access query parameters with `route.queryParams`.
 Here is an example of a `ProductList` that updates the query parameters that affect how it displays a list of products:
 
 ```angular-ts
+import {Component, inject} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
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 55afc57cc..f26f76df6 100644
--- a/adev-ja/src/content/guide/routing/read-route-state.md
+++ b/adev-ja/src/content/guide/routing/read-route-state.md
@@ -7,7 +7,7 @@ Angularルーターを使用すると、ルートに関連付けられた情報
 `ActivatedRoute`は、現在のルートに関連付けられたすべての情報を提供する`@angular/router`からのサービスです。
 
 ```angular-ts
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 
 @Component({
@@ -43,11 +43,12 @@ export class Product {
 ルートスナップショットにアクセスする方法の例を次に示します。
 
 ```angular-ts
-import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router';
+import {Component, inject} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component(/* ... */)
 export class UserProfile {
-  readonly userId: string;
+  readonly userId: string | null;
   private route = inject(ActivatedRoute);
 
   constructor() {
@@ -138,6 +139,7 @@ router.navigate(['/products'], {
 次に、製品リストの表示方法に影響を与えるクエリパラメーターを更新する`ProductList`の例を示します。
 
 ```angular-ts
+import {Component, inject} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
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 a8727bbe1..b0e18aa25 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
@@ -188,7 +188,7 @@ 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 {Component, inject, Signal} from '@angular/core';
 import {ROUTER_OUTLET_DATA} from '@angular/router';
 
 @Component({
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 5c2c5d45c..24fae9d41 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
@@ -188,7 +188,7 @@ export class Dashboard {}
 ルーティングされたコンポーネントは、`ROUTER_OUTLET_DATA`を使用して提供されたアウトレットデータをインジェクトできます。
 
 ```angular-ts
-import {Component, inject} from '@angular/core';
+import {Component, inject, Signal} from '@angular/core';
 import {ROUTER_OUTLET_DATA} from '@angular/router';
 
 @Component({
diff --git a/adev-ja/src/content/guide/routing/testing.en.md b/adev-ja/src/content/guide/routing/testing.en.md
index 6c6b63819..ab0fabbc0 100644
--- a/adev-ja/src/content/guide/routing/testing.en.md
+++ b/adev-ja/src/content/guide/routing/testing.en.md
@@ -59,7 +59,7 @@ 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 {header: 'auth.guard.spec.ts'}
-import {vi, type Mocked} from 'vitest';
+import {describe, expect, it, vi, type Mocked} from 'vitest';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideRouter, Router} from '@angular/router';
 import {authGuard} from './auth.guard';
diff --git a/adev-ja/src/content/guide/routing/testing.md b/adev-ja/src/content/guide/routing/testing.md
index 55f8cc136..6e0c1a62c 100644
--- a/adev-ja/src/content/guide/routing/testing.md
+++ b/adev-ja/src/content/guide/routing/testing.md
@@ -59,7 +59,7 @@ export class UserProfile {
 以下の例は、認証されたユーザーのナビゲーションを許可し、認証されていないユーザーをログインページにリダイレクトする`authGuard`をテストします。
 
 ```ts {header: 'auth.guard.spec.ts'}
-import {vi, type Mocked} from 'vitest';
+import {describe, expect, it, vi, type Mocked} from 'vitest';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideRouter, Router} from '@angular/router';
 import {authGuard} from './auth.guard';

From ab587305f3045d27f59909008c9d35b63e7e67d4 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:24 +0900
Subject: [PATCH 23/51] fix(docs): apply upstream wording changes in
 src/content/guide/routing

---
 .../content/guide/routing/data-fetching-with-resources.en.md | 5 +++++
 .../content/guide/routing/data-fetching-with-resources.md    | 5 +++++
 adev-ja/src/content/guide/routing/redirecting-routes.en.md   | 1 +
 adev-ja/src/content/guide/routing/redirecting-routes.md      | 1 +
 4 files changed, 12 insertions(+)

diff --git a/adev-ja/src/content/guide/routing/data-fetching-with-resources.en.md b/adev-ja/src/content/guide/routing/data-fetching-with-resources.en.md
index 208290d15..ed0f8e659 100644
--- a/adev-ja/src/content/guide/routing/data-fetching-with-resources.en.md
+++ b/adev-ja/src/content/guide/routing/data-fetching-with-resources.en.md
@@ -1,5 +1,7 @@
 # Data fetching with resources
 
+IMPORTANT: Route resources are in [developer preview](reference/releases#developer-preview).
+
 The Angular Router integrates with Angular signals through the `resources` route configuration. This allows you to fetch data reactively using `Resource` APIs.
 
 ## Why use route resources?
@@ -17,6 +19,7 @@ To enable route resources, provide `withRouterResources()` to your router config
 
 ```ts
 import {provideRouter, withComponentInputBinding, withRouterResources} from '@angular/router';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [provideRouter(routes, withComponentInputBinding(), withRouterResources())],
@@ -91,11 +94,13 @@ The `resources` function can also be `async` and return a `Promise` if you need
 
 ```ts
 resources: async (ctx) => {
+  const injector = inject(Injector);
   const {fetchUserData} = await import('./user-api');
   return {
     user: resource({
       params: () => ctx.params()['id'],
       loader: ({params: id}) => fetchUserData(id),
+      injector,
     }),
   };
 },
diff --git a/adev-ja/src/content/guide/routing/data-fetching-with-resources.md b/adev-ja/src/content/guide/routing/data-fetching-with-resources.md
index 9ac7047cc..a2d06c656 100644
--- a/adev-ja/src/content/guide/routing/data-fetching-with-resources.md
+++ b/adev-ja/src/content/guide/routing/data-fetching-with-resources.md
@@ -1,5 +1,7 @@
 # リソースを使用したデータ取得
 
+IMPORTANT: ルートリソースは[開発者プレビュー](reference/releases#developer-preview)です。
+
 Angularルーターは、`resources`ルート設定を通じてAngularシグナルと統合します。これにより、`Resource`APIを使用してリアクティブにデータを取得できます。
 
 ## ルートリソースを使用する理由 {#why-use-route-resources}
@@ -17,6 +19,7 @@ Angularルーターは、`resources`ルート設定を通じてAngularシグナ
 
 ```ts
 import {provideRouter, withComponentInputBinding, withRouterResources} from '@angular/router';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [provideRouter(routes, withComponentInputBinding(), withRouterResources())],
@@ -91,11 +94,13 @@ NOTE: `rxResource`は`loader`の代わりに`stream`プロパティを使用し
 
 ```ts
 resources: async (ctx) => {
+  const injector = inject(Injector);
   const {fetchUserData} = await import('./user-api');
   return {
     user: resource({
       params: () => ctx.params()['id'],
       loader: ({params: id}) => fetchUserData(id),
+      injector,
     }),
   };
 },
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 844367272..797b4a559 100644
--- a/adev-ja/src/content/guide/routing/redirecting-routes.en.md
+++ b/adev-ja/src/content/guide/routing/redirecting-routes.en.md
@@ -103,6 +103,7 @@ import {Menu} from './menu';
 export const routes: Routes = [
   {
     path: 'restaurant/:location/menu',
+    pathMatch: 'full',
     redirectTo: (activatedRouteSnapshot) => {
       const location = activatedRouteSnapshot.params['location'];
       const currentHour = new Date().getHours();
diff --git a/adev-ja/src/content/guide/routing/redirecting-routes.md b/adev-ja/src/content/guide/routing/redirecting-routes.md
index cb5e73661..8dc419bf3 100644
--- a/adev-ja/src/content/guide/routing/redirecting-routes.md
+++ b/adev-ja/src/content/guide/routing/redirecting-routes.md
@@ -103,6 +103,7 @@ import {Menu} from './menu';
 export const routes: Routes = [
   {
     path: 'restaurant/:location/menu',
+    pathMatch: 'full',
     redirectTo: (activatedRouteSnapshot) => {
       const location = activatedRouteSnapshot.params['location'];
       const currentHour = new Date().getHours();

From 30b543a4904a4b17afd7dd6bc0841d9c070c5d7a Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:24 +0900
Subject: [PATCH 24/51] fix(docs): retranslate updated sections in
 src/content/guide/routing

---
 .../routing/customizing-route-behavior.en.md     | 10 +++++++---
 .../guide/routing/customizing-route-behavior.md  | 10 +++++++---
 .../content/guide/routing/data-resolvers.en.md   | 16 +++++++++-------
 .../src/content/guide/routing/data-resolvers.md  | 16 +++++++++-------
 .../src/content/guide/routing/route-guards.en.md |  8 ++++++--
 .../src/content/guide/routing/route-guards.md    |  8 ++++++--
 .../routing/route-transition-animations.en.md    | 14 ++++++++++++++
 .../guide/routing/route-transition-animations.md | 14 ++++++++++++++
 8 files changed, 72 insertions(+), 24 deletions(-)

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 61c6cdb6b..7709afb74 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
@@ -135,6 +135,7 @@ You can configure the `Location` service to force a trailing slash on all URLs w
 
 ```ts
 import {LocationStrategy, TrailingSlashPathLocationStrategy} from '@angular/common';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [{provide: LocationStrategy, useClass: TrailingSlashPathLocationStrategy}],
@@ -145,6 +146,7 @@ You can also force the `Location` service to never have a trailing slash on all
 
 ```ts
 import {LocationStrategy, NoTrailingSlashPathLocationStrategy} from '@angular/common';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [{provide: LocationStrategy, useClass: NoTrailingSlashPathLocationStrategy}],
@@ -273,6 +275,7 @@ To enable automatic cleanup of unused route injectors, you can use the `withAuto
 
 ```ts
 import {provideRouter, withAutoCleanupInjectors} from '@angular/router';
+import {ApplicationConfig} from '@angular/core';
 
 export const appConfig: ApplicationConfig = {
   providers: [provideRouter(routes, withAutoCleanupInjectors())],
@@ -304,7 +307,9 @@ export class CustomRouteReuseStrategy implements RouteReuseStrategy {
   private readonly handles = new Map<Route, DetachedRouteHandle>();
 
   store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null) {
-    this.handles.set(route.routeConfig!, handle);
+    if (handle) {
+      this.handles.set(route.routeConfig!, handle);
+    }
   }
 
   retrieveStoredRouteHandles(): DetachedRouteHandle[] {
@@ -552,8 +557,7 @@ 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, resource} from '@angular/core';
 
 @Component({
   selector: 'app-documentation',
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 77d65342f..d688382bf 100644
--- a/adev-ja/src/content/guide/routing/customizing-route-behavior.md
+++ b/adev-ja/src/content/guide/routing/customizing-route-behavior.md
@@ -135,6 +135,7 @@ provideRouter(routes, withRouterConfig({defaultQueryParamsHandling: 'merge'}));
 
 ```ts
 import {LocationStrategy, TrailingSlashPathLocationStrategy} from '@angular/common';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [{provide: LocationStrategy, useClass: TrailingSlashPathLocationStrategy}],
@@ -145,6 +146,7 @@ bootstrapApplication(App, {
 
 ```ts
 import {LocationStrategy, NoTrailingSlashPathLocationStrategy} from '@angular/common';
+import {bootstrapApplication} from '@angular/platform-browser';
 
 bootstrapApplication(App, {
   providers: [{provide: LocationStrategy, useClass: NoTrailingSlashPathLocationStrategy}],
@@ -273,6 +275,7 @@ NOTE: `canMatch`ガードが関与している場合、重複したエントリ
 
 ```ts
 import {provideRouter, withAutoCleanupInjectors} from '@angular/router';
+import {ApplicationConfig} from '@angular/core';
 
 export const appConfig: ApplicationConfig = {
   providers: [provideRouter(routes, withAutoCleanupInjectors())],
@@ -304,7 +307,9 @@ export class CustomRouteReuseStrategy implements RouteReuseStrategy {
   private readonly handles = new Map<Route, DetachedRouteHandle>();
 
   store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null) {
-    this.handles.set(route.routeConfig!, handle);
+    if (handle) {
+      this.handles.set(route.routeConfig!, handle);
+    }
   }
 
   retrieveStoredRouteHandles(): DetachedRouteHandle[] {
@@ -552,8 +557,7 @@ export const routes: Routes = [
 コンポーネントは、ルート入力を介して抽出されたパラメーターを受け取ります:
 
 ```angular-ts
-import {Component, input, inject} from '@angular/core';
-import {resource} from '@angular/core';
+import {Component, input, inject, resource} from '@angular/core';
 
 @Component({
   selector: 'app-documentation',
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 47118819c..831dec66d 100644
--- a/adev-ja/src/content/guide/routing/data-resolvers.en.md
+++ b/adev-ja/src/content/guide/routing/data-resolvers.en.md
@@ -77,7 +77,7 @@ You can learn more about the [`resolve` configuration in the API docs](api/route
 
 ### Using ActivatedRoute
 
-You can access the resolved data in a component by accessing the snapshot data from the `ActivatedRoute` using the `signal` function:
+You can access the resolved data in a component by converting the `data` observable from the `ActivatedRoute` into a signal using the `toSignal` function:
 
 ```angular-ts
 import {Component, inject, computed} from '@angular/core';
@@ -94,7 +94,7 @@ import type {User, Settings} from './types';
 })
 export class UserDetail {
   private route = inject(ActivatedRoute);
-  private data = toSignal(this.route.data);
+  private data = toSignal(this.route.data, {requireSync: true});
   user = computed(() => this.data().user as User);
   settings = computed(() => this.data().settings as Settings);
 }
@@ -162,8 +162,8 @@ bootstrapApplication(App, {
       withNavigationErrorHandler((error) => {
         const router = inject(Router);
 
-        if (error?.message) {
-          console.error('Navigation error occurred:', error.message);
+        if (error.error?.message) {
+          console.error('Navigation error occurred:', error.error.message);
         }
 
         router.navigate(['/error']);
@@ -190,12 +190,13 @@ You can also handle resolver errors by subscribing to router events and listenin
 
 ```angular-ts
 import {Component, inject, signal} from '@angular/core';
-import {Router, NavigationError} from '@angular/router';
+import {Router, NavigationError, RouterOutlet} from '@angular/router';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {map} from 'rxjs';
 
 @Component({
   selector: 'app-root',
+  imports: [RouterOutlet],
   template: `
     @if (errorMessage()) {
       <div class="error-banner">
@@ -280,11 +281,12 @@ TIP: To avoid blocking navigation and render components immediately with skeleto
 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, computed, inject} from '@angular/core';
+import {Router, RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-root',
+  imports: [RouterOutlet],
   template: `
     @if (isNavigating()) {
       <div class="loading-bar">Loading...</div>
diff --git a/adev-ja/src/content/guide/routing/data-resolvers.md b/adev-ja/src/content/guide/routing/data-resolvers.md
index 3751f8035..fcaa98f27 100644
--- a/adev-ja/src/content/guide/routing/data-resolvers.md
+++ b/adev-ja/src/content/guide/routing/data-resolvers.md
@@ -77,7 +77,7 @@ export const routes: Routes = [
 
 ### ActivatedRouteを使用する {#using-activatedroute}
 
-`signal`関数を使用して`ActivatedRoute`からスナップショットデータにアクセスすることで、コンポーネントで解決済みデータにアクセスできます。
+`ActivatedRoute`の`data` Observableを`toSignal`関数でシグナルに変換すると、コンポーネントから解決済みデータにアクセスできます。
 
 ```angular-ts
 import {Component, inject, computed} from '@angular/core';
@@ -94,7 +94,7 @@ import type {User, Settings} from './types';
 })
 export class UserDetail {
   private route = inject(ActivatedRoute);
-  private data = toSignal(this.route.data);
+  private data = toSignal(this.route.data, {requireSync: true});
   user = computed(() => this.data().user as User);
   settings = computed(() => this.data().settings as Settings);
 }
@@ -162,8 +162,8 @@ bootstrapApplication(App, {
       withNavigationErrorHandler((error) => {
         const router = inject(Router);
 
-        if (error?.message) {
-          console.error('Navigation error occurred:', error.message);
+        if (error.error?.message) {
+          console.error('Navigation error occurred:', error.error.message);
         }
 
         router.navigate(['/error']);
@@ -190,12 +190,13 @@ export const userResolver: ResolveFn<User> = (route) => {
 
 ```angular-ts
 import {Component, inject, signal} from '@angular/core';
-import {Router, NavigationError} from '@angular/router';
+import {Router, NavigationError, RouterOutlet} from '@angular/router';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {map} from 'rxjs';
 
 @Component({
   selector: 'app-root',
+  imports: [RouterOutlet],
   template: `
     @if (errorMessage()) {
       <div class="error-banner">
@@ -280,11 +281,12 @@ TIP: To avoid blocking navigation and render components immediately with skeleto
 リゾルバーの実行中のユーザー体験を向上させるには、ルーターイベントをリッスンして読み込みインジケーターを表示できます。
 
 ```angular-ts
-import {Component, inject} from '@angular/core';
-import {Router} from '@angular/router';
+import {Component, computed, inject} from '@angular/core';
+import {Router, RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-root',
+  imports: [RouterOutlet],
   template: `
     @if (isNavigating()) {
       <div class="loading-bar">Loading...</div>
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 14949dbf7..efe7da9aa 100644
--- a/adev-ja/src/content/guide/routing/route-guards.en.md
+++ b/adev-ja/src/content/guide/routing/route-guards.en.md
@@ -68,7 +68,7 @@ For more information, check out the [API docs for CanActivateFn](api/router/CanA
 
 ### CanActivateChild
 
-The `CanActivateChild` guard determines whether a user can access child routes of a particular parent route. This is useful when you want to protect an entire section of nested routes. In other words, `canActivateChild` runs for _all_ children. If there is a child component with another child component underneath of it, `canActivateChild` will run once for both components.
+The `CanActivateChild` guard determines whether a user can access child routes of a particular parent route. This is useful when you want to protect an entire section of nested routes. In other words, `canActivateChild` runs for _all_ children. If there is a child component with another child component underneath of it, `canActivateChild` will run once for each of them.
 
 It has access to the following default arguments:
 
@@ -165,7 +165,11 @@ For more information, check out the [API docs for CanMatchFn](api/router/CanMatc
 
 Once you've created your route guards, you need to configure them in your route definitions.
 
-Guards are specified as arrays in the route configuration in order to allow you to apply multiple guards to a single route. They are executed in the order they appear in the array.
+Guards are specified as arrays in the route configuration in order to allow you to apply multiple guards to a single route. The router starts the guards in the order they appear in the array, but it does not wait for one guard to finish before starting the next. Guards that return a `Promise` or an `Observable` therefore run concurrently.
+
+The array order determines which result takes priority. Navigation continues only if every guard returns `true`. Otherwise the router uses the result of the first guard in the array that did not return `true`, even if a later guard finished earlier.
+
+NOTE: Because asynchronous guards run concurrently, a guard must not rely on work done by an earlier guard in the same array, such as loading the current user. Put that work in a service that both guards use, or combine the checks into a single guard.
 
 ```ts
 import {Routes} from '@angular/router';
diff --git a/adev-ja/src/content/guide/routing/route-guards.md b/adev-ja/src/content/guide/routing/route-guards.md
index 6a46a43a2..f8c231276 100644
--- a/adev-ja/src/content/guide/routing/route-guards.md
+++ b/adev-ja/src/content/guide/routing/route-guards.md
@@ -68,7 +68,7 @@ TIP: ユーザーをリダイレクトする必要がある場合は、[`URLTree
 
 ### CanActivateChild {#canactivatechild}
 
-`CanActivateChild`ガードは、ユーザーが特定の親ルートの子ルートにアクセスできるかどうかを決定します。これは、ネストされたルートのセクション全体を保護したい場合に役立ちます。言い換えれば、`canActivateChild`は_すべて_の子に対して実行されます。子コンポーネントの下に別の子コンポーネントがある場合、`canActivateChild`は両方のコンポーネントに対して一度実行されます。
+`CanActivateChild`ガードは、ユーザーが特定の親ルートの子ルートにアクセスできるかどうかを判定します。ネストされたルートのセクション全体を保護する場合に役立ちます。`canActivateChild`はすべての子に適用されます。子コンポーネントの下に別の子コンポーネントがある場合、両方のコンポーネントに対してそれぞれ一度ずつ実行されます。
 
 以下のデフォルト引数にアクセスできます。
 
@@ -165,7 +165,11 @@ const routes: Routes = [
 
 ルートガードを作成したら、ルート定義でそれらを設定する必要があります。
 
-ガードは、単一のルートに複数のガードを適用できるように、ルート設定で配列として指定されます。それらは配列に現れる順序で実行されます。
+ガードは配列としてルート設定に指定でき、単一のルートに複数適用できます。ルーターは配列内の順序でガードを開始しますが、次のガードを開始する前に前のガードの完了を待ちません。そのため、`Promise`または`Observable`を返すガードは並行して実行されます。
+
+配列内の順序は結果の優先順位を決めます。すべてのガードが`true`を返した場合にのみナビゲーションが続行されます。それ以外の場合、ルーターは完了順に関係なく、配列内で最初に`true`以外を返したガードの結果を使用します。
+
+NOTE: 非同期ガードは並行して実行されるため、同じ配列内で先に指定したガードの処理結果に依存しないでください。たとえば、先のガードによる現在のユーザー情報の読み込みには依存できません。その処理は両方のガードで利用するサービスに移すか、検査を1つのガードにまとめてください。
 
 ```ts
 import {Routes} from '@angular/router';
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 249e2a155..0c7142344 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
@@ -148,6 +148,20 @@ withViewTransitions({
 
 This example skips the view transition when navigation only changes the [URL fragment or query parameters](/guide/routing/read-route-state#query-parameters) (such as anchor links within the same page). The `skipTransition()` method prevents the animation while still allowing the navigation to complete.
 
+## Respecting the user's motion preferences
+
+The Router runs view transitions regardless of the user's [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) setting. A preference for reduced motion doesn't necessarily mean the user wants no motion at all, so the framework leaves the choice to the application: you can [provide more subtle animations](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#react_to_the_reduced_motion_preference) for these users, or skip the transition entirely with the `onViewTransitionCreated` callback:
+
+```ts
+withViewTransitions({
+  onViewTransitionCreated: ({transition}) => {
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      transition.skipTransition();
+    }
+  },
+});
+```
+
 ## Examples from the Chrome explainer adapted to Angular
 
 The following examples demonstrate various view transition techniques adapted from the Chrome team's documentation for use with Angular Router:
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 90406c793..ae670010a 100644
--- a/adev-ja/src/content/guide/routing/route-transition-animations.md
+++ b/adev-ja/src/content/guide/routing/route-transition-animations.md
@@ -148,6 +148,20 @@ withViewTransitions({
 
 この例では、ナビゲーションが[URLフラグメントまたはクエリパラメータ](/guide/routing/read-route-state#query-parameters)のみを変更する場合（同じページ内のアンカーリンクなど）にビュー遷移をスキップします。`skipTransition()`メソッドは、ナビゲーションの完了を許可しながらアニメーションを防止します。
 
+## ユーザーの動きに関する設定を尊重する {#respecting-the-users-motion-preferences}
+
+ルーターは、ユーザーの[`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)設定に関係なくビュー遷移を開始します。動きを減らす設定は、動きをすべてなくしたいという意味とは限りません。アプリケーション側で[控えめなアニメーションを提供する](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#react_to_the_reduced_motion_preference)か、`onViewTransitionCreated`コールバックで遷移をスキップできます。
+
+```ts
+withViewTransitions({
+  onViewTransitionCreated: ({transition}) => {
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      transition.skipTransition();
+    }
+  },
+});
+```
+
 ## Chrome ExplainerのAngularへの適応例 {#examples-from-the-chrome-explainer-adapted-to-angular}
 
 以下の例は、ChromeチームのドキュメントからAngular Routerで使用するために適応された、さまざまなビュー遷移テクニックを示しています。

From eaf54a70658cd24c06458cd8700717bb2e200562 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:24 +0900
Subject: [PATCH 25/51] fix(docs): retranslate updated sections in
 src/content/guide/signals

---
 .../src/content/guide/signals/overview.en.md  |  8 ++++-
 adev-ja/src/content/guide/signals/overview.md |  8 ++++-
 .../src/content/guide/signals/resource.en.md  | 30 +++++++++++++------
 adev-ja/src/content/guide/signals/resource.md | 20 ++++++++++---
 4 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/adev-ja/src/content/guide/signals/overview.en.md b/adev-ja/src/content/guide/signals/overview.en.md
index 6206bbfbd..7b9170c93 100644
--- a/adev-ja/src/content/guide/signals/overview.en.md
+++ b/adev-ja/src/content/guide/signals/overview.en.md
@@ -131,7 +131,7 @@ Angular automatically enters a reactive context when:
 - Executing an `effect`, `afterRenderEffect` callback.
 - Evaluating a `computed` signal.
 - Evaluating a `linkedSignal`.
-- Evaluating a `resource`'s params or loader function.
+- Evaluating a `resource`'s params function.
 - Rendering a component template (including bindings in the [host property](guide/components/host-elements#binding-to-the-host-element)).
 
 During these operations, Angular creates a _live_ connection. If a tracked signal changes, Angular will _eventually_ re-run the consumer.
@@ -235,6 +235,7 @@ When you read a signal within an `OnPush` component's template, Angular tracks t
 When creating a signal, you can optionally provide an equality function, which will be used to check whether the new value is actually different than the previous one.
 
 ```ts
+import {signal} from '@angular/core';
 import isEqual from 'lodash/isEqual';
 
 const data = signal(['test'], {equal: isEqual});
@@ -275,3 +276,8 @@ isWritableSignal(doubled); // false
 ## Using signals with RxJS
 
 See [RxJS interop with Angular signals](ecosystem/rxjs-interop) for details on interoperability between signals and RxJS.
+
+## Debugging signals
+
+Angular DevTools can visualize the signal graph of a component or directive, showing how its signals, computeds, effects, and other reactive nodes depend on each other.
+See [Debug the signal graph](tools/devtools/signals) to learn how to open, read, and inspect the graph.
diff --git a/adev-ja/src/content/guide/signals/overview.md b/adev-ja/src/content/guide/signals/overview.md
index 6230ae542..509e44997 100644
--- a/adev-ja/src/content/guide/signals/overview.md
+++ b/adev-ja/src/content/guide/signals/overview.md
@@ -131,7 +131,7 @@ Angularは次の場合に自動的にリアクティブコンテキストに入
 - `effect`、`afterRenderEffect`のコールバックを実行する
 - `computed`シグナルを評価する
 - `linkedSignal`を評価する
-- `resource`のparamsまたはloader関数を評価する
+- `resource`のparams関数を評価する
 - コンポーネントテンプレートをレンダリングする([ホストプロパティ](guide/components/host-elements#binding-to-the-host-element)のバインディングを含む)
 
 これらの操作中、Angularは_ライブ_接続を作成します。追跡されたシグナルが変更されると、Angularは_最終的に_コンシューマーを再実行します。
@@ -235,6 +235,7 @@ effect(async () => {
 シグナルを作成する際には、オプションで等価関数を指定できます。これは、新しい値が前の値と実際に異なるかどうかを確認するために使用されます。
 
 ```ts
+import {signal} from '@angular/core';
 import isEqual from 'lodash/isEqual';
 
 const data = signal(['test'], {equal: isEqual});
@@ -275,3 +276,8 @@ isWritableSignal(doubled); // false
 ## RxJSとシグナルを併用する {#using-signals-with-rxjs}
 
 シグナルとRxJSの相互運用性の詳細については、[RxJSとAngularシグナルの相互運用](ecosystem/rxjs-interop) を参照してください。
+
+## シグナルのデバッグ {#debugging-signals}
+
+Angular DevToolsでは、コンポーネントやディレクティブのシグナルグラフを表示し、シグナル、computed、effectなどのリアクティブなノード間の依存関係を確認できます。
+グラフの開き方と読み方は、[シグナルグラフをデバッグする](tools/devtools/signals)を参照してください。
diff --git a/adev-ja/src/content/guide/signals/resource.en.md b/adev-ja/src/content/guide/signals/resource.en.md
index a742efd8b..ae644cc09 100644
--- a/adev-ja/src/content/guide/signals/resource.en.md
+++ b/adev-ja/src/content/guide/signals/resource.en.md
@@ -65,6 +65,8 @@ Use `stream` for these continuously updating data sources. Unlike `loader`, whic
 
 Use `loader` for one-time asynchronous operations, such as fetching data from an HTTP endpoint.
 
+In this example, `userUpdates` simulates an external source such as a WebSocket or SSE connection.
+
 ```typescript
 const userUpdates = signal({value: 'Alice'});
 
@@ -72,7 +74,7 @@ const userResource = resource({
   stream: () => userUpdates,
 });
 
-// Later, when new data arrives:
+// Simulate a new value arriving from the external data source:
 userUpdates.set({value: 'Bob'});
 ```
 
@@ -118,13 +120,13 @@ userResource.reload();
 
 The resource object has several signal properties for reading the status of the asynchronous loader.
 
-| Property    | Description                                                                                                     |
-| ----------- | --------------------------------------------------------------------------------------------------------------- |
-| `value`     | The most recent value of the resource, or `undefined` if no value has been received.                            |
-| `hasValue`  | Whether the resource has a value.                                                                               |
-| `error`     | The most recent error encountered while running the resource's loader, or `undefined` if no error has occurred. |
-| `isLoading` | Whether the resource loader is currently running.                                                               |
-| `status`    | The resource's specific `ResourceStatus`, as described below.                                                   |
+| Property    | Description                                                                                                                                                                                  |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`     | The most recent value of the resource, or the default value (`undefined` unless `defaultValue` is set) if no value has been received. Reading `value()` throws when the status is `'error'`. |
+| `hasValue`  | Whether the resource has a value.                                                                                                                                                            |
+| `error`     | The most recent error encountered while running the resource's loader, or `undefined` if no error has occurred.                                                                              |
+| `isLoading` | Whether the resource loader is currently running.                                                                                                                                            |
+| `status`    | The resource's specific `ResourceStatus`, as described below.                                                                                                                                |
 
 The `status` signal provides a specific `ResourceStatus` that describes the state of the resource using a string constant.
 
@@ -229,10 +231,20 @@ Each snapshot contains a `status` and either a `value` or an `error`.
 
 ### Composing resources with snapshots
 
+IMPORTANT: `resourceFromSnapshots` is [experimental](reference/releases#experimental). It's ready for you to try, but it might change before it is stable.
+
 You can create new resources from snapshots using `resourceFromSnapshots`. This enables composition with signal APIs like `computed` and `linkedSignal` to transform resource behavior.
 
 ```ts
-import {linkedSignal, resourceFromSnapshots, Resource, ResourceSnapshot} from '@angular/core';
+import {
+  Component,
+  input,
+  linkedSignal,
+  resourceFromSnapshots,
+  Resource,
+  ResourceSnapshot,
+} from '@angular/core';
+import {httpResource} from '@angular/common/http';
 
 function withPreviousValue<T>(input: Resource<T>): Resource<T> {
   const derived = linkedSignal<ResourceSnapshot<T>, ResourceSnapshot<T>>({
diff --git a/adev-ja/src/content/guide/signals/resource.md b/adev-ja/src/content/guide/signals/resource.md
index c5a0de943..f5987b00f 100644
--- a/adev-ja/src/content/guide/signals/resource.md
+++ b/adev-ja/src/content/guide/signals/resource.md
@@ -65,6 +65,8 @@ Use `stream` for these continuously updating data sources. Unlike `loader`, whic
 
 Use `loader` for one-time asynchronous operations, such as fetching data from an HTTP endpoint.
 
+この例では、`userUpdates`がWebSocketやSSE接続などの外部データソースを模しています。
+
 ```typescript
 const userUpdates = signal({value: 'Alice'});
 
@@ -72,7 +74,7 @@ const userResource = resource({
   stream: () => userUpdates,
 });
 
-// Later, when new data arrives:
+// Simulate a new value arriving from the external data source:
 userUpdates.set({value: 'Bob'});
 ```
 
@@ -119,8 +121,8 @@ userResource.reload();
 リソースオブジェクトには、非同期ローダーの状態を読み取るためのいくつかのシグナルプロパティがあります。
 
 | プロパティ    | 説明                                                                                                     |
-| ----------- | --------------------------------------------------------------------------------------------------------------- |
-| `value`     | リソースの最新の値、または値が受信されていない場合は`undefined`。                            |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `value`     | リソースの最新値です。値がまだない場合はデフォルト値（`defaultValue`を設定していなければ`undefined`）です。ステータスが`'error'`の場合、`value()`を読み取ると例外が発生します。 |
 | `hasValue`  | リソースが値を持っているかどうか。                                                                               |
 | `error`     | リソースのローダーの実行中に発生した最新のエラー、またはエラーが発生していない場合は`undefined`。 |
 | `isLoading` | リソースローダーが現在実行中かどうか。                                                               |
@@ -229,10 +231,20 @@ Each snapshot contains a `status` and either a `value` or an `error`.
 
 ### Composing resources with snapshots
 
+IMPORTANT: `resourceFromSnapshots`は[試験的な機能](reference/releases#experimental)です。試すことはできますが、正式に提供される前に変更される可能性があります。
+
 You can create new resources from snapshots using `resourceFromSnapshots`. This enables composition with signal APIs like `computed` and `linkedSignal` to transform resource behavior.
 
 ```ts
-import {linkedSignal, resourceFromSnapshots, Resource, ResourceSnapshot} from '@angular/core';
+import {
+  Component,
+  input,
+  linkedSignal,
+  resourceFromSnapshots,
+  Resource,
+  ResourceSnapshot,
+} from '@angular/core';
+import {httpResource} from '@angular/common/http';
 
 function withPreviousValue<T>(input: Resource<T>): Resource<T> {
   const derived = linkedSignal<ResourceSnapshot<T>, ResourceSnapshot<T>>({

From 6c49a223a9f4441db4e31151c1b2219875b9eff7 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:25 +0900
Subject: [PATCH 26/51] fix(docs): apply upstream wording changes in
 src/content/guide/templates

---
 adev-ja/src/content/guide/templates/defer.en.md | 1 +
 adev-ja/src/content/guide/templates/defer.md    | 1 +
 adev-ja/src/content/guide/templates/pipes.en.md | 4 ++--
 adev-ja/src/content/guide/templates/pipes.md    | 4 ++--
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/adev-ja/src/content/guide/templates/defer.en.md b/adev-ja/src/content/guide/templates/defer.en.md
index 9f97af059..711cb25bf 100644
--- a/adev-ja/src/content/guide/templates/defer.en.md
+++ b/adev-ja/src/content/guide/templates/defer.en.md
@@ -393,6 +393,7 @@ export {OtherComponent} from './other.component';
 ```
 
 ```typescript {header: "parent.component.ts"}
+import {Component} from '@angular/core';
 import {HeavyComponent} from './index'; // pulls in OtherComponent too
 
 @Component({
diff --git a/adev-ja/src/content/guide/templates/defer.md b/adev-ja/src/content/guide/templates/defer.md
index 73514c7ff..7da2527ea 100644
--- a/adev-ja/src/content/guide/templates/defer.md
+++ b/adev-ja/src/content/guide/templates/defer.md
@@ -393,6 +393,7 @@ export {OtherComponent} from './other.component';
 ```
 
 ```typescript {header: "parent.component.ts"}
+import {Component} from '@angular/core';
 import {HeavyComponent} from './index'; // pulls in OtherComponent too
 
 @Component({
diff --git a/adev-ja/src/content/guide/templates/pipes.en.md b/adev-ja/src/content/guide/templates/pipes.en.md
index 6cf410031..9c0a36680 100644
--- a/adev-ja/src/content/guide/templates/pipes.en.md
+++ b/adev-ja/src/content/guide/templates/pipes.en.md
@@ -328,7 +328,7 @@ export class FormatterService {
 ```
 
 ```ts {header: "formatter.service.ts" , avoid}
-import {Service} from '@angular/core';
+import {inject, Service} from '@angular/core';
 import {KebabCasePipe} from './kebab-case.pipe';
 
 @Service()
@@ -368,7 +368,7 @@ export class PriceService {
 ```
 
 ```ts {avoid}
-import {Service} from '@angular/core';
+import {inject, Service} from '@angular/core';
 import {DecimalPipe} from '@angular/common';
 
 @Service()
diff --git a/adev-ja/src/content/guide/templates/pipes.md b/adev-ja/src/content/guide/templates/pipes.md
index 8a7fb5f65..78c5d5814 100644
--- a/adev-ja/src/content/guide/templates/pipes.md
+++ b/adev-ja/src/content/guide/templates/pipes.md
@@ -328,7 +328,7 @@ export class FormatterService {
 ```
 
 ```ts {header: "formatter.service.ts" , avoid}
-import {Service} from '@angular/core';
+import {inject, Service} from '@angular/core';
 import {KebabCasePipe} from './kebab-case.pipe';
 
 @Service()
@@ -368,7 +368,7 @@ export class PriceService {
 ```
 
 ```ts {avoid}
-import {Service} from '@angular/core';
+import {inject, Service} from '@angular/core';
 import {DecimalPipe} from '@angular/common';
 
 @Service()

From f68994250efcc84c19801e26e174442426f031ee Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:25 +0900
Subject: [PATCH 27/51] fix(docs): retranslate updated sections in
 src/content/guide/templates

---
 .../guide/templates/event-listeners.en.md       | 13 ++++++-------
 .../content/guide/templates/event-listeners.md  | 13 ++++++-------
 .../guide/templates/expression-syntax.en.md     | 17 +++++++++++------
 .../guide/templates/expression-syntax.md        |  9 +++++++--
 4 files changed, 30 insertions(+), 22 deletions(-)

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 beb1670ae..6805ea260 100644
--- a/adev-ja/src/content/guide/templates/event-listeners.en.md
+++ b/adev-ja/src/content/guide/templates/event-listeners.en.md
@@ -162,15 +162,15 @@ export class DebounceEventPlugin extends EventManagerPlugin {
   override addEventListener(element: HTMLElement, eventName: string, handler: Function) {
     // Parse the event: e.g., "click.debounce.500"
     // event: "click", delay: 500
-    const [event, method, delay = 300] = eventName.split('.');
+    const [event, , delay = '300'] = eventName.split('.');
 
-    let timeoutId: number;
+    let timeoutId: ReturnType<typeof setTimeout>;
 
-    const listener = (event: Event) => {
+    const listener = (e: Event) => {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
-        handler(event);
-      }, delay);
+        handler(e);
+      }, Number(delay));
     };
 
     element.addEventListener(event, listener);
@@ -187,8 +187,7 @@ export class DebounceEventPlugin extends EventManagerPlugin {
 Register your custom plugin using the `EVENT_MANAGER_PLUGINS` token in your application's providers:
 
 ```ts
-import {bootstrapApplication} from '@angular/platform-browser';
-import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
+import {bootstrapApplication, EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
 import {App} from './app';
 import {DebounceEventPlugin} from './debounce-event-plugin';
 
diff --git a/adev-ja/src/content/guide/templates/event-listeners.md b/adev-ja/src/content/guide/templates/event-listeners.md
index 3d6f23c64..fc0f28813 100644
--- a/adev-ja/src/content/guide/templates/event-listeners.md
+++ b/adev-ja/src/content/guide/templates/event-listeners.md
@@ -162,15 +162,15 @@ export class DebounceEventPlugin extends EventManagerPlugin {
   override addEventListener(element: HTMLElement, eventName: string, handler: Function) {
     // Parse the event: e.g., "click.debounce.500"
     // event: "click", delay: 500
-    const [event, method, delay = 300] = eventName.split('.');
+    const [event, , delay = '300'] = eventName.split('.');
 
-    let timeoutId: number;
+    let timeoutId: ReturnType<typeof setTimeout>;
 
-    const listener = (event: Event) => {
+    const listener = (e: Event) => {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
-        handler(event);
-      }, delay);
+        handler(e);
+      }, Number(delay));
     };
 
     element.addEventListener(event, listener);
@@ -187,8 +187,7 @@ export class DebounceEventPlugin extends EventManagerPlugin {
 アプリケーションのプロバイダーで `EVENT_MANAGER_PLUGINS` トークンを使用してカスタムプラグインを登録します。
 
 ```ts
-import {bootstrapApplication} from '@angular/platform-browser';
-import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
+import {bootstrapApplication, EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
 import {App} from './app';
 import {DebounceEventPlugin} from './debounce-event-plugin';
 
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 b7e9663ea..4ba3e7223 100644
--- a/adev-ja/src/content/guide/templates/expression-syntax.en.md
+++ b/adev-ja/src/content/guide/templates/expression-syntax.en.md
@@ -82,6 +82,11 @@ Angular supports the following operators from standard JavaScript.
 | Spread in object literals     | `{...obj, foo: 'bar'}`                         |
 | Spread in array literals      | `[...arr, 1, 2, 3]`                            |
 | Rest in function calls        | `fn(...args)`                                  |
+| Arrow function                | `items.filter((i) => i.active)`                |
+
+NOTE: Assignment and increment/decrement operators are only valid in [event listener statements](#event-listener-statements). Using them in a binding or interpolation is a compile error, unless they are inside an arrow function.
+
+Arrow functions must have an expression body. Pipes cannot be used inside an arrow function, but you can pass an arrow function as an argument to a pipe.
 
 Angular expressions additionally also support the following non-standard operators:
 
@@ -126,12 +131,12 @@ When referring to component class members, `this` is always implied. However, if
 
 Generally speaking, declarations are not supported in Angular expressions. This includes, but is not limited to:
 
-| Declarations    | Example(s)                                  |
-| --------------- | ------------------------------------------- |
-| Variables       | `let label = 'abc'`, `const item = 'apple'` |
-| Functions       | `function myCustomFunction() { }`           |
-| Arrow Functions | `() => { }`                                 |
-| Classes         | `class Rectangle { }`                       |
+| Declarations                      | Example(s)                                  |
+| --------------------------------- | ------------------------------------------- |
+| Variables                         | `let label = 'abc'`, `const item = 'apple'` |
+| Functions                         | `function myCustomFunction() { }`           |
+| Arrow functions with block bodies | `() => { }`                                 |
+| Classes                           | `class Rectangle { }`                       |
 
 ## Event listener statements
 
diff --git a/adev-ja/src/content/guide/templates/expression-syntax.md b/adev-ja/src/content/guide/templates/expression-syntax.md
index f1a983055..39cc04da0 100644
--- a/adev-ja/src/content/guide/templates/expression-syntax.md
+++ b/adev-ja/src/content/guide/templates/expression-syntax.md
@@ -82,6 +82,11 @@ Angularは、標準JavaScriptの次の演算子をサポートしています。
 | Spread in object literals   | `{...obj, foo: 'bar'}`                         |
 | Spread in array literals    | `[...arr, 1, 2, 3]`                            |
 | Rest in function calls      | `fn(...args)`                                  |
+| アロー関数                    | `items.filter((i) => i.active)`                |
+
+NOTE: 代入演算子とインクリメント・デクリメント演算子は、[イベントリスナー文](#event-listener-statements)でのみ使用できます。バインディングや補間で使用するとコンパイルエラーになります。ただし、アロー関数の内部で使用する場合は除きます。
+
+アロー関数の本体は式である必要があります。アロー関数の内部ではパイプを使用できませんが、アロー関数をパイプの引数として渡すことはできます。
 
 Angular式は、さらに次の非標準の演算子もサポートしています。
 
@@ -127,10 +132,10 @@ Angular式は、コンポーネントクラスのコンテキストと、関連
 一般的に、Angular式では宣言はサポートされていません。これには、以下が含まれますが、これらに限定されません。
 
 | 宣言          | 例(複数)                                  |
-| --------------- | ------------------------------------------- |
+| --------------------------------- | ------------------------------------------- |
 | 変数            | `let label = 'abc'`, `const item = 'apple'` |
 | 関数            | `function myCustomFunction() { }`           |
-| アロー関数       | `() => { }`                                 |
+| ブロック本体を持つアロー関数       | `() => { }`                                 |
 | クラス          | `class Rectangle { }`                       |
 
 ## イベントリスナー文

From dfb129064acd39c0d31d39ccf44e88a8dcca9438 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:25 +0900
Subject: [PATCH 28/51] fix(docs): mirror upstream code and link changes in
 src/content/guide/testing

---
 .../guide/testing/components-scenarios.en.md  | 49 +++++++++----------
 .../guide/testing/components-scenarios.md     | 49 +++++++++----------
 2 files changed, 48 insertions(+), 50 deletions(-)

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 9018071e1..85a6ad3d8 100644
--- a/adev-ja/src/content/guide/testing/components-scenarios.en.md
+++ b/adev-ja/src/content/guide/testing/components-scenarios.en.md
@@ -101,6 +101,7 @@ To reflect changes to inputs and listen to outputs you can dynamically bind sign
 
 ```ts
 import {inputBinding, outputBinding} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
 
 const fixture = TestBed.createComponent(ValueDisplay, {
   bindings: [
@@ -397,41 +398,39 @@ With the stubbed service returning async observables, most of your tests will ha
 Here's a test that demonstrates the data flow you'd expect in the real world.
 
 ```ts
-it('should show quote after getQuote', async () => {
-  class MockTwainQuotes implements TwainQuotes {
-    private subject = new Subject<string>();
+class MockTwainQuotes implements TwainQuotes {
+  private subject = new Subject<string>();
 
-    getQuote() {
-      return this.subject.asObservable();
-    }
+  getQuote() {
+    return this.subject.asObservable();
+  }
 
-    emit(val: string) {
-      this.subject.next(val);
-    }
+  emit(val: string) {
+    this.subject.next(val);
   }
+}
 
-  it('should show quote after getQuote (success)', async () => {
-    vi.useFakeTimers();
+it('should show quote after getQuote (success)', async () => {
+  vi.useFakeTimers();
 
-    TestBed.configureTestingModule({
-      providers: [{provide: TwainQuotes, useClass: MockTwainQuotes}],
-    });
+  TestBed.configureTestingModule({
+    providers: [{provide: TwainQuotes, useClass: MockTwainQuotes}],
+  });
 
-    const fixture = TestBed.createComponent(TwainComponent);
-    const twainQuotes = TestBed.inject(TwainQuotes) as MockTwainQuotes;
-    await vi.runAllTimersAsync(); // render before the quote is received
+  const fixture = TestBed.createComponent(TwainComponent);
+  const twainQuotes = TestBed.inject(TwainQuotes) as MockTwainQuotes;
+  await vi.runAllTimersAsync(); // render before the quote is received
 
-    const quoteEl = fixture.nativeElement.querySelector('.twain');
-    expect(quoteEl.textContent).toBe('...');
+  const quoteEl = fixture.nativeElement.querySelector('.twain');
+  expect(quoteEl.textContent).toBe('...');
 
-    twainQuotes.emit('Twain Quote'); // emits the quote
-    await vi.runAllTimersAsync(); // render with the quote received
+  twainQuotes.emit('Twain Quote'); // emits the quote
+  await vi.runAllTimersAsync(); // render with the quote received
 
-    expect(quoteEl.textContent).toBe('Twain Quote');
-    expect(fixture.nativeElement.querySelector('.error')).toBeNull();
+  expect(quoteEl.textContent).toBe('Twain Quote');
+  expect(fixture.nativeElement.querySelector('.error')).toBeNull();
 
-    vi.useRealTimers();
-  });
+  vi.useRealTimers();
 });
 ```
 
diff --git a/adev-ja/src/content/guide/testing/components-scenarios.md b/adev-ja/src/content/guide/testing/components-scenarios.md
index 76e2e4995..8ebb1edbb 100644
--- a/adev-ja/src/content/guide/testing/components-scenarios.md
+++ b/adev-ja/src/content/guide/testing/components-scenarios.md
@@ -101,6 +101,7 @@ it('should display a different test title', async () => {
 
 ```ts
 import {inputBinding, outputBinding} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
 
 const fixture = TestBed.createComponent(ValueDisplay, {
   bindings: [
@@ -397,41 +398,39 @@ it('should display error when TwainQuotes service fails', async () => {
 ここに、実世界で想定されるデータフローを示すテストがあります。
 
 ```ts
-it('should show quote after getQuote', async () => {
-  class MockTwainQuotes implements TwainQuotes {
-    private subject = new Subject<string>();
+class MockTwainQuotes implements TwainQuotes {
+  private subject = new Subject<string>();
 
-    getQuote() {
-      return this.subject.asObservable();
-    }
+  getQuote() {
+    return this.subject.asObservable();
+  }
 
-    emit(val: string) {
-      this.subject.next(val);
-    }
+  emit(val: string) {
+    this.subject.next(val);
   }
+}
 
-  it('should show quote after getQuote (success)', async () => {
-    vi.useFakeTimers();
+it('should show quote after getQuote (success)', async () => {
+  vi.useFakeTimers();
 
-    TestBed.configureTestingModule({
-      providers: [{provide: TwainQuotes, useClass: MockTwainQuotes}],
-    });
+  TestBed.configureTestingModule({
+    providers: [{provide: TwainQuotes, useClass: MockTwainQuotes}],
+  });
 
-    const fixture = TestBed.createComponent(TwainComponent);
-    const twainQuotes = TestBed.inject(TwainQuotes) as MockTwainQuotes;
-    await vi.runAllTimersAsync(); // render before the quote is received
+  const fixture = TestBed.createComponent(TwainComponent);
+  const twainQuotes = TestBed.inject(TwainQuotes) as MockTwainQuotes;
+  await vi.runAllTimersAsync(); // render before the quote is received
 
-    const quoteEl = fixture.nativeElement.querySelector('.twain');
-    expect(quoteEl.textContent).toBe('...');
+  const quoteEl = fixture.nativeElement.querySelector('.twain');
+  expect(quoteEl.textContent).toBe('...');
 
-    twainQuotes.emit('Twain Quote'); // emits the quote
-    await vi.runAllTimersAsync(); // render with the quote received
+  twainQuotes.emit('Twain Quote'); // emits the quote
+  await vi.runAllTimersAsync(); // render with the quote received
 
-    expect(quoteEl.textContent).toBe('Twain Quote');
-    expect(fixture.nativeElement.querySelector('.error')).toBeNull();
+  expect(quoteEl.textContent).toBe('Twain Quote');
+  expect(fixture.nativeElement.querySelector('.error')).toBeNull();
 
-    vi.useRealTimers();
-  });
+  vi.useRealTimers();
 });
 ```
 

From da6887128b399cb8e46b014530e0cf4a2a4c5475 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:26 +0900
Subject: [PATCH 29/51] fix(docs): apply upstream wording changes in
 src/content/guide/testing

---
 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/utility-apis.en.md        | 5 ++---
 adev-ja/src/content/guide/testing/utility-apis.md           | 5 ++---
 4 files changed, 6 insertions(+), 8 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 095d67d0a..5f5ff90e1 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
@@ -149,7 +149,7 @@ The schematic automates the following transformations in your test files (`.spec
 - Replaces `jasmine.any` with `expect.any`.
 - Replaces `jasmine.createSpy` with `vi.fn`.
 - Updates `beforeAll`, `beforeEach`, `afterAll`, and `afterEach` to their Vitest equivalents.
-- Converts `fail()` to Vitest's `vi.fail()`.
+- Converts `fail()` to Vitest's `expect.fail()`.
 - Adjusts expectations to match Vitest APIs
 - Adds TODO comments for code that cannot be automatically converted
 
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 565c4777e..f79e08bd3 100644
--- a/adev-ja/src/content/guide/testing/migrating-to-vitest.md
+++ b/adev-ja/src/content/guide/testing/migrating-to-vitest.md
@@ -149,7 +149,7 @@ Angular CLIは、JasmineテストをVitestを使用するように自動的に
 - `jasmine.any`を`expect.any`に置き換えます。
 - `jasmine.createSpy`を`vi.fn`に置き換えます。
 - `beforeAll`、`beforeEach`、`afterAll`、`afterEach`をVitestの同等のものに更新します。
-- `fail()`をVitestの`vi.fail()`に変換します。
+- `fail()`をVitestの`expect.fail()`に変換します。
 - Vitest APIに一致するようにexpectationsを調整します
 - 自動的に変換できないコードにTODOコメントを追加します
 
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 66ecdb9f5..e6f3c70e3 100644
--- a/adev-ja/src/content/guide/testing/utility-apis.en.md
+++ b/adev-ja/src/content/guide/testing/utility-apis.en.md
@@ -54,7 +54,7 @@ Here are the most important static methods, in order of likely utility.
 | Methods                  | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `configureTestingModule` | The testing shims establish the [initial test environment](guide/testing) and a default testing module. The default testing module is configured with basic declaratives and some Angular service substitutes that every tester needs. <br /> Call `configureTestingModule` to refine the testing module configuration for a particular set of tests by adding and removing imports, declarations \(of components, directives, and pipes\), and providers.                                                                                               |
-| `compileComponents`      | Compile the testing module asynchronously after you've finished configuring it. You **must** call this method if _any_ of the testing module components have asynchronously loaded resources (like @defer blocks). <br /> After calling `compileComponents`, the `TestBed` configuration is frozen for the duration of the current spec.                                                                                                                                                                                                                 |
+| `compileComponents`      | Compile the testing module asynchronously after you've finished configuring it. You **must** call this method if _any_ of the testing module components have asynchronously loaded resources (like @defer blocks).                                                                                                                                                                                                                                                                                                                                       |
 | `createComponent<T>`     | Create an instance of a component of type `T` based on the current `TestBed` configuration. After calling `createComponent`, the `TestBed` configuration is frozen for the duration of the current spec.                                                                                                                                                                                                                                                                                                                                                 |
 | `overrideComponent`      | Replace metadata for the given component class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `overrideDirective`      | Replace metadata for the given directive class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
@@ -82,7 +82,7 @@ Here are the most important properties for testers, in order of likely utility.
 | `componentInstance` | The instance of the component class created by `TestBed.createComponent`.                                                                                                                                                                                                                 |
 | `debugElement`      | The `DebugElement` associated with the root element of the component. <br /> The `debugElement` provides insight into the component and its DOM element during test and debugging. It's a critical property for testers. The most interesting members are covered [below](#debugelement). |
 | `nativeElement`     | The native DOM element at the root of the component.                                                                                                                                                                                                                                      |
-| `changeDetectorRef` | The `ChangeDetectorRef` for the component. <br /> The `ChangeDetectorRef` is most valuable when testing a component that has the `ChangeDetectionStrategy.OnPush` method or the component's change detection is under your programmatic control.                                          |
+| `changeDetectorRef` | The `ChangeDetectorRef` of the component's host view, not of the component itself. See [Using Zoneless in `TestBed`](guide/zoneless#using-zoneless-in-testbed).                                                                                                                           |
 
 ### `ComponentFixture` methods
 
@@ -122,7 +122,6 @@ Here are the most useful `DebugElement` members for testers, in approximate orde
 | `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 1de9cfdc3..d252da6f1 100644
--- a/adev-ja/src/content/guide/testing/utility-apis.md
+++ b/adev-ja/src/content/guide/testing/utility-apis.md
@@ -54,7 +54,7 @@ type MetadataOverride<T> = {
 | メソッド                 | 詳細                                                                                                                                                                                                                                                                                                                                                                    |
 | :----------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `configureTestingModule` | テストシムは、[初期テスト環境](guide/testing) とデフォルトのテストモジュールを確立します。デフォルトのテストモジュールは、基本的な宣言と、すべてのテスターに必要な、いくつかの Angular サービスの代替で構成されています。 <br /> `configureTestingModule` を呼び出して、インポート、宣言（コンポーネント、ディレクティブ、およびパイプ）、およびプロバイダーを追加および削除することで、特定のテストセットのテストモジュール構成を洗練します。 |
-| `compileComponents`      | テストモジュールを構成し終えたら、非同期にコンパイルします。_いずれかの_ テストモジュールコンポーネントが非同期に読み込まれるリソース（@deferブロックなど）を持つ場合は、このメソッドを **必ず** 呼び出す必要があります。 <br /> `compileComponents` を呼び出すと、現在の仕様の期間中、`TestBed` の構成は固定されます。                                                 |
+| `compileComponents`      | テストモジュールを構成し終えたら、非同期にコンパイルします。_いずれかの_ テストモジュールコンポーネントが非同期に読み込まれるリソース（`@defer`ブロックなど）を持つ場合は、このメソッドを **必ず** 呼び出す必要があります。                                                 |
 | `createComponent<T>`     | 現在の `TestBed` の構成に基づいて、`T` 型のコンポーネントのインスタンスを作成します。`createComponent` を呼び出すと、現在の仕様の期間中、`TestBed` の構成は固定されます。                                                                                                                                                                                               |
 | `overrideComponent`      | 指定されたコンポーネントクラスのメタデータを置き換えます。これは、内部モジュールの中に深くネストされている可能性があります。                                                                                                                                                                                                                                                   |
 | `overrideDirective`      | 指定されたディレクティブクラスのメタデータを置き換えます。これは、内部モジュールの中に深くネストされている可能性があります。                                                                                                                                                                                                                                                   |
@@ -82,7 +82,7 @@ type MetadataOverride<T> = {
 | `componentInstance` | `TestBed.createComponent` によって作成されたコンポーネントクラスのインスタンス。                                                                                                                                                                                                       |
 | `debugElement`      | コンポーネントのルート要素に関連付けられた `DebugElement`。 <br /> `debugElement` は、テストとデバッグ中に、コンポーネントとその DOM 要素に関する洞察を提供します。これは、テスターにとって重要なプロパティです。最も興味深いメンバーは、[下記](#debugelement) に記載されています。 |
 | `nativeElement`     | コンポーネントのルートにあるネイティブ DOM 要素。                                                                                                                                                                                                                                      |
-| `changeDetectorRef` | コンポーネントの `ChangeDetectorRef`。 <br /> `ChangeDetectorRef` は、コンポーネントが `ChangeDetectionStrategy.OnPush` メソッドを持っているか、コンポーネントの変更検知がプログラムによって制御されている場合に最も役立ちます。                                                          |
+| `changeDetectorRef` | コンポーネント自体ではなく、コンポーネントのホストビューの`ChangeDetectorRef`。[`TestBed`でのゾーンレスの使用](guide/zoneless#using-zoneless-in-testbed)を参照してください。 |
 
 ### `ComponentFixture` のメソッド {#componentfixture-methods}
 
@@ -122,7 +122,6 @@ type MetadataOverride<T> = {
 | `triggerEventHandler` | イベントに名前が付けられている場合、要素の `listeners` コレクションに対応するリスナーがある場合は、そのイベントをトリガーします。第 2 パラメーターは、ハンドラーで予想される _イベントオブジェクト_ です。 <br /> イベントにリスナーがない場合や、その他の問題がある場合は、`nativeElement.dispatchEvent(eventObject)` を呼び出すことを検討してください。 |
 | `listeners`           | コンポーネントの `@Output` プロパティまたは要素のイベントプロパティに添付されたコールバック。                                                                                                                                                                                                                                                |
 | `providerTokens`      | このコンポーネントのインジェクターのルックアップトークン。コンポーネント自体と、コンポーネントが `providers` メタデータにリストしているトークンが含まれます。                                                                                                                                                                                 |
-| `source`              | ソースコンポーネントテンプレートでこの要素を見つける場所。                                                                                                                                                                                                                                                                                   |
 | `references`          | テンプレートローカル変数（たとえば、`#foo`）に関連付けられているオブジェクトの辞書。ローカル変数名でキー付けされます。                                                                                                                                                                                                                       |
 
 `DebugElement.query(predicate)` および `DebugElement.queryAll(predicate)` メソッドは、ソース要素のサブツリーをフィルター処理して、一致する `DebugElement` を見つける述語を受け取ります。

From 480642583a20c8694367274110d38ff4b63087d3 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:26 +0900
Subject: [PATCH 30/51] fix(docs): retranslate updated sections in
 src/content/guide/testing

---
 .../content/guide/testing/using-component-harnesses.en.md | 8 ++++----
 .../content/guide/testing/using-component-harnesses.md    | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/adev-ja/src/content/guide/testing/using-component-harnesses.en.md b/adev-ja/src/content/guide/testing/using-component-harnesses.en.md
index 3c0c3e0ec..04040d715 100644
--- a/adev-ja/src/content/guide/testing/using-component-harnesses.en.md
+++ b/adev-ja/src/content/guide/testing/using-component-harnesses.en.md
@@ -129,10 +129,10 @@ To interact with elements below the root element of this harness loader, use the
 const myComponentHarness = await loader.getHarness(MyComponent);
 
 // Get loader for first instance of child element with '.child' selector
-const childLoader = await myComponentHarness.getLoader('.child');
+const childLoader = await loader.getChildLoader('.child');
 
 // Get loaders for all instances of child elements with '.child' selector
-const allChildLoaders = await myComponentHarness.getAllChildLoaders('.child');
+const allChildLoaders = await loader.getAllChildLoaders('.child');
 ```
 
 ### Filtering harnesses
@@ -187,7 +187,7 @@ There may be times that you need finer-grained control over change detection in
 
 ```ts
 it('checks state while async action is in progress', async () => {
-  const buttonHarness = loader.getHarness(MyButtonHarness);
+  const buttonHarness = await loader.getHarness(MyButtonHarness);
   await manualChangeDetection(async () => {
     await buttonHarness.click();
     fixture.detectChanges();
@@ -212,7 +212,7 @@ Occasionally, you may want to perform multiple actions simultaneously and wait u
 
 ```ts
 it('reads properties in parallel', async () => {
-  const checkboxHarness = loader.getHarness(MyCheckboxHarness);
+  const checkboxHarness = await loader.getHarness(MyCheckboxHarness);
   // Read the checked and intermediate properties simultaneously.
   const [checked, indeterminate] = await parallel(() => [
     checkboxHarness.isChecked(),
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 582f244fc..ae3861a56 100644
--- a/adev-ja/src/content/guide/testing/using-component-harnesses.md
+++ b/adev-ja/src/content/guide/testing/using-component-harnesses.md
@@ -129,10 +129,10 @@ it('loads harnesses', async () => {
 const myComponentHarness = await loader.getHarness(MyComponent);
 
 // Get loader for first instance of child element with '.child' selector
-const childLoader = await myComponentHarness.getLoader('.child');
+const childLoader = await loader.getChildLoader('.child');
 
 // Get loaders for all instances of child elements with '.child' selector
-const allChildLoaders = await myComponentHarness.getAllChildLoaders('.child');
+const allChildLoaders = await loader.getAllChildLoaders('.child');
 ```
 
 ### ハーネスのフィルタリング {#filtering-harnesses}
@@ -187,7 +187,7 @@ it('should get value of slider thumb', async () => {
 
 ```ts
 it('checks state while async action is in progress', async () => {
-  const buttonHarness = loader.getHarness(MyButtonHarness);
+  const buttonHarness = await loader.getHarness(MyButtonHarness);
   await manualChangeDetection(async () => {
     await buttonHarness.click();
     fixture.detectChanges();
@@ -212,7 +212,7 @@ Angularチームは、テストの可読性を向上させるために[await](ht
 
 ```ts
 it('reads properties in parallel', async () => {
-  const checkboxHarness = loader.getHarness(MyCheckboxHarness);
+  const checkboxHarness = await loader.getHarness(MyCheckboxHarness);
   // Read the checked and intermediate properties simultaneously.
   const [checked, indeterminate] = await parallel(() => [
     checkboxHarness.isChecked(),

From b6698268878acd9c381cd39af56aa213ab574412 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:26 +0900
Subject: [PATCH 31/51] fix(docs): mirror upstream code and link changes in
 src/content/introduction/essentials

---
 adev-ja/src/content/introduction/essentials/components.en.md | 1 +
 adev-ja/src/content/introduction/essentials/components.md    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/adev-ja/src/content/introduction/essentials/components.en.md b/adev-ja/src/content/introduction/essentials/components.en.md
index 156eb2a7c..bfc48a69b 100644
--- a/adev-ja/src/content/introduction/essentials/components.en.md
+++ b/adev-ja/src/content/introduction/essentials/components.en.md
@@ -98,6 +98,7 @@ To import and use a component, you need to:
 Here's an example of a `UserProfile` component importing a `ProfilePhoto` component:
 
 ```angular-ts {header: "user-profile.ts"}
+import {Component} from '@angular/core';
 import {ProfilePhoto} from './profile-photo';
 
 @Component({
diff --git a/adev-ja/src/content/introduction/essentials/components.md b/adev-ja/src/content/introduction/essentials/components.md
index 7e49a0176..5dabf4228 100644
--- a/adev-ja/src/content/introduction/essentials/components.md
+++ b/adev-ja/src/content/introduction/essentials/components.md
@@ -98,6 +98,7 @@ flowchart TD
 `ProfilePhoto`コンポーネントをインポートする`UserProfile`コンポーネントの例を次に示します。
 
 ```angular-ts {header: "user-profile.ts"}
+import {Component} from '@angular/core';
 import {ProfilePhoto} from './profile-photo';
 
 @Component({

From 1a94a0029e71bdd38e6f92f3db3b1e5e7c61a349 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:27 +0900
Subject: [PATCH 32/51] fix(docs): apply upstream wording changes in
 src/content/reference/errors

---
 adev-ja/src/content/reference/errors/NG0201.en.md   | 2 +-
 adev-ja/src/content/reference/errors/NG0201.md      | 2 +-
 adev-ja/src/content/reference/errors/NG0203.en.md   | 2 +-
 adev-ja/src/content/reference/errors/NG0203.md      | 2 +-
 adev-ja/src/content/reference/errors/NG02200.en.md  | 4 ++--
 adev-ja/src/content/reference/errors/NG02200.md     | 4 ++--
 adev-ja/src/content/reference/errors/NG8002.en.md   | 2 +-
 adev-ja/src/content/reference/errors/NG8002.md      | 2 +-
 adev-ja/src/content/reference/errors/overview.en.md | 3 +++
 adev-ja/src/content/reference/errors/overview.md    | 3 +++
 10 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/adev-ja/src/content/reference/errors/NG0201.en.md b/adev-ja/src/content/reference/errors/NG0201.en.md
index 643eaf499..59604d247 100644
--- a/adev-ja/src/content/reference/errors/NG0201.en.md
+++ b/adev-ja/src/content/reference/errors/NG0201.en.md
@@ -8,7 +8,7 @@ Read more on providers in our [Dependency Injection guide](guide/di).
 
 ## Debugging the error
 
-Work backwards from the object where the error states that a provider is missing: `No provider for ${this}!`. This is commonly thrown in services, which require non-existing providers.
+Work backwards from the object where the error states that a provider is missing: `No provider for <token> found`. This is commonly thrown in services, which require non-existing providers.
 
 To fix the error ensure that your service is registered in the list of providers of an `NgModule` or has the `@Service` decorator at top.
 
diff --git a/adev-ja/src/content/reference/errors/NG0201.md b/adev-ja/src/content/reference/errors/NG0201.md
index 9e0b58476..6dfa05f31 100644
--- a/adev-ja/src/content/reference/errors/NG0201.md
+++ b/adev-ja/src/content/reference/errors/NG0201.md
@@ -8,7 +8,7 @@
 
 ## エラーのデバッグ
 
-エラーでプロバイダーが見つからないとされているオブジェクトから逆方向に作業します。`No provider for ${this}!` は、一般的に、存在しないプロバイダーを必要とするサービスでスローされます。
+エラーでプロバイダーが見つからないとされているオブジェクトから逆方向に作業します。`No provider for <token> found` は、一般的に、存在しないプロバイダーを必要とするサービスでスローされます。
 
 エラーを修正するには、サービスが `NgModule` のプロバイダーリストに登録されているか、先頭に `@Service` デコレーターがあることを確認します。
 
diff --git a/adev-ja/src/content/reference/errors/NG0203.en.md b/adev-ja/src/content/reference/errors/NG0203.en.md
index 8e30ad93b..bafe2a49d 100644
--- a/adev-ja/src/content/reference/errors/NG0203.en.md
+++ b/adev-ja/src/content/reference/errors/NG0203.en.md
@@ -54,7 +54,7 @@ Work backwards from the stack trace of the error to identify a place where the d
 
 To fix the error move the [`inject`](api/core/inject) call to an allowed place (usually a class constructor or a field initializer).
 
-**NOTE:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed.
+NOTE: If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed.
 
 ```typescript
 TestBed.runInInjectionContext(() => {
diff --git a/adev-ja/src/content/reference/errors/NG0203.md b/adev-ja/src/content/reference/errors/NG0203.md
index f16d02273..aaafaf604 100644
--- a/adev-ja/src/content/reference/errors/NG0203.md
+++ b/adev-ja/src/content/reference/errors/NG0203.md
@@ -54,7 +54,7 @@ export class Car {
 
 エラーを修正するには、[`inject`](api/core/inject) の呼び出しを許可されている場所（通常はクラスコンストラクターまたはフィールドイニシャライザー）に移します。
 
-**NOTE:** テストコンテキストで実行している場合は、`TestBed.runInInjectionContext` を使用すると、`inject()` が成功します。
+NOTE: テストコンテキストで実行している場合は、`TestBed.runInInjectionContext`を使用すると、`inject()`が成功します。
 
 ```typescript
 TestBed.runInInjectionContext(() => {
diff --git a/adev-ja/src/content/reference/errors/NG02200.en.md b/adev-ja/src/content/reference/errors/NG02200.en.md
index 79d98667e..5c8d4fbde 100644
--- a/adev-ja/src/content/reference/errors/NG02200.en.md
+++ b/adev-ja/src/content/reference/errors/NG02200.en.md
@@ -4,5 +4,5 @@
 
 ## Debugging the error
 
-When using ngFor in a template, you must use some type of Iterable, like `Array`, `Set`, `Map`, etc.
-If you're trying to iterate over the keys in an object, you should look at the [KeyValue pipe](/api/common/KeyValuePipe) instead.
+When using ngFor in a template, you must use some type of Iterable, like `Array` or `Set`.
+If you're trying to iterate over the keys in an object or the entries of a `Map`, you should look at the [KeyValue pipe](/api/common/KeyValuePipe) instead.
diff --git a/adev-ja/src/content/reference/errors/NG02200.md b/adev-ja/src/content/reference/errors/NG02200.md
index 936d8eb80..ec6f3ce18 100644
--- a/adev-ja/src/content/reference/errors/NG02200.md
+++ b/adev-ja/src/content/reference/errors/NG02200.md
@@ -4,5 +4,5 @@
 
 ## エラーのデバッグ
 
-テンプレートでngForを使用する場合、`Array`、`Set`、`Map` などの反復可能な型を使用する必要があります。
-オブジェクトのキーを反復処理しようとしている場合は、代わりに [KeyValue パイプ](/api/common/KeyValuePipe) を検討してください。
+テンプレートでngForを使用する場合、`Array`や`Set`などの反復可能な型を使用する必要があります。
+オブジェクトのキーや`Map`のエントリーを反復処理する場合は、代わりに[KeyValueパイプ](/api/common/KeyValuePipe)を検討してください。
diff --git a/adev-ja/src/content/reference/errors/NG8002.en.md b/adev-ja/src/content/reference/errors/NG8002.en.md
index 8ca21a47e..56a38afd3 100644
--- a/adev-ja/src/content/reference/errors/NG8002.en.md
+++ b/adev-ja/src/content/reference/errors/NG8002.en.md
@@ -10,7 +10,7 @@ Any property binding must correspond to either:
 - A native property on the HTML element, or
 - An `input()`/`@Input()` property of a component or directive applied to the element.
 
-The runtime error for this is `NG0304: '${tagName}' is not a known element: …'`.
+The runtime error for this is `NG0303: Can't bind to '${propName}' since it isn't a known property of '${tagName}'`.
 
 ## Debugging the error
 
diff --git a/adev-ja/src/content/reference/errors/NG8002.md b/adev-ja/src/content/reference/errors/NG8002.md
index 7556cfa5a..62edc888e 100644
--- a/adev-ja/src/content/reference/errors/NG8002.md
+++ b/adev-ja/src/content/reference/errors/NG8002.md
@@ -10,7 +10,7 @@
 - HTML要素のネイティブプロパティ、または
 - 要素に適用されたコンポーネントまたはディレクティブの `input()`/`@Input()` プロパティ。
 
-このランタイムエラーは `NG0304: '${tagName}' is not a known element: …'` です。
+このランタイムエラーは`NG0303: Can't bind to '${propName}' since it isn't a known property of '${tagName}'`です。
 
 ## エラーのデバッグ
 
diff --git a/adev-ja/src/content/reference/errors/overview.en.md b/adev-ja/src/content/reference/errors/overview.en.md
index 9fd0eca85..38988d3ce 100644
--- a/adev-ja/src/content/reference/errors/overview.en.md
+++ b/adev-ja/src/content/reference/errors/overview.en.md
@@ -30,6 +30,7 @@
 | `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)                                 |
+| `NG0904`  | [Unsafe value used in a resource URL context](errors/NG0904)                         |
 | `NG0910`  | [Unsafe bindings on an iframe element](errors/NG0910)                                |
 | `NG0912`  | [Component ID generation collision](errors/NG0912)                                   |
 | `NG0913`  | [Runtime Performance Warnings](errors/NG0913)                                        |
@@ -40,6 +41,7 @@
 | `NG0956`  | [Tracking expression caused re-creation of the DOM structure](errors/NG0956)         |
 | `NG0991`  | [Resource completed before producing a value](errors/NG0991)                         |
 | `NG01002` | [Missing Control Value](errors/NG01002)                                              |
+| `NG01055` | [Missing control for `formControlName`](errors/NG01055)                              |
 | `NG01101` | [Wrong Async Validator Return Type](errors/NG01101)                                  |
 | `NG01203` | [Missing value accessor](errors/NG01203)                                             |
 | `NG01902` | [Orphan field in signal forms](errors/NG01902)                                       |
@@ -50,6 +52,7 @@
 | `NG05000` | [Hydration with unsupported Zone.js instance.](errors/NG05000)                       |
 | `NG05104` | [Root element was not found.](errors/NG05104)                                        |
 | `NG05106` | [Insertion reference node not found](errors/NG05106)                                 |
+| `NG05201` | [Unsafe resource URL passed to DomSanitizer](errors/NG05201)                         |
 | `NG05703` | [Suspicious URL origin change during SSR](errors/NG05703)                            |
 
 ## Compiler errors
diff --git a/adev-ja/src/content/reference/errors/overview.md b/adev-ja/src/content/reference/errors/overview.md
index 3bb8b8126..5b5019332 100644
--- a/adev-ja/src/content/reference/errors/overview.md
+++ b/adev-ja/src/content/reference/errors/overview.md
@@ -30,6 +30,7 @@
 | `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)                                 |
+| `NG0904`  | [リソースURLのコンテキストで安全でない値を使用](errors/NG0904)                         |
 | `NG0910`  | [Unsafe bindings on an iframe element](errors/NG0910)                                |
 | `NG0912`  | [Component ID generation collision](errors/NG0912)                                   |
 | `NG0913`  | [Runtime Performance Warnings](errors/NG0913)                                        |
@@ -40,6 +41,7 @@
 | `NG0956`  | [Tracking expression caused re-creation of the DOM structure](errors/NG0956)         |
 | `NG0991`  | [Resource completed before producing a value](errors/NG0991)                         |
 | `NG01002` | [Missing Control Value](errors/NG01002)                                              |
+| `NG01055` | [`formControlName`に対応するコントロールがない](errors/NG01055)                              |
 | `NG01101` | [Wrong Async Validator Return Type](errors/NG01101)                                  |
 | `NG01203` | [Missing value accessor](errors/NG01203)                                             |
 | `NG01902` | [Orphan field in signal forms](errors/NG01902)                                       |
@@ -50,6 +52,7 @@
 | `NG05000` | [Hydration with unsupported Zone.js instance.](errors/NG05000)                       |
 | `NG05104` | [Root element was not found.](errors/NG05104)                                        |
 | `NG05106` | [Insertion reference node not found](errors/NG05106)                                 |
+| `NG05201` | [DomSanitizerに安全でないリソースURLを渡した](errors/NG05201)                         |
 | `NG05703` | [Suspicious URL origin change during SSR](errors/NG05703)                            |
 
 ## コンパイラエラー

From 8ea904d4f1d60026b19cf8e808c5ca364ced0d8d Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:27 +0900
Subject: [PATCH 33/51] fix(docs): retranslate updated sections in
 src/content/tools/cli

---
 .../src/content/tools/cli/deployment.en.md    |  9 ++++++--
 adev-ja/src/content/tools/cli/deployment.md   |  9 ++++++--
 adev-ja/src/content/tools/cli/serve.en.md     | 22 +++++--------------
 adev-ja/src/content/tools/cli/serve.md        | 22 +++++--------------
 4 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/adev-ja/src/content/tools/cli/deployment.en.md b/adev-ja/src/content/tools/cli/deployment.en.md
index a35f70f1a..d69942f76 100644
--- a/adev-ja/src/content/tools/cli/deployment.en.md
+++ b/adev-ja/src/content/tools/cli/deployment.en.md
@@ -40,12 +40,17 @@ If you're deploying to a self-managed server or there's no builder for your favo
 
 ## Manual deployment to a remote server
 
-To manually deploy your application, create a production build and copy the output directory to a web server or content delivery network (CDN).
+To manually deploy your application, create a production build and deploy the output artifacts to your hosting environment.
 By default, `ng build` uses the `production` configuration.
 If you have customized your build configurations, you may want to confirm [production optimizations](tools/cli/deployment#production-optimizations) are being applied before deploying.
 
 `ng build` outputs the built artifacts to `dist/my-app/` by default, however this path can be configured with the `outputPath` option in the `@angular/build:application` builder.
-Copy this directory to the server and configure it to serve the directory.
+What you deploy depends on how your application is rendered:
+
+- **Static hosting (client-side rendering or `outputMode: "static"`):** Copy the `dist/my-app/browser/` directory to a web server or content delivery network (CDN), and configure it to serve that directory.
+- **Server-side rendering (`outputMode: "server"`):** Copy both the `dist/my-app/browser/` and `dist/my-app/server/` directories to the server, then run `node dist/my-app/server/server.mjs`.
+
+For more details, see [Server and hybrid rendering](guide/ssr).
 
 While this is a minimal deployment solution, there are a few requirements for the server to serve your Angular application correctly.
 
diff --git a/adev-ja/src/content/tools/cli/deployment.md b/adev-ja/src/content/tools/cli/deployment.md
index 68a59c43c..674187ae3 100644
--- a/adev-ja/src/content/tools/cli/deployment.md
+++ b/adev-ja/src/content/tools/cli/deployment.md
@@ -40,12 +40,17 @@ ng deploy
 
 ## リモートサーバーへの手動デプロイ
 
-あなたのアプリケーションを手動でデプロイする場合、プロダクションビルドを作成し、出力ディレクトリをwebサーバーかコンテンツデリバリネットワーク(CDN)にコピーしてください。
+アプリケーションを手動でデプロイするには、プロダクションビルドを作成し、生成されたファイルをホスティング環境に配置します。
 デフォルトでは、`ng build`は`production`設定を使用します。
 ビルド設定をカスタマイズする場合、[プロダクション最適化](tools/cli/deployment#production-optimizations)がデプロイの前に適用されていることを確認したいかもしれません。
 
 `ng build`はデフォルトで`dist/my-app/`にビルドの中間生成物を出力しますが、このパスは`@angular/build:application`ビルダーの`outputPath`で設定可能です。
-このディレクトリをサーバーにコピーし、そのディレクトリでサービスを動かすよう設定してください。
+デプロイするファイルは、アプリケーションのレンダリング方法によって異なります。
+
+- **静的ホスティング（クライアントサイドレンダリングまたは`outputMode: "static"`）:** `dist/my-app/browser/`ディレクトリをWebサーバーまたはコンテンツデリバリネットワーク（CDN）にコピーし、そのディレクトリを配信するよう設定します。
+- **サーバーサイドレンダリング（`outputMode: "server"`）:** `dist/my-app/browser/`と`dist/my-app/server/`の両方をサーバーにコピーし、`node dist/my-app/server/server.mjs`を実行します。
+
+詳しくは、[サーバーサイドレンダリングとハイブリッドレンダリング](guide/ssr)を参照してください。
 
 これは最小限のデプロイの解決法ですが、あなたのアプリケーションをサーバーで正しくサービス提供するためには少数の必要条件があります。
 
diff --git a/adev-ja/src/content/tools/cli/serve.en.md b/adev-ja/src/content/tools/cli/serve.en.md
index 86c100d31..29e4b4219 100644
--- a/adev-ja/src/content/tools/cli/serve.en.md
+++ b/adev-ja/src/content/tools/cli/serve.en.md
@@ -18,12 +18,8 @@ You can determine which builder is being used for a particular project by lookin
           "builder": "@angular/build:dev-server"
           // ...
         },
-        "build": {
-          /* ... */
-        },
-        "test": {
-          /* ... */
-        }
+        "build": {/* ... */},
+        "test": {/* ... */}
       }
     }
   }
@@ -70,14 +66,8 @@ For example, to divert all calls for `http://localhost:4200/api` to a server run
 
 NOTE: To apply changes made to your proxy configuration file, you must restart the `ng serve` process.
 
-### Path matching behavior depends on the builder
-
-**`@angular/build:dev-server`** (based on [Vite](https://vite.dev/config/server-options#server-proxy))
-
-- `/api` matches only `/api`.
-- `/api/*` matches `/api/users` but not `/api/users/123`.
-- `/api/**` matches `/api/users` and `/api/users/123`.
-
-**`@angular-devkit/build-angular:dev-server`** (based on [Webpack DevServer](https://webpack.js.org/configuration/dev-server/#devserverproxy))
+### Path matching behavior
 
-- `/api` matches `/api` and any sub-paths (equivalent to `/api/**`).
+- `/api` matches `/api` and any path that starts with it, such as `/api/users/123` or `/api-docs`.
+- `/api/*` matches `/api/users`, but not `/api` or `/api/users/123`.
+- `/api/**` matches `/api`, `/api/users`, and `/api/users/123`, but not `/api-docs`.
diff --git a/adev-ja/src/content/tools/cli/serve.md b/adev-ja/src/content/tools/cli/serve.md
index e3cd21c11..716021761 100644
--- a/adev-ja/src/content/tools/cli/serve.md
+++ b/adev-ja/src/content/tools/cli/serve.md
@@ -18,12 +18,8 @@ Angular CLIアプリケーションは、`ng serve`コマンドで配信でき
           "builder": "@angular/build:dev-server"
           // ...
         },
-        "build": {
-          /* ... */
-        },
-        "test": {
-          /* ... */
-        }
+        "build": {/* ... */},
+        "test": {/* ... */}
       }
     }
   }
@@ -70,14 +66,8 @@ Angular CLIアプリケーションは、`ng serve`コマンドで配信でき
 
 NOTE: プロキシ設定ファイルに加えた変更を適用するには、`ng serve`プロセスを再起動する必要があります。
 
-### パスマッチングの挙動はビルダーに依存する {#path-matching-behavior-depends-on-the-builder}
-
-**`@angular/build:dev-server`** ([Vite](https://vite.dev/config/server-options#server-proxy)ベース)
-
-- `/api`は`/api`のみにマッチします。
-- `/api/*`は`/api/users`にマッチしますが、`/api/users/123`にはマッチしません。
-- `/api/**`は`/api/users`と`/api/users/123`の両方にマッチします。
-
-**`@angular-devkit/build-angular:dev-server`** ([Webpack DevServer](https://webpack.js.org/configuration/dev-server/#devserverproxy)ベース)
+### パスマッチングの挙動 {#path-matching-behavior}
 
-- `/api`は`/api`とすべてのサブパスにマッチします(`/api/**`と同等)。
+- `/api`は`/api`と、`/api/users/123`や`/api-docs`のように`/api`で始まるすべてのパスにマッチします。
+- `/api/*`は`/api/users`にマッチしますが、`/api`や`/api/users/123`にはマッチしません。
+- `/api/**`は`/api`、`/api/users`、`/api/users/123`にマッチしますが、`/api-docs`にはマッチしません。

From 3dfaf07e804febd263f45ee02d286cd9fe4a4eaf Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:27 +0900
Subject: [PATCH 34/51] fix(docs): apply upstream wording changes in
 src/content/tools/devtools

---
 adev-ja/src/content/tools/devtools/component.en.md | 4 ++++
 adev-ja/src/content/tools/devtools/component.md    | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/adev-ja/src/content/tools/devtools/component.en.md b/adev-ja/src/content/tools/devtools/component.en.md
index 3c93452fb..281791019 100644
--- a/adev-ja/src/content/tools/devtools/component.en.md
+++ b/adev-ja/src/content/tools/devtools/component.en.md
@@ -74,3 +74,7 @@ The hydration status can also be visualized on the application itself by enablin
 <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.
+
+### Debug the signal graph
+
+To visualize how the signals, computeds, and effects of a component depend on each other, see [Debug the signal graph](tools/devtools/signals).
diff --git a/adev-ja/src/content/tools/devtools/component.md b/adev-ja/src/content/tools/devtools/component.md
index e9983d766..ca4eb0bf0 100644
--- a/adev-ja/src/content/tools/devtools/component.md
+++ b/adev-ja/src/content/tools/devtools/component.md
@@ -74,3 +74,7 @@ The hydration status can also be visualized on the application itself by enablin
 <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.
+
+### シグナルグラフをデバッグする {#debug-the-signal-graph}
+
+コンポーネントのシグナル、computed、effectの依存関係を可視化する方法については、[シグナルグラフのデバッグ](tools/devtools/signals)を参照してください。

From 648fcc39f81b069099848b81488d381eed5d2521 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:28 +0900
Subject: [PATCH 35/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/first-app/steps/01-hello-world

---
 .../tutorials/first-app/steps/01-hello-world/README.en.md     | 4 ++--
 .../tutorials/first-app/steps/01-hello-world/README.md        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.en.md b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.en.md
index 8baa929d5..22752d550 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.en.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.en.md
@@ -67,7 +67,7 @@ In the **Explorer** pane of your IDE:
       1. `app.css` is the style sheet for this component.
       1. New components are added to this directory.
 
-   1. In the file explorer, find the image directory (`/assets`) that contains images used by the app.
+   1. In the file explorer, find the image directory (`/public`) that contains images used by the app.
    1. In the file explorer, find the files and directories that an Angular app needs to build and run, but they are not files that you normally interact with.
       1. `.angular` has files required to build the Angular app.
       1. `.e2e` has files used to test the app.
@@ -96,7 +96,7 @@ In your IDE:
 1. Next, open `first-app/src/app/app.ts`.
 1. In `app.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component.
 
-   <docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/>
+   <docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6]"/>
 
 1. In `app.ts`, in the `App` class definition, replace the `title` line with this code to change the component title.
 
diff --git a/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md
index cbc4ad365..324c2390f 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/01-hello-world/README.md
@@ -67,7 +67,7 @@ IDEの**エクスプローラー**ペイン:
       1. `app.css`はこのコンポーネントのスタイルシートです。
       1. 新しいコンポーネントはこのディレクトリに追加されます。
 
-   1. ディレクトリ(`/assets`)にはアプリケーションで使用される画像が含まれています。
+   1. ディレクトリ(`/public`)にはアプリケーションで使用される画像が含まれています。
    1. Angularアプリケーションのビルドと実行に必要ですが、通常は直接操作しないファイルやディレクトリもあります。
       1. `.angular`はAngularアプリケーションをビルドするのに必要なファイルを含みます。
       1. `.e2e`はアプリケーションをテストするのに使用されるファイルを含みます。
@@ -96,7 +96,7 @@ Angularアプリケーションプロジェクトを構成するファイルを
 1. 次に`first-app/src/app/app.ts`を開いてください。
 1. `app.ts`の`@Component`の定義内にある、`template`の行を次のコードに置き換えてアプリケーションコンポーネントの表示テキストを変更します。
 
-   <docs-code language="angular-ts" header="src/app/app.tsを置き換えてください" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/>
+   <docs-code language="angular-ts" header="src/app/app.tsを置き換えてください" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6]"/>
 
 1. `app.ts`の`App`クラスの定義で、`title`の行を次のコードに置き換えてコンポーネントのタイトルを変更します。
 

From 03d6de9991de19610fb0e2c3c4fa84c989b9657e Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:28 +0900
Subject: [PATCH 36/51] fix(docs): retranslate updated sections in
 src/content/tutorials/first-app/steps/02-Home

---
 .../tutorials/first-app/steps/02-Home/README.en.md    | 11 +++++------
 .../tutorials/first-app/steps/02-Home/README.md       |  9 ++++-----
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.en.md b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.en.md
index 155e8b19c..86a3b7115 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.en.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.en.md
@@ -18,7 +18,6 @@ In Angular, components have metadata that define its properties.
 When you create your `Home`, you use these properties:
 
 - `selector`: to describe how Angular refers to the component in templates.
-- `standalone`: to describe whether the component requires a `NgModule`.
 - `imports`: to describe the component's dependencies.
 - `template`: to describe the component's HTML markup and layout.
 - `styleUrls`: to list the URLs of the CSS files that the component uses in an array.
@@ -93,17 +92,17 @@ In this step you add features to `Home`.
 In the previous step, you added the default `Home` to your app's template so its default HTML appeared in the app.
 In this step, you add a search filter and button that is used in a later lesson.
 For now, that's all that `Home` has.
-Note that, this step just adds the search elements to the layout without any functionality, yet.
+Note that this step just adds the search elements to the layout without any functionality, yet.
 
 If you started from a fresh Angular project instead of downloading the starter
 (ng new): add these globals to `src/styles.css` so the search button and input border are visible:
 
-```
+```css
 :root {
-  --primary-color: #605DC8;
-  --secondary-color: #8B89E6;
+  --primary-color: #605dc8;
+  --secondary-color: #8b89e6;
   --accent-color: #e8e7fa;
-  --shadow-color: #E8E8E8;
+  --shadow-color: #e8e8e8;
 }
 
 button.primary {
diff --git a/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md
index adfa8f5c9..1f171339a 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/02-Home/README.md
@@ -18,7 +18,6 @@ Angularでは、コンポーネントにはプロパティを定義するため
 `Home`コンポーネントを作成するときには、これらのプロパティを使用します。
 
 - `selector`: テンプレートでAngularがコンポーネントを参照する方法を示します。
-- `standalone`: コンポーネントが`NgModule`を必要とするかを示します。
 - `imports`: コンポーネントの依存関係を示します。
 - `template`: コンポーネントのHTMLマークアップとレイアウトを示します。
 - `styleUrls`: コンポーネントが使用するCSSファイルのURLを配列で指定します。
@@ -98,12 +97,12 @@ IDEの**編集**ペインで、
 (ng newで)スターターを使わずに、新しいAngularプロジェクトを作成した場合、
 検索ボタンと入力欄の枠線が表示されるよう`src/styles.css`に次のグローバルスタイルを追加します。
 
-```
+```css
 :root {
-  --primary-color: #605DC8;
-  --secondary-color: #8B89E6;
+  --primary-color: #605dc8;
+  --secondary-color: #8b89e6;
   --accent-color: #e8e7fa;
-  --shadow-color: #E8E8E8;
+  --shadow-color: #e8e8e8;
 }
 
 button.primary {

From 233830f803022df0ddaa1dfc121a75f4ba8c8558 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:28 +0900
Subject: [PATCH 37/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/first-app/steps/04-interfaces

---
 .../tutorials/first-app/steps/04-interfaces/README.en.md      | 4 ++--
 .../content/tutorials/first-app/steps/04-interfaces/README.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.en.md b/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.en.md
index 3e47de772..680f13658 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.en.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.en.md
@@ -70,11 +70,11 @@ There are a few more lessons to complete before that happens.
 
 1.  In `src/app/home/home.ts`, replace the empty `export class Home {}` definition with this code to create a single instance of the new interface in the component.
 
-      <docs-code language="angular-ts" header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
+      <docs-code language="angular-ts" header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[21,34]"/>
 
 1.  Confirm that your `home.ts` file matches this example.
 
-      <docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" />
+      <docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[1,34]" />
 
     By adding the `housingLocation` property of type `HousingLocation` to the `Home` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.
 
diff --git a/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.md b/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.md
index 3da0f5bf8..4e39f4dd3 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/04-interfaces/README.md
@@ -70,11 +70,11 @@ IDEの**ターミナル**ペインで、
 
 1.  `src/app/home/home.ts`で、空の`export class Home {}`の定義をコンポーネント内で新しいインターフェースの単一のインスタンスを作成する次のコードに置き換えてください。
 
-      <docs-code language="angular-ts" header="src/app/home/home.tsにサンプルデータを追加する" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
+      <docs-code language="angular-ts" header="src/app/home/home.tsにサンプルデータを追加する" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[21,34]"/>
 
 1.  `home.ts`ファイルが次の例と一致していることを確認してください。
 
-      <docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" />
+      <docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[1,34]" />
 
     `Home`クラスに`HousingLocation`型の`housingLocation`プロパティを追加することで、データがインターフェースの定義どおりであることを確認できます。もしデータがインターフェースの定義を満たしていなければ、IDEがその旨のエラーを表示して知らせてくれます。
 

From 053db0c9d0b0b403f22ab06a9d2dffda90dc633b Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:28 +0900
Subject: [PATCH 38/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/first-app/steps/05-inputs

---
 .../content/tutorials/first-app/steps/05-inputs/README.en.md  | 4 ++--
 .../src/content/tutorials/first-app/steps/05-inputs/README.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.en.md b/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.en.md
index d1636b6d3..a3371d3a9 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.en.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.en.md
@@ -21,9 +21,9 @@ Learn more in the [Accepting data with input properties](guide/components/inputs
 <docs-workflow>
 
 <docs-step title="Import the input() function">
-In the code editor, import the `input` helper method from `@angular/core` into the `HousingLocation` component.
+In the code editor, import the `input` helper method from `@angular/core` and the `HousingLocationInfo` interface from `../housinglocation` into the `HousingLocation` component.
 
-<docs-code header="Import input in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/>
+<docs-code header="Import input and HousingLocationInfo in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1,2]"/>
 
 </docs-step>
 
diff --git a/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.md b/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.md
index a8cd60dbb..53c723e39 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/05-inputs/README.md
@@ -21,9 +21,9 @@ NOTE: この動画は古い構文を使っていますが、主要なコンセ
 <docs-workflow>
 
 <docs-step title="input()関数をインポートする">
-コードエディタ―で、`HousingLocation`コンポーネントに`@angular/core`から`input`ヘルパーメソッドをインポートします。
+コードエディターで、`@angular/core`から`input`ヘルパーメソッドを、`../housinglocation`から`HousingLocationInfo`インターフェースを`HousingLocation`コンポーネントにインポートします。
 
-<docs-code header="housing-location.tsでinputをインポートする" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/>
+<docs-code header="housing-location.tsでinputとHousingLocationInfoをインポートする" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1,2]"/>
 
 </docs-step>
 

From e1bc7eb4ab4d847be8cfd4346d9c38268f55c6db Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:29 +0900
Subject: [PATCH 39/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/first-app/steps/06-property-binding

---
 .../first-app/steps/06-property-binding/README.en.md          | 4 ++--
 .../tutorials/first-app/steps/06-property-binding/README.md   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.en.md b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.en.md
index 88018aa07..17d28361f 100644
--- a/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.en.md
+++ b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.en.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/binding#css-class-and-style-property-bindings) guide.
+For a more in depth explanation, please refer to the [Property binding](/guide/templates/binding#binding-dynamic-properties-and-attributes) 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/binding#css-class-and-style-property-bindings" title="Property binding"/>
+  <docs-pill href="/guide/templates/binding#binding-dynamic-properties-and-attributes" title="Property binding"/>
 </docs-pill-row>
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 3ab03c6ec..a391728c1 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 @@
 
 プロパティバインディングを使うと、Angularテンプレート内で変数を`Input`プロパティに結びつけることができます。こうして渡されたデータは`Input`に動的にバインドされます。
 
-より詳しい説明は、ガイドの[プロパティバインディング](/guide/templates/binding#css-class-and-style-property-bindings)を参照してください。
+より詳しい説明は、ガイドの[プロパティバインディング](/guide/templates/binding#binding-dynamic-properties-and-attributes)を参照してください。
 
 <docs-workflow>
 
@@ -46,5 +46,5 @@ SUMMARY: このレッスンでは、新しいプロパティバインディン
 このレッスンで扱った内容について、さらに詳しく知りたい場合は次のページをご覧ください:
 
 <docs-pill-row>
-  <docs-pill href="/guide/templates/binding#css-class-and-style-property-bindings" title="プロパティのバインディング"/>
+  <docs-pill href="/guide/templates/binding#binding-dynamic-properties-and-attributes" title="プロパティのバインディング"/>
 </docs-pill-row>

From d835cacf1f0384ce72a1707f6dbd88e28cf9db46 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:29 +0900
Subject: [PATCH 40/51] fix(docs): mirror upstream code and link changes in
 src/content/tutorials/learn-angular/steps/10-deferrable-views

---
 .../learn-angular/steps/10-deferrable-views/README.en.md      | 4 ++++
 .../learn-angular/steps/10-deferrable-views/README.md         | 4 ++++
 2 files changed, 8 insertions(+)

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 6441ff359..11e6f260a 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
@@ -81,6 +81,10 @@ Deferrable views have a number of trigger options. Add a viewport trigger so the
 ```angular-html {highlight:[1]}
 @defer (on viewport) {
   <comments />
+} @placeholder {
+  <p>Future comments</p>
+} @loading (minimum 2s) {
+  <p>Loading comments...</p>
 }
 ```
 
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 7bdb16108..caf5d6eec 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
@@ -81,6 +81,10 @@ NOTE: 詳しくは、[詳細ガイドの @defer を使った遅延読み込み](
 ```angular-html {highlight:[1]}
 @defer (on viewport) {
   <comments />
+} @placeholder {
+  <p>Future comments</p>
+} @loading (minimum 2s) {
+  <p>Loading comments...</p>
 }
 ```
 

From 69c777adbf650e279d97034b9f39c4ef967e6dfb Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:29 +0900
Subject: [PATCH 41/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/learn-angular/steps/11-optimizing-images

---
 .../learn-angular/steps/11-optimizing-images/README.en.md       | 2 +-
 .../learn-angular/steps/11-optimizing-images/README.md          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 4d7b8b2db..205ab63f3 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
@@ -56,7 +56,7 @@ imports: [NgOptimizedImage],
 
 Note that in the above code example, each image has both `width` and `height` attributes. In order to prevent [layout shift](https://web.dev/articles/cls), the `NgOptimizedImage` directive requires both size attributes on each image.
 
-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:
+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](/guide/image-optimization#using-fill-mode) to tell the image to act like a "background image", filling its containing element:
 
 ```angular-html
 // Container div has 'position: "relative"'
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 2bdbba37a..827efd81b 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
@@ -56,7 +56,7 @@ imports: [NgOptimizedImage],
 
 上記のコード例では、各画像に `width` と `height` の両方の属性が設定されていることに注意してください。[レイアウトシフト](https://web.dev/articles/cls) を防ぐために、`NgOptimizedImage` ディレクティブでは、各画像に両方のサイズ属性を設定する必要があります。
 
-画像に対して静的な `height` と `width` を指定できない場合、または指定したくない場合は、[fill 属性](https://web.dev/articles/cls)を使用します。画像を「背景画像」のように動作させ、そのコンテナ要素を塗りつぶすようにできます。
+画像に対して静的な `height` と `width` を指定できない場合、または指定したくない場合は、[fill 属性](/guide/image-optimization#using-fill-mode)を使用します。画像を「背景画像」のように動作させ、そのコンテナ要素を塗りつぶすようにできます。
 
 ```angular-html
 // コンテナ div は 'position: "relative"'

From 8c65733f46f0dc2895dc41e1f350b3e5e5750469 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:30 +0900
Subject: [PATCH 42/51] fix(docs): mirror upstream code and link changes in
 src/content/tutorials/learn-angular/steps/12-enable-routing

---
 .../learn-angular/steps/12-enable-routing/README.en.md        | 4 +---
 .../tutorials/learn-angular/steps/12-enable-routing/README.md | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md
index c95112fbf..8052c51c5 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.en.md
@@ -51,9 +51,7 @@ Finally, to make sure your app is ready to use the Angular Router, you need to t
 
 Update the template for `App` by adding `<router-outlet />`
 
-```angular-ts {highlight:[11]}
-import {RouterOutlet} from '@angular/router';
-
+```angular-ts {highlight:[9]}
 @Component({
 ...
 template: `
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
index 73a0aa2ed..c2cb476aa 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
@@ -51,9 +51,7 @@ export const appConfig: ApplicationConfig = {
 
 `App` のテンプレートを更新し、`<router-outlet />` を追加します。
 
-```angular-ts {highlight:[11]}
-import {RouterOutlet} from '@angular/router';
-
+```angular-ts {highlight:[9]}
 @Component({
 ...
 template: `

From bc753507513e2563d5bdf5000fbbfd793f973c56 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:30 +0900
Subject: [PATCH 43/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/learn-angular/steps/24-create-a-pipe

---
 .../learn-angular/steps/24-create-a-pipe/README.en.md         | 4 +++-
 .../tutorials/learn-angular/steps/24-create-a-pipe/README.md  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md
index 709800386..aefe8611e 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.en.md
@@ -64,7 +64,7 @@ export class ReversePipe implements PipeTransform {
 
 </docs-step>
 
-<docs-step title="Use the `ReversePipe` in the template"></docs-step>
+<docs-step title="Use the `ReversePipe` in the template">
 With the pipe logic implemented, the final step is to use it in the template. In `app.ts` include the pipe in the template and add it to the component imports:
 
 ```angular-ts {highlight:[3,4]}
@@ -75,6 +75,8 @@ With the pipe logic implemented, the final step is to use it in the template. In
 })
 ```
 
+</docs-step>
+
 </docs-workflow>
 
 And with that you've done it. Congratulations on completing this activity. You now know how to use pipes and even how to implement your own custom pipes.
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
index 2815e166d..1158c7d2b 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
@@ -64,7 +64,7 @@ export class ReversePipe implements PipeTransform {
 
 </docs-step>
 
-<docs-step title="テンプレートで `ReversePipe` を使用する"></docs-step>
+<docs-step title="テンプレートで `ReversePipe` を使用する">
 パイプロジックを実装したら、最後のステップとしてテンプレートで使用します。`app.ts` でテンプレートにパイプを含め、コンポーネントのインポートに追加します。
 
 ```angular-ts {highlight:[3,4]}
@@ -75,6 +75,8 @@ export class ReversePipe implements PipeTransform {
 })
 ```
 
+</docs-step>
+
 </docs-workflow>
 
 これにて終了です。このアクティビティの完了、おめでとうございます。これでパイプの使い方と、独自のパイプを実装する方法がわかりました。

From 4f892473353eb05ce8498ecaf6eab10d29d71201 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:31 +0900
Subject: [PATCH 44/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/learn-angular/steps/4-control-flow-if

---
 .../learn-angular/steps/4-control-flow-if/README.en.md          | 2 +-
 .../tutorials/learn-angular/steps/4-control-flow-if/README.md   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 c0ff4ec97..36cc9b079 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
@@ -31,7 +31,7 @@ export class App {
 Two things to take note of:
 
 - There is an `@` prefix for the `if` because it is a special type of syntax called [Angular template syntax](guide/templates)
-- For applications using v16 and older please refer to the [Angular documentation for NgIf](guide/directives/structural-directives) for more information.
+- For applications that still use `*ngIf`, please refer to the [Angular documentation for NgIf](guide/directives/structural-directives) for more information.
 
 <docs-workflow>
 
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 435bbbf22..5a8be2f63 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
@@ -31,7 +31,7 @@ export class App {
 2つの注意すべき点があります。
 
 - `if`に`@`プレフィックスが付いているのは、[Angularテンプレート構文](guide/templates)と呼ばれる特殊なタイプの構文だからです。
-- v16以前のアプリケーションを使用している場合は、詳細については[AngularドキュメントのNgIf](guide/directives/structural-directives)を参照してください。
+- 引き続き`*ngIf`を使用しているアプリケーションでは、詳しくは[AngularのNgIfドキュメント](guide/directives/structural-directives)を参照してください。
 
 <docs-workflow>
 

From 415eeb90c70b0ae00ec9d4e01689e974da3d8b56 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:31 +0900
Subject: [PATCH 45/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/learn-angular/steps/5-control-flow-for

---
 .../learn-angular/steps/5-control-flow-for/README.en.md         | 2 +-
 .../tutorials/learn-angular/steps/5-control-flow-for/README.md  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md
index 9b961c728..17fe4a159 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.en.md
@@ -29,7 +29,7 @@ export class App {
 Two things to take note of:
 
 - There is an `@` prefix for the `for` because it is a special syntax called [Angular template syntax](guide/templates)
-- For applications using v16 and older please refer to the [Angular documentation for NgFor](guide/directives/structural-directives)
+- For applications that still use `*ngFor`, please refer to the [Angular documentation for NgFor](guide/directives/structural-directives)
 
 <docs-workflow>
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md
index 019f537ee..707be39ff 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md
@@ -29,7 +29,7 @@ export class App {
 注意すべき点が2つあります。
 
 - `for` に `@` プレフィックスが付いているのは、[Angular テンプレート構文](guide/templates)と呼ばれる特殊な構文であるためです。
-- v16以前のアプリケーションを使用している場合は、[NgFor の Angular ドキュメント](guide/directives/structural-directives)を参照してください。
+- 引き続き`*ngFor`を使用しているアプリケーションでは、[AngularのNgForドキュメント](guide/directives/structural-directives)を参照してください。
 
 <docs-workflow>
 

From 8febac716c89d90a76ce7d8b4a0d0dbbd2fa90b3 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:31 +0900
Subject: [PATCH 46/51] fix(docs): retranslate updated sections in
 src/content/tutorials/learn-angular/steps/7-event-handling

---
 .../learn-angular/steps/7-event-handling/README.en.md       | 6 ++----
 .../learn-angular/steps/7-event-handling/README.md          | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

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 5c5cbfb39..46e4a1dd6 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
@@ -29,12 +29,10 @@ Alright, your turn to give this a try:
 <docs-workflow>
 
 <docs-step title="Add an event handler">
-Add the `showSecretMessage()` event handler function in the `App` class. Use the following code as the implementation:
+In the `App` class, fill in the body of the existing `showSecretMessage()` method with the following code:
 
 ```ts
-showSecretMessage() {
-  this.message = 'Way to go 🚀';
-}
+this.message = 'Way to go 🚀';
 ```
 
 </docs-step>
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 9bdefc27b..fc21b972e 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
@@ -29,12 +29,10 @@ export class App {
 <docs-workflow>
 
 <docs-step title="イベントハンドラーを追加">
-`App`クラスに`showSecretMessage()`イベントハンドラー関数を追加します。以下のコードを実装に使用します。
+`App`クラスに既にある`showSecretMessage()`メソッドの本体に、次のコードを記述します。
 
 ```ts
-showSecretMessage() {
-  this.message = 'Way to go 🚀';
-}
+this.message = 'Way to go 🚀';
 ```
 
 </docs-step>

From d83e9f04e856ddf42da71240e0a075c143623f77 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:32 +0900
Subject: [PATCH 47/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect

---
 .../10-reacting-to-signal-changes-with-effect/README.en.md  | 6 +++---
 .../10-reacting-to-signal-changes-with-effect/README.md     | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.en.md b/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.en.md
index 562424b1d..8eb008d6e 100644
--- a/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.en.md
+++ b/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.en.md
@@ -80,17 +80,17 @@ constructor() {
 }
 ```
 
-This effect demonstrates how to clean up resources when effects are destroyed or re-run.
+This effect reads no signals while it runs, because `this.theme()` is only called later inside the `setInterval` callback. It runs once and never re-runs, so the cleanup only happens when the component is destroyed, for example when the preview reloads.
 </docs-step>
 
 <docs-step title="Test the effects">
 Open the browser console and interact with the app:
 
-- **Toggle Theme** - See localStorage saves and timer logs
+- **Toggle Theme** - See localStorage saves
 - **Login/Logout** - See user activity logging
 - **Watch Timer** - See periodic theme logging every 5 seconds
 
-The effects run automatically whenever their tracked signals change!
+Effects run once when the component is created, so some of these logs appear before you click anything. After that, they run again whenever the signals they read change.
 </docs-step>
 
 </docs-workflow>
diff --git a/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.md b/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.md
index c6d28f9b2..35334be8a 100644
--- a/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.md
+++ b/adev-ja/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.md
@@ -80,17 +80,17 @@ constructor() {
 }
 ```
 
-このeffectは、effectが破棄または再実行されたときにリソースをクリーンアップする方法を示しています。
+このeffectは、`this.theme()`が後で`setInterval`のコールバック内でのみ呼び出されるため、実行中にシグナルを読み取りません。effectは一度だけ実行され、再実行されないため、クリーンアップはプレビューの再読み込みなどでコンポーネントが破棄されたときにのみ行われます。
 </docs-step>
 
 <docs-step title="Test the effects">
 ブラウザのコンソールを開き、アプリを操作します。
 
-- **テーマを切り替える** - ローカルストレージの保存とタイマーログを確認
+- **テーマを切り替える** - ローカルストレージへの保存を確認
 - **ログイン/ログアウト** - ユーザーアクティビティのログを確認
 - **タイマーを監視する** - 5秒ごとの定期的なテーマログを確認
 
-effectは、追跡しているシグナルが変更されるたびに自動的に実行されます！
+effectはコンポーネントの作成時に一度実行されるため、クリックする前に表示されるログもあります。その後、読み取ったシグナルが変更されるたびに再実行されます。
 </docs-step>
 
 </docs-workflow>

From 1c5b11fa5af452db62c23abaa27b7751892d1acc Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:32 +0900
Subject: [PATCH 48/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals

---
 .../steps/2-deriving-state-with-computed-signals/README.en.md   | 2 +-
 .../steps/2-deriving-state-with-computed-signals/README.md      | 2 +-
 2 files changed, 2 insertions(+), 2 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 0a67202cd..f581a713e 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
@@ -60,7 +60,7 @@ isWithinWorkingHours = computed(() => {
   const now = new Date();
   const hour = now.getHours();
   const isWeekday = now.getDay() > 0 && now.getDay() < 6;
-  return isWeekday && hour >= 9 && hour < 17 && this.userStatus() !== 'offline';
+  return this.userStatus() !== 'offline' && isWeekday && hour >= 9 && hour < 17;
 });
 ```
 
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 5df945373..d30d4fa58 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
@@ -60,7 +60,7 @@ isWithinWorkingHours = computed(() => {
   const now = new Date();
   const hour = now.getHours();
   const isWeekday = now.getDay() > 0 && now.getDay() < 6;
-  return isWeekday && hour >= 9 && hour < 17 && this.userStatus() !== 'offline';
+  return this.userStatus() !== 'offline' && isWeekday && hour >= 9 && hour < 17;
 });
 ```
 

From e3502079b19d45e683f0eadaf2524bb1479ce751 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:33 +0900
Subject: [PATCH 49/51] fix(docs): apply upstream wording changes in
 src/content/tutorials/signals/steps/4-managing-async-data-with-signals

---
 .../steps/4-managing-async-data-with-signals/README.en.md     | 4 ++--
 .../steps/4-managing-async-data-with-signals/README.md        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

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 6cfde7ea6..faa9ced6f 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
@@ -54,11 +54,11 @@ Changing the params signal automatically triggers a reload, or you can manually
 Add computed signals to access different states of the resource.
 
 ```ts
-isLoading = computed(() => this.userResource.status() === 'loading');
+isLoading = this.userResource.isLoading;
 hasError = computed(() => this.userResource.status() === 'error');
 ```
 
-Resources provide a `status()` signal that can be 'loading', 'resolved', or 'error', a `value()` signal for the loaded data, and a `hasValue()` method that safely checks if data is available.
+Resources provide a `status()` signal that can be 'loading', 'reloading', 'resolved', or 'error', a `value()` signal for the loaded data, and a `hasValue()` method that safely checks if data is available. The `isLoading()` signal is true for both 'loading' and 'reloading'.
 </docs-step>
 
 <docs-step title="Wire up the buttons and display resource states">
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 ad23edc3a..a38dfebff 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
@@ -54,11 +54,11 @@ paramsシグナルを変更すると自動的にリロードがトリガーさ
 リソースの異なる状態にアクセスするための算出シグナルを追加します。
 
 ```ts
-isLoading = computed(() => this.userResource.status() === 'loading');
+isLoading = this.userResource.isLoading;
 hasError = computed(() => this.userResource.status() === 'error');
 ```
 
-リソースは、'loading'、'resolved'、または'error'になり得る`status()`シグナル、ロードされたデータ用の`value()`シグナル、そしてデータが利用可能かどうかを安全にチェックする`hasValue()`メソッドを提供します。
+リソースは、'loading'、'reloading'、'resolved'、'error'のいずれかになる`status()`シグナル、読み込んだデータの`value()`シグナル、データが利用可能かを安全に確認する`hasValue()`メソッドを提供します。`isLoading()`シグナルは'loading'と'reloading'のどちらでもtrueになります。
 </docs-step>
 
 <docs-step title="ボタンを接続し、リソースの状態を表示する" {#wire-up-the-buttons-and-display-resource-states}>

From 82077eeb33cd15cd690ec158dd10d194a6755ce1 Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:17:33 +0900
Subject: [PATCH 50/51] fix(docs): mirror upstream code and link changes in
 src/content/tutorials/signals/steps/5-component-communication-with-signals

---
 .../5-component-communication-with-signals/README.en.md     | 6 +++---
 .../steps/5-component-communication-with-signals/README.md  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

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 fe785da71..b859f8d03 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
@@ -64,8 +64,8 @@ Add methods in `app.ts` to update the parent signals and see how the child compo
 
 ```ts
 updateProduct() {
-  this.productName.set('Updated Product');
-  this.productPrice.set(149);
+  this.productName.set(`Product ${Math.floor(Math.random() * 100)}`);
+  this.productPrice.set(Math.floor(Math.random() * 500) + 50);
 }
 
 toggleAvailability() {
@@ -76,7 +76,7 @@ toggleAvailability() {
 ```html
 <!-- Add controls to test reactivity -->
 <div class="controls">
-  <button (click)="updateProduct()">Update Product Info</button>
+  <button (click)="updateProduct()">Update Product Data</button>
   <button (click)="toggleAvailability()">Toggle Availability</button>
 </div>
 ```
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 2bd7f886e..e290792fe 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
@@ -64,8 +64,8 @@ available = input<boolean>(true);
 
 ```ts
 updateProduct() {
-  this.productName.set('Updated Product');
-  this.productPrice.set(149);
+  this.productName.set(`Product ${Math.floor(Math.random() * 100)}`);
+  this.productPrice.set(Math.floor(Math.random() * 500) + 50);
 }
 
 toggleAvailability() {
@@ -76,7 +76,7 @@ toggleAvailability() {
 ```html
 <!-- Add controls to test reactivity -->
 <div class="controls">
-  <button (click)="updateProduct()">Update Product Info</button>
+  <button (click)="updateProduct()">Update Product Data</button>
   <button (click)="toggleAvailability()">Toggle Availability</button>
 </div>
 ```

From a92c444b59d85ed67ade6ed4a1429631148caaae Mon Sep 17 00:00:00 2001
From: Suguru Inatomi <suguru.inatomi@gmail.com>
Date: Sun, 25 Oct 2026 10:56:56 +0900
Subject: [PATCH 51/51] fix(docs): add anchor IDs to all headings in
 expression-syntax.md

---
 .../guide/templates/expression-syntax.md      | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/adev-ja/src/content/guide/templates/expression-syntax.md b/adev-ja/src/content/guide/templates/expression-syntax.md
index 39cc04da0..a0f843b50 100644
--- a/adev-ja/src/content/guide/templates/expression-syntax.md
+++ b/adev-ja/src/content/guide/templates/expression-syntax.md
@@ -2,11 +2,11 @@
 
 Angular式はJavaScriptに基づいていますが、いくつかの重要な点で異なります。このガイドでは、Angular式と標準JavaScriptの類似点と相違点を説明します。
 
-## 値リテラル
+## 値リテラル {#value-literals}
 
 Angularは、[リテラル値](https://developer.mozilla.org/en-US/docs/Glossary/Literal)のサブセットをJavaScriptからサポートしています。
 
-### サポートされる値リテラル
+### サポートされる値リテラル {#supported-value-literals}
 
 | Literal type           | Example values                  |
 | ---------------------- | ------------------------------- |
@@ -20,13 +20,13 @@ Angularは、[リテラル値](https://developer.mozilla.org/en-US/docs/Glossary
 | Template string        | `` `Hello ${name}` ``           |
 | Tagged template string | `` tag`Hello ${name}` ``        |
 
-### サポートされていない値リテラル
+### サポートされていない値リテラル {#unsupported-value-literals}
 
 | Literal type | Example values |
 | ------------ | -------------- |
 | BigInt       | `1n`           |
 
-## グローバル
+## グローバル {#globals}
 
 Angular式は、次の[グローバル](https://developer.mozilla.org/en-US/docs/Glossary/Global_object)をサポートしています。
 
@@ -35,15 +35,15 @@ Angular式は、次の[グローバル](https://developer.mozilla.org/en-US/docs
 
 その他のJavaScriptグローバルはサポートされていません。一般的なJavaScriptグローバルには、`Number`、`Boolean`、`NaN`、`Infinity`、`parseInt`などがあります。
 
-## ローカル変数
+## ローカル変数 {#local-variables}
 
 Angularは、特定のコンテキストで式に使用できる特別なローカル変数を自動的に用意します。これらの特別な変数は、常にドル記号文字（`$`）で始まります。
 
 たとえば、`@for`ブロックはループに関する情報に対応する複数のローカル変数（`$index`など）を提供します。
 
-## どのような演算子がサポートされていますか？
+## どのような演算子がサポートされていますか？ {#what-operators-are-supported}
 
-### サポートされる演算子
+### サポートされる演算子 {#supported-operators}
 
 Angularは、標準JavaScriptの次の演算子をサポートしています。
 
@@ -111,7 +111,7 @@ v22への移行中、`ng update`のスキマティクスは、以前の`null`を
 
 NOTE: `$safeNavigationMigration`を削除できるように、`null`と`undefined`の区別に依存しない式へ移行することを推奨します。この関数は将来のAngularのバージョンで削除される可能性があります。
 
-### サポートされていない演算子
+### サポートされていない演算子 {#unsupported-operators}
 
 | 演算子              | 例(複数)                        |
 | --------------------- | --------------------------------- |
@@ -121,13 +121,13 @@ NOTE: `$safeNavigationMigration`を削除できるように、`null`と`undefine
 | カンマ演算子        | `x = (x++, x)`                    |
 | new                   | `new Car()`                       |
 
-## 式の字句コンテキスト
+## 式の字句コンテキスト {#lexical-context-for-expressions}
 
 Angular式は、コンポーネントクラスのコンテキストと、関連する[テンプレート変数](/guide/templates/variables)、ローカル変数、およびグローバル変数のコンテキストで評価されます。
 
 コンポーネントクラスのメンバーを参照する場合、`this`は常に暗黙的に指定されます。ただし、テンプレートが同じ名前の[テンプレート変数](guide/templates/variables)を宣言している場合、その変数はメンバーをシャドウします。このようなクラスメンバーは、明示的に`this.`を使用することで明確に参照できます。これは、クラスメンバーをシャドウする`@let`宣言を作成する場合に便利です。たとえば、シグナルの絞り込み目的で使用できます。
 
-## 宣言
+## 宣言 {#declarations}
 
 一般的に、Angular式では宣言はサポートされていません。これには、以下が含まれますが、これらに限定されません。
 
@@ -138,7 +138,7 @@ Angular式は、コンポーネントクラスのコンテキストと、関連
 | ブロック本体を持つアロー関数       | `() => { }`                                 |
 | クラス          | `class Rectangle { }`                       |
 
-## イベントリスナー文
+## イベントリスナー文 {#event-listener-statements}
 
 イベントハンドラーは、**式**ではなく**文**です。Angular式と同じ構文をすべてサポートしていますが、2つの重要な違いがあります。