`)?
+1. Are you using a custom form control declared inside an `NgModule`? if so, make sure you are **importing** the `NgModule`.
+1. Are you using `ngModel` with a third-party custom form control? Check whether that control provides a value accessor. If not, use **`ngDefaultControl`** on the control's element.
+1. Are you **testing** a custom form control? Be sure to configure your testbed to know about the control. You can do so with `Testbed.configureTestingModule`.
+1. Are you using **Nx and Module Federation** with Webpack? Your `webpack.config.js` may require [extra configuration](https://github.com/angular/angular/issues/43821#issuecomment-1054845431) to ensure the forms package is shared.
diff --git a/adev-ja/src/content/reference/errors/NG01203.md b/adev-ja/src/content/reference/errors/NG01203.md
index 89152f92c..4bfc12e18 100644
--- a/adev-ja/src/content/reference/errors/NG01203.md
+++ b/adev-ja/src/content/reference/errors/NG01203.md
@@ -1,8 +1,8 @@
# Missing value accessor
-For all custom form controls, you must register a value accessor.
+すべてのカスタムフォームコントロールには、値アクセサを登録する必要があります。
-Here's an example of how to provide one:
+値アクセサを提供する方法の例を以下に示します。
```typescript
providers: [
@@ -14,13 +14,13 @@ providers: [
]
```
-## Debugging the error
+## エラーのデバッグ
-As described above, your control was expected to have a value accessor, but was missing one. However, there are many different reasons this can happen in practice. Here's a listing of some known problems leading to this error.
+上記のように、コントロールには値アクセサが必要ですが、見つかりませんでした。しかし、実際にはこのエラーが発生する原因はたくさんあります。このエラーにつながる可能性のある既知の問題を次に示します。
-1. If you **defined** a custom form control, did you remember to provide a value accessor?
-1. Did you put `ngModel` on an element with no value, or an **invalid element** (e.g. `
`)?
-1. Are you using a custom form control declared inside an `NgModule`? if so, make sure you are **importing** the `NgModule`.
-1. Are you using `ngModel` with a third-party custom form control? Check whether that control provides a value accessor. If not, use **`ngDefaultControl`** on the control's element.
-1. Are you **testing** a custom form control? Be sure to configure your testbed to know about the control. You can do so with `Testbed.configureTestingModule`.
-1. Are you using **Nx and Module Federation** with Webpack? Your `webpack.config.js` may require [extra configuration](https://github.com/angular/angular/issues/43821#issuecomment-1054845431) to ensure the forms package is shared.
+1. カスタムフォームコントロールを**定義**した場合、値アクセサを提供することを忘れませんでしたか？
+1. 値のない要素、または**無効な要素**に`ngModel`を配置しましたか（例：`
`）？
+1. `NgModule`内で宣言されたカスタムフォームコントロールを使用していますか？ その場合は、**インポート**していることを確認してください。
+1. サードパーティのカスタムフォームコントロールで`ngModel`を使用していますか？ そのコントロールが値アクセサを提供しているかどうかを確認してください。提供していない場合は、コントロールの要素に**`ngDefaultControl`**を使用してください。
+1. カスタムフォームコントロールを**テスト**していますか？ テストベッドがコントロールについて認識していることを確認してください。これは`Testbed.configureTestingModule`を使用して実行できます。
+1. **Nxおよびモジュールフェデレーション**をWebpackで使用していますか？ `webpack.config.js`には、フォームパッケージが共有されるようにするための[追加の構成](https://github.com/angular/angular/issues/43821#issuecomment-1054845431)が必要になる場合があります。
diff --git a/adev-ja/src/content/reference/errors/NG0200.en.md b/adev-ja/src/content/reference/errors/NG0200.en.md
new file mode 100644
index 000000000..0b5f0c407
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0200.en.md
@@ -0,0 +1,12 @@
+# Circular Dependency in DI
+
+
+@Injectable({ providedIn: 'app' })
+
diff --git a/adev-ja/src/content/reference/errors/NG0201.md b/adev-ja/src/content/reference/errors/NG0201.md
index 0369bfc9c..f2d160565 100644
--- a/adev-ja/src/content/reference/errors/NG0201.md
+++ b/adev-ja/src/content/reference/errors/NG0201.md
@@ -2,17 +2,17 @@
@Injectable({ providedIn: 'app' })
diff --git a/adev-ja/src/content/reference/errors/NG0203.en.md b/adev-ja/src/content/reference/errors/NG0203.en.md
new file mode 100644
index 000000000..72829bc53
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0203.en.md
@@ -0,0 +1,60 @@
+# `inject()` must be called from an injection context
+
+You see this error when you try to use the [`inject`](api/core/inject) function outside of the allowed [injection context](guide/di/dependency-injection-context). The injection context is available during the class creation and initialization. It is also available to functions
+used with `runInInjectionContext`.
+
+In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a field initializer:
+
+```typescript
+@Injectable({providedIn: 'root'})
+export class Car {
+ radio: Radio|undefined;
+
+ // OK: field initializer
+ spareTyre = inject(Tyre);
+
+ constructor() {
+ // OK: constructor body
+ this.radio = inject(Radio);
+ }
+}
+```
+
+It is also legal to call [`inject`](api/core/inject) from a provider's factory:
+
+```typescript
+providers: [
+ {provide: Car, useFactory: () => {
+ // OK: a class factory
+ const engine = inject(Engine);
+ return new Car(engine);
+ }}
+]
+```
+
+Calls to the [`inject`](api/core/inject) function outside of the class creation or `runInInjectionContext` will result in error. Most notably, calls to `inject()` are disallowed after a class instance was created, in methods (including lifecycle hooks):
+
+```typescript
+@Component({ ... })
+export class CarComponent {
+ ngOnInit() {
+ // ERROR: too late, the component instance was already created
+ const engine = inject(Engine);
+ engine.start();
+ }
+}
+```
+
+## Debugging the error
+
+Work backwards from the stack trace of the error to identify a place where the disallowed call to `inject()` is located.
+
+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.
+
+```typescript
+TestBed.runInInjectionContext(() => {
+ // ...
+});
+```
diff --git a/adev-ja/src/content/reference/errors/NG0203.md b/adev-ja/src/content/reference/errors/NG0203.md
index 72829bc53..e896d5c96 100644
--- a/adev-ja/src/content/reference/errors/NG0203.md
+++ b/adev-ja/src/content/reference/errors/NG0203.md
@@ -1,57 +1,57 @@
# `inject()` must be called from an injection context
-You see this error when you try to use the [`inject`](api/core/inject) function outside of the allowed [injection context](guide/di/dependency-injection-context). The injection context is available during the class creation and initialization. It is also available to functions
-used with `runInInjectionContext`.
+[`inject`](api/core/inject) 関数を許可されていない[注入コンテキスト](guide/di/dependency-injection-context) の外で使用しようとすると、このエラーが表示されます。注入コンテキストは、クラスの作成と初期化時に使用できます。
+また、`runInInjectionContext` で使用される関数でも使用できます。
-In practice the `inject()` calls are allowed in a constructor, a constructor parameter and a field initializer:
+実際には、`inject()` の呼び出しは、コンストラクター、コンストラクターパラメーター、フィールドイニシャライザーで許可されます。
```typescript
@Injectable({providedIn: 'root'})
export class Car {
radio: Radio|undefined;
- // OK: field initializer
+ // OK: フィールドイニシャライザー
spareTyre = inject(Tyre);
constructor() {
- // OK: constructor body
+ // OK: コンストラクターボディ
this.radio = inject(Radio);
}
}
```
-It is also legal to call [`inject`](api/core/inject) from a provider's factory:
+また、プロバイダーのファクトリーから [`inject`](api/core/inject) を呼び出すことも合法です。
```typescript
providers: [
{provide: Car, useFactory: () => {
- // OK: a class factory
+ // OK: クラスファクトリー
const engine = inject(Engine);
return new Car(engine);
}}
]
```
-Calls to the [`inject`](api/core/inject) function outside of the class creation or `runInInjectionContext` will result in error. Most notably, calls to `inject()` are disallowed after a class instance was created, in methods (including lifecycle hooks):
+クラスの作成または `runInInjectionContext` の外での [`inject`](api/core/inject) 関数への呼び出しは、エラーになります。特に、`inject()` への呼び出しは、クラスインスタンスが作成された後、メソッド（ライフサイクルフックを含む）では許可されません。
```typescript
@Component({ ... })
export class CarComponent {
ngOnInit() {
- // ERROR: too late, the component instance was already created
+ // ERROR: 遅すぎる、コンポーネントインスタンスはすでに作成されています
const engine = inject(Engine);
engine.start();
}
}
```
-## Debugging the error
+## エラーのデバッグ
-Work backwards from the stack trace of the error to identify a place where the disallowed call to `inject()` is located.
+エラーのスタックトレースをたどり、許可されていない `inject()` への呼び出しが行われている場所を特定します。
-To fix the error move the [`inject`](api/core/inject) call to an allowed place (usually a class constructor or a field initializer).
+エラーを修正するには、[`inject`](api/core/inject) の呼び出しを許可されている場所（通常はクラスコンストラクターまたはフィールドイニシャライザー）に移します。
-**Note:** If you are running in a test context, `TestBed.runInInjectionContext` will enable `inject()` to succeed.
+**NOTE:** テストコンテキストで実行している場合は、`TestBed.runInInjectionContext` を使用すると、`inject()` が成功します。
```typescript
TestBed.runInInjectionContext(() => {
diff --git a/adev-ja/src/content/reference/errors/NG0209.en.md b/adev-ja/src/content/reference/errors/NG0209.en.md
new file mode 100644
index 000000000..5a9b8615d
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0209.en.md
@@ -0,0 +1,5 @@
+# Invalid multi provider
+
+The Angular runtime will throw this error when it injects a token intended to be used with `multi: true` but
+a non-Array was found instead. For example, `ENVIRONMENT_INITIALIZER` should be provided
+like `{provide: ENVIRONMENT_INITIALIZER, multi: true, useValue: () => {...}}`.
diff --git a/adev-ja/src/content/reference/errors/NG0209.md b/adev-ja/src/content/reference/errors/NG0209.md
index 5a9b8615d..715cf9216 100644
--- a/adev-ja/src/content/reference/errors/NG0209.md
+++ b/adev-ja/src/content/reference/errors/NG0209.md
@@ -1,5 +1,5 @@
# Invalid multi provider
-The Angular runtime will throw this error when it injects a token intended to be used with `multi: true` but
-a non-Array was found instead. For example, `ENVIRONMENT_INITIALIZER` should be provided
-like `{provide: ENVIRONMENT_INITIALIZER, multi: true, useValue: () => {...}}`.
+Angularランタイムは`multi: true` で使用するように意図されたトークンを注入しようとして、配列ではない値が見つかった場合にこのエラーをスローします。
+例えば、`ENVIRONMENT_INITIALIZER` は次のように提供する必要があります。
+`{provide: ENVIRONMENT_INITIALIZER, multi: true, useValue: () => {...}}`。
diff --git a/adev-ja/src/content/reference/errors/NG02200.en.md b/adev-ja/src/content/reference/errors/NG02200.en.md
new file mode 100644
index 000000000..79d98667e
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG02200.en.md
@@ -0,0 +1,8 @@
+# Missing Iterable Differ
+
+`NgFor` could not find an iterable differ for the value passed in. Make sure it's an iterable, like an `Array`.
+
+## 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.
diff --git a/adev-ja/src/content/reference/errors/NG02200.md b/adev-ja/src/content/reference/errors/NG02200.md
index 79d98667e..936d8eb80 100644
--- a/adev-ja/src/content/reference/errors/NG02200.md
+++ b/adev-ja/src/content/reference/errors/NG02200.md
@@ -1,8 +1,8 @@
# Missing Iterable Differ
-`NgFor` could not find an iterable differ for the value passed in. Make sure it's an iterable, like an `Array`.
+`NgFor` は、渡された値に対して反復可能な差分器を見つけることができませんでした。値が `Array` などの反復可能であることを確認してください。
-## 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.
+テンプレートでngForを使用する場合、`Array`、`Set`、`Map` などの反復可能な型を使用する必要があります。
+オブジェクトのキーを反復処理しようとしている場合は、代わりに [KeyValue パイプ](/api/common/KeyValuePipe) を検討してください。
diff --git a/adev-ja/src/content/reference/errors/NG02800.en.md b/adev-ja/src/content/reference/errors/NG02800.en.md
new file mode 100644
index 000000000..eb1ce5e09
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG02800.en.md
@@ -0,0 +1,8 @@
+# JSONP support in HttpClient configuration
+
+Angular produces this error when you attempt a `JSONP` request without providing the necessary support for it in the `HttpClient` configuration.
+To enable `JSONP` support, you can do one of the following:
+
+- add the `withJsonpSupport()` as an argument during the `provideHttpClient` function call (e.g. `provideHttpClient(withJsonpSupport())`) when `bootstrapApplication` is used
+- import the `HttpClientJsonpModule` in your root AppModule, when NgModule-based bootstrap is used.## Debugging the error
+Make sure that the JSONP support is added into your application either by calling the `withJsonpSupport` function (when `provideHttpClient` is used) or importing the `HttpClientJsonpModule` module as described above.
diff --git a/adev-ja/src/content/reference/errors/NG02800.md b/adev-ja/src/content/reference/errors/NG02800.md
index eb1ce5e09..cb48a3abd 100644
--- a/adev-ja/src/content/reference/errors/NG02800.md
+++ b/adev-ja/src/content/reference/errors/NG02800.md
@@ -1,8 +1,8 @@
# JSONP support in HttpClient configuration
-Angular produces this error when you attempt a `JSONP` request without providing the necessary support for it in the `HttpClient` configuration.
-To enable `JSONP` support, you can do one of the following:
+Angularは、`HttpClient` 構成で必要なJSONPサポートを提供せずに `JSONP` リクエストを試行すると、このエラーを生成します。
+`JSONP` サポートを有効にするには、次のいずれかを行います。
-- add the `withJsonpSupport()` as an argument during the `provideHttpClient` function call (e.g. `provideHttpClient(withJsonpSupport())`) when `bootstrapApplication` is used
-- import the `HttpClientJsonpModule` in your root AppModule, when NgModule-based bootstrap is used.## Debugging the error
-Make sure that the JSONP support is added into your application either by calling the `withJsonpSupport` function (when `provideHttpClient` is used) or importing the `HttpClientJsonpModule` module as described above.
+- `bootstrapApplication` を使用する場合、`provideHttpClient` 関数呼び出し中に `withJsonpSupport()` を引数として追加します（例：`provideHttpClient(withJsonpSupport())`）。
+- NgModuleベースのブートストラップを使用する場合、ルートAppModuleに `HttpClientJsonpModule` をインポートします。## エラーのデバッグ
+`withJsonpSupport` 関数呼び出し（`provideHttpClient` を使用する場合）または上記の `HttpClientJsonpModule` モジュールのインポートによって、アプリケーションにJSONPサポートが追加されていることを確認してください。
diff --git a/adev-ja/src/content/reference/errors/NG0300.en.md b/adev-ja/src/content/reference/errors/NG0300.en.md
new file mode 100644
index 000000000..03a235615
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0300.en.md
@@ -0,0 +1,22 @@
+# Selector Collision
+
+
+
+@Component({
+ selector: 'YOUR_STRING',
+ …
+})
+
+
+
+Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect.
+
+If you're having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](style-guide#component-selectors) for your selectors to prevent collisions.
diff --git a/adev-ja/src/content/reference/errors/NG0300.md b/adev-ja/src/content/reference/errors/NG0300.md
index 03a235615..f28b0e134 100644
--- a/adev-ja/src/content/reference/errors/NG0300.md
+++ b/adev-ja/src/content/reference/errors/NG0300.md
@@ -2,11 +2,11 @@
@@ -17,6 +17,6 @@ Use the element name from the error message to search for places where you're us
-Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect.
+各コンポーネントが一意のCSSセレクターを持つことを確認します。これにより、Angularは期待するコンポーネントをレンダリングします。
-If you're having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the [best practices](style-guide#component-selectors) for your selectors to prevent collisions.
+このセレクタータグ名を持つ複数のコンポーネントが見つからない場合は、Angular Materialなどのインポートされたコンポーネントライブラリのコンポーネントを確認します。衝突を回避するために、セレクターの[ベストプラクティス](style-guide#component-selectors)に従っていることを確認してください。
diff --git a/adev-ja/src/content/reference/errors/NG0301.en.md b/adev-ja/src/content/reference/errors/NG0301.en.md
new file mode 100644
index 000000000..a08b31f19
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0301.en.md
@@ -0,0 +1,27 @@
+# Export Not Found
+
+
+
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+ …
+ imports: [
+ FormsModule,
+ …
+
+
+
+If you recently added an import, you may need to restart your server to see these changes.
diff --git a/adev-ja/src/content/reference/errors/NG0301.md b/adev-ja/src/content/reference/errors/NG0301.md
index a08b31f19..59584c240 100644
--- a/adev-ja/src/content/reference/errors/NG0301.md
+++ b/adev-ja/src/content/reference/errors/NG0301.md
@@ -2,15 +2,15 @@
@@ -24,4 +24,4 @@ import { FormsModule } from '@angular/forms';
-If you recently added an import, you may need to restart your server to see these changes.
+インポートを追加したばかりの場合は、サーバーを再起動してこれらの変更を確認する必要がある場合があります。
diff --git a/adev-ja/src/content/reference/errors/NG0302.en.md b/adev-ja/src/content/reference/errors/NG0302.en.md
new file mode 100644
index 000000000..d4af2a210
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0302.en.md
@@ -0,0 +1,24 @@
+# Pipe Not Found
+
+
world
',
+})
+export class ExampleComponent {
+ hostElement = inject(ElementRef).nativeElement;
+
+ ngOnInit() {
+ // Create a new element with the `Hello` text inside + const newNode = document.createElement('p'); + newNode.innerHTML = 'Hello'; + + // Insert the
before the first element. Since Angular has no information + // about the
element, it will be looking for the
element at the first
+ // element position instead. As a result, a hydration mismatch error would be
+ // thrown. Instead, update component's template to create the
element. + this.hostElement.insertBefore(newNode, this.hostElement.firstChild); + } +} +``` + +## Debugging the error + +The error message in the developer console should contain information on a specific part of the application's DOM structure that is causing the problem. Review that part of the application for hydration-related errors, such as direct DOM manipulation using native APIs. + +Check that your template has valid HTML structure. See more information in the [hydration guide](guide/hydration#valid-html-structure). + +You can add the `ngSkipHydration` attribute to your component host node as a possible workaround. + +If your application works in development environment, but you see hydration errors in production builds, make sure that the generated HTML that is delivered to a browser contains comment nodes produced by Angular during the rendering on the server. Those comment nodes are used by Angular runtime as anchors for view containers (with and without hydration) and hydration process expects them to be present at their original locations. If you have a custom logic to remove comment nodes from the HTML generated by the server-side rendering or you've configured your CDN to remove them before serving the content - disable the comment nodes removal and check if hydration errors are gone. diff --git a/adev-ja/src/content/reference/errors/NG0500.md b/adev-ja/src/content/reference/errors/NG0500.md index a8ffd8aa3..2d301de68 100644 --- a/adev-ja/src/content/reference/errors/NG0500.md +++ b/adev-ja/src/content/reference/errors/NG0500.md @@ -1,12 +1,12 @@ # Hydration Node Mismatch -This error means that during the hydration process, Angular expected a DOM structure as rendered and annotated during server-side rendering. However, on the client, the DOM tree was different than the server rendered DOM tree. +このエラーは、ハイドレーションプロセス中に、Angularがサーバーサイドレンダリング時にレンダリングおよび注釈付けされたDOM構造を期待していることを意味します。ただし、クライアント側では、DOMツリーがサーバー側でレンダリングされたDOMツリーとは異なるものでした。 -This error typically happens due to direct DOM manipulation using native browser APIs that alter the DOM structure outside of what Angular produced. It will also occur if you use `innerHTML` or `outerHTML` to set HTML content, which similarly alters the DOM structure outside of what Angular produced. You can resolve this by refactoring the component to use native Angular APIs instead of native APIs. If that's not possible, you can add the `ngSkipHydration` attribute to your component's host node, which will disable hydration for the component and its children. `ngSkipHydration` should only be used as a last resort and should be considered a bug that needs to be fixed. +このエラーは、通常、Angularが生成したものを超えてDOM構造を変更するネイティブブラウザAPIを使用した直接的なDOM操作によって発生します。同様に、Angularが生成したものを超えてDOM構造を変更する `innerHTML` または `outerHTML` を使用してHTMLコンテンツを設定した場合にも発生します。ネイティブAPIの代わりにネイティブAngular APIを使用するようにコンポーネントをリファクタリングすることで、これを解決できます。それが不可能な場合は、コンポーネントのホストノードに `ngSkipHydration` 属性を追加できます。これにより、コンポーネントとその子のハイドレーションが無効になります。`ngSkipHydration` は、最後の手段としてのみ使用し、修正が必要なバグとして扱う必要があります。 -More information about hydration can be found in [this guide](guide/hydration). +ハイドレーションの詳細については、[このガイド](guide/hydration)を参照してください。 -The following example will trigger the error. +次の例では、エラーが発生します。 ```typescript @Component({ @@ -18,25 +18,25 @@ export class ExampleComponent { hostElement = inject(ElementRef).nativeElement; ngOnInit() { - // Create a new
element with the `Hello` text inside + // `Hello` テキストを含む新しい
要素を作成する const newNode = document.createElement('p'); newNode.innerHTML = 'Hello'; - // Insert the
before the first element. Since Angular has no information - // about the
element, it will be looking for the
element at the first
- // element position instead. As a result, a hydration mismatch error would be
- // thrown. Instead, update component's template to create the
element. - this.hostElement.insertBefore(newNode, this.hostElement.firstChild); - } + //
要素を最初の要素の前に挿入します。Angular に
要素に関する情報がないため、 + // 最初の要素の位置で
要素を探します。
+ // その結果、Hydration ミスマッチエラーがスローされます。
+ // 代わりに、コンポーネントのテンプレートを更新して
要素を作成します。
+ this.hostElement.insertBefore(newNode, this.hostElement.firstChild);
+ }
}
```
-## Debugging the error
+## エラーのデバッグ
-The error message in the developer console should contain information on a specific part of the application's DOM structure that is causing the problem. Review that part of the application for hydration-related errors, such as direct DOM manipulation using native APIs.
+開発者コンソール内のエラーメッセージには、問題を引き起こしているアプリケーションのDOM構造の特定の部分に関する情報が含まれているはずです。ネイティブAPIを使用した直接的なDOM操作など、ハイドレーション関連のエラーについて、アプリケーションのその部分を確認します。
-Check that your template has valid HTML structure. See more information in the [hydration guide](guide/hydration#valid-html-structure).
+テンプレートが有効なHTML構造であることを確認します。[Hydration ガイド](guide/hydration#valid-html-structure)で詳細を確認してください。
-You can add the `ngSkipHydration` attribute to your component host node as a possible workaround.
+コンポーネントのホストノードに `ngSkipHydration` 属性を追加することで、回避策として使用できます。
-If your application works in development environment, but you see hydration errors in production builds, make sure that the generated HTML that is delivered to a browser contains comment nodes produced by Angular during the rendering on the server. Those comment nodes are used by Angular runtime as anchors for view containers (with and without hydration) and hydration process expects them to be present at their original locations. If you have a custom logic to remove comment nodes from the HTML generated by the server-side rendering or you've configured your CDN to remove them before serving the content - disable the comment nodes removal and check if hydration errors are gone.
+アプリケーションが開発環境では動作するが、本番ビルドで ハイドレーション エラーが発生する場合は、ブラウザに配信される生成されたHTMLに、サーバーでのレンダリング中にAngularによって生成されたコメントノードが含まれていることを確認してください。これらのコメントノードは、Angularランタイムによってビューコンテナのアンカー (ハイドレーション の有無にかかわらず) として使用され、ハイドレーション プロセスでは、これらのノードが元の位置に存在することを期待します。サーバーサイドレンダリングによって生成されたHTMLからコメントノードを削除するカスタムロジックがある場合、またはCDNを構成してコンテンツを提供する前にコメントノードを削除した場合、コメントノードの削除を無効にして、ハイドレーション エラーが解消されるかどうかを確認してください。
diff --git a/adev-ja/src/content/reference/errors/NG05000.en.md b/adev-ja/src/content/reference/errors/NG05000.en.md
new file mode 100644
index 000000000..6e7f135b5
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG05000.en.md
@@ -0,0 +1,11 @@
+# Hydration with unsupported Zone.js instance
+
+This warning means that the hydration was enabled for an application that was configured to use an unsupported version of Zone.js: either a custom or a "noop" one (see more info [here](api/core/BootstrapOptions#ngZone)).
+
+Hydration relies on a signal from Zone.js when it becomes stable inside an application, so that Angular can start the serialization process on the server or post-hydration cleanup on the client (to remove DOM nodes that remained unclaimed).
+
+Providing a custom or a "noop" Zone.js implementation may lead to a different timing of the "stable" event, thus triggering the serialization or the cleanup too early or too late. This is not yet a fully supported configuration.
+
+If you use a custom Zone.js implementation, make sure that the "onStable" event is emitted at the right time and does not result in incorrect application behavior with hydration.
+
+More information about hydration can be found in the [hydration guide](guide/hydration).
diff --git a/adev-ja/src/content/reference/errors/NG05000.md b/adev-ja/src/content/reference/errors/NG05000.md
index 6e7f135b5..2090ff36c 100644
--- a/adev-ja/src/content/reference/errors/NG05000.md
+++ b/adev-ja/src/content/reference/errors/NG05000.md
@@ -1,11 +1,11 @@
# Hydration with unsupported Zone.js instance
-This warning means that the hydration was enabled for an application that was configured to use an unsupported version of Zone.js: either a custom or a "noop" one (see more info [here](api/core/BootstrapOptions#ngZone)).
+この警告は、サポートされていないバージョンのZone.jsを使用するように構成されたアプリケーションに対してハイドレーションが有効になっていることを意味します。カスタムまたは「noop」のいずれかです（詳細については [こちら](api/core/BootstrapOptions#ngZone) を参照してください）。
-Hydration relies on a signal from Zone.js when it becomes stable inside an application, so that Angular can start the serialization process on the server or post-hydration cleanup on the client (to remove DOM nodes that remained unclaimed).
+ハイドレーションは、Zone.jsからアプリケーション内で安定した状態になったときのシグナルを必要とし、Angularはサーバーでのシリアル化プロセスを開始するか、クライアントでのハイドレーション後のクリーンアップ（主張されていないDOMノードを削除するため）を開始できます。
-Providing a custom or a "noop" Zone.js implementation may lead to a different timing of the "stable" event, thus triggering the serialization or the cleanup too early or too late. This is not yet a fully supported configuration.
+カスタムまたは「noop」のZone.js実装を提供すると、「stable」イベントのタイミングが異なり、シリアル化またはクリーンアップが早すぎるか遅すぎる場合があり、まだ完全にサポートされている構成ではありません。
-If you use a custom Zone.js implementation, make sure that the "onStable" event is emitted at the right time and does not result in incorrect application behavior with hydration.
+カスタムZone.js実装を使用する場合は、「onStable」イベントが適切なタイミングで発生し、ハイドレーションによるアプリケーション動作に誤りが発生しないことを確認してください。
-More information about hydration can be found in the [hydration guide](guide/hydration).
+ハイドレーションの詳細については、[Hydration ガイド](guide/hydration) を参照してください。
diff --git a/adev-ja/src/content/reference/errors/NG0501.en.md b/adev-ja/src/content/reference/errors/NG0501.en.md
new file mode 100644
index 000000000..d4904663f
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0501.en.md
@@ -0,0 +1,7 @@
+# Hydration Missing Siblings
+
+This error is similar to the [error NG0500](errors/NG0500), but it indicates that Angular hydration process expected more siblings present in the DOM structure at a particular location. Please refer to the [error NG0500](errors/NG0500) page for additional information.
+
+## Debugging the error
+
+See the [error NG0500](errors/NG0500) for more information on how to debug this error.
diff --git a/adev-ja/src/content/reference/errors/NG0501.md b/adev-ja/src/content/reference/errors/NG0501.md
index d4904663f..767c0d9c4 100644
--- a/adev-ja/src/content/reference/errors/NG0501.md
+++ b/adev-ja/src/content/reference/errors/NG0501.md
@@ -1,7 +1,7 @@
# Hydration Missing Siblings
-This error is similar to the [error NG0500](errors/NG0500), but it indicates that Angular hydration process expected more siblings present in the DOM structure at a particular location. Please refer to the [error NG0500](errors/NG0500) page for additional information.
+このエラーは、[error NG0500](errors/NG0500)と似ていますが、Angularのハイドレーションプロセスが特定の場所でDOM構造内に存在するはずの兄弟要素が不足していることを示しています。詳細については、[error NG0500](errors/NG0500)ページを参照してください。
-## Debugging the error
+## エラーのデバッグ
-See the [error NG0500](errors/NG0500) for more information on how to debug this error.
+このエラーのデバッグ方法については、[error NG0500](errors/NG0500)を参照してください。
diff --git a/adev-ja/src/content/reference/errors/NG0502.en.md b/adev-ja/src/content/reference/errors/NG0502.en.md
new file mode 100644
index 000000000..a0ba1df9a
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0502.en.md
@@ -0,0 +1,7 @@
+# Hydration Missing Node
+
+This error is similar to the [error NG0500](errors/NG0500), but it indicates that Angular hydration process expected a node to be present in the DOM structure at a particular location and none was found. Please refer to the [error NG0500](errors/NG0500) page for additional information.
+
+## Debugging the error
+
+See the [error NG0500](errors/NG0500) for more information on how to debug this error.
diff --git a/adev-ja/src/content/reference/errors/NG0502.md b/adev-ja/src/content/reference/errors/NG0502.md
index a0ba1df9a..254968ded 100644
--- a/adev-ja/src/content/reference/errors/NG0502.md
+++ b/adev-ja/src/content/reference/errors/NG0502.md
@@ -1,7 +1,7 @@
# Hydration Missing Node
-This error is similar to the [error NG0500](errors/NG0500), but it indicates that Angular hydration process expected a node to be present in the DOM structure at a particular location and none was found. Please refer to the [error NG0500](errors/NG0500) page for additional information.
+このエラーは [error NG0500](errors/NG0500) と似ていますが、Angularのハイドレーションプロセスで、特定の場所にDOM構造内にノードが存在することを期待していたのに、見つからなかったことを示しています。詳細については、[error NG0500](errors/NG0500) のページを参照してください。
-## Debugging the error
+## デバッグ
-See the [error NG0500](errors/NG0500) for more information on how to debug this error.
+このエラーのデバッグ方法の詳細については、[error NG0500](errors/NG0500) を参照してください。
diff --git a/adev-ja/src/content/reference/errors/NG0503.en.md b/adev-ja/src/content/reference/errors/NG0503.en.md
new file mode 100644
index 000000000..73f6b66a9
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0503.en.md
@@ -0,0 +1,47 @@
+# Hydration Unsupported Projection of DOM Nodes
+
+This error means that during the server-side serialization process, Angular encountered nodes that were created outside of Angular's context (i.e. using native DOM APIs) and found those nodes were provided as projectable nodes. They were likely provided using `ViewContainerRef.createComponent` or `createComponent` APIs. Angular hydration does not support this use case.
+
+More information about hydration can be found in [this guide](guide/hydration).
+
+The following examples will trigger the error.
+
+```typescript
+@Component({
+ standalone: true,
+ selector: 'dynamic',
+ template: `
+
` using host bindings of a directive. Since the `
` doesn't act as a component host node, Angular will throw an error.
+
+```typescript
+@Directive({
+ standalone: true,
+ selector: '[dir]',
+ host: {ngSkipHydration: 'true'},
+})
+class Dir {
+}
+
+@Component({
+ standalone: true,
+ selector: 'app',
+ imports: [Dir],
+ template: `
+
+ `,
+})
+class SimpleComponent {
+}
+```
+
+## Example 2
+
+In this example, the `ngSkipHydration` is applied to a `
` as an attribute via a template.
+Since the `
` doesn't act as a component host node, Angular will throw an error.
+
+```typescript
+@Component({
+ standalone: true,
+ selector: 'app',
+ template: `
+
+ `,
+})
+class SimpleComponent {
+}
+```
+
+## Debugging the error
+
+Remove the `ngSkipHydration` attribute from any invalid DOM nodes. Alternatively, move the `ngSkipHydration` attribute to the component host node either in a template or via a host binding.
diff --git a/adev-ja/src/content/reference/errors/NG0504.md b/adev-ja/src/content/reference/errors/NG0504.md
index 421629d31..c0a445a66 100644
--- a/adev-ja/src/content/reference/errors/NG0504.md
+++ b/adev-ja/src/content/reference/errors/NG0504.md
@@ -1,14 +1,14 @@
# Skip hydration flag is applied to an invalid node
-This error occurs when the `ngSkipHydration` attribute was added to an inappropriate DOM node. The `ngSkipHydration` attribute can only be applied to component host nodes either directly in the template or via a host binding. It cannot be applied to other DOM nodes and will have no effect if done so other than causing this error.
+このエラーは、`ngSkipHydration` 属性が適切でないDOMノードに適用された場合に発生します。`ngSkipHydration` 属性は、テンプレートまたはホストバインディングを介して直接、コンポーネントホストノードのみに適用できます。他のDOMノードには適用できず、このエラーが発生する以外、効果はありません。
-More information about hydration can be found in [this guide](guide/hydration).
+水和の詳細については、[このガイド](guide/hydration)をご覧ください。
-The following examples will trigger the error.
+次の例では、エラーが発生します。
-## Example 1
+## 例 1
-In this example, the `ngSkipHydration` attribute is applied to a `
` using host bindings of a directive. Since the `
` doesn't act as a component host node, Angular will throw an error.
+この例では、`ngSkipHydration` 属性は、ディレクティブのホストバインディングを使用して `
` に適用されています。`
` はコンポーネントホストノードとして機能しないため、Angularはエラーをスローします。
```typescript
@Directive({
@@ -31,10 +31,10 @@ class SimpleComponent {
}
```
-## Example 2
+## 例 2
-In this example, the `ngSkipHydration` is applied to a `
` as an attribute via a template.
-Since the `
` doesn't act as a component host node, Angular will throw an error.
+この例では、`ngSkipHydration` はテンプレートを介して属性として `
` に適用されています。
+`
` はコンポーネントホストノードとして機能しないため、Angularはエラーをスローします。
```typescript
@Component({
@@ -48,6 +48,6 @@ class SimpleComponent {
}
```
-## Debugging the error
+## エラーのデバッグ
-Remove the `ngSkipHydration` attribute from any invalid DOM nodes. Alternatively, move the `ngSkipHydration` attribute to the component host node either in a template or via a host binding.
+不正なDOMノードから `ngSkipHydration` 属性を削除します。または、`ngSkipHydration` 属性をテンプレートまたはホストバインディングを介してコンポーネントホストノードに移動します。
diff --git a/adev-ja/src/content/reference/errors/NG0505.en.md b/adev-ja/src/content/reference/errors/NG0505.en.md
new file mode 100644
index 000000000..c8a645a33
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0505.en.md
@@ -0,0 +1,24 @@
+# No hydration info in server response
+
+This error occurs when hydration is enabled on the client, but the server response
+doesn't contain special serialized information about the application that hydration
+logic relies on.
+
+This can happen when the `provideClientHydration()` function is included in the client
+part of the application configuration, but is missing in the server part of the configuration.
+
+In applications with the default project structure (generated by the `ng new`),
+the `provideClientHydration()` call is added either into the `providers` array of
+the main `AppModule` (which is imported into the server module) or into a set of
+providers that are included into both client and server configurations.
+
+If you have a custom setup where client and server configuration are independent
+and do not share common set of providers, make sure that the `provideClientHydration()`
+is also included into the set of providers used to bootstrap an application on the server.
+
+More information about hydration can be found in [this guide](guide/hydration).
+
+## Debugging the error
+
+Verify that the `provideClientHydration()` call is included into a set of providers
+that is used to bootstrap an application on the server.
diff --git a/adev-ja/src/content/reference/errors/NG0505.md b/adev-ja/src/content/reference/errors/NG0505.md
index c8a645a33..43d9e42ce 100644
--- a/adev-ja/src/content/reference/errors/NG0505.md
+++ b/adev-ja/src/content/reference/errors/NG0505.md
@@ -1,24 +1,24 @@
# No hydration info in server response
-This error occurs when hydration is enabled on the client, but the server response
-doesn't contain special serialized information about the application that hydration
-logic relies on.
+このエラーは、クライアント側でハイドレーションが有効になっているが、
+サーバーレスポンスにハイドレーションロジックが依存する、
+アプリケーションに関する特殊なシリアライズされた情報が含まれていない場合に発生します。
-This can happen when the `provideClientHydration()` function is included in the client
-part of the application configuration, but is missing in the server part of the configuration.
+これは、`provideClientHydration()`関数がアプリケーション構成のクライアント部分に含まれているが、
+サーバー部分の構成には含まれていない場合に発生する可能性があります。
-In applications with the default project structure (generated by the `ng new`),
-the `provideClientHydration()` call is added either into the `providers` array of
-the main `AppModule` (which is imported into the server module) or into a set of
-providers that are included into both client and server configurations.
+デフォルトのプロジェクト構造（`ng new`で生成された）を持つアプリケーションでは、
+`provideClientHydration()`呼び出しは
+メインの`AppModule`（サーバーモジュールにインポートされる）の`providers`配列か、
+クライアントとサーバーの両方の構成に含まれるプロバイダーのセットに追加されます。
-If you have a custom setup where client and server configuration are independent
-and do not share common set of providers, make sure that the `provideClientHydration()`
-is also included into the set of providers used to bootstrap an application on the server.
+クライアントとサーバーの構成が独立していて、共通のプロバイダーセットを共有しないカスタム設定がある場合は、
+`provideClientHydration()`がサーバーでアプリケーションをブートストラップするために
+使用されるプロバイダーセットにも含まれていることを確認してください。
-More information about hydration can be found in [this guide](guide/hydration).
+ハイドレーションに関する詳細情報は、[このガイド](guide/hydration)でご覧いただけます。
-## Debugging the error
+## エラーのデバッグ
-Verify that the `provideClientHydration()` call is included into a set of providers
-that is used to bootstrap an application on the server.
+`provideClientHydration()`呼び出しが、
+サーバーでアプリケーションをブートストラップするために使用されるプロバイダーセットに含まれていることを確認してください。
diff --git a/adev-ja/src/content/reference/errors/NG0506.en.md b/adev-ja/src/content/reference/errors/NG0506.en.md
new file mode 100644
index 000000000..ad570702e
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0506.en.md
@@ -0,0 +1,81 @@
+# Application remains unstable
+
+This warning only appears in the browser during the hydration process when it's enabled on the client but the application remains unstable for an extended period of time (over 10 seconds).
+
+Typically that happens when there are some pending microtasks or macrotasks on a page.
+
+Angular Hydration relies on a signal from `ApplicationRef.isStable` when it becomes stable inside an application:
+
+- during the server-side rendering (SSR) to start the serialization process
+- in a browser this signal is used to start the post-hydration cleanup to remove DOM nodes that remained unclaimed
+
+This warning is displayed when `ApplicationRef.isStable` does not emit `true` within 10 seconds. If this behavior is intentional and your application stabilizes later, you could choose to ignore this warning.
+
+## Applications that use zone.js
+
+Applications that use zone.js may have various factors contributing to delays in stability. These may include pending HTTP requests, timers (`setInterval`, `setTimeout`) or some logic that continuously invokes `requestAnimationFrame`.
+
+### Macrotasks
+
+Macrotasks include functions like `setInterval`, `setTimeout`, `requestAnimationFrame`, etc.
+If one of these functions is called during the initialization phase of the application or in bootstrapped components, it may delay the moment when the application becomes stable.
+
+```typescript
+@Component({
+ standalone: true,
+ selector: 'app',
+ template: ``,
+})
+class SimpleComponent {
+ constructor() {
+ setInterval(() => { ... }, 1000)
+
+ // or
+
+ setTimeout(() => { ... }, 10_000)
+ }
+}
+```
+
+If these functions must be called during the initialization phase, invoking them outside the Angular zone resolves the problem:
+
+```typescript
+class SimpleComponent {
+ constructor() {
+ const ngZone = inject(NgZone);
+
+ ngZone.runOutsideAngular(() => {
+ setInterval(() => {}, 1000);
+ });
+ }
+}
+```
+
+### Third-party libraries
+
+Some third-party libraries can also produce long-running asynchronous tasks, which may delay application stability. The recommendation is to invoke relevant library code outside of the zone as described above.
+
+### Running code after an application becomes stable
+
+You can run a code that sets up asynchronous tasks once an application becomes stable:
+
+```typescript
+class SimpleComponent {
+ constructor() {
+ const applicationRef = inject(ApplicationRef);
+
+ applicationRef.isStable.pipe( first((isStable) => isStable) ).subscribe(() => {
+ // Note that we don't need to use `runOutsideAngular` because `isStable`
+ // emits events outside of the Angular zone when it's truthy (falsy values
+ // are emitted inside the Angular zone).
+ setTimeout(() => { ... });
+ });
+ }
+}
+```
+
+## Zoneless applications
+
+In zoneless scenarios, stability might be delayed by an application code inside of an `effect` running in an infinite loop (potentially because signals used in effect functions keep changing) or a pending HTTP request.
+
+Developers may also explicitly contribute to indicating the application's stability by using the experimental [`PendingTasks`](/api/core/ExperimentalPendingTasks) service. If you use the mentioned APIs in your application, make sure you invoke a function to mark the task as completed.
diff --git a/adev-ja/src/content/reference/errors/NG0506.md b/adev-ja/src/content/reference/errors/NG0506.md
index ad570702e..e96c8fc50 100644
--- a/adev-ja/src/content/reference/errors/NG0506.md
+++ b/adev-ja/src/content/reference/errors/NG0506.md
@@ -1,24 +1,24 @@
# Application remains unstable
-This warning only appears in the browser during the hydration process when it's enabled on the client but the application remains unstable for an extended period of time (over 10 seconds).
+この警告は、クライアント側で有効になっている場合、ハイドレーションプロセス中にブラウザにのみ表示され、アプリケーションが長時間（10秒以上）不安定なままの場合に表示されます。
-Typically that happens when there are some pending microtasks or macrotasks on a page.
+通常、これはページに保留中のマイクロタスクまたはマクロタスクがある場合に発生します。
-Angular Hydration relies on a signal from `ApplicationRef.isStable` when it becomes stable inside an application:
+Angularハイドレーションは、アプリケーション内で安定状態になったときに `ApplicationRef.isStable` からの信号に依存します。
-- during the server-side rendering (SSR) to start the serialization process
-- in a browser this signal is used to start the post-hydration cleanup to remove DOM nodes that remained unclaimed
+- サーバーサイドレンダリング（SSR）中は、シリアル化プロセスを開始します
+- ブラウザでは、この信号を使用して、請求されなかったDOMノードを削除するハイドレーション後のクリーンアップを開始します
-This warning is displayed when `ApplicationRef.isStable` does not emit `true` within 10 seconds. If this behavior is intentional and your application stabilizes later, you could choose to ignore this warning.
+この警告は、`ApplicationRef.isStable` が10秒以内に `true` を出力しない場合に表示されます。この動作が意図的なもので、アプリケーションが後で安定する場合、この警告を無視できます。
-## Applications that use zone.js
+## zone.jsを使用するアプリケーション
-Applications that use zone.js may have various factors contributing to delays in stability. These may include pending HTTP requests, timers (`setInterval`, `setTimeout`) or some logic that continuously invokes `requestAnimationFrame`.
+zone.jsを使用するアプリケーションでは、安定性の遅延に寄与するさまざまな要因がある可能性があります。これには、保留中のHTTPリクエスト、タイマー（`setInterval`、`setTimeout`）、または `requestAnimationFrame` を継続的に呼び出すロジックが含まれる場合があります。
-### Macrotasks
+### マクロタスク
-Macrotasks include functions like `setInterval`, `setTimeout`, `requestAnimationFrame`, etc.
-If one of these functions is called during the initialization phase of the application or in bootstrapped components, it may delay the moment when the application becomes stable.
+マクロタスクには、`setInterval`、`setTimeout`、`requestAnimationFrame` などの関数が含まれます。
+これらの関数のいずれかがアプリケーションの初期化フェーズ中に、またはブートストラップされたコンポーネント内で呼び出されると、アプリケーションが安定状態になる瞬間が遅れる可能性があります。
```typescript
@Component({
@@ -37,7 +37,7 @@ class SimpleComponent {
}
```
-If these functions must be called during the initialization phase, invoking them outside the Angular zone resolves the problem:
+これらの関数を初期化フェーズ中に呼び出す必要がある場合、Angularゾーンの外で呼び出すと、問題は解決します。
```typescript
class SimpleComponent {
@@ -51,13 +51,13 @@ class SimpleComponent {
}
```
-### Third-party libraries
+### サードパーティライブラリ
-Some third-party libraries can also produce long-running asynchronous tasks, which may delay application stability. The recommendation is to invoke relevant library code outside of the zone as described above.
+サードパーティライブラリの一部は、アプリケーションの安定性を遅らせる可能性のある長時間実行される非同期タスクを生成することもあります。推奨事項として、上記の例のように、関連するライブラリコードをゾーンの外で呼び出すことをお勧めします。
-### Running code after an application becomes stable
+### アプリケーションが安定状態になった後にコードを実行する
-You can run a code that sets up asynchronous tasks once an application becomes stable:
+アプリケーションが安定状態になったときに非同期タスクを設定するコードを実行できます。
```typescript
class SimpleComponent {
@@ -74,8 +74,8 @@ class SimpleComponent {
}
```
-## Zoneless applications
+## ゾーンレスアプリケーション
-In zoneless scenarios, stability might be delayed by an application code inside of an `effect` running in an infinite loop (potentially because signals used in effect functions keep changing) or a pending HTTP request.
+ゾーンレスシナリオでは、無限ループで実行される `effect` 内のアプリケーションコード（効果関数の使用されているシグナルが継続的に変化しているため）または保留中のHTTPリクエストによって、安定性が遅れる可能性があります。
-Developers may also explicitly contribute to indicating the application's stability by using the experimental [`PendingTasks`](/api/core/ExperimentalPendingTasks) service. If you use the mentioned APIs in your application, make sure you invoke a function to mark the task as completed.
+開発者は、実験的な [`PendingTasks`](/api/core/ExperimentalPendingTasks) サービスを使用して、アプリケーションの安定性を明示的に示すにも貢献できます。上記APIをアプリケーションで使用する場合、タスクが完了したことをマークする関数を呼び出すようにしてください。
diff --git a/adev-ja/src/content/reference/errors/NG0507.en.md b/adev-ja/src/content/reference/errors/NG0507.en.md
new file mode 100644
index 000000000..6ee4fc18a
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0507.en.md
@@ -0,0 +1,10 @@
+# HTML content was altered after server-side rendering
+
+Angular throws this error when it detects that the content generated by server-side rendering (SSR) was altered after the rendering. The process of hydration relies on the content to be untouched after SSR, which also includes whitespaces and comment nodes. Those whitespaces and comment nodes must be retained in the HTML generated by the SSR process. Learn more in the Hydration guide.
+
+## Debugging the error
+
+Typically this happens in the following cases:
+
+Some CDN providers have a built-in feature to remove whitespaces and comment nodes from HTML as an optimization. Please verify if there is such an option in CDN configuration and turn it off.
+If you use custom post-processing of HTML generated by SSR (as a build step), make sure that this process doesn't remove whitespaces and comment nodes.
diff --git a/adev-ja/src/content/reference/errors/NG0507.md b/adev-ja/src/content/reference/errors/NG0507.md
index 6ee4fc18a..1b3120153 100644
--- a/adev-ja/src/content/reference/errors/NG0507.md
+++ b/adev-ja/src/content/reference/errors/NG0507.md
@@ -1,10 +1,10 @@
# HTML content was altered after server-side rendering
-Angular throws this error when it detects that the content generated by server-side rendering (SSR) was altered after the rendering. The process of hydration relies on the content to be untouched after SSR, which also includes whitespaces and comment nodes. Those whitespaces and comment nodes must be retained in the HTML generated by the SSR process. Learn more in the Hydration guide.
+Angularは、サーバーサイドレンダリング（SSR）で生成されたコンテンツがレンダリング後に変更されたことを検出すると、このエラーをスローします。ハイドレーションのプロセスは、SSR後にコンテンツが変更されないことを前提としています。これには、空白文字とコメントノードも含まれます。これらの空白文字とコメントノードは、SSRプロセスによって生成されるHTMLに保持する必要があります。ハイドレーションガイドで詳細をご確認ください。
-## Debugging the error
+## エラーのデバッグ
-Typically this happens in the following cases:
+通常、これは次の場合に発生します。
-Some CDN providers have a built-in feature to remove whitespaces and comment nodes from HTML as an optimization. Please verify if there is such an option in CDN configuration and turn it off.
-If you use custom post-processing of HTML generated by SSR (as a build step), make sure that this process doesn't remove whitespaces and comment nodes.
+一部のCDNプロバイダーは、HTMLから空白文字とコメントノードを削除する組み込み機能を最適化として備えています。CDN構成にそのようなオプションがあるかどうかを確認し、オフにしてください。
+SSRによって生成されたHTMLをカスタムで後処理する場合（ビルドステップとして）、このプロセスで空白文字とコメントノードを削除しないようにしてください。
diff --git a/adev-ja/src/content/reference/errors/NG05104.en.md b/adev-ja/src/content/reference/errors/NG05104.en.md
new file mode 100644
index 000000000..c67ab0337
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG05104.en.md
@@ -0,0 +1,31 @@
+# Root element was not found
+
+Bootstrapped components are defined in the `bootstrap` property of an `@NgModule` decorator or as the first parameter of `bootstrapApplication` for standalone components.
+
+This error happens when Angular tries to bootstrap one of these components but cannot find its corresponding node in the DOM.
+
+## Debugging the error
+
+This issue occurs when the selector mismatches the tag
+
+```typescript
+@Component({
+ selector: 'my-app',
+ ...
+})
+class AppComponent {}
+```
+
+```angular-html
+
+ ![]()
` element in question.
+### Ways to fix oversized images
+* Use a smaller source image
+* Add a [`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset) if multiple sizes are needed for different layouts.
+* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which generates [srcsets automatically](https://angular.io/guide/image-directive#request-images-at-the-correct-size-with-automatic-srcset).
+### Ways to fix lazy-loaded LCP element
+
+* Change the `loading` attribute to a different value such as `"eager"`.
+* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](https://angular.io/guide/image-directive#step-4-mark-images-as-priority).
+
+### Disabling Image Performance Warnings
+Both warnings can be disabled individually, site-wide, using a provider at the root of your application:
+
+
+providers: [
+ {
+ provide: IMAGE_CONFIG,
+ useValue: {
+ disableImageSizeWarning: true,
+ disableImageLazyLoadWarning: true
+ }
+ },
+],
+
+
diff --git a/adev-ja/src/content/reference/errors/NG0913.md b/adev-ja/src/content/reference/errors/NG0913.md
index 083e7664d..592f42c55 100644
--- a/adev-ja/src/content/reference/errors/NG0913.md
+++ b/adev-ja/src/content/reference/errors/NG0913.md
@@ -1,24 +1,24 @@
# Runtime Performance Warnings
-### Oversized images
-When images are loaded, the **intrinsic size** of the downloaded file is checked against the actual size of the image on the page. The actual size is calculated using the **rendered size** of the image with CSS applied, multiplied by the [pixel device ratio](https://web.dev/codelab-density-descriptors/#pixel-density). If the downloaded image is much larger (more than 1200px too large in either dimension), this warning is triggered. Downloading oversized images can slow down page loading and have a negative effect on [Core Web Vitals](https://web.dev/vitals/).
+### 大きすぎる画像
+画像が読み込まれると、ダウンロードされたファイルの**固有サイズ**がページ上の画像の実際のサイズに対してチェックされます。実際のサイズは、**レンダリングされたサイズ**にCSSが適用された画像のサイズを[デバイスピクセル比](https://web.dev/codelab-density-descriptors/#pixel-density)に掛け合わせた値で計算されます。ダウンロードされた画像が実際のサイズよりも大幅に大きい場合（いずれかの次元に1200px以上大きい場合）、この警告が発生します。大きすぎる画像をダウンロードすると、ページの読み込みが遅くなり、[Core Web Vitals](https://web.dev/vitals/)に悪影響を及ぼす可能性があります。
-### Lazy-loaded LCP element
-The largest contentful element on a page during load is considered the "LCP Element", which relates to [Largest Contentful Paint](https://web.dev/lcp/), one of the Core Web Vitals. Lazy loading an LCP element will have a strong negative effect on page performance. With this strategy, the browser has to complete layout calculations to determine whether the element is in the viewport before starting the image download. As a result, a warning is triggered when Angular detects that the LCP element has been given the `loading="lazy"` attribute.
+### 遅延読み込みされたLCP要素
+ページの読み込み中の最大のコンテンツ要素は「LCP要素」と見なされ、これは[Largest Contentful Paint](https://web.dev/lcp/)、つまりCore Web Vitalsの1つに関連しています。LCP要素を遅延読み込みすると、ページのパフォーマンスに大きく悪影響を及ぼします。この戦略では、ブラウザはレイアウト計算を完了して、要素がビューポート内にあるかどうかを判断してから画像のダウンロードを開始する必要があります。その結果、AngularはLCP要素に`loading="lazy"`属性が与えられたことを検出すると、警告が発生します。
@debugging
-Use the image URL provided in the console warning to find the `![]()
` element in question.
-### Ways to fix oversized images
-* Use a smaller source image
-* Add a [`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset) if multiple sizes are needed for different layouts.
-* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which generates [srcsets automatically](https://angular.io/guide/image-directive#request-images-at-the-correct-size-with-automatic-srcset).
-### Ways to fix lazy-loaded LCP element
-
-* Change the `loading` attribute to a different value such as `"eager"`.
-* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](https://angular.io/guide/image-directive#step-4-mark-images-as-priority).
+コンソール警告に表示されている画像URLを使用して、問題の`![]()
`要素を見つけます。
+### 大きすぎる画像を修正する方法
+* より小さいソース画像を使用する
+* レイアウトが異なる場合に複数のサイズが必要な場合は、[`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset)を追加します。
+* 自動的に[srcsetを生成する](https://angular.io/guide/image-directive#request-images-at-the-correct-size-with-automatic-srcset)Angularの組み込み画像ディレクティブ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage))を使用するように切り替えます。
-### Disabling Image Performance Warnings
-Both warnings can be disabled individually, site-wide, using a provider at the root of your application:
+### 遅延読み込みされたLCP要素を修正する方法
+* `loading`属性を `"eager"`などの別の値に変更します。
+* 自動的に[srcsetを生成する](https://angular.io/guide/image-directive#request-images-at-the-correct-size-with-automatic-srcset)Angularの組み込み画像ディレクティブ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage))を使用するように切り替えます。
+
+### 画像パフォーマンス警告を無効にする方法
+両方の警告は、アプリケーションのルートでプロバイダーを使用して、個別にまたはサイト全体で無効にできます。
providers: [
diff --git a/adev-ja/src/content/reference/errors/NG0950.en.md b/adev-ja/src/content/reference/errors/NG0950.en.md
new file mode 100644
index 000000000..fb8a7eff3
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0950.en.md
@@ -0,0 +1,15 @@
+# Required input is accessed before a value is set.
+
+A required input was accessed but no value was bound.
+
+This can happen when a required input is accessed too early in your directive or component.
+This is commonly happening when the input is read as part of class construction.
+
+Inputs are guaranteed to be available in the `ngOnInit` lifecycle hook and afterwards.
+
+## Fixing the error
+
+Access the required input in reactive contexts.
+For example, in the template itself, inside a `computed`, or inside an effect.
+
+Alternatively, access the input inside the `ngOnInit` lifecycle hook, or later.
diff --git a/adev-ja/src/content/reference/errors/NG0950.md b/adev-ja/src/content/reference/errors/NG0950.md
index fb8a7eff3..ea84ceaf5 100644
--- a/adev-ja/src/content/reference/errors/NG0950.md
+++ b/adev-ja/src/content/reference/errors/NG0950.md
@@ -1,15 +1,15 @@
# Required input is accessed before a value is set.
-A required input was accessed but no value was bound.
+必須入力にアクセスされましたが、値はバインドされていません。
-This can happen when a required input is accessed too early in your directive or component.
-This is commonly happening when the input is read as part of class construction.
+これは、ディレクティブまたはコンポーネント内で必須入力にアクセスするタイミングが早すぎる場合に発生する可能性があります。
+これは、入力がクラス構築の一部として読み取られる場合に一般的に発生します。
-Inputs are guaranteed to be available in the `ngOnInit` lifecycle hook and afterwards.
+入力は、`ngOnInit` ライフサイクルフック以降で使用できることが保証されています。
-## Fixing the error
+## エラーの修正
-Access the required input in reactive contexts.
-For example, in the template itself, inside a `computed`, or inside an effect.
+必須入力は、リアクティブコンテキスト内でアクセスしてください。
+たとえば、テンプレート自体、`computed` の内部、またはエフェクトの内部でアクセスしてください。
-Alternatively, access the input inside the `ngOnInit` lifecycle hook, or later.
+あるいは、`ngOnInit` ライフサイクルフック以降に必須入力にアクセスしてください。
diff --git a/adev-ja/src/content/reference/errors/NG0951.en.md b/adev-ja/src/content/reference/errors/NG0951.en.md
new file mode 100644
index 000000000..3e088a851
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0951.en.md
@@ -0,0 +1,20 @@
+# Child query result is required but no value is available.
+
+Required child query (`contentChild.required` or `viewChild.required`) result was accessed before query results were calculated or query has no matches.
+
+This can happen in two distinct situations:
+* query results were accessed before a given query could collect results;
+* a query was executed but didn't match any nodes and has no results as a consequence.
+
+Content queries and view queries each calculate their results at different points in time:
+* `contentChild` results are available after a _host_ view (template where a directive declaring a query is used) is created;
+* `viewChild` results are available after a template of a component declaring a query is created.
+
+Accessing query results before they're available results in the error described on this page. Most notably, query results are _never_ available in a constructor of the component or directive declaring a query.
+
+## Fixing the error
+
+`contentChild` query results can be accessed in the `AfterContentChecked` lifecycle hook, or later.
+`viewChild` query results can be accessed in the `AfterViewChecked` lifecycle hook, or later.
+
+Make sure that a required query matches at least one node and has results at all. You can verify this by accessing query results in the lifecycle hooks listed above.
diff --git a/adev-ja/src/content/reference/errors/NG0951.md b/adev-ja/src/content/reference/errors/NG0951.md
index 3e088a851..1464a4456 100644
--- a/adev-ja/src/content/reference/errors/NG0951.md
+++ b/adev-ja/src/content/reference/errors/NG0951.md
@@ -1,20 +1,20 @@
# Child query result is required but no value is available.
-Required child query (`contentChild.required` or `viewChild.required`) result was accessed before query results were calculated or query has no matches.
+必要な子クエリ (`contentChild.required` または `viewChild.required`) 結果は、クエリ結果が計算される前にアクセスされましたか、またはクエリに一致するものがありません。
-This can happen in two distinct situations:
-* query results were accessed before a given query could collect results;
-* a query was executed but didn't match any nodes and has no results as a consequence.
+これは、2つの異なる状況で発生する可能性があります。
+* クエリ結果は、特定のクエリが結果を収集する前にアクセスされました。
+* クエリが実行されましたが、ノードに一致せず、結果として結果がありません。
-Content queries and view queries each calculate their results at different points in time:
-* `contentChild` results are available after a _host_ view (template where a directive declaring a query is used) is created;
-* `viewChild` results are available after a template of a component declaring a query is created.
+コンテンツクエリとビュークエリのそれぞれは、異なる時点で結果を計算します。
+* `contentChild` 結果は、_ホスト_ ビュー（ディレクティブを宣言するテンプレートを使用）が作成された後に利用できます。
+* `viewChild` 結果は、クエリを宣言するコンポーネントのテンプレートが作成された後に利用できます。
-Accessing query results before they're available results in the error described on this page. Most notably, query results are _never_ available in a constructor of the component or directive declaring a query.
+クエリ結果が利用可能になる前にアクセスすると、このページに記載されているエラーが発生します。特に、クエリ結果は、クエリを宣言するコンポーネントまたはディレクティブのコンストラクターでは_決して_利用できません。
-## Fixing the error
+## エラーの修正
-`contentChild` query results can be accessed in the `AfterContentChecked` lifecycle hook, or later.
-`viewChild` query results can be accessed in the `AfterViewChecked` lifecycle hook, or later.
+`contentChild` クエリ結果は、`AfterContentChecked` ライフサイクルフック以降でアクセスできます。
+`viewChild` クエリ結果は、`AfterViewChecked` ライフサイクルフック以降でアクセスできます。
-Make sure that a required query matches at least one node and has results at all. You can verify this by accessing query results in the lifecycle hooks listed above.
+必要なクエリが少なくとも1つのノードに一致し、結果があることを確認してください。上記のライフサイクルフックでクエリ結果にアクセスすることで、これを確認できます。
diff --git a/adev-ja/src/content/reference/errors/NG0955.en.md b/adev-ja/src/content/reference/errors/NG0955.en.md
new file mode 100644
index 000000000..936c24c88
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0955.en.md
@@ -0,0 +1,31 @@
+# Track expression resulted in duplicated keys for a given collection.
+
+A track expression specified in the `@for` loop evaluated to duplicated keys for a given collection, ex.:
+
+```typescript
+@Component({
+ template: `@for (item of items; track item.value) {{{item.value}}}`,
+})
+class TestComponent {
+ items = [{key: 1, value: 'a'}, {key: 2, value: 'b'}, {key: 3, value: 'a'}];
+}
+```
+
+In the provided example the `item.key` tracking expression will find two duplicate keys `a` (at index 0 and 2).
+
+Duplicate keys are problematic from the correctness point of view: since the `@for` loop can't uniquely identify items it might choose DOM nodes corresponding to _another_ item (with the same key) when performing DOM moves or destroy.
+
+There is also performance penalty associated with duplicated keys - internally Angular must use more sophisticated and slower data structures while repeating over collections with duplicated keys.
+
+## Fixing the error
+
+Change the tracking expression such that it uniquely identifies an item in a collection. In the discussed example the correct track expression would use the unique `key` property (`item.key`):
+
+```typescript
+@Component({
+ template: `@for (item of items; track item.key) {{{item.value}}}`,
+})
+class TestComponent {
+ items = [{key: 1, value: 'a'}, {key: 2, value: 'b'}, {key: 3, value: 'a'}];
+}
+```
diff --git a/adev-ja/src/content/reference/errors/NG0955.md b/adev-ja/src/content/reference/errors/NG0955.md
index 936c24c88..dbf8893bd 100644
--- a/adev-ja/src/content/reference/errors/NG0955.md
+++ b/adev-ja/src/content/reference/errors/NG0955.md
@@ -1,6 +1,6 @@
# Track expression resulted in duplicated keys for a given collection.
-A track expression specified in the `@for` loop evaluated to duplicated keys for a given collection, ex.:
+`@for` ループで指定されたトラック式が、特定のコレクションに対して重複するキーを評価しました。例：
```typescript
@Component({
@@ -11,15 +11,15 @@ class TestComponent {
}
```
-In the provided example the `item.key` tracking expression will find two duplicate keys `a` (at index 0 and 2).
+上記の例では、`item.key` トラック式は、2つの重複するキー `a`（インデックス0と2にあります）を見つけます。
-Duplicate keys are problematic from the correctness point of view: since the `@for` loop can't uniquely identify items it might choose DOM nodes corresponding to _another_ item (with the same key) when performing DOM moves or destroy.
+重複するキーは、正確性の観点から問題があります。`@for` ループはアイテムを一意に識別できないため、DOM移動または破壊する際に、_別の_ アイテム（同じキーを持つ）に対応するDOMノードを選択する可能性があります。
-There is also performance penalty associated with duplicated keys - internally Angular must use more sophisticated and slower data structures while repeating over collections with duplicated keys.
+重複するキーには、パフォーマンス上のペナルティも伴います。内部的にAngularは、重複するキーを持つコレクションを繰り返す際に、より洗練された、速度の遅いデータ構造を使用する必要があります。
-## Fixing the error
+## エラーの修正
-Change the tracking expression such that it uniquely identifies an item in a collection. In the discussed example the correct track expression would use the unique `key` property (`item.key`):
+トラック式を、コレクション内のアイテムを一意に識別するように変更してください。上記で説明した例では、正しいトラック式は、一意の `key` プロパティ（`item.key`）を使用します。
```typescript
@Component({
diff --git a/adev-ja/src/content/reference/errors/NG0956.en.md b/adev-ja/src/content/reference/errors/NG0956.en.md
new file mode 100644
index 000000000..d57179df5
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0956.en.md
@@ -0,0 +1,57 @@
+# Tracking expression caused re-creation of the DOM structure.
+
+The identity track expression specified in the `@for` loop caused re-creation of the DOM corresponding to _all_ items. This is a very expensive operation that commonly occurs when working with immutable data structures. For example:
+
+```typescript
+@Component({
+ template: `
+
+
+
+const moduleDefinition = {…}
+
+@NgModule(moduleDefinition)
+export class AppModule {
+ constructor() {}
+}
+
+
+
+into the decorator:
+
+
+
+@NgModule({…})
+export class AppModule {
+ constructor() {}
+}
+
+
diff --git a/adev-ja/src/content/reference/errors/NG1001.md b/adev-ja/src/content/reference/errors/NG1001.md
index 000138cfb..068e82633 100644
--- a/adev-ja/src/content/reference/errors/NG1001.md
+++ b/adev-ja/src/content/reference/errors/NG1001.md
@@ -1,13 +1,13 @@
# Argument Not Literal
-To make the metadata extraction in the Angular compiler faster, the decorators `@NgModule`, `@Pipe`, `@Component`, `@Directive`, and `@Injectable` accept only object literals as arguments.
+Angularコンパイラのメタデータ抽出を高速化するため、`@NgModule`、`@Pipe`、`@Component`、`@Directive`、`@Injectable` デコレーターは引数としてオブジェクトリテラルのみを受け付けます。
-This is an [intentional change in Ivy](https://github.com/angular/angular/issues/30840#issuecomment-498869540), which enforces stricter argument requirements for decorators than View Engine.
-Ivy requires this approach because it compiles decorators by moving the expressions into other locations in the class output.
+これは[Ivyにおける意図的な変更](https://github.com/angular/angular/issues/30840#issuecomment-498869540)であり、View Engineよりもデコレーターの引数に対するより厳格な要件を課しています。
+Ivyでは、クラス出力の他の場所に式を移動することによってデコレーターをコンパイルするため、このアプローチが必要となります。
-## Debugging the error
+## エラーのデバッグ
-Move all declarations:
+すべての宣言を:
@@ -20,7 +20,7 @@ export class AppModule {
-into the decorator:
+をデコレーターに移します:
diff --git a/adev-ja/src/content/reference/errors/NG2003.en.md b/adev-ja/src/content/reference/errors/NG2003.en.md
new file mode 100644
index 000000000..5feda3cad
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG2003.en.md
@@ -0,0 +1,10 @@
+# Missing Token
+
+There is no injection token for a constructor parameter at compile time. [InjectionTokens](api/core/InjectionToken) are tokens that can be used in a Dependency Injection Provider.
+
+## Debugging the error
+
+Look at the parameter that throws the error, and all uses of the class.
+This error is commonly thrown when a constructor defines parameters with primitive types such as `string`, `number`, `boolean`, and `Object`.
+
+Use the `@Injectable` method or `@Inject` decorator from `@angular/core` to ensure that the type you are injecting is reified \(has a runtime representation\). Make sure to add a provider to this decorator so that you do not throw [NG0201: No Provider Found](errors/NG0201).
diff --git a/adev-ja/src/content/reference/errors/NG2003.md b/adev-ja/src/content/reference/errors/NG2003.md
index 5feda3cad..717d7590b 100644
--- a/adev-ja/src/content/reference/errors/NG2003.md
+++ b/adev-ja/src/content/reference/errors/NG2003.md
@@ -1,10 +1,10 @@
# Missing Token
-There is no injection token for a constructor parameter at compile time. [InjectionTokens](api/core/InjectionToken) are tokens that can be used in a Dependency Injection Provider.
+コンパイル時にコンストラクターパラメータ用のインジェクショントークンがありません。[InjectionTokens](api/core/InjectionToken)は、依存性の注入プロバイダーで使用できるトークンです。
-## Debugging the error
+## エラーのデバッグ
-Look at the parameter that throws the error, and all uses of the class.
-This error is commonly thrown when a constructor defines parameters with primitive types such as `string`, `number`, `boolean`, and `Object`.
+エラーをスローしたパラメータと、クラスのすべての使用箇所を確認してください。
+このエラーは、コンストラクターが `string`、`number`、`boolean`、`Object` などのプリミティブ型のパラメータを定義している場合に頻繁に発生します。
-Use the `@Injectable` method or `@Inject` decorator from `@angular/core` to ensure that the type you are injecting is reified \(has a runtime representation\). Make sure to add a provider to this decorator so that you do not throw [NG0201: No Provider Found](errors/NG0201).
+`@Injectable` メソッドまたは `@angular/core` の `@Inject` デコレーターを使用して、インジェクションしている型が再帰化（ランタイム表現を持つ）されていることを確認してください。[NG0201: プロバイダーが見つかりません](errors/NG0201)をスローしないように、このデコレーターにプロバイダーを追加してください。
diff --git a/adev-ja/src/content/reference/errors/NG2009.en.md b/adev-ja/src/content/reference/errors/NG2009.en.md
new file mode 100644
index 000000000..85f754588
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG2009.en.md
@@ -0,0 +1,37 @@
+# Invalid Shadow DOM selector
+
+The selector of a component using `ViewEncapsulation.ShadowDom` doesn't match the custom element tag name requirements.
+
+In order for a tag name to be considered a valid custom element name, it has to:
+
+* Be in lower case.
+* Contain a hyphen.
+* Start with a letter \(a-z\).
+
+## Debugging the error
+
+Rename your component's selector so that it matches the requirements.
+
+**Before:**
+
+
+
+@Component({
+ selector: 'comp',
+ encapsulation: ViewEncapsulation.ShadowDom
+ …
+})
+
+
+
+**After:**
+
+
+
+@Component({
+ selector: 'app-comp',
+ encapsulation: ViewEncapsulation.ShadowDom
+ …
+})
+
+
diff --git a/adev-ja/src/content/reference/errors/NG2009.md b/adev-ja/src/content/reference/errors/NG2009.md
index 85f754588..a7f488361 100644
--- a/adev-ja/src/content/reference/errors/NG2009.md
+++ b/adev-ja/src/content/reference/errors/NG2009.md
@@ -1,18 +1,18 @@
# Invalid Shadow DOM selector
-The selector of a component using `ViewEncapsulation.ShadowDom` doesn't match the custom element tag name requirements.
+`ViewEncapsulation.ShadowDom` を使用したコンポーネントのセレクターが、カスタム要素タグ名の要件と一致していません。
-In order for a tag name to be considered a valid custom element name, it has to:
+タグ名を有効なカスタム要素名と見なすには、次の条件を満たす必要があります。
-* Be in lower case.
-* Contain a hyphen.
-* Start with a letter \(a-z\).
+* 小文字であること。
+* ハイフンを含むこと。
+* 文字 (a-z) で始まること。
-## Debugging the error
+## エラーのデバッグ
-Rename your component's selector so that it matches the requirements.
+コンポーネントのセレクターを、要件に一致するように名前を変更します。
-**Before:**
+**変更前:**
@@ -24,7 +24,7 @@ Rename your component's selector so that it matches the requirements.
-**After:**
+**変更後:**
diff --git a/adev-ja/src/content/reference/errors/NG3003.en.md b/adev-ja/src/content/reference/errors/NG3003.en.md
new file mode 100644
index 000000000..cbbde3475
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG3003.en.md
@@ -0,0 +1,51 @@
+# Import Cycle Detected
+
+A component, directive, or pipe that is referenced by this component would require the compiler to add an import that would lead to a cycle of imports.
+For example, consider a scenario where a `ParentComponent` references a `ChildComponent` in its template:
+
+
+
+parent.component.ts -> child.component.ts -> parent.component.ts
+
+
+
+## Remote Scoping
+
+If you are using NgModules, to avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component that wires up the dependencies is declared.
+
+This is known as "remote scoping".
+
+## Libraries
+
+Unfortunately, "remote scoping" code is side-effectful —which prevents tree shaking— and cannot be used in libraries.
+So when building libraries using the `"compilationMode": "partial"` setting, any component that would require a cyclic import will cause this `NG3003` compiler error to be raised.
+
+## Debugging the error
+
+The cycle that would be generated is shown as part of the error message.
+For example:
+
+
+
+The component ChildComponent is used in the template but importing it would create a cycle:
+/parent.component.ts -> /child.component.ts -> /parent.component.ts
+
+
+
+Use this to identify how the referenced component, pipe, or directive has a dependency back to the component being compiled.
+Here are some ideas for fixing the problem:
+
+* Try to rearrange your dependencies to avoid the cycle.
+ For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
+* Move the classes that reference each other into the same file, to avoid any imports between them.
+* Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.
diff --git a/adev-ja/src/content/reference/errors/NG3003.md b/adev-ja/src/content/reference/errors/NG3003.md
index cbbde3475..5faf24fb1 100644
--- a/adev-ja/src/content/reference/errors/NG3003.md
+++ b/adev-ja/src/content/reference/errors/NG3003.md
@@ -1,17 +1,17 @@
# Import Cycle Detected
-A component, directive, or pipe that is referenced by this component would require the compiler to add an import that would lead to a cycle of imports.
-For example, consider a scenario where a `ParentComponent` references a `ChildComponent` in its template:
+コンポーネント、ディレクティブ、またはパイプが、このコンポーネントによって参照されている場合、コンパイラはインポートを追加する必要があり、インポートの循環が発生します。
+たとえば、`ParentComponent`がテンプレートで`ChildComponent`を参照しているシナリオを考えてみます。
@@ -19,33 +19,33 @@ parent.component.ts -> child.component.ts -> parent.component.ts
-## Remote Scoping
+## リモートスコープ
-If you are using NgModules, to avoid adding imports that create cycles, additional code is added to the `NgModule` class where the component that wires up the dependencies is declared.
+NgModuleを使用している場合、循環を作成するインポートを追加しないように、依存関係を接続するコンポーネントが宣言されている`NgModule`クラスにコードが追加されます。
-This is known as "remote scoping".
+これは「リモートスコープ」と呼ばれます。
-## Libraries
+## ライブラリ
-Unfortunately, "remote scoping" code is side-effectful —which prevents tree shaking— and cannot be used in libraries.
-So when building libraries using the `"compilationMode": "partial"` setting, any component that would require a cyclic import will cause this `NG3003` compiler error to be raised.
+残念ながら、「リモートスコープ」コードは副作用があるため、ツリーシェイクが不可能になり、ライブラリでは使用できません。
+そのため、`"compilationMode": "partial"`設定を使用してライブラリをビルドする場合、循環インポートを必要とするコンポーネントは、この`NG3003`コンパイラエラーが発生します。
-## Debugging the error
+## エラーのデバッグ
-The cycle that would be generated is shown as part of the error message.
-For example:
+生成される循環は、エラーメッセージの一部として表示されます。
+たとえば、
-The component ChildComponent is used in the template but importing it would create a cycle:
+コンポーネントChildComponentはテンプレートで使用されていますが、インポートすると循環が発生します。
/parent.component.ts -> /child.component.ts -> /parent.component.ts
-Use this to identify how the referenced component, pipe, or directive has a dependency back to the component being compiled.
-Here are some ideas for fixing the problem:
+これを使用して、参照されたコンポーネント、パイプ、またはディレクティブがコンパイルされているコンポーネントにどのように依存しているかを特定します。
+問題を解決するためのアイデアをいくつかご紹介します。
-* Try to rearrange your dependencies to avoid the cycle.
- For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
-* Move the classes that reference each other into the same file, to avoid any imports between them.
-* Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.
+* 循環を回避するために、依存関係を再配置してみてください。
+ たとえば、循環を発生させることなく、両方の依存ファイルにインポートできる独立したファイルに格納されている中間インターフェースを使用します。
+* 互いに参照しているクラスを同じファイルに移動して、それらの間でインポートを回避します。
+* インポートされた宣言がタイプとしてのみ使用される場合、インポートステートメントをタイプのみのインポート（`import type`構文を使用）に変換します。タイプのみのインポートは循環に寄与しません。
diff --git a/adev-ja/src/content/reference/errors/NG6100.en.md b/adev-ja/src/content/reference/errors/NG6100.en.md
new file mode 100644
index 000000000..5d97685a7
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG6100.en.md
@@ -0,0 +1,24 @@
+# NgModule.id Set to module.id anti-pattern
+
+Using `module.id` as an NgModule `id` is a common anti-pattern and is likely not serving a useful purpose in your code.
+
+NgModules can be declared with an `id`:
+
+```typescript
+@NgModule({
+ id: 'my_module'
+})
+export class MyModule {}
+```
+
+Declaring an `id` makes the NgModule available for lookup via the `getNgModuleById()` operation. This functionality is rarely used, mainly in very specific bundling scenarios when lazily loading NgModules without obtaining direct references to them. In most Angular code, ES dynamic `import()` (`import('./path/to/module')`) should be used instead, as this provides a direct reference to the NgModule being loaded without the need for a global registration side effect.
+
+If you are not using `getNgModuleById`, you do not need to provide `id`s for your NgModules. Providing one has a significant drawback: it makes the NgModule non-tree-shakable, which can have an impact on your bundle size.
+
+In particular, the pattern of specifying `id: module.id` results from a misunderstanding of `@NgModule.id`. In earlier versions of Angular, it was sometimes necessary to include the property `moduleId: module.id` in `@Component` metadata.
+
+Using `module.id` for `@NgModule.id` likely results from confusion between `@Component.moduleId` and `@NgModule.id`. `module.id` would not typically be useful for `getNgModuleById()` operations as the `id` needs to be a well-known string, and `module.id` is usually opaque to consumers.
+
+## Debugging the error
+
+You can remove the `id: module.id` declaration from your NgModules. The compiler ignores this declaration and issues this warning instead.
diff --git a/adev-ja/src/content/reference/errors/NG6100.md b/adev-ja/src/content/reference/errors/NG6100.md
index 5d97685a7..ad021a9bf 100644
--- a/adev-ja/src/content/reference/errors/NG6100.md
+++ b/adev-ja/src/content/reference/errors/NG6100.md
@@ -1,8 +1,8 @@
# NgModule.id Set to module.id anti-pattern
-Using `module.id` as an NgModule `id` is a common anti-pattern and is likely not serving a useful purpose in your code.
+`module.id` をNgModuleの `id` として使用することは、一般的なアンチパターンであり、コードで有用な目的を果たしていない可能性が高いです。
-NgModules can be declared with an `id`:
+NgModuleは `id` を宣言できます。
```typescript
@NgModule({
@@ -11,14 +11,14 @@ NgModules can be declared with an `id`:
export class MyModule {}
```
-Declaring an `id` makes the NgModule available for lookup via the `getNgModuleById()` operation. This functionality is rarely used, mainly in very specific bundling scenarios when lazily loading NgModules without obtaining direct references to them. In most Angular code, ES dynamic `import()` (`import('./path/to/module')`) should be used instead, as this provides a direct reference to the NgModule being loaded without the need for a global registration side effect.
+`id` を宣言すると、NgModuleは `getNgModuleById()` 操作で検索できるようになります。この機能は、ほとんど使用されず、主に、遅延読み込みされたNgModuleに対して直接参照を取得せずに、特定のバンドルシナリオで使用されます。ほとんどのAngularコードでは、代わりにES動的 `import()` (`import('./path/to/module')`) を使用する必要があります。これは、グローバル登録の副作用を必要とすることなく、読み込まれたNgModuleへの直接参照を提供します。
-If you are not using `getNgModuleById`, you do not need to provide `id`s for your NgModules. Providing one has a significant drawback: it makes the NgModule non-tree-shakable, which can have an impact on your bundle size.
+`getNgModuleById` を使用していない場合は、NgModuleの `id` を提供する必要はありません。`id` を提供すると、NgModuleがツリーシェイク不可能になり、バンドルサイズに影響を与える可能性があります。
-In particular, the pattern of specifying `id: module.id` results from a misunderstanding of `@NgModule.id`. In earlier versions of Angular, it was sometimes necessary to include the property `moduleId: module.id` in `@Component` metadata.
+特に、`id: module.id` を指定するパターンは、`@NgModule.id` の誤解から生じます。以前のバージョンのAngularでは、`@Component` メタデータに `moduleId: module.id` プロパティを含める必要がありました。
-Using `module.id` for `@NgModule.id` likely results from confusion between `@Component.moduleId` and `@NgModule.id`. `module.id` would not typically be useful for `getNgModuleById()` operations as the `id` needs to be a well-known string, and `module.id` is usually opaque to consumers.
+`@NgModule.id` に `module.id` を使用すると、`@Component.moduleId` と `@NgModule.id` を混同することになります。`module.id` は通常、`getNgModuleById()` 操作には役立ちません。`id` は既知の文字列である必要があり、`module.id` は通常、コンシューマーにとって不透明です。
-## Debugging the error
+## エラーのデバッグ
-You can remove the `id: module.id` declaration from your NgModules. The compiler ignores this declaration and issues this warning instead.
+NgModuleから `id: module.id` 宣言を削除できます。コンパイラは、この宣言を無視して、代わりにこの警告を出力します。
diff --git a/adev-ja/src/content/reference/errors/NG8001.en.md b/adev-ja/src/content/reference/errors/NG8001.en.md
new file mode 100644
index 000000000..e35bce820
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG8001.en.md
@@ -0,0 +1,17 @@
+# Invalid Element
+
+One or more elements cannot be resolved during compilation because the element is not defined by the HTML spec, or there is no component or directive with such element selector.
+
+HELPFUL: This is the compiler equivalent of a common runtime error `NG0304: '${tagName}' is not a known element: ...`.
+
+## Debugging the error
+
+Use the element name in the error to find the file(s) where the element is being used.
+
+Check that the name and selector are correct.
+
+Make sure that the component is correctly imported inside your NgModule or standalone component, by checking its presence in the `imports` field. If the component is declared in an NgModule (meaning that it is not standalone) make sure that it is exported correctly from it, by checking its presence in the `exports` field.
+
+When using custom elements or web components, ensure that you add [`CUSTOM_ELEMENTS_SCHEMA`](api/core/CUSTOM_ELEMENTS_SCHEMA) to the application module.
+
+If this does not resolve the error, check the imported libraries for any recent changes to the exports and properties you are using, and restart your server.
diff --git a/adev-ja/src/content/reference/errors/NG8001.md b/adev-ja/src/content/reference/errors/NG8001.md
index e35bce820..68077b7e3 100644
--- a/adev-ja/src/content/reference/errors/NG8001.md
+++ b/adev-ja/src/content/reference/errors/NG8001.md
@@ -1,17 +1,17 @@
# Invalid Element
-One or more elements cannot be resolved during compilation because the element is not defined by the HTML spec, or there is no component or directive with such element selector.
+1つ以上の要素がコンパイル時に解決できません。要素がHTML仕様で定義されていないか、そのような要素セレクターを持つコンポーネントまたはディレクティブが存在しないためです。
-HELPFUL: This is the compiler equivalent of a common runtime error `NG0304: '${tagName}' is not a known element: ...`.
+HELPFUL: これは、一般的なランタイムエラー`NG0304: '${tagName}' is not a known element: ...`のコンパイラ相当です。
-## Debugging the error
+## エラーのデバッグ
-Use the element name in the error to find the file(s) where the element is being used.
+エラー内の要素名を使用して、要素が使用されているファイルを見つけます。
-Check that the name and selector are correct.
+名前とセレクターが正しいことを確認します。
-Make sure that the component is correctly imported inside your NgModule or standalone component, by checking its presence in the `imports` field. If the component is declared in an NgModule (meaning that it is not standalone) make sure that it is exported correctly from it, by checking its presence in the `exports` field.
+コンポーネントが`imports`フィールドで、NgModuleまたはスタンドアロンコンポーネントに正しくインポートされていることを確認してください。コンポーネントがNgModuleで宣言されている場合（スタンドアロンではない）、`exports`フィールドに正しくエクスポートされていることを確認してください。
-When using custom elements or web components, ensure that you add [`CUSTOM_ELEMENTS_SCHEMA`](api/core/CUSTOM_ELEMENTS_SCHEMA) to the application module.
+カスタム要素またはWebコンポーネントを使用する場合は、アプリケーションモジュールに[`CUSTOM_ELEMENTS_SCHEMA`](api/core/CUSTOM_ELEMENTS_SCHEMA)を追加してください。
-If this does not resolve the error, check the imported libraries for any recent changes to the exports and properties you are using, and restart your server.
+それでもエラーが解決しない場合は、インポートしたライブラリで、使用しているエクスポートやプロパティに対する最近の変更がないかを確認し、サーバーを再起動してください。
diff --git a/adev-ja/src/content/reference/errors/NG8002.en.md b/adev-ja/src/content/reference/errors/NG8002.en.md
new file mode 100644
index 000000000..5687d7107
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG8002.en.md
@@ -0,0 +1,18 @@
+# Invalid Attribute
+
+
+
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+ …
+ imports: [
+ FormsModule,
+ …
+
+
+
+If you recently added an import, you will need to restart your server to see these changes.
diff --git a/adev-ja/src/content/reference/errors/NG8003.md b/adev-ja/src/content/reference/errors/NG8003.md
index 5cf79cffe..a8064b65b 100644
--- a/adev-ja/src/content/reference/errors/NG8003.md
+++ b/adev-ja/src/content/reference/errors/NG8003.md
@@ -2,17 +2,17 @@
@@ -26,4 +26,4 @@ import { FormsModule } from '@angular/forms';
-If you recently added an import, you will need to restart your server to see these changes.
+インポートを最近追加した場合、サーバーを再起動してこれらの変更を確認する必要があります。
diff --git a/adev-ja/src/content/reference/errors/overview.en.md b/adev-ja/src/content/reference/errors/overview.en.md
new file mode 100644
index 000000000..5af4d62b5
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/overview.en.md
@@ -0,0 +1,46 @@
+# Error Encyclopedia
+
+## Runtime errors
+
+| Code | Name |
+| :-------- | :----------------------------------------------------------------------------------- |
+| `NG0100` | [Expression Changed After Checked](errors/NG0100) |
+| `NG0200` | [Circular Dependency in DI](errors/NG0200) |
+| `NG0201` | [No Provider Found](errors/NG0201) |
+| `NG0203` | [`inject()` must be called from an injection context](errors/NG0203) |
+| `NG0209` | [Invalid multi provider](errors/NG0209) |
+| `NG0300` | [Selector Collision](errors/NG0300) |
+| `NG0301` | [Export Not Found](errors/NG0301) |
+| `NG0302` | [Pipe Not Found](errors/NG0302) |
+| `NG0403` | [Bootstrapped NgModule doesn't specify which component to initialize](errors/NG0403) |
+| `NG0500` | [Hydration Node Mismatch](errors/NG0500) |
+| `NG0501` | [Hydration Missing Siblings](errors/NG0501) |
+| `NG0502` | [Hydration Missing Node](errors/NG0502) |
+| `NG0503` | [Hydration Unsupported Projection of DOM Nodes](errors/NG0503) |
+| `NG0504` | [Skip hydration flag is applied to an invalid node](errors/NG0504) |
+| `NG0505` | [No hydration info in server response](errors/NG0505) |
+| `NG0506` | [NgZone remains unstable](errors/NG0506) |
+| `NG0507` | [HTML content was altered after SSR](errors/NG0507) |
+| `NG0910` | [Unsafe bindings on an iframe element](errors/NG0910) |
+| `NG0912` | [Component ID generation collision](errors/NG0912) |
+| `NG0955` | [Track expression resulted in duplicated keys for a given collection](errors/NG0955) |
+| `NG0956` | [Tracking expression caused re-creation of the DOM structure](errors/NG0956) |
+| `NG01101` | [Wrong Async Validator Return Type](errors/NG01101) |
+| `NG01203` | [Missing value accessor](errors/NG01203) |
+| `NG02200` | [Missing Iterable Differ](errors/NG02200) |
+| `NG02800` | [JSONP support in HttpClient configuration](errors/NG02800) |
+| `NG05000` | [Hydration with unsupported Zone.js instance.](errors/NG05000) |
+| `NG05104` | [Root element was not found.](errors/NG05104) |
+
+## Compiler errors
+
+| Code | Name |
+| :------- | :--------------------------------------------------------- |
+| `NG1001` | [Argument Not Literal](errors/NG1001) |
+| `NG2003` | [Missing Token](errors/NG2003) |
+| `NG2009` | [Invalid Shadow DOM selector](errors/NG2009) |
+| `NG3003` | [Import Cycle Detected](errors/NG3003) |
+| `NG6100` | [NgModule.id Set to module.id anti-pattern](errors/NG6100) |
+| `NG8001` | [Invalid Element](errors/NG8001) |
+| `NG8002` | [Invalid Attribute](errors/NG8002) |
+| `NG8003` | [Missing Reference Target](errors/NG8003) |
diff --git a/adev-ja/src/content/reference/errors/overview.md b/adev-ja/src/content/reference/errors/overview.md
index 5af4d62b5..b52b04b36 100644
--- a/adev-ja/src/content/reference/errors/overview.md
+++ b/adev-ja/src/content/reference/errors/overview.md
@@ -1,8 +1,8 @@
-# Error Encyclopedia
+# エラー百科事典
-## Runtime errors
+## ランタイムエラー
-| Code | Name |
+| コード | 名前 |
| :-------- | :----------------------------------------------------------------------------------- |
| `NG0100` | [Expression Changed After Checked](errors/NG0100) |
| `NG0200` | [Circular Dependency in DI](errors/NG0200) |
@@ -32,9 +32,9 @@
| `NG05000` | [Hydration with unsupported Zone.js instance.](errors/NG05000) |
| `NG05104` | [Root element was not found.](errors/NG05104) |
-## Compiler errors
+## コンパイラエラー
-| Code | Name |
+| コード | 名前 |
| :------- | :--------------------------------------------------------- |
| `NG1001` | [Argument Not Literal](errors/NG1001) |
| `NG2003` | [Missing Token](errors/NG2003) |
diff --git a/prh.yml b/prh.yml
index 8216627f5..d70debdea 100644
--- a/prh.yml
+++ b/prh.yml
@@ -196,11 +196,6 @@ rules:
- Effects
- Effect
- - expected: ハイドレーション
- pattern:
- - hydration
- - Hydration
-
- expected: シングルページアプリケーション
pattern:
- 単一ページアプリケーション
-
+ @for (todo of todos; track todo) {
+
- {{todo.task}} + } +
-
+ @for (todo of todos; track todo.id) {
+
- {{todo.task}} + } +