Skip to content

Commit

Permalink
fix: translate errors guides (#975)
Browse files Browse the repository at this point in the history
  • Loading branch information
lacolaco authored Aug 15, 2024
1 parent 6e2a6f7 commit 548f39a
Show file tree
Hide file tree
Showing 83 changed files with 1,565 additions and 369 deletions.
3 changes: 2 additions & 1 deletion .textlintrc
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"の",
"が",
"に",
"にも"
"にも",
"は"
]
},
"no-exclamation-question-mark": false,
Expand Down
2 changes: 1 addition & 1 deletion adev-ja/src/content/best-practices/style-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ Angularの構文、慣習、およびアプリケーション構造に関する

<docs-code header="main.ts" path="adev/src/content/examples/styleguide/src/02-05/main.ts"/>

### コンポーネントセレクター
### コンポーネントセレクター {#component-selectors}

#### スタイル 05-02

Expand Down
19 changes: 19 additions & 0 deletions adev-ja/src/content/reference/errors/NG0100.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# Expression Changed After Checked

<docs-video src="https://www.youtube.com/embed/O47uUnJjbJc"/>

Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode.

In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven't changed. This catches errors where the view is left in an inconsistent state. This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent. If either of these occurs, this is a sign that change detection is not stabilized. Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.

This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`. It is also common when dealing with loading status and asynchronous operations, or when a child component changes its parent bindings.

## Debugging the error

The [source maps](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map) generated by the CLI are very useful when debugging. Navigate up the call stack until you find a template expression where the value displayed in the error has changed.

Ensure that there are no changes to the bindings in the template after change detection is run. This often means refactoring to use the correct component lifecycle hook for your use case. If the issue exists within `ngAfterViewInit`, the recommended solution is to use a constructor or `ngOnInit` to set initial values, or use `ngAfterContentInit` for other value bindings.

If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.

Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging).
16 changes: 8 additions & 8 deletions adev-ja/src/content/reference/errors/NG0100.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@

<docs-video src="https://www.youtube.com/embed/O47uUnJjbJc"/>

Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode.
Angularは、変更検知が完了した後に式の値が変更された場合に、`ExpressionChangedAfterItHasBeenCheckedError`をスローします。Angularはこのエラーを開発モードでのみスローします。

In development mode, Angular performs an additional check after each change detection run, to ensure the bindings haven't changed. This catches errors where the view is left in an inconsistent state. This can occur, for example, if a method or getter returns a different value each time it is called, or if a child component changes values on its parent. If either of these occurs, this is a sign that change detection is not stabilized. Angular throws the error to ensure data is always reflected correctly in the view, which prevents erratic UI behavior or a possible infinite loop.
開発モードでは、Angularは各変更検知の実行後に追加のチェックを実行して、バインディングが変更されていないことを確認します。これにより、ビューが不整合な状態で残されるエラーがキャッチされます。たとえば、メソッドまたはゲッターが呼び出されるたびに異なる値を返す場合、または子コンポーネントが親の値を変更する場合に発生する可能性があります。いずれかの場合も、これは変更検知が安定していないことを示しています。Angularは、データが常にビューに正しく反映され、UI動作が不安定になる可能性や無限ループを防ぐために、エラーをスローします。

This error commonly occurs when you've added template expressions or have begun to implement lifecycle hooks like `ngAfterViewInit` or `ngOnChanges`. It is also common when dealing with loading status and asynchronous operations, or when a child component changes its parent bindings.
このエラーは、テンプレート式を追加した場合、または`ngAfterViewInit``ngOnChanges`などのライフサイクルフックの実装を開始した場合に、一般的に発生します。また、ローディングステータスや非同期操作を扱う場合、または子コンポーネントが親バインディングを変更する場合にも一般的です。

## Debugging the error
## エラーのデバッグ

The [source maps](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map) generated by the CLI are very useful when debugging. Navigate up the call stack until you find a template expression where the value displayed in the error has changed.
CLIによって生成された[ソースマップ](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map)は、デバッグ時に非常に役立ちます。呼び出しスタックを上って、エラーに表示されている値が変更されたテンプレート式を見つけるまでナビゲートします。

Ensure that there are no changes to the bindings in the template after change detection is run. This often means refactoring to use the correct component lifecycle hook for your use case. If the issue exists within `ngAfterViewInit`, the recommended solution is to use a constructor or `ngOnInit` to set initial values, or use `ngAfterContentInit` for other value bindings.
変更検知が実行された後にテンプレートのバインディングに変更がないことを確認します。これは多くの場合、ユースケースに適切なコンポーネントライフサイクルフックを使用するようにリファクタリングすることを意味します。問題が`ngAfterViewInit`内にある場合、初期値を設定するためにコンストラクターまたは`ngOnInit`を使用するか、他の値バインディングのために`ngAfterContentInit`を使用することをお勧めします。

If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.
ビューでメソッドにバインディングしている場合、呼び出しがテンプレート内の他のバインディングを更新しないことを確認してください。

Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging).
どのソリューションが自分に適しているかについては、['「ExpressionChangedAfterItHasBeenCheckedError」エラーに関するすべて'](https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error)と、これがなぜ役立つのかについては、['Angularデバッグ「Expression has changed after it was checked」: 簡単な説明(と修正)'](https://blog.angular-university.io/angular-debugging)をご覧ください。
20 changes: 20 additions & 0 deletions adev-ja/src/content/reference/errors/NG01101.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Wrong Async Validator Return Type

Async validators must return a promise or an observable, and emit/resolve them whether the validation fails or succeeds. In particular, they must implement the [AsyncValidatorFn API](api/forms/AsyncValidator)

```typescript
export function isTenAsync(control: AbstractControl):
Observable<ValidationErrors | null> {
const v: number = control.value;
if (v !== 10) {
// Emit an object with a validation error.
return of({ 'notTen': true, 'requiredValue': 10 });
}
// Emit null, to indicate no error occurred.
return of(null);
}
```

## Debugging the error

Did you mistakenly use a synchronous validator instead of an async validator?
10 changes: 5 additions & 5 deletions adev-ja/src/content/reference/errors/NG01101.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# Wrong Async Validator Return Type

Async validators must return a promise or an observable, and emit/resolve them whether the validation fails or succeeds. In particular, they must implement the [AsyncValidatorFn API](api/forms/AsyncValidator)
非同期バリデーターはPromiseまたはObservableを返す必要があり、バリデーションの失敗と成功にかかわらず、それらをエミット/解決する必要があります。特に、[AsyncValidatorFn API](api/forms/AsyncValidator)を実装する必要があります。

```typescript
export function isTenAsync(control: AbstractControl):
Observable<ValidationErrors | null> {
const v: number = control.value;
if (v !== 10) {
// Emit an object with a validation error.
// エラーを持つバリデーションオブジェクトをエミットします。
return of({ 'notTen': true, 'requiredValue': 10 });
}
// Emit null, to indicate no error occurred.
// エラーが発生していないことを示すために、nullをエミットします。
return of(null);
}
```

## Debugging the error
## エラーのデバッグ

Did you mistakenly use a synchronous validator instead of an async validator?
同期バリデーターではなく、非同期バリデーターを使用していませんか?
26 changes: 26 additions & 0 deletions adev-ja/src/content/reference/errors/NG01203.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# 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: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyInputField),
multi: true,
}
]
```

## 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. `<div [(ngModel)]="foo">`)?
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.
20 changes: 10 additions & 10 deletions adev-ja/src/content/reference/errors/NG01203.md
Original file line number Diff line number Diff line change
@@ -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: [
Expand All @@ -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. `<div [(ngModel)]="foo">`)?
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`を配置しましたか(例:`<div [(ngModel)]="foo">`)?
1. `NgModule`内で宣言されたカスタムフォームコントロールを使用していますか? その場合は、**インポート**していることを確認してください。
1. サードパーティのカスタムフォームコントロールで`ngModel`を使用していますか? そのコントロールが値アクセサを提供しているかどうかを確認してください。提供していない場合は、コントロールの要素に**`ngDefaultControl`**を使用してください。
1. カスタムフォームコントロールを**テスト**していますか? テストベッドがコントロールについて認識していることを確認してください。これは`Testbed.configureTestingModule`を使用して実行できます。
1. **Nxおよびモジュールフェデレーション**をWebpackで使用していますか? `webpack.config.js`には、フォームパッケージが共有されるようにするための[追加の構成](https://github.com/angular/angular/issues/43821#issuecomment-1054845431)が必要になる場合があります。
12 changes: 12 additions & 0 deletions adev-ja/src/content/reference/errors/NG0200.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Circular Dependency in DI

<docs-video src="https://www.youtube.com/embed/CpLOm4o_FzM"/>

A cyclic dependency exists when a [dependency of a service](guide/di/hierarchical-dependency-injection) directly or indirectly depends on the service itself. For example, if `UserService` depends on `EmployeeService`, which also depends on `UserService`. Angular will have to instantiate `EmployeeService` to create `UserService`, which depends on `UserService`, itself.

## Debugging the error

Use the call stack to determine where the cyclical dependency exists.
You will be able to see if any child dependencies rely on the original file by [mapping out](guide/di/di-in-action) the component, module, or service's dependencies, and identifying the loop causing the problem.

Break this loop \(or circle\) of dependency to resolve this error. This most commonly means removing or refactoring the dependencies to not be reliant on one another.
10 changes: 5 additions & 5 deletions adev-ja/src/content/reference/errors/NG0200.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

<docs-video src="https://www.youtube.com/embed/CpLOm4o_FzM"/>

A cyclic dependency exists when a [dependency of a service](guide/di/hierarchical-dependency-injection) directly or indirectly depends on the service itself. For example, if `UserService` depends on `EmployeeService`, which also depends on `UserService`. Angular will have to instantiate `EmployeeService` to create `UserService`, which depends on `UserService`, itself.
循環的な依存関係は、[サービスの依存関係](guide/di/hierarchical-dependency-injection)が、直接または間接的にそのサービス自身に依存している場合に発生します。たとえば、`UserService``EmployeeService`に依存し、`EmployeeService``UserService`に依存している場合です。Angularは`UserService`を作成するために`EmployeeService`をインスタンス化しなければなりませんが、`UserService``UserService`自身に依存しています。

## Debugging the error
## エラーのデバッグ

Use the call stack to determine where the cyclical dependency exists.
You will be able to see if any child dependencies rely on the original file by [mapping out](guide/di/di-in-action) the component, module, or service's dependencies, and identifying the loop causing the problem.
呼び出しスタックを使用して、循環的な依存関係が存在する場所を特定します。
[マッピング](guide/di/di-in-action)を使ってコンポーネント、モジュール、またはサービスの依存関係を特定し、問題の原因となっているループを特定することで、子依存関係が元のファイルに依存しているかどうかを確認できます。

Break this loop \(or circle\) of dependency to resolve this error. This most commonly means removing or refactoring the dependencies to not be reliant on one another.
この依存関係のループ(またはサークル)を解消して、このエラーを解決します。これは通常、依存関係を相互に依存しないように削除やリファクタリングすることを意味します。
19 changes: 19 additions & 0 deletions adev-ja/src/content/reference/errors/NG0201.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
# No Provider Found

<docs-video src="https://www.youtube.com/embed/lAlOryf1-WU"/>

You see this error when you try to inject a service but have not declared a corresponding provider. A provider is a mapping that supplies a value that you can inject into the constructor of a class in your application.

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.

To fix the error ensure that your service is registered in the list of providers of an `NgModule` or has the `@Injectable` decorator with a `providedIn` property at top.

The most common solution is to add a provider in `@Injectable` using `providedIn`:

<docs-code language="typescript">
@Injectable({ providedIn: 'app' })
</docs-code>
Loading

0 comments on commit 548f39a

Please sign in to comment.