No provider for AngularFirestore
我正在尝试使用Karma和Jasmine来测试使用Firestore的Angular5。 但是,当我执行" ng测试"时,出现错误消息" NullInjectorError:AngularFirestore / AngularFireAuth / AuthService没有提供者!"。 在NullInjectorError上的帖子:AngularFirestore的没有提供程序之后,我向app.module.ts中的提供程序添加了AngularFirestore,AngularFireAuth和AuthService,但这并不能解决问题。
app.module.ts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AuthService} from './core/auth.service'; // Routing and routes import import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; // Authentication Module import { CoreModule } from './core/core.module'; // Firebase imports import { environment } from '../environments/environment'; import { AngularFireModule } from 'angularfire2'; import { AngularFirestoreModule } from 'angularfire2/firestore'; import { AngularFireAuthModule } from 'angularfire2/auth'; import { AngularFireAuth } from 'angularfire2/auth'; import { AngularFireStorageModule } from 'angularfire2/storage'; import { UserProfileComponent } from './user-profile/user-profile.component'; import { ProjectsComponent } from './projects/projects.component'; import { AngularFirestore } from 'angularfire2/firestore'; @NgModule({ declarations: [ AppComponent, UserProfileComponent, ProjectsComponent ], imports: [ BrowserModule, AppRoutingModule, AngularFireModule.initializeApp(environment.firebase,"life-planner"), AngularFirestoreModule, AngularFireAuthModule, AngularFireStorageModule, FormsModule, CoreModule, AuthService, AngularFirestore, AngularFireAuth ], providers: [ AngularFirestore, AuthService, AngularFireAuth, ], bootstrap: [AppComponent] }) export class AppModule { } |
tsconfig.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | { "compileOnSave": false, "compilerOptions": { "paths": { "@angular/*": [ "../node_modules/@angular/*" ] }, "outDir":"./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution":"node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target":"es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } } |
app.component.spec.ts(测试代码):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; import { RouterTestingModule } from '@angular/router/testing'; import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore'; import { NgModule } from '@angular/core'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], imports: [ RouterTestingModule ] }).compileComponents(); })); it('should create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); it(`should have as title 'app'`, async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('app'); })); it('should render title in a h1 tag', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); })); }); |
感谢您的任何帮助,在此先感谢。
服务AngularFirestore依赖于AngularFireModule的初始化以及AngularFirestoreModule的导入,而您已为实际代码完成了此操作。
对于测试,您没有该设置。 从理论上讲,您不应该从测试中调用实际的Firestore数据库,这是正确的。 因此,解决方案是您需要对服务进行存根。
1 2 3 4 5 6 7 | const FirestoreStub = { collection: (name: string) => ({ doc: (_id: string) => ({ valueChanges: () => new BehaviorSubject({ foo: 'bar' }), set: (_d: any) => new Promise((resolve, _reject) => resolve()), }), }), |
};
添加您正在使用的任何方法,此示例未列出所有可用的方法。
然后提供该存根:
1 2 3 4 5 | TestBed.configureTestingModule({ providers: [ { provide: AngularFirestore, useValue: FirestoreStub }, ], }); |
归功于@ksaifullah