2016-10-05 74 views
3

编辑:很多这个问题被删除,因为它变得不太相关,因为我发现更多关于这个问题。错误:没有ShopService的提供商!在另一个服务中使用服务

我在控制台中此错误:

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; 
    } 
} 
+0

也许你可能会清除你的'node_modul es'文件夹并重新开始。 –

+1

@GünterZöchbauer谢谢,我做到了,并在我的问题中发布了结果。 – BeniaminoBaggins

+0

你可以发布你的find-page.component吗? – Outlooker

回答

1

我有类似的错误与你

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

,我发现有提供NgModule 我服务的解决方案看我的答案here

我希望能帮助你。

+0

对于我来说,'@ Injectable'和'@ Inject'下有一个红色的错误行。 – BeniaminoBaggins

+0

是从'@ angular2/core'导入的吗?你可以寄给我一些暴力或抽样吗? –

+0

是的。奇怪的是,红色的错误线现在已经消失了。我会再次尝试你的答案。 – BeniaminoBaggins

0

我有类似的问题 -
我的“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

相关问题