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

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

Answer 1

我刚刚想通了。

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

{ provide: ConfigService, useValue: ConfigService },

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

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

干杯!