Угловые 6 общих модулей и сервисы обмена - PullRequest
Новая
       36

Угловые 6 общих модулей и сервисы обмена

0 голосов
/ 28 декабря 2018

У меня проблема с приложением Angular 6, которое я разбил на более мелкие модули.Первоначально все было импортировано в AppModule, и оно работало просто отлично, но это был гигантский файл, и тестирование было слишком сложным.

Проблема, с которой я столкнулся, заключается в создании общего модуля для нескольких часто используемых службчерез приложение. ng build работает нормально, поэтому кажется, что все в порядке, но когда я обслуживаю приложение, я получаю сообщение об ошибке, что ConfigService.foo () не является функцией!Очевидно, я делаю что-то не так, чтобы сгруппировать общие службы в общий модуль.

Вот код:

SharedModule 

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
         },
       ],
     };
  }
}

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

Может кто-нибудь, пожалуйста, помогите мне выяснить, что я делаю неправильно с моим Shared-модулем и вводимымСервисы?Для справки я использую Angularv6.

Спасибо за ваше время!

1 Ответ

0 голосов
/ 28 декабря 2018

Я только что понял.

Оказывается, когда вы предоставляете свои собственные услуги в модуле, вы не используете 

{ provide: ConfigService, useValue: ConfigService },

Вместо этого,вы просто перечислите услуги в списке поставщиков в экспортированном модуле, например: 

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

Cheers!

...