Предоставить модуль основных одноэлементных сервисов в Angular 2

Question

Я пытался создать какой-то основной модуль, как в учебнике, за исключением одной детали, я хочу предоставлять только услуги. Так что мой CoreModule должен быть похож на единственного поставщика услуг, потому что я не хочу предоставлять тонны услуг в AppModule, как в версиях приложений<= RC4. Я пытался сделать это, но это не работает. Я сделал какую-то ошибку? Спасибо за любую помощь.

import {
  ModuleWithProviders, NgModule,
  Optional, SkipSelf }       from '@angular/core';

import { CommonModule }      from '@angular/common';

import { CommunicatePatientListService }    from './services/communicate_patients_list.service';
import { HTTPPatientsListService }    from './services/http_patients_list.service';
import { SharedService }    from './services/shared_service';


@NgModule({
  imports:      [ CommonModule ],
  providers:    [
    CommunicatePatientListService,
    HTTPPatientsListService,
    SharedService
  ],
  exports: []
})
export class CoreModule {}

Обновление 2. Я пробовал разные способы сделать то, что было предоставлено мне, и я нашел интересный момент.

Когда я импортирую в COREModule синглтон-сервисы через стандартный импорт, он не работает, но когда я импортировал его через псевдонимы System.js, он работает сейчас. Мне действительно интересно, как это работает. Вот код

CoreModule:
import {
  ModuleWithProviders, NgModule,
  Optional, SkipSelf }       from '@angular/core';

import { CommonModule }      from '@angular/common';


import { HeaderModule } from './modules/header/header.module';
import { FooterComponent } from './modules/footer/footer.component';


//THAT DOESNT WORK
// import { CommunicatePatientListService }    from './services/communicate_patients_list.service';
// import { HTTPPatientsListService }    from './services/http_patients_list.service';
// import { SharedService }    from './services/shared_service';
// import { SchedulerSharedService }    from './services/scheduler_shared.service';
// import { FormChangeService }    from './services/on_form_change.service';

//IT IS WORKING NOW
import { CommunicatePatientListService } from '%sharedServices%/communicate_patients_list.service';
import { HTTPPatientsListService } from 'httpPatientsListService';
import { SharedService } from 'sharedService';
import { SchedulerSharedService } from 'schedulerSharedService';
import { FormChangeService } from 'formChangeService';



@NgModule({
  imports:      [
    CommonModule,
    HeaderModule,
  ],
  declarations: [
    FooterComponent
  ],

  exports: [
    FooterComponent,
    HeaderModule
  ]
})
export class CoreModule {

  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }

  static forRoot(): ModuleWithProviders {
    return {
      ngModule : CoreModule,
      providers:    [
        CommunicatePatientListService,
        HTTPPatientsListService,
        SharedService,
        FormChangeService,
        SchedulerSharedService
      ]
    };
  }


}

Компонент Список пациентов

import { Component, Input, OnInit, ViewChild } from '@angular/core';

import { CommunicatePatientListService } from '%sharedServices%/communicate_patients_list.service';
    import { HTTPPatientsListService } from 'httpPatientsListService';
    import { SharedService } from 'sharedService';
    import { SchedulerSharedService } from 'schedulerSharedService';
    import { FormChangeService } from 'formChangeService';

    import { Config } from 'appConfig';
    /* ------- !Config  ---------*/

    const MODULE_NAME: string = 'patients_list';
    const MODULE_PATH: string = `${Config.getProdFolderName()}/modules/patients/${MODULE_NAME}`;


    @Component({
      templateUrl: `${MODULE_PATH}/${MODULE_NAME}.component.html`,
      styleUrls: [`${MODULE_PATH}/${MODULE_NAME}.component.css`,]
    })


    export class PatientsListComponent implements OnInit {
      constructor(
        private patientsListService:HTTPPatientsListService,
        private patsListServCom:CommunicatePatientListService,
        private schedulerSharedService:SchedulerSharedService,
        private sharedService:SharedService
      ) {
  }

Answer 1

Наилучшим подходом является создание модуля с провайдерами. Имейте в виду, что если ваша служба находится в общем модуле, вы можете получить ее несколько экземпляров. Лучше всего настроить модуль с Module.forRoot,

По соглашению статический метод forRoot одновременно предоставляет и настраивает службы. Он принимает объект конфигурации службы и возвращает ModuleWithProviders.

Вот полный Док об этом.

Вызывать Root можно только в корневом модуле приложения AppModule. Вызов его в любом другом модуле, особенно в лениво загруженном модуле, противоречит цели и может вызвать ошибку во время выполнения.

Не забудьте импортировать результат; не добавляйте его в любой другой список @NgModule.

@NgModule({
    imports: [CommonModule],
    declarations: [SomeComponent],
    exports: [SomeComponent]
})
export class CoreModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: CoreModule,
            providers: [SomeService]
        };
    }
}

Тогда модуль импорта выглядит так:

@NgModule({
  imports: [
    /** other modules import **/
    CoreModule.forRoot(), // you can also pass some config here if needed
    routing
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Если вы хотите предотвратить повторный импорт CoreModule

Только корневой AppModule должен импортировать CoreModule. Плохие вещи случаются, если ленивый загруженный модуль импортирует его.

@NgModule({
  imports:      [ CommonModule ],
  declarations: [ SomeComponent ],
  exports:      [ SomeComponent ],
})
export class CoreModule {

  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }

  static forRoot(config: UserServiceConfig): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [SomeService]
    };
  }
}