Question

我有两个服务：API和Cfg。 API使用json API，而Cfg提供诸如url，api key等配置。 API接收注入的Cfg实例，组件接收注入的API实例。

这是它的样子：

    import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { TranslateService } from '@ngx-translate/core';
import { EventEmitter } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import {
    Validators,
    FormBuilder
} from '@angular/forms';
import { Injectable } from '@angular/core';


@Injectable()
export class CfgService {

    constructor(private baseUrl: string, private assetsUrl: string) { }

    public getAPIUrl(): string {
        return this.baseUrl;
    }

    public getAssetsUrl(): string {
        return this.assetsUrl;
    }
}

@Injectable()
export class APIService {
    constructor(
        public http: Http,
        public config: CfgService) {
    }
}

export function configurationProvider(
    baseUrl: string = "https://xxx.xxx/api/",
    assetsUrl: string = "assets"): CfgService {

    return new CfgService(baseUrl, assetsUrl);
}

@Component({
    template: ''
})
export class MyComponent {

    constructor(
        protected translate: TranslateService,
        private api: APIService,
        private formBuilder: FormBuilder
    ) {

    }
}


describe('bob', () => {
    let comp: MyComponent;
    let fixture: ComponentFixture<MyComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            providers: [
                { provide: CfgService, useValue: configurationProvider("http://192.168.0.112:8282/api/") },
                APIService
            ],
            imports: [
                FormsModule,
                HttpModule
            ]
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(MyComponent);
            comp = fixture.componentInstance;
        });;
    }));

    it('should work', async(() => {

        expect(true).toEqual(true);
    }));

});

执行时，它失败并显示：

 bob
    ✖ should work
PhantomJS 2.1.1 (Linux 0.0.0) bob should work FAILED
        ZoneAwareError@webpack:///~/zone.js/dist/zone.js:923:0 <- config/spec-bundle.js:71103:28
        invokeTask@webpack:///~/zone.js/dist/zone.js:398:0 <- config/spec-bundle.js:70578:36
        onInvokeTask@webpack:///~/zone.js/dist/proxy.js:103:0 <- config/spec-bundle.js:70100:49
        invokeTask@webpack:///~/zone.js/dist/zone.js:397:0 <- config/spec-bundle.js:70577:48
        runTask@webpack:///~/zone.js/dist/zone.js:165:0 <- config/spec-bundle.js:70345:57
        drainMicroTaskQueue@webpack:///~/zone.js/dist/zone.js:593:0 <- config/spec-bundle.js:70773:42
        invoke@webpack:///~/zone.js/dist/zone.js:464:0 <- config/spec-bundle.js:70644:44
        timer@webpack:///~/zone.js/dist/zone.js:1540:0 <- config/spec-bundle.js:71720:34
        resolvePromise@webpack:///~/zone.js/dist/zone.js:712:0 <- config/spec-bundle.js:70892:40
        webpack:///~/zone.js/dist/zone.js:763:0 <- config/spec-bundle.js:70943:31

有什么想法吗？感谢。

Answer 1

<强>更新

FormsModule不包含FormBuilder提供商。导入ReactiveFormsModule而不是

旧版本：

在CfgService

之前移动APIService

@Injectable()
export class CfgService {

  constructor(private baseUrl: string,private assetsUrl: string) {}

  public getAPIUrl(): string {
    return this.baseUrl;
  }

  public getAssetsUrl(): string {
    return this.assetsUrl;
  }
}
@Injectable()
export class APIService {
  constructor(
    public http: Http,
    public config: CfgService) {
  }
}

或使用forwardRef之类的

import { forwardRef } from '@angular/core';

@Injectable()
export class APIService {
  constructor(
    public http: Http, 
    @Inject(forwardRef(() => CfgService) public config: CfgService) {
  }
}

Angular 2+：在Tesbed中注入真实的http

1 个答案: