Merge branch 'main' into poc/incremental-translation

Author: oidacra

adev-es/src/content/guide/di/debugging-and-troubleshooting-di.en.md

@@ -0,0 +1,85 @@
+# Lazy loading services
+
+IMPORTANT: For lazy loading to work, the service you load must be auto-provided. Decorate it with either `@Injectable({providedIn: 'root'})` or [`@Service()`](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator). Without auto-provisioning, Angular has no way to construct the service after it loads.
+
+Angular's `injectAsync` function lets you load a service on demand, only when it's actually needed. This is useful when a service depends on a large library or rarely used feature, and you don't want to pay for it on the initial page load.
+
+When you use `injectAsync`, the service's code is split out by your bundler into a separate JavaScript chunk and downloaded the first time you ask for the instance. Once loaded, Angular resolves the service through the regular DI system, so it can still depend on other injectables and behaves like any other singleton.
+
+## Lazily injecting a service
+
+Imagine a `ReportExporter` that depends on a heavy spreadsheet library. Most users open the report; only a few click **Export**. Load the exporter on demand:
+
+```angular-ts
+import {Component, injectAsync} from '@angular/core';
+
+@Component({
+  selector: 'app-report',
+  template: `<button (click)="export()">Export</button>`,
+})
+export class Report {
+  private exporter = injectAsync(() => import('./report-exporter').then((m) => m.ReportExporter));
+
+  async export() {
+    const exporter = await this.exporter();
+    exporter.export();
+  }
+}
+```
+
+The first call to `this.exporter()` triggers the dynamic import and resolves the service from DI. Subsequent calls reuse the same promise, so the chunk is only fetched once.
+
+If the lazy-loaded service is the [default export](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export), pass the dynamic import directly, Angular unwraps the `default` for you:
+
+```ts {header: report-exporter.ts}
+@Service()
+export default class ReportExporter {
+  /* … */
+}
+```
+
+```ts {header: report.ts}
+private exporter = injectAsync(() => import('./report-exporter'));
+```
+
+## Prefetching the dependency
+
+By default, the lazy chunk is only fetched when you invoke the returned function. You can start the download earlier by passing a `prefetch` trigger in the options. A trigger is any function that returns a `Promise`, when it resolves, Angular kicks off the loader.
+
+Angular ships with `onIdle`, a built-in trigger that waits until the browser becomes idle:
+
+```ts
+import {Component, injectAsync, onIdle} from '@angular/core';
+
+@Component({
+  /* … */
+})
+export class Report {
+  private exporter = injectAsync(() => import('./report-exporter').then((m) => m.ReportExporter), {
+    prefetch: onIdle,
+  });
+}
+```
+
+You can also configure `onIdle` with a maximum wait time so the prefetch always happens within a known window, even on busy pages:
+
+```ts
+injectAsync(loader, {prefetch: () => onIdle({timeout: 1_000})});
+```
+
+NOTE: Prefetching is opportunistic. If the user invokes the feature before the prefetch fires, Angular still loads the dependency immediately and resolves your `await` as soon as it's ready.
+
+## Provide a custom prefetch trigger
+
+A `PrefetchTrigger` is just a function that returns a promise, the loader runs as soon as the promise resolves. Use this to align prefetching with your own signals, such as a hover or a scheduler tick:
+
+```ts
+import {PrefetchTrigger} from '@angular/core';
+
+export function onHover(target: HTMLElement): PrefetchTrigger {
+  return () =>
+    new Promise<void>((resolve) => {
+      target.addEventListener('pointerenter', () => resolve(), {once: true});
+    });
+}
+```

adev-es/src/content/guide/di/debugging-and-troubleshooting-di.md

@@ -1,14 +1,14 @@
-# Lazy loading services
+# Lazy loading de servicios
 
-IMPORTANT: For lazy loading to work, the service you load must be auto-provided. Decorate it with either `@Injectable({providedIn: 'root'})` or [`@Service()`](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator). Without auto-provisioning, Angular has no way to construct the service after it loads.
+IMPORTANT: Para que el lazy loading funcione, el servicio que cargas debe estar auto-provisto. Decóralo con `@Injectable({providedIn: 'root'})` o con [`@Service()`](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator). Sin auto-provisión, Angular no tiene forma de construir el servicio después de cargarlo.
 
-Angular's `injectAsync` function lets you load a service on demand, only when it's actually needed. This is useful when a service depends on a large library or rarely used feature, and you don't want to pay for it on the initial page load.
+La función `injectAsync` de Angular te permite cargar un servicio bajo demanda, solo cuando realmente se necesita. Esto es útil cuando un servicio depende de una biblioteca grande o de una funcionalidad poco usada, y no quieres pagar su costo en la carga inicial de la página.
 
-When you use `injectAsync`, the service's code is split out by your bundler into a separate JavaScript chunk and downloaded the first time you ask for the instance. Once loaded, Angular resolves the service through the regular DI system, so it can still depend on other injectables and behaves like any other singleton.
+Cuando usas `injectAsync`, tu bundler separa el código del servicio en un chunk de JavaScript independiente que se descarga la primera vez que solicitas la instancia. Una vez cargado, Angular resuelve el servicio a través del sistema de DI habitual, así que puede seguir dependiendo de otros inyectables y se comporta como cualquier otro singleton.
 
-## Lazily injecting a service
+## Inyectando un servicio de forma diferida {#lazily-injecting-a-service}
 
-Imagine a `ReportExporter` that depends on a heavy spreadsheet library. Most users open the report; only a few click **Export**. Load the exporter on demand:
+Imagina un `ReportExporter` que depende de una biblioteca pesada de hojas de cálculo. La mayoría de los usuarios abren el reporte; solo unos pocos hacen clic en **Export**. Carga el exportador bajo demanda:
 
 ```angular-ts
 import {Component, injectAsync} from '@angular/core';
@@ -27,9 +27,9 @@ export class Report {
 }
 ```
 
-The first call to `this.exporter()` triggers the dynamic import and resolves the service from DI. Subsequent calls reuse the same promise, so the chunk is only fetched once.
+La primera llamada a `this.exporter()` dispara la importación dinámica y resuelve el servicio desde DI. Las llamadas siguientes reutilizan la misma promesa, así que el chunk solo se descarga una vez.
 
-If the lazy-loaded service is the [default export](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export), pass the dynamic import directly, Angular unwraps the `default` for you:
+Si el servicio cargado con lazy loading es la [exportación por defecto](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export), pasa la importación dinámica directamente; Angular extrae el `default` por ti:
 
 ```ts {header: report-exporter.ts}
 @Service()
@@ -42,11 +42,11 @@ export default class ReportExporter {
 private exporter = injectAsync(() => import('./report-exporter'));
 ```
 
-## Prefetching the dependency
+## Precargando la dependencia {#prefetching-the-dependency}
 
-By default, the lazy chunk is only fetched when you invoke the returned function. You can start the download earlier by passing a `prefetch` trigger in the options. A trigger is any function that returns a `Promise`, when it resolves, Angular kicks off the loader.
+Por defecto, el chunk diferido solo se descarga cuando invocas la función devuelta. Puedes iniciar la descarga antes pasando un disparador `prefetch` en las opciones. Un disparador es cualquier función que devuelve una `Promise`; cuando esta se resuelve, Angular pone en marcha el cargador.
 
-Angular ships with `onIdle`, a built-in trigger that waits until the browser becomes idle:
+Angular incluye `onIdle`, un disparador integrado que espera hasta que el navegador queda inactivo:
 
 ```ts
 import {Component, injectAsync, onIdle} from '@angular/core';
@@ -61,17 +61,17 @@ export class Report {
 }
 ```
 
-You can also configure `onIdle` with a maximum wait time so the prefetch always happens within a known window, even on busy pages:
+También puedes configurar `onIdle` con un tiempo máximo de espera para que la precarga siempre ocurra dentro de una ventana conocida, incluso en páginas con mucha actividad:
 
 ```ts
 injectAsync(loader, {prefetch: () => onIdle({timeout: 1_000})});
 ```
 
-NOTE: Prefetching is opportunistic. If the user invokes the feature before the prefetch fires, Angular still loads the dependency immediately and resolves your `await` as soon as it's ready.
+NOTE: La precarga es oportunista. Si el usuario invoca la funcionalidad antes de que se dispare la precarga, Angular carga la dependencia inmediatamente de todos modos y resuelve tu `await` en cuanto está lista.
 
-## Provide a custom prefetch trigger
+## Proveer un disparador de precarga personalizado {#provide-a-custom-prefetch-trigger}
 
-A `PrefetchTrigger` is just a function that returns a promise, the loader runs as soon as the promise resolves. Use this to align prefetching with your own signals, such as a hover or a scheduler tick:
+Un `PrefetchTrigger` es simplemente una función que devuelve una promesa; el cargador se ejecuta en cuanto la promesa se resuelve. Úsalo para alinear la precarga con tus propios eventos, como un hover o un tick de un planificador:
 
 ```ts
 import {PrefetchTrigger} from '@angular/core';

adev-es/src/content/guide/di/lazy-loading-services.en.md

@@ -0,0 +1,85 @@
+# Debouncing signals with `debounced`
+
+IMPORTANT: `debounced` is [experimental](reference/releases#experimental). It's ready for you to try, but it might change before it is stable.
+
+Use `debounced` to delay reacting to a signal's value until it stops changing. It returns a `Resource` whose value reflects the debounced value of the source signal.
+
+```angular-ts
+import {debounced, resource, signal} from '@angular/core';
+
+@Component({
+  template: `
+    <input (input)="query.set($event.target.value)" />
+
+    @if (results.isLoading()) {
+      <p>Searching…</p>
+    }
+    @for (item of results.value(); track item.id) {
+      <li>{{ item.name }}</li>
+    }
+  `,
+})
+export class Search {
+  query = signal('');
+
+  debouncedQuery = debounced(this.query, 300);
+
+  results = resource({
+    params: () => this.debouncedQuery.value(),
+    loader: ({params}) => fetchResults(params),
+  });
+}
+```
+
+`debounced` takes the source signal and a wait duration in milliseconds. The returned resource's `value()` always contains the last settled value, and `status()` tells you whether a new value is still pending.
+
+## Status during debounce
+
+While the debounce timer is counting down, `status()` is `'loading'` and `value()` returns the previously resolved value. When the timer expires, the resource settles to `'resolved'`. If the source signal throws, the resource enters `'error'` immediately; no timer runs.
+
+See [Resource status](/guide/signals/resource#resource-status) for the full list of statuses and their `value()` behavior.
+
+## Custom wait function
+
+Instead of a millisecond duration, you can pass a function that returns a `Promise<void>`. The resource resolves when the promise resolves. If the source signal changes before the promise settles, Angular discards the previous promise and starts a new one.
+
+```ts
+debouncedQuery = debounced(query, (value, lastSnapshot) => {
+  // Retry immediately after an error rather than making the user wait again.
+  if (lastSnapshot.status === 'error') return;
+  // Short queries get a longer delay—the user is likely still typing.
+  const ms = value.length < 3 ? 500 : 200;
+  return new Promise<void>((resolve) => setTimeout(resolve, ms));
+});
+```
+
+See the `DebounceTimer` type in the API reference for details.
+
+## Equality
+
+By default, `debounced` uses `Object.is` to compare values.
+
+Provide a custom equality function with the `equal` option when the default identity check is too strict:
+
+```ts
+debouncedFilter = debounced(filter, 200, {
+  equal: (a, b) => a.category === b.category && a.minPrice === b.minPrice,
+});
+```
+
+## Injection context
+
+`debounced` must be called inside an [injection context](guide/di/dependency-injection-context). Angular automatically destroys the debounced resource and cancels any pending timer when the injector is destroyed.
+
+To use `debounced` outside of an injection context, pass an explicit `Injector` via the options:
+
+```ts
+@Service()
+export class SearchService {
+  private injector = inject(Injector);
+
+  createDebouncedQuery(query: Signal<string>): Resource<string> {
+    return debounced(query, 300, {injector: this.injector});
+  }
+}
+```

adev-es/src/content/guide/di/lazy-loading-services.md

@@ -1,8 +1,8 @@
-# Debouncing signals with `debounced`
+# Aplicar debounce a signals con `debounced`
 
-IMPORTANT: `debounced` is [experimental](reference/releases#experimental). It's ready for you to try, but it might change before it is stable.
+IMPORTANT: `debounced` es [experimental](reference/releases#experimental). Está listo para que lo pruebes, pero podría cambiar antes de ser estable.
 
-Use `debounced` to delay reacting to a signal's value until it stops changing. It returns a `Resource` whose value reflects the debounced value of the source signal.
+Usa `debounced` para retrasar la reacción al valor de una signal hasta que deje de cambiar. Devuelve un `Resource` cuyo valor refleja el valor con debounce de la signal fuente.
 
 ```angular-ts
 import {debounced, resource, signal} from '@angular/core';
@@ -12,7 +12,7 @@ import {debounced, resource, signal} from '@angular/core';
     <input (input)="query.set($event.target.value)" />
 
     @if (results.isLoading()) {
-      <p>Searching…</p>
+      <p>Buscando…</p>
     }
     @for (item of results.value(); track item.id) {
       <li>{{ item.name }}</li>
@@ -31,47 +31,47 @@ export class Search {
 }
 ```
 
-`debounced` takes the source signal and a wait duration in milliseconds. The returned resource's `value()` always contains the last settled value, and `status()` tells you whether a new value is still pending.
+`debounced` recibe la signal fuente y una duración de espera en milisegundos. El `value()` del resource devuelto siempre contiene el último valor asentado, y `status()` te indica si un nuevo valor sigue pendiente.
 
-## Status during debounce
+## Estado durante el debounce {#status-during-debounce}
 
-While the debounce timer is counting down, `status()` is `'loading'` and `value()` returns the previously resolved value. When the timer expires, the resource settles to `'resolved'`. If the source signal throws, the resource enters `'error'` immediately; no timer runs.
+Mientras el temporizador del debounce está en cuenta regresiva, `status()` es `'loading'` y `value()` devuelve el valor resuelto anteriormente. Cuando el temporizador expira, el resource se asienta en `'resolved'`. Si la signal fuente lanza un error, el resource entra en `'error'` de inmediato; no se ejecuta ningún temporizador.
 
-See [Resource status](/guide/signals/resource#resource-status) for the full list of statuses and their `value()` behavior.
+Consulta [Estado del resource](/guide/signals/resource#resource-status) para ver la lista completa de estados y el comportamiento de `value()` en cada uno.
 
-## Custom wait function
+## Función de espera personalizada {#custom-wait-function}
 
-Instead of a millisecond duration, you can pass a function that returns a `Promise<void>`. The resource resolves when the promise resolves. If the source signal changes before the promise settles, Angular discards the previous promise and starts a new one.
+En lugar de una duración en milisegundos, puedes pasar una función que devuelva un `Promise<void>`. El resource se resuelve cuando la promesa se resuelve. Si la signal fuente cambia antes de que la promesa se asiente, Angular descarta la promesa anterior e inicia una nueva.
 
 ```ts
 debouncedQuery = debounced(query, (value, lastSnapshot) => {
-  // Retry immediately after an error rather than making the user wait again.
+  // Reintenta de inmediato tras un error en lugar de hacer que el usuario espere de nuevo.
   if (lastSnapshot.status === 'error') return;
-  // Short queries get a longer delay—the user is likely still typing.
+  // Las consultas cortas reciben un retraso mayor: probablemente el usuario sigue escribiendo.
   const ms = value.length < 3 ? 500 : 200;
   return new Promise<void>((resolve) => setTimeout(resolve, ms));
 });
 ```
 
-See the `DebounceTimer` type in the API reference for details.
+Consulta el tipo `DebounceTimer` en la referencia de la API para más detalles.
 
-## Equality
+## Igualdad {#equality}
 
-By default, `debounced` uses `Object.is` to compare values.
+Por defecto, `debounced` usa `Object.is` para comparar valores.
 
-Provide a custom equality function with the `equal` option when the default identity check is too strict:
+Proporciona una función de igualdad personalizada con la opción `equal` cuando la comprobación de identidad predeterminada sea demasiado estricta:
 
 ```ts
 debouncedFilter = debounced(filter, 200, {
   equal: (a, b) => a.category === b.category && a.minPrice === b.minPrice,
 });
 ```
 
-## Injection context
+## Contexto de inyección {#injection-context}
 
-`debounced` must be called inside an [injection context](guide/di/dependency-injection-context). Angular automatically destroys the debounced resource and cancels any pending timer when the injector is destroyed.
+`debounced` debe llamarse dentro de un [contexto de inyección](guide/di/dependency-injection-context). Angular destruye automáticamente el resource con debounce y cancela cualquier temporizador pendiente cuando se destruye el inyector.
 
-To use `debounced` outside of an injection context, pass an explicit `Injector` via the options:
+Para usar `debounced` fuera de un contexto de inyección, pasa un `Injector` explícito a través de las opciones:
 
 ```ts
 @Service()