Skip to content

Commit ced412b

Browse files
committed
translate: translations for error references
Fixes #128
1 parent 874daec commit ced412b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+1735
-433
lines changed
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Expression Changed After Checked
2+
3+
<docs-video src="https://www.youtube.com/embed/O47uUnJjbJc"/>
4+
5+
Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode.
6+
7+
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.
8+
9+
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.
10+
11+
## Debugging the error
12+
13+
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.
14+
15+
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.
16+
17+
If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.
18+
19+
Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://angularindepth.com/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).

adev-es/src/content/reference/errors/NG0100.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22

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

5-
Angular throws an `ExpressionChangedAfterItHasBeenCheckedError` when an expression value has been changed after change detection has completed. Angular only throws this error in development mode.
5+
Angular lanza un `ExpressionChangedAfterItHasBeenCheckedError` cuando el valor de una expresión ha cambiado después de que la detección de cambios ha completado. Angular solo lanza este error en modo de desarrollo.
66

7-
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.
7+
En modo de desarrollo, Angular realiza una verificación adicional después de cada ejecución de detección de cambios para asegurarse de que los enlaces no hayan cambiado. Esto detecta errores donde la vista queda en un estado inconsistente. Esto puede ocurrir, por ejemplo, si un método o getter devuelve un valor diferente cada vez que se llama, o si un componente hijo cambia valores en su componente padre. Si cualquiera de estos casos ocurre, es una señal de que la detección de cambios no se ha estabilizado. Angular lanza el error para garantizar que los datos siempre se reflejen correctamente en la vista, lo que previene un comportamiento errático de la UI o un posible bucle infinito.
88

9-
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.
9+
Este error ocurre comúnmente cuando has agregado expresiones de plantilla o has comenzado a implementar hooks de ciclo de vida como `ngAfterViewInit` o `ngOnChanges`. También es común cuando se trabaja con estados de carga y operaciones asíncronas, o cuando un componente hijo cambia los enlaces de su componente padre.
1010

11-
## Debugging the error
11+
## Depurando el error
1212

13-
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.
13+
Los [source maps](https://developer.mozilla.org/docs/Tools/Debugger/How_to/Use_a_source_map) generados por el CLI son muy útiles para depurar. Navega hacia arriba en la pila de llamadas hasta encontrar una expresión de plantilla donde el valor mostrado en el error haya cambiado.
1414

15-
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.
15+
Asegúrate de que no haya cambios en los enlaces de la plantilla después de que se ejecute la detección de cambios. Esto generalmente implica refactorizar para usar el hook de ciclo de vida correcto para tu caso de uso. Si el problema existe dentro de `ngAfterViewInit`, la solución recomendada es usar un constructor o `ngOnInit` para establecer valores iniciales, o usar `ngAfterContentInit` para otros enlaces de valores.
1616

17-
If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.
17+
Si estás enlazando a métodos en la vista, asegúrate de que la invocación no actualice ninguno de los otros enlaces en la plantilla.
1818

19-
Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://angularindepth.com/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).
19+
Lee más sobre qué solución es la correcta para ti en ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://angularindepth.com/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) y por qué esto es útil en ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging).
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Wrong Async Validator Return Type
2+
3+
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)
4+
5+
```typescript
6+
export function isTenAsync(control: AbstractControl):
7+
Observable<ValidationErrors | null> {
8+
const v: number = control.value;
9+
if (v !== 10) {
10+
// Emit an object with a validation error.
11+
return of({ 'notTen': true, 'requiredValue': 10 });
12+
}
13+
// Emit null, to indicate no error occurred.
14+
return of(null);
15+
}
16+
```
17+
18+
## Debugging the error
19+
20+
Did you mistakenly use a synchronous validator instead of an async validator?
Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
# Wrong Async Validator Return Type
22

3-
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)
3+
Los validadores asíncronos deben retornar una promesa o un observable, y emitirlos/resolverlos tanto si la validación falla como si tiene éxito. En particular, deben implementar la [API AsyncValidatorFn](api/forms/AsyncValidator)
44

55
```typescript
66
export function isTenAsync(control: AbstractControl):
77
Observable<ValidationErrors | null> {
88
const v: number = control.value;
99
if (v !== 10) {
10-
// Emit an object with a validation error.
10+
// Emite un objeto con un error de validación.
1111
return of({ 'notTen': true, 'requiredValue': 10 });
1212
}
13-
// Emit null, to indicate no error occurred.
13+
// Emite null, para indicar que no ocurrió ningún error.
1414
return of(null);
1515
}
1616
```
1717

18-
## Debugging the error
18+
## Depurando el error
1919

20-
Did you mistakenly use a synchronous validator instead of an async validator?
20+
¿Usaste por error un validador síncrono en lugar de un validador asíncrono?
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Missing value accessor
2+
3+
For all custom form controls, you must register a value accessor.
4+
5+
Here's an example of how to provide one:
6+
7+
```typescript
8+
providers: [
9+
{
10+
provide: NG_VALUE_ACCESSOR,
11+
useExisting: forwardRef(() => MyInputField),
12+
multi: true,
13+
}
14+
]
15+
```
16+
17+
## Debugging the error
18+
19+
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.
20+
21+
1. If you **defined** a custom form control, did you remember to provide a value accessor?
22+
1. Did you put `ngModel` on an element with no value, or an **invalid element** (e.g. `<div [(ngModel)]="foo">`)?
23+
1. Are you using a custom form control declared inside an `NgModule`? if so, make sure you are **importing** the `NgModule`.
24+
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.
25+
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`.
26+
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.
Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Missing value accessor
22

3-
For all custom form controls, you must register a value accessor.
3+
Para todos los controles de formulario personalizados, debes registrar un accessor de valor.
44

5-
Here's an example of how to provide one:
5+
Aquí hay un ejemplo de cómo proporcionar uno:
66

77
```typescript
88
providers: [
@@ -14,13 +14,13 @@ providers: [
1414
]
1515
```
1616

17-
## Debugging the error
17+
## Depurando el error
1818

19-
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.
19+
Como se describió anteriormente, se esperaba que tu control tuviera un accessor de valor, pero le faltaba uno. Sin embargo, hay muchas razones diferentes por las que esto puede suceder en la práctica. Aquí hay una lista de algunos problemas conocidos que llevan a este error.
2020

21-
1. If you **defined** a custom form control, did you remember to provide a value accessor?
22-
1. Did you put `ngModel` on an element with no value, or an **invalid element** (e.g. `<div [(ngModel)]="foo">`)?
23-
1. Are you using a custom form control declared inside an `NgModule`? if so, make sure you are **importing** the `NgModule`.
24-
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.
25-
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`.
26-
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.
21+
1. Si **definiste** un control de formulario personalizado, ¿recuerdas proporcionar un accessor de valor?
22+
1. ¿Pusiste `ngModel` en un elemento sin valor, o en un **elemento inválido** (por ejemplo, `<div [(ngModel)]="foo">`)?
23+
1. ¿Estás usando un control de formulario personalizado declarado dentro de un `NgModule`? Si es así, asegúrate de estar **importando** el `NgModule`.
24+
1. ¿Estás usando `ngModel` con un control de formulario personalizado de terceros? Verifica si ese control proporciona un accessor de valor. Si no lo hace, usa **`ngDefaultControl`** en el elemento del control.
25+
1. ¿Estás **probando** un control de formulario personalizado? Asegúrate de configurar tu testbed para que conozca el control. Puedes hacerlo con `Testbed.configureTestingModule`.
26+
1. ¿Estás usando **Nx y Module Federation** con webpack? Tu `webpack.config.js` puede requerir [configuración adicional](https://github.com/angular/angular/issues/43821#issuecomment-1054845431) para asegurarte de que el paquete de formularios sea compartido.
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Circular Dependency in DI
2+
3+
<docs-video src="https://www.youtube.com/embed/CpLOm4o_FzM"/>
4+
5+
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.
6+
7+
## Debugging the error
8+
9+
Use the call stack to determine where the cyclical dependency exists.
10+
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.
11+
12+
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.

adev-es/src/content/reference/errors/NG0200.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

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

5-
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.
5+
Existe una dependencia cíclica cuando una [dependencia de un servicio](guide/di/hierarchical-dependency-injection) depende directa o indirectamente del servicio mismo. Por ejemplo, si `UserService` depende de `EmployeeService`, que a su vez depende de `UserService`. Angular tendría que instanciar `EmployeeService` para crear `UserService`, el cual depende de `UserService` en sí mismo.
66

7-
## Debugging the error
7+
## Depurando el error
88

9-
Use the call stack to determine where the cyclical dependency exists.
10-
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.
9+
Usa la pila de llamadas para determinar dónde existe la dependencia cíclica.
10+
Podrás ver si alguna dependencia hija depende del archivo original [trazando](guide/di/di-in-action) las dependencias del componente, módulo o servicio e identificando el bucle que causa el problema.
1111

12-
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.
12+
Rompe este bucle \(o círculo\) de dependencia para resolver este error. Esto generalmente significa eliminar o refactorizar las dependencias para que no dependan unas de otras.
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# No Provider Found
2+
3+
<docs-video src="https://www.youtube.com/embed/lAlOryf1-WU"/>
4+
5+
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.
6+
7+
Read more on providers in our [Dependency Injection guide](guide/di).
8+
9+
## Debugging the error
10+
11+
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.
12+
13+
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.
14+
15+
The most common solution is to add a provider in `@Injectable` using `providedIn`:
16+
17+
```ts
18+
@Injectable({ providedIn: 'app' })
19+
```

adev-es/src/content/reference/errors/NG0201.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22

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

5-
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.
5+
Ves este error cuando intentas inyectar un servicio pero no has declarado el proveedor correspondiente. Un proveedor es un mapeo que suministra un valor que puedes inyectar en el constructor de una clase en tu aplicación.
66

7-
Read more on providers in our [Dependency Injection guide](guide/di).
7+
Lee más sobre proveedores en nuestra [guía de Inyección de Dependencias](guide/di).
88

9-
## Debugging the error
9+
## Depurando el error
1010

11-
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.
11+
Trabaja hacia atrás desde el objeto donde el error indica que falta un proveedor: `No provider for ${this}!`. Este error comúnmente se lanza en servicios que requieren proveedores inexistentes.
1212

13-
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.
13+
Para corregir el error, asegúrate de que tu servicio esté registrado en la lista de proveedores de un `NgModule` o tenga el decorador `@Injectable` con una propiedad `providedIn` en la parte superior.
1414

15-
The most common solution is to add a provider in `@Injectable` using `providedIn`:
15+
La solución más común es agregar un proveedor en `@Injectable` usando `providedIn`:
1616

1717
```ts
1818
@Injectable({ providedIn: 'app' })

0 commit comments

Comments
 (0)