エラー：ShopServiceのプロバイダがありません！別のサービスでサービスを使用する

Question

EDIT：この質問の多くは、問題の詳細を知るほど関連性がなくなり、削除されました。

私は、コンソールにこのエラーが表示されます。

Error in app/find-page/find-page.component.html:1:3 caused by: No provider for ShopService!

私はShopServiceを使用する場所は、別のサービスでResultServiceと呼ばれます。 ResultServiceでShopServiceのプロバイダを宣言するにはどうすればよいですか？ ShopServiceをapp（appModule）内の唯一のモジュールのプロバイダに追加すると、ShopServiceのプロバイダがないと言います。

resultServiceがappModuleで宣言されていないため、appModuleのプロバイダがResultServiceで機能しないためですか？どこでAppModuleで宣言しますか？

find:21 Error: (SystemJS) Unexpected value 'ResultService' declared by the module 'AppModule'(…)

コード：

ResultService：

import { Injectable } from '@angular/core'; 
import { Result } from '../result'; 
import { RESULTS } from '../mock-results'; 
import { ShopService } from './shop.service'; 

@Injectable() 
export class ResultService { 

constructor(private shopService: ShopService) {} 

    getResults(): Result[] { 
    RESULTS.forEach(result => { 
     result.nearbyShops = this.shopService.getShops(); 
    }); 
    return RESULTS; 
    } 
} 

ShopService：私は私が得たappModuleの宣言にこれを追加しましたので

import { Shop } from '../result'; 
import { SHOPS } from '../mock-shops'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class ShopService { 
    getShops(): Shop[] { 
    return SHOPS; 
    } 
} 

Answer 1

を私はあなたと同様のエラーが発生しました

Error: Can't resolve all parameters for services: (?, ?, ?)

と私はNgModule に私のサービスを提供して解決策を見つけたが、私の答えは、私はあなたを助けるために願っていますhere

見えます。

Answer 2

私は同様の問題がありました。
私の "MenuService"は "SecurityService"に依存しています。
AppModuleで両方のサービスを提供しましたが、MenuServiceが作成されるとすぐに「SecurityServiceのプロバイダがありません」というエラーが表示されました。

私はコンソールにログアウトできるので、SecurityServiceが存在することがわかります。

注：これらのサービス定義は、他のプロジェクトで使用したいので、外部のnpmパッケージからインポートされます。したがって、根本原因に影響を与える可能性があります。

私の唯一の解決策はMenuServiceFactoryを作成してMenuServiceを提供し、SecurityServiceをコンストラクタに渡すことでした。

例のテストケース -

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 

import { HeaderComponent } from './header.component'; 
import { provideRoutes } from '@angular/router'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { SecurityModule, SecurityService } from '@savantly/ngx-security'; 
import { MenuModule, MenuService } from '@savantly/ngx-menu'; 


const menuServiceFactory = (_securityService: SecurityService) => { 
    return new MenuService(_securityService); 
}; 

describe('HeaderComponent',() => { 
    let component: HeaderComponent; 
    let fixture: ComponentFixture<HeaderComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ HeaderComponent ], 
     imports: [RouterTestingModule, SecurityModule.forRoot(), MenuModule], 
     providers: [ 
     { 
      provide: MenuService, 
      useFactory: menuServiceFactory, 
      deps: [SecurityService] 
     }, 
     provideRoutes([]) 
     ] 
    }) 
    .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(HeaderComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 
}); 

あなたは、消費者はそれが簡単に持っているしたい場合は、元のモジュールには、この工場を移動することができます -

import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { MenuComponent } from './menu.component'; 
import { MenuService } from './menu.service'; 
import { MdMenuModule, MdToolbarModule, MdButtonModule } from '@angular/material'; 
import { FlexLayoutModule } from '@angular/flex-layout'; 
import { SecurityModule, SecurityService } from '@savantly/ngx-security'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    MdMenuModule, MdToolbarModule, MdButtonModule, FlexLayoutModule, SecurityModule 
    ], 
    exports: [ 
    CommonModule, 
    MdMenuModule, MdToolbarModule, MdButtonModule, FlexLayoutModule, 
    SecurityModule, 
    MenuComponent], 
    declarations: [MenuComponent], 
    providers: [] 
}) 
export class MenuModule { 

    static forRoot({securityService = SecurityService}: {securityService?: SecurityService} = {}): ModuleWithProviders { 
    return { 
     ngModule: MenuModule, 
     providers: [{ 
      provide: MenuService, 
      useFactory: menuServiceFactory, 
      deps: [securityService] 
      }] 
     }; 
    } 

    constructor (@Optional() @SkipSelf() parentModule: MenuModule) { 
    if (parentModule) { 
     throw new Error(
     'MenuModule is already loaded. Import it in the AppModule only'); 
    } 
    } 
} 

export function menuServiceFactory(_securityService: SecurityService): MenuService { 
    return new MenuService(_securityService); 
} 

参照 -
https://angular.io/guide/dependency-injection#factory-providers
https://github.com/savantly-net/sprout-platform

を