Cuándo utilizar el método forRoot() de Angular

Problema : necesitábamos compartir un servicio de lenguaje único entre todos los módulos cargados de forma diferida. Durante un año, vi el método forRoot() y simplemente ignoré su poder.

Explicación : El forRoot()método devuelve un NgModuley sus dependencias del proveedor.

En este ejemplo, compartimos un servicio para mantenernos al día con un valor de contador. Cada vez que un componente incrementa el valor almacenado en el servicio de contador, quiero compartirlo con todos los componentes.

El problema es cuando intentas introducir módulos cargados de forma diferida. Observe cómo el componente cargado de forma diferida no comparte el mismo valor de contador. Cuando utilice únicamente componentes cargados con entusiasmo, el siguiente ejemplo funcionará si utiliza un servicio compartido, pero observe cómo se comporta el componente cargado de forma diferida. El componente diferido obtiene su propia instancia del servicio.

import { NgModule } from '@angular/core';
import { CounterService } from './counter.service';
@NgModule({
  providers: [CounterService],
})
export class SharedModule {}

Solución : llame a forRoot() en AppModule y devuelva un ModuleWithProviders en SharedModule.

módulo.ts compartido

import { NgModule,ModuleWithProviders  } from '@angular/core';
import { CounterService } from './counter.service';
@NgModule({
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ CounterService ]
    }
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
import { EagerComponent } from './eager.component';
import { routing } from './app.routing';
@NgModule({
  imports: [
    BrowserModule,
    SharedModule.forRoot(),
    routing
  ],
  declarations: [
    AppComponent,
    EagerComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ahora el servicio de contador se comparte entre módulos cargados con entusiasmo y módulos cargados de forma diferida.

Otras lecturas recomendadas:http://angularfirst.com/the-ngmodule-forroot-convention/

• Nota: No recomendaría poner servicios compartidos y directivas compartidas en el mismo módulo. He escrito este artículo como referencia para mí en el futuro.

Validadores asíncronos angulares