Angular의 forRoot() 메소드를 사용하는 경우

문제 : 지연 로드된 모든 모듈에서 싱글톤 언어 서비스를 공유해야 했습니다. 1년 동안 나는 forRoot() 메소드를 보고 그 강력함을 무시했습니다.

설명 : 메소드가 및 해당 제공자 종속성을 forRoot()반환합니다 .NgModule

이 예에서는 카운터 값을 따라가기 위해 서비스를 공유하고 있습니다. 모든 구성 요소가 카운터 서비스에 저장된 값을 증가시킬 때마다 이를 모든 구성 요소와 공유하고 싶습니다.

문제는 지연 로드 모듈을 도입하려고 할 때입니다. 지연 로드된 구성 요소가 어떻게 동일한 카운터 값을 공유하지 않는지 확인하세요. 즉시 로드된 구성 요소만 사용하는 경우 공유 서비스를 사용하면 아래 예제가 작동하지만 지연 로드 구성 요소가 어떻게 작동하는지 확인하세요. 게으른 구성 요소는 자체 서비스 인스턴스를 가져옵니다.

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

해결 방법 : AppModule에서 forRoot()를 호출하고 sharedModule에서 ModuleWithProviders를 반환합니다.

shared.module.ts

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 {}

이제 카운터 서비스는 열심히 로드된 모듈과 지연 로드된 모듈 간에 공유됩니다.

기타 권장 자료:http://angularfirst.com/the-ngmodule-forroot-convention/