En la sección de preguntas frecuentes de angular docs, dice: "A diferencia de los proveedores de los módulos cargados en el lanzamiento, los proveedores de módulos con carga diferida tienen un alcance de módulo". Enlace
¿ 'Ámbito de módulo' aquí significa solo el módulo o se extiende para incluir todos los componentes que pertenecen a ese módulo?
La razón por la que pregunto es porque tengo un módulo con carga diferida con 2 componentes que le pertenecen. Registro un servicio en el módulo pero, por alguna razón, cada componente obtiene una instancia diferente de ese servicio.
¿Qué debo cambiar para proporcionar LazyModuleService en mi módulo de carga diferida y tener ese servicio limitado solo al módulo de carga diferida y sus componentes? Incluya cualquier archivo adicional necesario. He intentado hacer un ejemplo genérico para ayudar a cualquier otra persona que pueda encontrar esta pregunta.
Módulo con carga diferida:
import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { Component1 } from './component1.component'; import { Component2 } from './component2.component'; import { LazyModuleService } from './lazy-module.service'; @NgModule({ imports: [ CommonModule, ], declarations: [ Component1, Component2, ], }) export class LazyLoadedModule { }
Cómo funciona la carga diferida:
Después de una investigación profunda, parece que el problema está relacionado con la forma en que se implementa la carga diferida.
En su caso, su módulo de carga diferida en realidad tenía enrutamiento a 2 componentes diferentes dentro de él: ambos componentes estaban expuestos directamente como rutas Router.forChild. Pero, como resultado, cuando navegó a cada componente, se agregó una instancia separada de los proveedores de su módulo de carga diferida a cada componente.
Dado que en realidad quería que todos los componentes en el módulo de carga diferida compartieran la misma instancia de sus servicios proporcionados, debe crear un solo componente 'raíz' y luego hacer que sus dos componentes sean hijos de ese componente raíz.
Parece que durante la carga diferida, los proveedores de su módulo se agregarán al inyector del componente en la raíz de su módulo. Dado que tiene dos 'componentes raíz', cada uno tiene instancias separadas de los servicios.
La solución fue crear un único componente raíz cuyo inyector recibirá los servicios de carga diferida, que luego pueden ser compartidos por cualquier componente secundario.
Gran solución integrada proporcionada por Angular 6. Si está utilizando Angular 6+ (consulte su paquete.json para averiguarlo), puede proporcionar servicios para toda la aplicación de una manera diferente.
En lugar de agregar una clase de servicio a la matriz de proveedores [] en AppModule, puede establecer la siguiente configuración en @Injectable():
@Injectable({providedIn: 'root'}) export class MyService { ... }
Esto es exactamente lo mismo que:
export class MyService { ... }
y
import { MyService } from './path/to/my.service'; @NgModule({ ... providers: [MyService] }) export class MyService { ... }
Usar esta nueva sintaxis es completamente opcional, la sintaxis tradicional (usar proveedores[] ) seguirá funcionando. Sin embargo, la "nueva sintaxis" ofrece una ventaja: los servicios se pueden cargar de forma perezosa mediante Angular (detrás de escena) y el código redundante se puede eliminar automáticamente. Esto puede conducir a un mejor rendimiento y velocidad de carga, aunque en realidad solo se activa para servicios y aplicaciones más grandes en general.
Fuente: Udemy
Simplemente agregue su LazyModuleService como proveedor en su LazyLoadedModule. Podrá usarlo solo en los componentes de ese módulo.