diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8021.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8021.en.md new file mode 100644 index 0000000..6a41db2 --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8021.en.md @@ -0,0 +1,179 @@ +# Defer Trigger Misconfiguration + +This diagnostic detects unreachable or redundant triggers in `@defer` blocks. + +```typescript + +import {Component} from '@angular/core'; + +@Component({ + template: ` + @defer (on immediate; on timer(500ms)) { + + } + ` +}) +class MyComponent {} +``` + +## What's wrong with that? + +The diagnostic identifies several problematic patterns in defer trigger configuration that lead to: + +- **Unnecessary code** that never affects behavior +- **Missed optimization opportunities** for better performance +- **Unreachable prefetch triggers** that will never execute + +## Diagnostic warning cases + +This diagnostic flags the following problematic patterns: + +### `immediate` with prefetch triggers + +**Bad — prefetch never runs** + +```typescript +@Component({ + template: ` + @defer (on immediate; prefetch on idle) { + + } + ` +}) +class MyComponent {} +``` + +**Good — remove redundant prefetch** + +```typescript +@Component({ + template: ` + @defer (on immediate) { + + } + ` +}) +class MyComponent {} +``` + +### Prefetch timer not earlier than main timer + +**Bad — prefetch is later than main** + +```typescript +@Component({ + template: ` + @defer (on timer(100ms); prefetch on timer(3000ms)) { + + } + ` +}) +class MyComponent {} +``` + +**Bad — equal timing provides no benefit** + +```typescript +@Component({ + template: ` + @defer (on timer(500ms); prefetch on timer(500ms)) { + + } + ` +}) +class MyComponent {} +``` + +**Good — prefetch fires earlier** + +```typescript +@Component({ + template: ` + @defer (on timer(1000ms); prefetch on timer(500ms)) { + + } + ` +}) +class MyComponent {} +``` + +### Identical prefetch and main triggers + +**Bad — identical viewport trigger** + +```typescript +@Component({ + template: ` + @defer (on viewport; prefetch on viewport) { + + } + ` +}) +class MyComponent {} +``` + +**Bad — identical interaction target** + +```typescript +@Component({ + template: ` + + @defer (on interaction(loadBtn); prefetch on interaction(loadBtn)) { + + } + ` +}) +class MyComponent {} +``` + +**Good — remove redundant prefetch** + +```typescript +@Component({ + template: ` + + @defer (on interaction(loadBtn)) { + + } + ` +}) +class MyComponent {} +``` + +**Good — use different targets for prefetch and main** + +```typescript +@Component({ + template: ` +
Hover to prefetch
+ + @defer (on interaction(clickBtn); prefetch on hover(hoverArea)) { + + } + ` +}) +class MyComponent {} +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`deferTriggerMisconfiguration` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "deferTriggerMisconfiguration": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8021.md b/adev-es/src/content/reference/extended-diagnostics/NG8021.md index 6a41db2..2a59007 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8021.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8021.md @@ -1,6 +1,6 @@ -# Defer Trigger Misconfiguration +# Configuración incorrecta de disparadores de Defer -This diagnostic detects unreachable or redundant triggers in `@defer` blocks. +Este diagnóstico detecta disparadores inalcanzables o redundantes en bloques `@defer`. ```typescript @@ -16,21 +16,21 @@ import {Component} from '@angular/core'; class MyComponent {} ``` -## What's wrong with that? +## ¿Qué está mal con eso? -The diagnostic identifies several problematic patterns in defer trigger configuration that lead to: +El diagnóstico identifica varios patrones problemáticos en la configuración de disparadores de defer que conducen a: -- **Unnecessary code** that never affects behavior -- **Missed optimization opportunities** for better performance -- **Unreachable prefetch triggers** that will never execute +- **Código innecesario** que nunca afecta el comportamiento +- **Oportunidades de optimización perdidas** para un mejor rendimiento +- **Disparadores de precarga inalcanzables** que nunca se ejecutarán -## Diagnostic warning cases +## Casos de advertencia del diagnóstico -This diagnostic flags the following problematic patterns: +Este diagnóstico marca los siguientes patrones problemáticos: -### `immediate` with prefetch triggers +### `immediate` con disparadores de precarga -**Bad — prefetch never runs** +**Incorrecto — la precarga nunca se ejecuta** ```typescript @Component({ @@ -43,7 +43,7 @@ This diagnostic flags the following problematic patterns: class MyComponent {} ``` -**Good — remove redundant prefetch** +**Correcto — elimina la precarga redundante** ```typescript @Component({ @@ -56,9 +56,9 @@ class MyComponent {} class MyComponent {} ``` -### Prefetch timer not earlier than main timer +### Temporizador de precarga no anterior al temporizador principal -**Bad — prefetch is later than main** +**Incorrecto — la precarga es posterior al principal** ```typescript @Component({ @@ -71,7 +71,7 @@ class MyComponent {} class MyComponent {} ``` -**Bad — equal timing provides no benefit** +**Incorrecto — el mismo tiempo no aporta ningún beneficio** ```typescript @Component({ @@ -84,7 +84,7 @@ class MyComponent {} class MyComponent {} ``` -**Good — prefetch fires earlier** +**Correcto — la precarga se dispara antes** ```typescript @Component({ @@ -97,9 +97,9 @@ class MyComponent {} class MyComponent {} ``` -### Identical prefetch and main triggers +### Disparadores de precarga y principal idénticos -**Bad — identical viewport trigger** +**Incorrecto — disparador de viewport idéntico** ```typescript @Component({ @@ -112,7 +112,7 @@ class MyComponent {} class MyComponent {} ``` -**Bad — identical interaction target** +**Incorrecto — objetivo de interacción idéntico** ```typescript @Component({ @@ -126,7 +126,7 @@ class MyComponent {} class MyComponent {} ``` -**Good — remove redundant prefetch** +**Correcto — elimina la precarga redundante** ```typescript @Component({ @@ -140,7 +140,7 @@ class MyComponent {} class MyComponent {} ``` -**Good — use different targets for prefetch and main** +**Correcto — usa objetivos diferentes para la precarga y el principal** ```typescript @Component({ @@ -155,14 +155,14 @@ class MyComponent {} class MyComponent {} ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`deferTriggerMisconfiguration` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`deferTriggerMisconfiguration` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json { @@ -176,4 +176,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8101.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8101.en.md new file mode 100644 index 0000000..af36e4e --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8101.en.md @@ -0,0 +1,48 @@ +# Invalid Banana-in-Box + +This diagnostic detects a backwards "banana-in-box" syntax for [two-way bindings](guide/templates/two-way-binding). + +``` + + +``` + +## What's wrong with that? + +As it stands, `([var])` is actually an [event binding](guide/templates/event-listeners) with the name `[var]`. +The author likely intended this as a two-way binding to a variable named `var` but, as written, this binding has no effect. + +## What should I do instead? + +Fix the typo. +As the name suggests, the banana `(` should go _inside_ the box `[]`. +In this case: + +``` + + +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`invalidBananaInBox` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "invalidBananaInBox": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8101.md b/adev-es/src/content/reference/extended-diagnostics/NG8101.md index af36e4e..1e7c715 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8101.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8101.md @@ -1,36 +1,36 @@ -# Invalid Banana-in-Box +# Banana-in-Box Inválido -This diagnostic detects a backwards "banana-in-box" syntax for [two-way bindings](guide/templates/two-way-binding). +Este diagnóstico detecta una sintaxis "banana-in-box" invertida para [enlaces bidireccionales](guide/templates/two-way-binding). ``` ``` -## What's wrong with that? +## ¿Qué está mal con eso? -As it stands, `([var])` is actually an [event binding](guide/templates/event-listeners) with the name `[var]`. -The author likely intended this as a two-way binding to a variable named `var` but, as written, this binding has no effect. +Tal como está, `([var])` es en realidad un [enlace de evento](guide/templates/event-listeners) con el nombre `[var]`. +El autor probablemente quiso hacer un enlace bidireccional a una variable llamada `var` pero, tal como está escrito, este enlace no tiene ningún efecto. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Fix the typo. -As the name suggests, the banana `(` should go _inside_ the box `[]`. -In this case: +Corrige el error tipográfico. +Como su nombre lo indica, la banana `(` debe ir _dentro_ del cuadro `[]`. +En este caso: ``` ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`invalidBananaInBox` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`invalidBananaInBox` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -45,4 +45,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8102.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8102.en.md new file mode 100644 index 0000000..3a774ad --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8102.en.md @@ -0,0 +1,89 @@ +# Nullish coalescing not nullable + +This diagnostic detects a useless nullish coalescing operator \(`??`\) characters in Angular templates. +Specifically, it looks for operations where the input is not "nullable", meaning its type does not include `null` or `undefined`. +For such values, the right side of the `??` will never be used. + +```angular-ts +import {Component} from '@angular/core'; + +@Component({ + // Template displays `username` if present, falls back to 'root' if it is + // `null` or `undefined`. + template: `
{{ username ?? 'root' }}
`, +}) +class MyComponent { + // `username` is declared as a `string` which _cannot_ be `null` or + // `undefined`. + username: string = 'Angelino'; +} +``` + +## What's wrong with that? + +Using the nullish coalescing operator with a non-nullable input has no effect and is indicative of a discrepancy between the allowed type of a value and how it is presented in the template. +A developer might reasonably assume that the right side of the nullish coalescing operator is displayed in some case, but it will never actually be displayed. +This can lead to confusion about the expected output of the program. + +## What should I do instead? + +Update the template and declared type to be in sync. +Double-check the type of the input and confirm whether it is actually expected to be nullable. + +If the input should be nullable, add `null` or `undefined` to its type to indicate this. + +```ts + +import {Component} from '@angular/core'; + +@Component({ +template: `
{{ username ?? 'root' }}
`, +}) +class MyComponent { +// `username` is now nullable. If it is ever set to `null`, 'root' will be +// displayed. +username: string | null = 'Angelino'; +} + +``` + +If the input should _not_ be nullable, delete the `??` operator and its right operand, since the value is guaranteed by TypeScript to always be non-nullable. + +```ts + +import {Component} from '@angular/core'; + +@Component({ +// Template always displays `username`, which is guaranteed to never be `null` +// or `undefined`. +template: `
{{ username }}
`, +}) +class MyComponent { +username: string = 'Angelino'; +} + +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks) must also be enabled to emit `nullishCoalescingNotNullable` diagnostics. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "nullishCoalescingNotNullable": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8102.md b/adev-es/src/content/reference/extended-diagnostics/NG8102.md index 3a774ad..46148af 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8102.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8102.md @@ -1,36 +1,36 @@ -# Nullish coalescing not nullable +# Fusión de nulos no anulable -This diagnostic detects a useless nullish coalescing operator \(`??`\) characters in Angular templates. -Specifically, it looks for operations where the input is not "nullable", meaning its type does not include `null` or `undefined`. -For such values, the right side of the `??` will never be used. +Este diagnóstico detecta un operador de fusión de nulos \(`??`\) innecesario en plantillas de Angular. +Específicamente, busca operaciones donde la entrada no es "anulable", lo que significa que su tipo no incluye `null` ni `undefined`. +Para dichos valores, el lado derecho de `??` nunca se utilizará. ```angular-ts import {Component} from '@angular/core'; @Component({ - // Template displays `username` if present, falls back to 'root' if it is - // `null` or `undefined`. + // La plantilla muestra `username` si está presente, y usa 'root' como alternativa si es + // `null` o `undefined`. template: `
{{ username ?? 'root' }}
`, }) class MyComponent { - // `username` is declared as a `string` which _cannot_ be `null` or + // `username` se declara como `string`, que _no puede_ ser `null` ni // `undefined`. username: string = 'Angelino'; } ``` -## What's wrong with that? +## ¿Qué está mal con eso? -Using the nullish coalescing operator with a non-nullable input has no effect and is indicative of a discrepancy between the allowed type of a value and how it is presented in the template. -A developer might reasonably assume that the right side of the nullish coalescing operator is displayed in some case, but it will never actually be displayed. -This can lead to confusion about the expected output of the program. +Usar el operador de fusión de nulos con una entrada no anulable no tiene efecto e indica una discrepancia entre el tipo permitido de un valor y cómo se presenta en la plantilla. +Un desarrollador podría asumir razonablemente que el lado derecho del operador de fusión de nulos se muestra en algún caso, pero nunca se mostrará en realidad. +Esto puede generar confusión sobre la salida esperada del programa. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Update the template and declared type to be in sync. -Double-check the type of the input and confirm whether it is actually expected to be nullable. +Actualiza la plantilla y el tipo declarado para que estén sincronizados. +Verifica el tipo de la entrada y confirma si realmente se espera que sea anulable. -If the input should be nullable, add `null` or `undefined` to its type to indicate this. +Si la entrada debe ser anulable, agrega `null` o `undefined` a su tipo para indicarlo. ```ts @@ -40,22 +40,21 @@ import {Component} from '@angular/core'; template: `
{{ username ?? 'root' }}
`, }) class MyComponent { -// `username` is now nullable. If it is ever set to `null`, 'root' will be -// displayed. +// `username` ahora es anulable. Si alguna vez se establece en `null`, se mostrará 'root'. username: string | null = 'Angelino'; } ``` -If the input should _not_ be nullable, delete the `??` operator and its right operand, since the value is guaranteed by TypeScript to always be non-nullable. +Si la entrada _no_ debe ser anulable, elimina el operador `??` y su operando derecho, ya que TypeScript garantiza que el valor siempre será no anulable. ```ts import {Component} from '@angular/core'; @Component({ -// Template always displays `username`, which is guaranteed to never be `null` -// or `undefined`. +// La plantilla siempre muestra `username`, que garantizadamente nunca será `null` +// ni `undefined`. template: `
{{ username }}
`, }) class MyComponent { @@ -64,14 +63,14 @@ username: string = 'Angelino'; ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks) must also be enabled to emit `nullishCoalescingNotNullable` diagnostics. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks) también debe estar habilitado para emitir diagnósticos `nullishCoalescingNotNullable`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -86,4 +85,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8103.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8103.en.md new file mode 100644 index 0000000..f03fdda --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8103.en.md @@ -0,0 +1,74 @@ +# Missing control flow directive + +This diagnostics ensures that a standalone component which uses known control flow directives +(such as `*ngIf`, `*ngFor`, or `*ngSwitch`) in a template, also imports those directives either +individually or by importing the `CommonModule`. + +```angular-ts +import {Component} from '@angular/core'; + +@Component({ + // Template uses `*ngIf`, but no corresponding directive imported. + imports: [], + template: `
Hi
`, +}) +class MyComponent {} +``` + +## What's wrong with that? + +Using a control flow directive without importing it will fail at runtime, as Angular attempts to bind to an `ngIf` property of the HTML element, which does not exist. + +## What should I do instead? + +Make sure that a corresponding control flow directive is imported. + +A directive can be imported individually: + +```angular-ts +import {Component} from '@angular/core'; +import {NgIf} from '@angular/common'; + +@Component({ + imports: [NgIf], + template: `
Hi
`, +}) +class MyComponent {} +``` + +or you could import the entire `CommonModule`, which contains all control flow directives: + +```angular-ts +import {Component} from '@angular/core'; +import {CommonModule} from '@angular/common'; + +@Component({ + imports: [CommonModule], + template: `
Hi
`, +}) +class MyComponent {} +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`missingControlFlowDirective` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "missingControlFlowDirective": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8103.md b/adev-es/src/content/reference/extended-diagnostics/NG8103.md index f03fdda..0bcd566 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8103.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8103.md @@ -1,29 +1,29 @@ -# Missing control flow directive +# Directiva de flujo de control faltante -This diagnostics ensures that a standalone component which uses known control flow directives -(such as `*ngIf`, `*ngFor`, or `*ngSwitch`) in a template, also imports those directives either -individually or by importing the `CommonModule`. +Este diagnóstico garantiza que un componente standalone que usa directivas de flujo de control conocidas +(como `*ngIf`, `*ngFor`, o `*ngSwitch`) en una plantilla, también importe esas directivas ya sea +individualmente o importando el `CommonModule`. ```angular-ts import {Component} from '@angular/core'; @Component({ - // Template uses `*ngIf`, but no corresponding directive imported. + // La plantilla usa `*ngIf`, pero no se importó la directiva correspondiente. imports: [], template: `
Hi
`, }) class MyComponent {} ``` -## What's wrong with that? +## ¿Qué está mal con eso? -Using a control flow directive without importing it will fail at runtime, as Angular attempts to bind to an `ngIf` property of the HTML element, which does not exist. +Usar una directiva de flujo de control sin importarla fallará en tiempo de ejecución, ya que Angular intentará vincular a una propiedad `ngIf` del elemento HTML, que no existe. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Make sure that a corresponding control flow directive is imported. +Asegúrate de que se importe la directiva de flujo de control correspondiente. -A directive can be imported individually: +Una directiva puede importarse individualmente: ```angular-ts import {Component} from '@angular/core'; @@ -36,7 +36,7 @@ import {NgIf} from '@angular/common'; class MyComponent {} ``` -or you could import the entire `CommonModule`, which contains all control flow directives: +o puedes importar el `CommonModule` completo, que contiene todas las directivas de flujo de control: ```angular-ts import {Component} from '@angular/core'; @@ -49,14 +49,14 @@ import {CommonModule} from '@angular/common'; class MyComponent {} ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`missingControlFlowDirective` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`missingControlFlowDirective` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -71,4 +71,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8104.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8104.en.md new file mode 100644 index 0000000..e527949 --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8104.en.md @@ -0,0 +1,49 @@ +# Text attribute not binding + +This diagnostic ensures that attributes which have the "special" Angular binding prefix (`attr.`, `style.`, and +`class.`) are interpreted as bindings. + +```html + +
+``` + +## What's wrong with that? + +In this example, `attr.id` is interpreted as a regular attribute and will appear +as-is in the final HTML (`
`). This is likely not the intent of the developer. +Instead, the intent is likely to set the `id` attribute (`
`). + +## What should I do instead? + +When binding to `attr.`, `class.`, or `style.`, ensure you use the Angular template binding syntax (`[]`). + +```html +
+
+
+``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`textAttributeNotBinding` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "textAttributeNotBinding": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8104.md b/adev-es/src/content/reference/extended-diagnostics/NG8104.md index e527949..6de2dc6 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8104.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8104.md @@ -1,22 +1,22 @@ -# Text attribute not binding +# Atributo de texto no vinculante -This diagnostic ensures that attributes which have the "special" Angular binding prefix (`attr.`, `style.`, and -`class.`) are interpreted as bindings. +Este diagnóstico garantiza que los atributos que tienen el prefijo de enlace "especial" de Angular (`attr.`, `style.` y +`class.`) sean interpretados como enlaces. ```html
``` -## What's wrong with that? +## ¿Qué está mal con eso? -In this example, `attr.id` is interpreted as a regular attribute and will appear -as-is in the final HTML (`
`). This is likely not the intent of the developer. -Instead, the intent is likely to set the `id` attribute (`
`). +En este ejemplo, `attr.id` se interpreta como un atributo regular y aparecerá +tal cual en el HTML final (`
`). Probablemente esta no sea la intención del desarrollador. +En cambio, la intención probablemente sea establecer el atributo `id` (`
`). -## What should I do instead? +## ¿Qué debo hacer en su lugar? -When binding to `attr.`, `class.`, or `style.`, ensure you use the Angular template binding syntax (`[]`). +Al vincular a `attr.`, `class.` o `style.`, asegúrate de usar la sintaxis de enlace de plantilla de Angular (`[]`). ```html
@@ -24,14 +24,14 @@ When binding to `attr.`, `class.`, or `style.`, ensure you use the Angular templ
``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`textAttributeNotBinding` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`textAttributeNotBinding` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -46,4 +46,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8105.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8105.en.md new file mode 100644 index 0000000..b5c26e8 --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8105.en.md @@ -0,0 +1,60 @@ +# Missing `let` keyword in an `*ngFor` expression + +This diagnostic is emitted when an expression used in `*ngFor` is missing the `let` keyword. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + // The `let` keyword is missing in the `*ngFor` expression. + template: `
{{ item }}
`, +}) +class MyComponent { + items = [1, 2, 3]; +} +``` + +## What's wrong with that? + +A missing `let` is indicative of a syntax error in the `*ngFor` string. It also means that `item` will not be properly pulled into scope and `{{ item }}` will not resolve correctly. + +## What should I do instead? + +Add the missing `let` keyword. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + // The `let` keyword is now present in the `*ngFor` expression, + // no diagnostic messages are emitted in this case. + template: `
{{ item }}
`, +}) +class MyComponent { + items = [1, 2, 3]; +} +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`missingNgForOfLet` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "missingNgForOfLet": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8105.md b/adev-es/src/content/reference/extended-diagnostics/NG8105.md index b5c26e8..bf8e964 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8105.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8105.md @@ -1,12 +1,12 @@ -# Missing `let` keyword in an `*ngFor` expression +# Falta la palabra clave `let` en una expresión `*ngFor` -This diagnostic is emitted when an expression used in `*ngFor` is missing the `let` keyword. +Este diagnóstico se emite cuando falta la palabra clave `let` en una expresión usada en `*ngFor`. ```typescript import { Component } from '@angular/core'; @Component({ - // The `let` keyword is missing in the `*ngFor` expression. + // Falta la palabra clave `let` en la expresión `*ngFor`. template: `
{{ item }}
`, }) class MyComponent { @@ -14,20 +14,20 @@ class MyComponent { } ``` -## What's wrong with that? +## ¿Qué está mal con eso? -A missing `let` is indicative of a syntax error in the `*ngFor` string. It also means that `item` will not be properly pulled into scope and `{{ item }}` will not resolve correctly. +La ausencia de `let` indica un error de sintaxis en la cadena de `*ngFor`. También significa que `item` no se incorporará correctamente al ámbito y `{{ item }}` no se resolverá correctamente. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Add the missing `let` keyword. +Agrega la palabra clave `let` que falta. ```typescript import { Component } from '@angular/core'; @Component({ - // The `let` keyword is now present in the `*ngFor` expression, - // no diagnostic messages are emitted in this case. + // La palabra clave `let` está ahora presente en la expresión `*ngFor`, + // no se emiten mensajes de diagnóstico en este caso. template: `
{{ item }}
`, }) class MyComponent { @@ -35,14 +35,14 @@ class MyComponent { } ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`missingNgForOfLet` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`missingNgForOfLet` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -57,4 +57,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8106.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8106.en.md new file mode 100644 index 0000000..b2deac2 --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8106.en.md @@ -0,0 +1,45 @@ +# Suffix not supported + +This diagnostic detects when the `.px`, `.%`, and `.em` suffixes are used with an attribute +binding. + +```html + +``` + +## What's wrong with that? + +These suffixes are only available for style bindings. They do not have any meaning when binding to an attribute. + +## What should I do instead? + +Rather than using the `.px`, `.%`, or `.em` suffixes that are only supported in style bindings, +move this to the value assignment of the binding. + +```html + +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`suffixNotSupported` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "suffixNotSupported": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8106.md b/adev-es/src/content/reference/extended-diagnostics/NG8106.md index b2deac2..60bf75a 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8106.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8106.md @@ -1,33 +1,32 @@ -# Suffix not supported +# Sufijo no compatible -This diagnostic detects when the `.px`, `.%`, and `.em` suffixes are used with an attribute -binding. +Este diagnóstico detecta cuando los sufijos `.px`, `.%` y `.em` se usan con un enlace de atributo. ```html ``` -## What's wrong with that? +## ¿Qué está mal con eso? -These suffixes are only available for style bindings. They do not have any meaning when binding to an attribute. +Estos sufijos solo están disponibles para enlaces de estilo. No tienen ningún significado al vincular a un atributo. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Rather than using the `.px`, `.%`, or `.em` suffixes that are only supported in style bindings, -move this to the value assignment of the binding. +En lugar de usar los sufijos `.px`, `.%` o `.em` que solo son compatibles con enlaces de estilo, +mueve esto a la asignación de valor del enlace. ```html ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`suffixNotSupported` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`suffixNotSupported` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -42,4 +41,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8107.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8107.en.md new file mode 100644 index 0000000..00c34bb --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8107.en.md @@ -0,0 +1,81 @@ +# Optional chain not nullable + +This diagnostic detects when the left side of an optional chain operation (`.?`) does not include `null` or `undefined` in its type in Angular templates. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + // Print the user's name safely, even if `user` is `null` or `undefined`. + template: `
User name: {{ user?.name }}
`, +}) +class MyComponent { + // `user` is declared as an object which _cannot_ be `null` or `undefined`. + user: { name: string } = { name: 'Angelino' }; +} +``` + +## What's wrong with that? + +Using the optional chain operator with a non-nullable input has no effect and is indicative of a discrepancy between the allowed type of a value and how it is presented in the template. +A developer might reasonably assume that the output of the optional chain operator is could be `null` or `undefined`, but it will never actually be either of those values. +This can lead to confusion about the expected output of the program. + +## What should I do instead? + +Update the template and declared type to be in sync. +Double-check the type of the input and confirm whether it is actually expected to be nullable. + +If the input should be nullable, add `null` or `undefined` to its type to indicate this. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + // If `user` is nullish, `name` won't be evaluated and the expression will + // return the nullish value (`null` or `undefined`). + template: `
{{ user?.name }}
`, +}) +class MyComponent { + user: { name: string } | null = { name: 'Angelino' }; +} +``` + +If the input should not be nullable, delete the `?` operator. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + // Template always displays `name` as `user` is guaranteed to never be `null` + // or `undefined`. + template: `
{{ foo.bar }}
`, +}) +class MyComponent { + user: { name: string } = { name: 'Angelino' }; +} +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks) must also be enabled to emit `optionalChainNotNullable` diagnostics. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "optionalChainNotNullable": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8107.md b/adev-es/src/content/reference/extended-diagnostics/NG8107.md index 00c34bb..fb167fb 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8107.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8107.md @@ -1,39 +1,39 @@ -# Optional chain not nullable +# Cadena opcional no anulable -This diagnostic detects when the left side of an optional chain operation (`.?`) does not include `null` or `undefined` in its type in Angular templates. +Este diagnóstico detecta cuando el lado izquierdo de una operación de cadena opcional (`.?`) no incluye `null` ni `undefined` en su tipo en plantillas de Angular. ```typescript import { Component } from '@angular/core'; @Component({ - // Print the user's name safely, even if `user` is `null` or `undefined`. + // Muestra el nombre del usuario de forma segura, incluso si `user` es `null` o `undefined`. template: `
User name: {{ user?.name }}
`, }) class MyComponent { - // `user` is declared as an object which _cannot_ be `null` or `undefined`. + // `user` se declara como un objeto que _no puede_ ser `null` ni `undefined`. user: { name: string } = { name: 'Angelino' }; } ``` -## What's wrong with that? +## ¿Qué está mal con eso? -Using the optional chain operator with a non-nullable input has no effect and is indicative of a discrepancy between the allowed type of a value and how it is presented in the template. -A developer might reasonably assume that the output of the optional chain operator is could be `null` or `undefined`, but it will never actually be either of those values. -This can lead to confusion about the expected output of the program. +Usar el operador de cadena opcional con una entrada no anulable no tiene efecto e indica una discrepancia entre el tipo permitido de un valor y cómo se presenta en la plantilla. +Un desarrollador podría asumir razonablemente que la salida del operador de cadena opcional podría ser `null` o `undefined`, pero nunca será ninguno de esos valores en realidad. +Esto puede generar confusión sobre la salida esperada del programa. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Update the template and declared type to be in sync. -Double-check the type of the input and confirm whether it is actually expected to be nullable. +Actualiza la plantilla y el tipo declarado para que estén sincronizados. +Verifica el tipo de la entrada y confirma si realmente se espera que sea anulable. -If the input should be nullable, add `null` or `undefined` to its type to indicate this. +Si la entrada debe ser anulable, agrega `null` o `undefined` a su tipo para indicarlo. ```typescript import { Component } from '@angular/core'; @Component({ - // If `user` is nullish, `name` won't be evaluated and the expression will - // return the nullish value (`null` or `undefined`). + // Si `user` es nulo, `name` no se evaluará y la expresión devolverá + // el valor nulo (`null` o `undefined`). template: `
{{ user?.name }}
`, }) class MyComponent { @@ -41,14 +41,14 @@ class MyComponent { } ``` -If the input should not be nullable, delete the `?` operator. +Si la entrada no debe ser anulable, elimina el operador `?`. ```typescript import { Component } from '@angular/core'; @Component({ - // Template always displays `name` as `user` is guaranteed to never be `null` - // or `undefined`. + // La plantilla siempre muestra `name` ya que `user` garantizadamente nunca será `null` + // ni `undefined`. template: `
{{ foo.bar }}
`, }) class MyComponent { @@ -56,14 +56,14 @@ class MyComponent { } ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks) must also be enabled to emit `optionalChainNotNullable` diagnostics. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +[`strictNullChecks`](tools/cli/template-typecheck#strict-null-checks) también debe estar habilitado para emitir diagnósticos `optionalChainNotNullable`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -78,4 +78,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8108.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8108.en.md new file mode 100644 index 0000000..1302d1e --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8108.en.md @@ -0,0 +1,82 @@ +# `ngSkipHydration` should be a static attribute + +`ngSkipHydration` is a special attribute which indicates to Angular that a particular component should be opted-out of [hydration](guide/hydration). +This diagnostic ensures that this attribute `ngSkipHydration` is set statically and the value is either set to `"true"` or an empty value. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + template: ``, +}) +class MyComponent { + hasUser = true; +} +``` + +## What's wrong with that? + +As a special attribute implemented by Angular, `ngSkipHydration` needs to be statically analyzable so Angular knows at compile-time whether or not hydration is needed for a component. + +## What should I do instead? + +When using the `ngSkipHydration`, ensure that it's set as a static attribute (i.e. you do not use the Angular template binding syntax). + +```typescript +import { Component } from '@angular/core'; + +@Component({ + template: ` + + + `, +}) +class MyComponent {} +``` + +If a conditional is necessary, you can wrap the component in an `*ngIf`. + +```html + +import {Component} from '@angular/core'; + +@Component({ +template: ` + +
+ +
+ + + + + +`, +}) +class MyComponent {} + +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`skipHydrationNotStatic` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "skipHydrationNotStatic": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8108.md b/adev-es/src/content/reference/extended-diagnostics/NG8108.md index 1302d1e..44f5019 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8108.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8108.md @@ -1,7 +1,7 @@ -# `ngSkipHydration` should be a static attribute +# `ngSkipHydration` debe ser un atributo estático -`ngSkipHydration` is a special attribute which indicates to Angular that a particular component should be opted-out of [hydration](guide/hydration). -This diagnostic ensures that this attribute `ngSkipHydration` is set statically and the value is either set to `"true"` or an empty value. +`ngSkipHydration` es un atributo especial que indica a Angular que un componente específico debe excluirse de la [hidratación](guide/hydration). +Este diagnóstico garantiza que el atributo `ngSkipHydration` se establezca de forma estática y que el valor sea `"true"` o un valor vacío. ```typescript import { Component } from '@angular/core'; @@ -14,13 +14,13 @@ class MyComponent { } ``` -## What's wrong with that? +## ¿Qué está mal con eso? -As a special attribute implemented by Angular, `ngSkipHydration` needs to be statically analyzable so Angular knows at compile-time whether or not hydration is needed for a component. +Como atributo especial implementado por Angular, `ngSkipHydration` debe ser analizablemente estático para que Angular sepa en tiempo de compilación si la hidratación es necesaria para un componente. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -When using the `ngSkipHydration`, ensure that it's set as a static attribute (i.e. you do not use the Angular template binding syntax). +Al usar `ngSkipHydration`, asegúrate de que se establezca como un atributo estático (es decir, no uses la sintaxis de enlace de plantilla de Angular). ```typescript import { Component } from '@angular/core'; @@ -34,7 +34,7 @@ import { Component } from '@angular/core'; class MyComponent {} ``` -If a conditional is necessary, you can wrap the component in an `*ngIf`. +Si es necesario usar una condición, puedes envolver el componente en un `*ngIf`. ```html @@ -57,14 +57,14 @@ class MyComponent {} ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`skipHydrationNotStatic` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`skipHydrationNotStatic` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -79,4 +79,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8109.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8109.en.md new file mode 100644 index 0000000..6ed6701 --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8109.en.md @@ -0,0 +1,58 @@ +# Signals must be invoked in template interpolations. + +This diagnostic detects uninvoked signals in template interpolations. + +```typescript +import { Component, signal, Signal } from '@angular/core'; + +@Component({ + template: `
{{ mySignal }}
`, +}) +class MyComponent { + mySignal: Signal = signal(0); +} +``` + +## What's wrong with that? + +Angular Signals are zero-argument functions (`() => T`). When executed, they return the current value of the signal. +This means they are meant to be invoked when used in template interpolations to render their value. + +## What should I do instead? + +Ensure to invoke the signal when you use it within a template interpolation to render its value. + +```typescript +import { Component, signal, Signal } from '@angular/core'; + +@Component({ + template: `
{{ mySignal() }}
`, +}) +class MyComponent { + mySignal: Signal = signal(0); +} +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`interpolatedSignalNotInvoked` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "interpolatedSignalNotInvoked": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8109.md b/adev-es/src/content/reference/extended-diagnostics/NG8109.md index 6ed6701..0284f87 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8109.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8109.md @@ -1,6 +1,6 @@ -# Signals must be invoked in template interpolations. +# Los signals deben invocarse en interpolaciones de plantilla. -This diagnostic detects uninvoked signals in template interpolations. +Este diagnóstico detecta signals no invocados en interpolaciones de plantilla. ```typescript import { Component, signal, Signal } from '@angular/core'; @@ -13,14 +13,14 @@ class MyComponent { } ``` -## What's wrong with that? +## ¿Qué está mal con eso? -Angular Signals are zero-argument functions (`() => T`). When executed, they return the current value of the signal. -This means they are meant to be invoked when used in template interpolations to render their value. +Los signals de Angular son funciones de cero argumentos (`() => T`). Cuando se ejecutan, devuelven el valor actual del signal. +Esto significa que deben invocarse cuando se usan en interpolaciones de plantilla para renderizar su valor. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Ensure to invoke the signal when you use it within a template interpolation to render its value. +Asegúrate de invocar el signal cuando lo uses dentro de una interpolación de plantilla para renderizar su valor. ```typescript import { Component, signal, Signal } from '@angular/core'; @@ -33,14 +33,14 @@ class MyComponent { } ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`interpolatedSignalNotInvoked` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`interpolatedSignalNotInvoked` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -55,4 +55,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8111.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8111.en.md new file mode 100644 index 0000000..c1f58ec --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8111.en.md @@ -0,0 +1,62 @@ +# Functions should be invoked in event bindings. + +This diagnostic detects uninvoked functions in event bindings. + +```typescript +import { Component, signal, Signal } from '@angular/core'; + +@Component({ + template: ``, +}) +class MyComponent { + onClick() { + console.log('clicked'); + } +} +``` + +## What's wrong with that? + +Functions in event bindings should be invoked when the event is triggered. +If the function is not invoked, it will not execute when the event is triggered. + +## What should I do instead? + +Ensure to invoke the function when you use it in an event binding to execute the function when the event is triggered. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + template: ``, +}) +class MyComponent { + onClick() { + console.log('clicked'); + } +} +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`uninvokedFunctionInEventBinding` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "uninvokedFunctionInEventBinding": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8111.md b/adev-es/src/content/reference/extended-diagnostics/NG8111.md index c1f58ec..eda1b06 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8111.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8111.md @@ -1,6 +1,6 @@ -# Functions should be invoked in event bindings. +# Las funciones deben invocarse en enlaces de eventos. -This diagnostic detects uninvoked functions in event bindings. +Este diagnóstico detecta funciones no invocadas en enlaces de eventos. ```typescript import { Component, signal, Signal } from '@angular/core'; @@ -15,14 +15,14 @@ class MyComponent { } ``` -## What's wrong with that? +## ¿Qué está mal con eso? -Functions in event bindings should be invoked when the event is triggered. -If the function is not invoked, it will not execute when the event is triggered. +Las funciones en enlaces de eventos deben invocarse cuando se dispara el evento. +Si la función no se invoca, no se ejecutará cuando se dispare el evento. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Ensure to invoke the function when you use it in an event binding to execute the function when the event is triggered. +Asegúrate de invocar la función cuando la uses en un enlace de evento para que se ejecute cuando el evento se dispare. ```typescript import { Component } from '@angular/core'; @@ -37,14 +37,14 @@ class MyComponent { } ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`uninvokedFunctionInEventBinding` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`uninvokedFunctionInEventBinding` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -59,4 +59,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8113.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8113.en.md new file mode 100644 index 0000000..0084db5 --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8113.en.md @@ -0,0 +1,46 @@ +# Unused Standalone Imports + +This diagnostic detects cases where the `imports` array of a `@Component` contains symbols that +aren't used within the template. + +```typescript +@Component({ + imports: [UsedDirective, UnusedPipe], +}) +class AwesomeCheckbox {} + +``` + +## What's wrong with that? + +The unused imports add unnecessary noise to your code and can increase your compilation time. + +## What should I do instead? + +Delete the unused import. + +```typescript +@Component({ + imports: [UsedDirective] +}) +class AwesomeCheckbox {} +``` + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "unusedStandaloneImports": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8113.md b/adev-es/src/content/reference/extended-diagnostics/NG8113.md index 0084db5..9dbdab5 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8113.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8113.md @@ -1,7 +1,7 @@ -# Unused Standalone Imports +# Importaciones standalone no utilizadas -This diagnostic detects cases where the `imports` array of a `@Component` contains symbols that -aren't used within the template. +Este diagnóstico detecta casos donde el array `imports` de un `@Component` contiene símbolos que +no se usan dentro de la plantilla. ```typescript @Component({ @@ -11,13 +11,13 @@ class AwesomeCheckbox {} ``` -## What's wrong with that? +## ¿Qué está mal con eso? -The unused imports add unnecessary noise to your code and can increase your compilation time. +Las importaciones no utilizadas agregan ruido innecesario a tu código y pueden aumentar el tiempo de compilación. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Delete the unused import. +Elimina la importación no utilizada. ```typescript @Component({ @@ -26,9 +26,9 @@ Delete the unused import. class AwesomeCheckbox {} ``` -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -43,4 +43,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8114.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8114.en.md new file mode 100644 index 0000000..7e1bd1c --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8114.en.md @@ -0,0 +1,48 @@ +# Unparenthesized Nullish Coalescing + +This diagnostic detects cases where the nullish coalescing operator (`??`) is mixed with the logical +or (`||`) or logical and (`&&`) operators without parentheses to disambiguate precedence. + +```typescript +import { Component, signal, Signal } from '@angular/core'; + +@Component({ + template: ` + + `, +}) +class MyComponent { + hasPermission = input(false); + task = input(undefined); +} +``` + +## What's wrong with that? + +Without disambiguating parentheses, its difficult to understand whether the `??` or `||`/`&&` is +evaluated first. This is considered an error in TypeScript and JavaScript, but has historically been +allowed in Angular templates. + +## What should I do instead? + +Always use parentheses to disambiguate in theses situations. If you're unsure what the original +intent of the code was but want to keep the behavior the same, place the parentheses around the `??` +operator. + +```typescript +import { Component, signal, Signal } from '@angular/core'; + +@Component({ + template: ` + + `, +}) +class MyComponent { + hasPermission = input(false); + task = input(undefined); +} +``` diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8114.md b/adev-es/src/content/reference/extended-diagnostics/NG8114.md index 7e1bd1c..73346b7 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8114.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8114.md @@ -1,7 +1,7 @@ -# Unparenthesized Nullish Coalescing +# Fusión de nulos sin paréntesis -This diagnostic detects cases where the nullish coalescing operator (`??`) is mixed with the logical -or (`||`) or logical and (`&&`) operators without parentheses to disambiguate precedence. +Este diagnóstico detecta casos donde el operador de fusión de nulos (`??`) se combina con el operador +lógico OR (`||`) o el operador lógico AND (`&&`) sin paréntesis para desambiguar la precedencia. ```typescript import { Component, signal, Signal } from '@angular/core'; @@ -19,17 +19,16 @@ class MyComponent { } ``` -## What's wrong with that? +## ¿Qué está mal con eso? -Without disambiguating parentheses, its difficult to understand whether the `??` or `||`/`&&` is -evaluated first. This is considered an error in TypeScript and JavaScript, but has historically been -allowed in Angular templates. +Sin paréntesis que desambigüen, es difícil entender si `??` o `||`/`&&` se +evalúa primero. Esto se considera un error en TypeScript y JavaScript, pero históricamente ha sido +permitido en las plantillas de Angular. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Always use parentheses to disambiguate in theses situations. If you're unsure what the original -intent of the code was but want to keep the behavior the same, place the parentheses around the `??` -operator. +Usa siempre paréntesis para desambiguar en estas situaciones. Si no estás seguro de cuál era la +intención original del código pero quieres mantener el mismo comportamiento, coloca los paréntesis alrededor del operador `??`. ```typescript import { Component, signal, Signal } from '@angular/core'; diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8115.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8115.en.md new file mode 100644 index 0000000..75144b7 --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8115.en.md @@ -0,0 +1,62 @@ +# Uninvoked Track Function + +This diagnostic detects when a track function is not invoked in `@for` blocks. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + template: `@for (item of items; track trackByName) {}`, +}) +class Items { + protected trackByName(item) { + return item.name; + } +} +``` + +## What's wrong with that? + +`@for` blocks need to uniquely identify items in the iterable to correctly perform DOM updates when items in the iterable are reordered, new items are added, or existing items are removed. +When you don't invoke the function, the reconcialiation algorithm will use the function reference instead of returned value to compare items. + +## What should I do instead? + +Ensure to invoke the track function when you use it in a `@for` block to execute the function so the loop can uniquely identify items. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + template: `@for (item of items; track trackByName(item)) {}`, +}) +class Items { + protected trackByName(item) { + return item.name; + } +} +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`uninvokedTrackFunction` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "uninvokedTrackFunction": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8115.md b/adev-es/src/content/reference/extended-diagnostics/NG8115.md index 75144b7..351dee7 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8115.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8115.md @@ -1,6 +1,6 @@ -# Uninvoked Track Function +# Función de seguimiento no invocada -This diagnostic detects when a track function is not invoked in `@for` blocks. +Este diagnóstico detecta cuando una función de seguimiento no se invoca en bloques `@for`. ```typescript import { Component } from '@angular/core'; @@ -15,14 +15,14 @@ class Items { } ``` -## What's wrong with that? +## ¿Qué está mal con eso? -`@for` blocks need to uniquely identify items in the iterable to correctly perform DOM updates when items in the iterable are reordered, new items are added, or existing items are removed. -When you don't invoke the function, the reconcialiation algorithm will use the function reference instead of returned value to compare items. +Los bloques `@for` necesitan identificar de forma única los elementos del iterable para realizar correctamente las actualizaciones del DOM cuando los elementos se reordenan, se agregan nuevos o se eliminan los existentes. +Cuando no se invoca la función, el algoritmo de reconciliación usará la referencia de la función en lugar del valor devuelto para comparar los elementos. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Ensure to invoke the track function when you use it in a `@for` block to execute the function so the loop can uniquely identify items. +Asegúrate de invocar la función de seguimiento cuando la uses en un bloque `@for` para que el bucle pueda identificar los elementos de forma única. ```typescript import { Component } from '@angular/core'; @@ -37,14 +37,14 @@ class Items { } ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`uninvokedTrackFunction` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`uninvokedTrackFunction` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json @@ -59,4 +59,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8116.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8116.en.md new file mode 100644 index 0000000..4c9231f --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8116.en.md @@ -0,0 +1,58 @@ +# Missing structural directive + +This diagnostic ensures that a standalone component using custom structural directives (e.g., `*select` or `*featureFlag`) in a template has the necessary imports for those directives. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + // Template uses `*select`, but no corresponding directive imported. + imports: [], + template: `

{{ data }}

`, +}) +class MyComponent {} +``` + +## What's wrong with that? + +Using a structural directive without importing it will fail at runtime, as Angular attempts to bind to a `select` property of the HTML element, which does not exist. + +## What should I do instead? + +Make sure that the corresponding structural directive is imported into the component: + +```typescript +import { Component } from '@angular/core'; +import { SelectDirective } from 'my-directives'; + +@Component({ + // Add `SelectDirective` to the `imports` array to make it available in the template. + imports: [SelectDirective], + template: `

{{ data }}

`, +}) +class MyComponent {} + +``` + +## Configuration requirements + +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`missingStructuralDirective` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "missingStructuralDirective": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8116.md b/adev-es/src/content/reference/extended-diagnostics/NG8116.md index 4c9231f..62c8e9f 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8116.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8116.md @@ -1,32 +1,32 @@ -# Missing structural directive +# Directiva estructural faltante -This diagnostic ensures that a standalone component using custom structural directives (e.g., `*select` or `*featureFlag`) in a template has the necessary imports for those directives. +Este diagnóstico garantiza que un componente standalone que usa directivas estructurales personalizadas (por ejemplo, `*select` o `*featureFlag`) en una plantilla tenga las importaciones necesarias para esas directivas. ```typescript import { Component } from '@angular/core'; @Component({ - // Template uses `*select`, but no corresponding directive imported. + // La plantilla usa `*select`, pero no se importó la directiva correspondiente. imports: [], template: `

{{ data }}

`, }) class MyComponent {} ``` -## What's wrong with that? +## ¿Qué está mal con eso? -Using a structural directive without importing it will fail at runtime, as Angular attempts to bind to a `select` property of the HTML element, which does not exist. +Usar una directiva estructural sin importarla fallará en tiempo de ejecución, ya que Angular intentará vincular a una propiedad `select` del elemento HTML, que no existe. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Make sure that the corresponding structural directive is imported into the component: +Asegúrate de que la directiva estructural correspondiente esté importada en el componente: ```typescript import { Component } from '@angular/core'; import { SelectDirective } from 'my-directives'; @Component({ - // Add `SelectDirective` to the `imports` array to make it available in the template. + // Agrega `SelectDirective` al array `imports` para que esté disponible en la plantilla. imports: [SelectDirective], template: `

{{ data }}

`, }) @@ -34,14 +34,14 @@ class MyComponent {} ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`missingStructuralDirective` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`missingStructuralDirective` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json { @@ -55,4 +55,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8117.en.md b/adev-es/src/content/reference/extended-diagnostics/NG8117.en.md new file mode 100644 index 0000000..0ecf62d --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/NG8117.en.md @@ -0,0 +1,61 @@ +# Functions should be invoked in text interpolation. + +This diagnostic detects uninvoked functions in text interpolation. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + template: `{{ getValue }}`, +}) +class MyComponent { + getValue() { + return 'value'; + } +} +``` + +## What's wrong with that? + +Functions in text interpolation should be invoked to return a value. +If the function is not invoked, it will not return any value and the interpolation will not work as expected. + +## What should I do instead? + +Ensure to invoke the function when you use it in text interpolation to return the value. + +```typescript +import { Component } from '@angular/core'; + +@Component({ + template: `{{ getValue() }}`, +}) +class MyComponent { + getValue() { + return 'value'; + } +} +``` + +## Configuration requirements + +[`strictTemplates`](/tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. +`uninvokedFunctionInTextInterpolation` has no additional requirements beyond `strictTemplates`. + +## What if I can't avoid this? + +This diagnostic can be disabled by editing the project's `tsconfig.json` file: + +```json +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "uninvokedFunctionInTextInterpolation": "suppress" + } + } + } +} +``` + +See [extended diagnostic configuration](/extended-diagnostics#configuration) for more info. diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8117.md b/adev-es/src/content/reference/extended-diagnostics/NG8117.md index 0ecf62d..b762cce 100644 --- a/adev-es/src/content/reference/extended-diagnostics/NG8117.md +++ b/adev-es/src/content/reference/extended-diagnostics/NG8117.md @@ -1,6 +1,6 @@ -# Functions should be invoked in text interpolation. +# Las funciones deben invocarse en interpolaciones de texto. -This diagnostic detects uninvoked functions in text interpolation. +Este diagnóstico detecta funciones no invocadas en interpolaciones de texto. ```typescript import { Component } from '@angular/core'; @@ -15,14 +15,14 @@ class MyComponent { } ``` -## What's wrong with that? +## ¿Qué está mal con eso? -Functions in text interpolation should be invoked to return a value. -If the function is not invoked, it will not return any value and the interpolation will not work as expected. +Las funciones en interpolaciones de texto deben invocarse para devolver un valor. +Si la función no se invoca, no devolverá ningún valor y la interpolación no funcionará como se espera. -## What should I do instead? +## ¿Qué debo hacer en su lugar? -Ensure to invoke the function when you use it in text interpolation to return the value. +Asegúrate de invocar la función cuando la uses en una interpolación de texto para devolver el valor. ```typescript import { Component } from '@angular/core'; @@ -37,14 +37,14 @@ class MyComponent { } ``` -## Configuration requirements +## Requisitos de configuración -[`strictTemplates`](/tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit. -`uninvokedFunctionInTextInterpolation` has no additional requirements beyond `strictTemplates`. +[`strictTemplates`](/tools/cli/template-typecheck#strict-mode) debe estar habilitado para que se emita cualquier diagnóstico extendido. +`uninvokedFunctionInTextInterpolation` no tiene requisitos adicionales más allá de `strictTemplates`. -## What if I can't avoid this? +## ¿Qué pasa si no puedo evitar esto? -This diagnostic can be disabled by editing the project's `tsconfig.json` file: +Este diagnóstico puede deshabilitarse editando el archivo `tsconfig.json` del proyecto: ```json { @@ -58,4 +58,4 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file: } ``` -See [extended diagnostic configuration](/extended-diagnostics#configuration) for more info. +Consulta la [configuración de diagnósticos extendidos](/extended-diagnostics#configuración) para más información. diff --git a/adev-es/src/content/reference/extended-diagnostics/overview.en.md b/adev-es/src/content/reference/extended-diagnostics/overview.en.md new file mode 100644 index 0000000..e966bdf --- /dev/null +++ b/adev-es/src/content/reference/extended-diagnostics/overview.en.md @@ -0,0 +1,90 @@ +# Extended Diagnostics + +There are many coding patterns that are technically valid to the compiler or runtime, but which may have complex nuances or caveats. +These patterns may not have the intended effect expected by a developer, which often leads to bugs. +The Angular compiler includes "extended diagnostics" which identify many of these patterns, in order to warn developers about the potential issues and enforce common best practices within a codebase. + +## Diagnostics + +Currently, Angular supports the following extended diagnostics: + +| Code | Name | +| :------- | :-------------------------------------------------------------------- | +| `NG8101` | [`invalidBananaInBox`](extended-diagnostics/NG8101) | +| `NG8102` | [`nullishCoalescingNotNullable`](extended-diagnostics/NG8102) | +| `NG8103` | [`missingControlFlowDirective`](extended-diagnostics/NG8103) | +| `NG8104` | [`textAttributeNotBinding`](extended-diagnostics/NG8104) | +| `NG8105` | [`missingNgForOfLet`](extended-diagnostics/NG8105) | +| `NG8106` | [`suffixNotSupported`](extended-diagnostics/NG8106) | +| `NG8107` | [`optionalChainNotNullable`](extended-diagnostics/NG8107) | +| `NG8108` | [`skipHydrationNotStatic`](extended-diagnostics/NG8108) | +| `NG8109` | [`interpolatedSignalNotInvoked`](extended-diagnostics/NG8109) | +| `NG8111` | [`uninvokedFunctionInEventBinding`](extended-diagnostics/NG8111) | +| `NG8113` | [`unusedStandaloneImports`](extended-diagnostics/NG8113) | +| `NG8114` | [`unparenthesizedNullishCoalescing`](extended-diagnostics/NG8114) | +| `NG8115` | [`uninvokedTrackFunction`](extended-diagnostics/NG8115) | +| `NG8116` | [`missingStructuralDirective`](extended-diagnostics/NG8116) | +| `NG8117` | [`uninvokedFunctionInTextInterpolation`](extended-diagnostics/NG8117) | +| `NG8021` | [`deferTriggerMisconfiguration`](extended-diagnostics/NG8021) | + +## Configuration + +Extended diagnostics are warnings by default and do not block compilation. +Each diagnostic can be configured as either: + +| Error category | Effect | +| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `warning` | Default - The compiler emits the diagnostic as a warning but does not block compilation. The compiler will still exist with status code 0, even if warnings are emitted. | +| `error` | The compiler emits the diagnostic as an error and fails the compilation. The compiler will exit with a non-zero status code if one or more errors are emitted. | +| `suppress` | The compiler does _not_ emit the diagnostic at all. | + +Check severity can be configured as an [Angular compiler option](reference/configs/angular-compiler-options): + +```json + +{ + "angularCompilerOptions": { + "extendedDiagnostics": { + "checks": { + "invalidBananaInBox": "suppress" + }, + "defaultCategory": "error" + } + } +} +``` + +The `checks` field maps the name of individual diagnostics to their associated category. +See [Diagnostics](#diagnostics) for a complete list of extended diagnostics and the name to use for configuring them. + +The `defaultCategory` field is used for any diagnostics that are not explicitly listed under `checks`. +If not set, such diagnostics will be treated as `warning`. + +Extended diagnostics will emit when [`strictTemplates`](tools/cli/template-typecheck#strict-mode) is enabled. +This is required to allow the compiler to better understand Angular template types and provide accurate and meaningful diagnostics. + +## Semantic Versioning + +The Angular team intends to add or enable new extended diagnostics in **minor** versions of Angular (see [semver](https://docs.npmjs.com/about-semantic-versioning)). +This means that upgrading Angular may show new warnings in your existing codebase. +This enables the team to deliver features more quickly and to make extended diagnostics more accessible to developers. + +However, setting `"defaultCategory": "error"` will promote such warnings to hard errors. +This can cause a minor version upgrade to introduce compilation errors, which may be seen as a semver non-compliant breaking change. +Any new diagnostics can be suppressed or demoted to warnings via the above [configuration](#configuration), so the impact of a new diagnostic should be minimal to +projects that treat extended diagnostics as errors by default. +Defaulting to error is a very powerful tool; just be aware of this semver caveat when deciding if `error` is the right default for your project. + +## New Diagnostics + +The Angular team is always open to suggestions about new diagnostics that could be added. +Extended diagnostics should generally: + +- Detect a common, non-obvious developer mistake with Angular templates +- Clearly articulate why this pattern can lead to bugs or unintended behavior +- Suggest one or more clear solutions +- Have a low, preferably zero, false-positive rate +- Apply to the vast majority of Angular applications (not specific to an unofficial library) +- Improve program correctness or performance (not style, that responsibility falls to a linter) + +If you have an idea for an extended diagnostic which fits these criteria, consider filing a [feature request](https://github.com/angular/angular/issues/new?template=2-feature-request.yaml). diff --git a/adev-es/src/content/reference/extended-diagnostics/overview.md b/adev-es/src/content/reference/extended-diagnostics/overview.md index e966bdf..69d966a 100644 --- a/adev-es/src/content/reference/extended-diagnostics/overview.md +++ b/adev-es/src/content/reference/extended-diagnostics/overview.md @@ -1,14 +1,14 @@ -# Extended Diagnostics +# Diagnósticos Extendidos -There are many coding patterns that are technically valid to the compiler or runtime, but which may have complex nuances or caveats. -These patterns may not have the intended effect expected by a developer, which often leads to bugs. -The Angular compiler includes "extended diagnostics" which identify many of these patterns, in order to warn developers about the potential issues and enforce common best practices within a codebase. +Existen muchos patrones de código que son técnicamente válidos para el compilador o el tiempo de ejecución, pero que pueden tener matices o advertencias complejas. +Estos patrones pueden no tener el efecto esperado por el desarrollador, lo que frecuentemente genera errores. +El compilador de Angular incluye "diagnósticos extendidos" que identifican muchos de estos patrones, con el fin de advertir a los desarrolladores sobre los posibles problemas y hacer cumplir las mejores prácticas comunes en una base de código. -## Diagnostics +## Diagnósticos -Currently, Angular supports the following extended diagnostics: +Actualmente, Angular admite los siguientes diagnósticos extendidos: -| Code | Name | +| Código | Nombre | | :------- | :-------------------------------------------------------------------- | | `NG8101` | [`invalidBananaInBox`](extended-diagnostics/NG8101) | | `NG8102` | [`nullishCoalescingNotNullable`](extended-diagnostics/NG8102) | @@ -27,18 +27,18 @@ Currently, Angular supports the following extended diagnostics: | `NG8117` | [`uninvokedFunctionInTextInterpolation`](extended-diagnostics/NG8117) | | `NG8021` | [`deferTriggerMisconfiguration`](extended-diagnostics/NG8021) | -## Configuration +## Configuración -Extended diagnostics are warnings by default and do not block compilation. -Each diagnostic can be configured as either: +Los diagnósticos extendidos son advertencias por defecto y no bloquean la compilación. +Cada diagnóstico puede configurarse como: -| Error category | Effect | -| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `warning` | Default - The compiler emits the diagnostic as a warning but does not block compilation. The compiler will still exist with status code 0, even if warnings are emitted. | -| `error` | The compiler emits the diagnostic as an error and fails the compilation. The compiler will exit with a non-zero status code if one or more errors are emitted. | -| `suppress` | The compiler does _not_ emit the diagnostic at all. | +| Categoría de error | Efecto | +| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `warning` | Predeterminado - El compilador emite el diagnóstico como advertencia pero no bloquea la compilación. El compilador seguirá existiendo con código de estado 0, incluso si se emiten advertencias. | +| `error` | El compilador emite el diagnóstico como un error y falla la compilación. El compilador saldrá con un código de estado distinto de cero si se emite uno o más errores. | +| `suppress` | El compilador _no_ emite el diagnóstico en absoluto. | -Check severity can be configured as an [Angular compiler option](reference/configs/angular-compiler-options): +La severidad de las verificaciones puede configurarse como una [opción del compilador de Angular](reference/configs/angular-compiler-options): ```json @@ -54,37 +54,36 @@ Check severity can be configured as an [Angular compiler option](reference/confi } ``` -The `checks` field maps the name of individual diagnostics to their associated category. -See [Diagnostics](#diagnostics) for a complete list of extended diagnostics and the name to use for configuring them. +El campo `checks` mapea el nombre de los diagnósticos individuales a su categoría asociada. +Consulta [Diagnósticos](#diagnósticos) para obtener una lista completa de los diagnósticos extendidos y el nombre a usar para configurarlos. -The `defaultCategory` field is used for any diagnostics that are not explicitly listed under `checks`. -If not set, such diagnostics will be treated as `warning`. +El campo `defaultCategory` se usa para cualquier diagnóstico que no esté listado explícitamente en `checks`. +Si no se establece, dichos diagnósticos se tratarán como `warning`. -Extended diagnostics will emit when [`strictTemplates`](tools/cli/template-typecheck#strict-mode) is enabled. -This is required to allow the compiler to better understand Angular template types and provide accurate and meaningful diagnostics. +Los diagnósticos extendidos se emitirán cuando [`strictTemplates`](tools/cli/template-typecheck#strict-mode) esté habilitado. +Esto es necesario para permitir que el compilador comprenda mejor los tipos de plantillas de Angular y proporcione diagnósticos precisos y significativos. -## Semantic Versioning +## Versionado semántico -The Angular team intends to add or enable new extended diagnostics in **minor** versions of Angular (see [semver](https://docs.npmjs.com/about-semantic-versioning)). -This means that upgrading Angular may show new warnings in your existing codebase. -This enables the team to deliver features more quickly and to make extended diagnostics more accessible to developers. +El equipo de Angular tiene la intención de agregar o habilitar nuevos diagnósticos extendidos en versiones **menores** de Angular (consulta [semver](https://docs.npmjs.com/about-semantic-versioning)). +Esto significa que actualizar Angular puede mostrar nuevas advertencias en tu base de código existente. +Esto permite al equipo entregar características más rápidamente y hacer los diagnósticos extendidos más accesibles a los desarrolladores. -However, setting `"defaultCategory": "error"` will promote such warnings to hard errors. -This can cause a minor version upgrade to introduce compilation errors, which may be seen as a semver non-compliant breaking change. -Any new diagnostics can be suppressed or demoted to warnings via the above [configuration](#configuration), so the impact of a new diagnostic should be minimal to -projects that treat extended diagnostics as errors by default. -Defaulting to error is a very powerful tool; just be aware of this semver caveat when deciding if `error` is the right default for your project. +Sin embargo, establecer `"defaultCategory": "error"` promoverá dichas advertencias a errores graves. +Esto puede causar que una actualización de versión menor introduzca errores de compilación, lo que puede verse como un cambio disruptivo no conforme con semver. +Cualquier nuevo diagnóstico puede suprimirse o degradarse a advertencias a través de la [configuración](#configuración) anterior, por lo que el impacto de un nuevo diagnóstico debería ser mínimo para los proyectos que tratan los diagnósticos extendidos como errores por defecto. +Usar error como valor predeterminado es una herramienta muy poderosa; solo ten en cuenta esta advertencia de semver al decidir si `error` es el valor predeterminado correcto para tu proyecto. -## New Diagnostics +## Nuevos diagnósticos -The Angular team is always open to suggestions about new diagnostics that could be added. -Extended diagnostics should generally: +El equipo de Angular siempre está abierto a sugerencias sobre nuevos diagnósticos que podrían agregarse. +Los diagnósticos extendidos generalmente deben: -- Detect a common, non-obvious developer mistake with Angular templates -- Clearly articulate why this pattern can lead to bugs or unintended behavior -- Suggest one or more clear solutions -- Have a low, preferably zero, false-positive rate -- Apply to the vast majority of Angular applications (not specific to an unofficial library) -- Improve program correctness or performance (not style, that responsibility falls to a linter) +- Detectar un error de desarrollador común y no obvio con las plantillas de Angular +- Articular claramente por qué este patrón puede llevar a errores o comportamientos no deseados +- Sugerir una o más soluciones claras +- Tener una tasa de falsos positivos baja, preferiblemente cero +- Aplicarse a la gran mayoría de las aplicaciones Angular (no específico a una librería no oficial) +- Mejorar la corrección o el rendimiento del programa (no el estilo; esa responsabilidad recae en un linter) -If you have an idea for an extended diagnostic which fits these criteria, consider filing a [feature request](https://github.com/angular/angular/issues/new?template=2-feature-request.yaml). +Si tienes una idea para un diagnóstico extendido que cumpla estos criterios, considera presentar una [solicitud de característica](https://github.com/angular/angular/issues/new?template=2-feature-request.yaml).