Как использовать .forRoot () в иерархии функциональных модулей

Обычно forRoot используется для добавления приложений / одноэлементных служб.

@NgModule({
  providers: [ /* DONT ADD HERE */ ]
})
class SharedModule {
  static forRoot() {
    return {
      ngModule: SharedModule,
      providers: [ AuthService ]
    }
  }
}

Причина в том, что если вы добавите AuthService к providers в @NgModule, возможно создание более одного, если вы импортируете SharedModule в другие модули.

Я не на 100% уверен в том, будет ли создана служба при импорте SharedModule в быстро загружаемый модуль, но объяснение того, что упомянутые документы, касались лениво загружаемых модулей. Когда вы лениво загружаете модуль, будут созданы все поставщики.

По этой причине мы добавляем (по соглашению) метод forRoot, чтобы указать, что метод должен вызываться только для корневого (приложения) модуля, тогда как для другого модуля он должен просто импортироваться в обычном режиме.

@NgModule({
  imports: [SharedModule]
})
class FeatureModule {}

@NgModule({
  imports: [SharedModule.forRoot()]
})
class AppModule {}

Поскольку forRoot предназначен только для предоставления одноэлементных служб, вы можете "повторно предоставить" их явно в SharedModule:

@NgModule({})
class SharedModule {
  static forRoot() {
    return {
      ngModule: SharedModule,
      providers: [
        AuthService,
        FeatureModuleA.forRoot().providers,
        FeatureModuleB.forRoot().providers,
      ],
    }
  }
}

Таким образом, все услуги будут предоставляться самим SharedModule (а не соответствующим подмодулем), но кажется, что это не имеет значения. Может хоть кто поспорит ...

Обратите внимание, что FeatureModuleA также может «повторно предоставлять» одноэлементные службы из своих подмодулей аналогичным образом.

Как упоминалось выше, важно учитывать ленивые загружаемые модули, потому что общая служба может использоваться в ленивом загружаемом модуле, но если эта служба уже использовалась и была создана другим модулем, то будет два экземпляра, следовательно, потребуется шаблон singleton . Отличным примером здесь является AuthService - вы не хотите иметь один экземпляр службы с неаутентифицированным пользователем, в то время как другой аутентифицирован «тот же» пользователь.

В Angular 6 появился новый способ регистрации провайдера как синглтона. Внутри декоратора @Injectable () для службы используйте атрибут providedIn. Установите его значение "root". Тогда вам не нужно будет добавлять его в список поставщиков корневого модуля, или в этом случае вы также можете установить его в свой SharedModule следующим образом:

@Injectable({
  providedIn: SharedModule // or 'root' for singleton
})
export class AuthService {
...