service - Angular 6 共享模块和共享服务

Question

我的 Angular 6 应用程序出现问题，我正在将其分解成更小的模块。最初一切都被导入 AppModule，它工作得很好，但它是一个巨大的文件，测试过于复杂。

我遇到的问题基本上是为应用程序中的一些常用服务创建共享模块。 ng build 运行良好，因此它似乎构建正常，但是当我为应用程序提供服务时，我收到“ConfigService.foo()”不是函数的错误!我显然在将共享服务分组到共享模块中做错了什么。

这是一些代码:

共享模块

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable, OnInit, NgModule } from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import * as $ from 'jquery';

import { PipeModule } from './pipes/pipes.module';
import { ConfigService } from "./config.service";

@NgModule({
    imports: [
      PipeModule
    ],
    declarations: [
    ],
    exports: [
      PipeModule
    ],
    providers: [
      ConfigService
    ]
})

export class SharedModule {
  static forRoot() {
     return {
       ngModule: SharedModule,
       providers: [
         ConfigService, {
           provide: ConfigService,
           useValue: ConfigService
         },
       ],
     };
  }
}

配置服务

import {Injectable} from "@angular/core";
import {HttpClient, HttpHeaders, HttpParams, HttpResponse} from "@angular/common/http";
import {HttpObserve} from "@angular/common/http/src/client";

import {Observable, Subject, Observer, BehaviorSubject, throwError} from 'rxjs';
import {Config} from '../shared/config';
import { map, catchError} from 'rxjs/operators';
import * as _ from 'lodash';

@Injectable()
export class ConfigService {

  constructor(private httpClient: HttpClient, private config: Config) {
    this.config = new Config();
  }

  ngOnInit() {  }

  foo() {
    console.log("Hack the planet!!! (confgurably)");
  }

}

应用模块

import { BrowserModule } from '@angular/platform-browser';
import {APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule, PipeTransform} from '@angular/core';
import {HttpClient, HttpClientModule} from "@angular/common/http";
import {AppRoutingModule} from './app-routing.module';
import {FormsModule} from "@angular/forms";

import { AppComponent } from './app.component';
import { BannerComponent } from './banner/banner.component';
import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
import { SearchComponent } from './search/search.component';

import { SharedModule }        from './shared/shared.module';


@NgModule({
  declarations: [
    AppComponent,
    BannerComponent,
    BreadcrumbComponent,
    SearchComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    SharedModule.forRoot()
  ],
  providers: [
    HttpClient
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的共享模块和可注入(inject)服务做错了什么？作为引用，我使用的是 Angularv6。

Answer 1

我刚刚想通了。

事实证明，在模块中提供您自己的服务时，您不使用

{ provide: ConfigService, useValue: ConfigService },

相反，您只需在导出模块中的提供程序下列出服务，如下所示:

export class SharedModule {
  static forRoot() {
     return {
       ngModule: SharedModule,
       providers: [
         ConfigService
       ],
     };
  }
}

干杯!