Залить сервис в провайдера Angular 5?

Question

У меня простой пользовательский сервис на Angular 5:

@Injectable()
export class RequestsMethods {
  constructor(private http: HttpService) {
  }

}

Я пытался зарегистрировать это как провайдер в @NgModule ({}):

providers: [
    RequestsMethods,
    FormRegister,
    ErrorWatcher,
    {
      provide: HttpService,
      useFactory: httpFactoryService,
      deps: [Router, XHRBackend, RequestOptions]
    }
  ],

Тогда в компоненте я использовал:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [RequestsMethods]

});

И конструктор компонента:

constructor(private requestMethods: RequestsMethods){}

После компиляции выдает ошибку:

Ошибка: StaticInjectorError (AppModule) [HttpService -> XHRBackend]:
StaticInjectorError (Платформа: ядро) [HttpService -> XHRBackend]: NullInjectorError: Нет провайдера для XHRBackend! в NullInjector.push ../ node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js: 1060) at resolToken (core.js: 1298) в tryResolveToken (core.js: 1242) at StaticInjector.push ../ node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js: 1139) at resolToken (core.js: 1298) в tryResolveToken (core.js: 1242) at StaticInjector.push ../ node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js: 1139) at resolNgModuleDep (core.js: 8374) на _callFactory (core.js: 8442) в _createProviderInstance (core.js: 8394)

Если удалить конструктор из RequestsMethods и зарегистрировать RequestsMethods в провайдерах, он работает нормально

Answer 1

1) В вашем app.module.ts,

-- import and register RequestsMethods under providers.
-- import and register BrowserModule and HttpClientModule under imports.

@NgModule({
 imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  providers: [RequestsMethods],
})

2) Импортируйте и внедрите службу RequestMethods в нужный компонент.

конструктор (частный requestMethods: RequestsMethods) {}

В вашем случае не «предоставлять» услугу RequestMethods на уровне компонента.

т.е.:

В вашем компоненте достаточно следующей строки

constructor(private requestMethods: RequestsMethods){}

Удалите это -> providers: [RequestsMethods] в аннотации @Component

Пояснение:

Поставщик позволяет системе внедрения зависимостей «узнать, как получить значение для зависимости».

Когда вы добавляете поставщика услуг в app.module.ts (корневой модуль), он становится доступным во всем приложении.

Вы всегда должны пытаться предоставить желаемую услугу в корневом модуле, если только вы не хотите, чтобы эта служба была доступна, только если импортируется определенный @NgModule.