-
Notifications
You must be signed in to change notification settings - Fork 137
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
83 changed files
with
1,565 additions
and
369 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -29,7 +29,8 @@ | |
"の", | ||
"が", | ||
"に", | ||
"にも" | ||
"にも", | ||
"は" | ||
] | ||
}, | ||
"no-exclamation-question-mark": false, | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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? | ||
同期バリデーターではなく、非同期バリデーターを使用していませんか? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Oops, something went wrong.