Angular 6 共享模块和共享服务答案

【问题标题】：Angular 6 Shared Modules and Sharing ServicesAngular 6 共享模块和共享服务
【发布时间】：2021-01-12 05:22:00
【问题描述】：

我的 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)");
  }

}

AppModule

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。

【问题讨论】：

标签： service dependency-injection module angular6

【解决方案1】：

我刚刚想通了。

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

{ provide: ConfigService, useValue: ConfigService },

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

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

干杯！

【讨论】：