angular5 ng 测试 - 来自自定义服务的 StaticInjectorError [英] angular5 ng test - StaticInjectorError from custom service
问题描述
由angular cli创建的项目
Project Created by angular cli
Angular CLI: 1.7.2
Node: 6.11.4
OS: win32 x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.7.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
并使用 ng 命令生成服务.
And generated service with ng command.
ng g service newService2
我尝试了 'ng test' 来测试我的代码,但出现如下错误.
and I tried 'ng test' to test my code, but I got error like below.
StaticInjectorError(Platform: core)[AppComponent ->新服务2服务]:NullInjectorError:NewService2Service 没有提供者!错误:StaticInjectorError(DynamicTestModule)[AppComponent -> NewService2Service]:在 _NullInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js._NullInjector.getnode_modules/@angular/core/esm5/core.js:1002:1)在 resolveToken node_modules/@angular/core/esm5/core.js:1300:1)
StaticInjectorError(Platform: core)[AppComponent -> NewService2Service]: NullInjectorError: No provider for NewService2Service! Error: StaticInjectorError(DynamicTestModule)[AppComponent -> NewService2Service]: at _NullInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js._NullInjector.get node_modules/@angular/core/esm5/core.js:1002:1) at resolveToken node_modules/@angular/core/esm5/core.js:1300:1)
这是我的代码.
app.module.ts
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewService2Service } from './svc2/new-service2.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [ NewService2Service],
bootstrap: [AppComponent]
})
svc2/new-service2.service.ts
svc2/new-service2.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class NewService2Service {
constructor() { }
getName(): String {
return 'service name';
}
}
svc2/new-service2.service.spec.ts
svc2/new-service2.service.spec.ts
import { TestBed, inject } from '@angular/core/testing';
import { NewService2Service } from './new-service2.service';
describe('NewService2Service', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [NewService2Service]
});
});
it('should be created', inject([NewService2Service], (service: NewService2Service) => {
expect(service).toBeTruthy();
}));
});
app.component.ts
app.component.ts
import { Component } from '@angular/core';
import { NewService2Service } from './svc2/new-service2.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: String = 'app';
constructor( private service2: NewService2Service) {
//this.title = service2.getName();
}
}
app.component.spec.ts
app.component.spec.ts
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).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!');
}));
});
推荐答案
在你的 AppComponent.spec.ts 中你必须提供你的服务:
In your AppComponent.spec.ts you must provide your service:
TestBed.configureTestingModule({
declarations: [
AppComponent
],
providers: [NewService2Service]
});
这篇关于angular5 ng 测试 - 来自自定义服务的 StaticInjectorError的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!