Angular NullInjectorError:AnimationBuilder没有提供程序!茉莉因果报应试验失败
我正在研究angular 11。我对茉莉花/业力测试非常陌生。我已经为我的应用程序创建了启动屏幕。但在运行ng测试时,我发现appComponent的错误是Angular NullInjectorError:AnimationBuilder没有提供程序!茉莉因果报应试验失败,angular,typescript,unit-testing,karma-jasmine,Angular,Typescript,Unit Testing,Karma Jasmine,我正在研究angular 11。我对茉莉花/业力测试非常陌生。我已经为我的应用程序创建了启动屏幕。但在运行ng测试时,我发现appComponent的错误是 Chrome 90.0.4430.212 (Windows 10) AppComponent should create the app appComponent FAILED NullInjectorError: R3InjectorError(DynamicTestModule)[SplashScreenService ->
Chrome 90.0.4430.212 (Windows 10) AppComponent should create the app appComponent FAILED
NullInjectorError: R3InjectorError(DynamicTestModule)[SplashScreenService -> AnimationBuilder -> AnimationBuilder]:
NullInjectorError: No provider for AnimationBuilder!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'SplashScreenService', 'AnimationBuilder', 'AnimationBuilder' ] })
NullInjectorError: R3InjectorError(DynamicTestModule)[SplashScreenService -> AnimationBuilder -> AnimationBuilder]:
NullInjectorError: No provider for AnimationBuilder!
at NullInjector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11116:1)
at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11283:1)
at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11283:1)
at injectInjectorOnly (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4776:1)
at ɵɵinject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4780:1)
at Object.SplashScreenService_Factory [as factory] (ng:///SplashScreenService/ɵfac.js:4:47)
at R3Injector.hydrate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11452:1)
at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11272:1)
at NgModuleRef$1.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25337:1)
at Object.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:25051:1)
应用程序组件.ts
import { Component } from '@angular/core';
import { SplashScreenService } from './main/services/splash-screen.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private splashScreenService: SplashScreenService) { }
}
it('should create the app appComponent', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, take } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SplashScreenService {
splashScreenEl: any;
player: AnimationPlayer;
constructor(private animationBuilder: AnimationBuilder,
@Inject(DOCUMENT) private document: any,
private router: Router) {
this.init();
}
init() {
// Get the splash screen element
this.splashScreenEl = this.document.body.querySelector('#splash-screen');
// If the splash screen element exists...
if (this.splashScreenEl) {
// Hide it on the first NavigationEnd event
this.router.events.pipe(filter((event => event instanceof NavigationEnd)), take(1)).subscribe(() => {
setTimeout(() => {
this.hide();
});
});
}
}
hide() {
this.player = this.animationBuilder.build([
style({ opacity: '1' }),
animate('400ms ease', style({
opacity: '0',
zIndex: '-10'
}))
]).create(this.splashScreenEl);
setTimeout(() => {
this.player.play();
}, 0);
}
}
import { TestBed } from '@angular/core/testing';
import { SplashScreenService } from './splash-screen.service';
describe('SplashScreenService', () => {
let service: SplashScreenService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(SplashScreenService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
应用组件规范ts
import { Component } from '@angular/core';
import { SplashScreenService } from './main/services/splash-screen.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private splashScreenService: SplashScreenService) { }
}
it('should create the app appComponent', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, take } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SplashScreenService {
splashScreenEl: any;
player: AnimationPlayer;
constructor(private animationBuilder: AnimationBuilder,
@Inject(DOCUMENT) private document: any,
private router: Router) {
this.init();
}
init() {
// Get the splash screen element
this.splashScreenEl = this.document.body.querySelector('#splash-screen');
// If the splash screen element exists...
if (this.splashScreenEl) {
// Hide it on the first NavigationEnd event
this.router.events.pipe(filter((event => event instanceof NavigationEnd)), take(1)).subscribe(() => {
setTimeout(() => {
this.hide();
});
});
}
}
hide() {
this.player = this.animationBuilder.build([
style({ opacity: '1' }),
animate('400ms ease', style({
opacity: '0',
zIndex: '-10'
}))
]).create(this.splashScreenEl);
setTimeout(() => {
this.player.play();
}, 0);
}
}
import { TestBed } from '@angular/core/testing';
import { SplashScreenService } from './splash-screen.service';
describe('SplashScreenService', () => {
let service: SplashScreenService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(SplashScreenService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
启动屏幕.service.ts
import { Component } from '@angular/core';
import { SplashScreenService } from './main/services/splash-screen.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private splashScreenService: SplashScreenService) { }
}
it('should create the app appComponent', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, take } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SplashScreenService {
splashScreenEl: any;
player: AnimationPlayer;
constructor(private animationBuilder: AnimationBuilder,
@Inject(DOCUMENT) private document: any,
private router: Router) {
this.init();
}
init() {
// Get the splash screen element
this.splashScreenEl = this.document.body.querySelector('#splash-screen');
// If the splash screen element exists...
if (this.splashScreenEl) {
// Hide it on the first NavigationEnd event
this.router.events.pipe(filter((event => event instanceof NavigationEnd)), take(1)).subscribe(() => {
setTimeout(() => {
this.hide();
});
});
}
}
hide() {
this.player = this.animationBuilder.build([
style({ opacity: '1' }),
animate('400ms ease', style({
opacity: '0',
zIndex: '-10'
}))
]).create(this.splashScreenEl);
setTimeout(() => {
this.player.play();
}, 0);
}
}
import { TestBed } from '@angular/core/testing';
import { SplashScreenService } from './splash-screen.service';
describe('SplashScreenService', () => {
let service: SplashScreenService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(SplashScreenService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
启动屏幕。服务。规范ts
import { Component } from '@angular/core';
import { SplashScreenService } from './main/services/splash-screen.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private splashScreenService: SplashScreenService) { }
}
it('should create the app appComponent', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, take } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SplashScreenService {
splashScreenEl: any;
player: AnimationPlayer;
constructor(private animationBuilder: AnimationBuilder,
@Inject(DOCUMENT) private document: any,
private router: Router) {
this.init();
}
init() {
// Get the splash screen element
this.splashScreenEl = this.document.body.querySelector('#splash-screen');
// If the splash screen element exists...
if (this.splashScreenEl) {
// Hide it on the first NavigationEnd event
this.router.events.pipe(filter((event => event instanceof NavigationEnd)), take(1)).subscribe(() => {
setTimeout(() => {
this.hide();
});
});
}
}
hide() {
this.player = this.animationBuilder.build([
style({ opacity: '1' }),
animate('400ms ease', style({
opacity: '0',
zIndex: '-10'
}))
]).create(this.splashScreenEl);
setTimeout(() => {
this.player.play();
}, 0);
}
}
import { TestBed } from '@angular/core/testing';
import { SplashScreenService } from './splash-screen.service';
describe('SplashScreenService', () => {
let service: SplashScreenService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(SplashScreenService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
我试图在测试床上注入AnimationBuilder,但没有成功。如何删除此错误?我将存根
SplashScreenService
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [AppComponent],
// add this line. We are saying when you want SplashScreenService, you get {}
providers: [{ provide: SplashScreenService, useValue: {} }],
}).compileComponents();
}));
it('should create the app appComponent', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});