錯誤：沒有ShopService的提供商！在另一個服務中使用服務

Question

編輯：很多這個問題被刪除，因爲它變得不太相關，因爲我發現更多關於這個問題。

我在控制檯中此錯誤：

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

，我使用ShopService是叫ResultService其他服務的地方。如何在ResultService中聲明ShopService的提供者？因爲當我將ShopService添加到應用程序中唯一模塊的提供者（appModule）時，它說沒有ShopService的提供者。

這是因爲ResultService未在appModule中聲明，導致appModule中的提供者不能用於ResultService嗎？我在哪裏可以在AppModule中聲明它？因爲我把它添加到的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：

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