NullInjectorError: No provider for AnimationBuilder in Angular 6
NullInjectorError: No provider for AnimationBuilder in Angular 6
您好,我使用 Angular 6 并且还使用 material 设计
我已经包含了 material 以及动画
的所有依赖项
它在编译时没有给出错误,但在浏览器呈现时出现以下错误
我已经导入了所有需要的依赖项
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
AppComponent.html:40 ERROR Error: taticInjectorError(AppBrowserModule)[FuseSidebarComponent -> AnimationBuilder]:
StaticInjectorError(Platform: core)[FuseSidebarComponent -> AnimationBuilder]:
NullInjectorError: No provider for AnimationBuilder!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1034)
at resolveToken (core.js:1271)
at tryResolveToken (core.js:1216)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
at resolveToken (core.js:1271)
at tryResolveToken (core.js:1216)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
at resolveNgModuleDep (core.js:8161)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:8849)
at resolveDep (core.js:9214)
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class SampleClass
{
player: AnimationPlayer;
constructor(
private _animationBuilder: AnimationBuilder,
@Inject(DOCUMENT) private _document: any,
)
{
this._init();
}
private _init(): void
{
this.testScreen = this._document.body.querySelector('#test-screen');
if ( this.testScreen )
{
this.player =
this._animationBuilder
.build([
style({
opacity: '0',
zIndex : '99999'
}),
animate('400ms ease', style({opacity: '1'}))
]).create(this.testScreen);
setTimeout(() => {
this.player.play();
}, 0);
}
}
}
编辑:
BROWSER_ANIMATIONS_PROVIDERS
在 BrowserAnimationsModule 中提供,因此您应该在模块中导入 BrowserAnimationsModule
。这允许您在组件中使用 AnimationBuilder
。
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule
]
})
您好,我使用 Angular 6 并且还使用 material 设计
我已经包含了 material 以及动画
的所有依赖项它在编译时没有给出错误,但在浏览器呈现时出现以下错误
我已经导入了所有需要的依赖项
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
AppComponent.html:40 ERROR Error: taticInjectorError(AppBrowserModule)[FuseSidebarComponent -> AnimationBuilder]:
StaticInjectorError(Platform: core)[FuseSidebarComponent -> AnimationBuilder]:
NullInjectorError: No provider for AnimationBuilder!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1034)
at resolveToken (core.js:1271)
at tryResolveToken (core.js:1216)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
at resolveToken (core.js:1271)
at tryResolveToken (core.js:1216)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
at resolveNgModuleDep (core.js:8161)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:8849)
at resolveDep (core.js:9214)
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class SampleClass
{
player: AnimationPlayer;
constructor(
private _animationBuilder: AnimationBuilder,
@Inject(DOCUMENT) private _document: any,
)
{
this._init();
}
private _init(): void
{
this.testScreen = this._document.body.querySelector('#test-screen');
if ( this.testScreen )
{
this.player =
this._animationBuilder
.build([
style({
opacity: '0',
zIndex : '99999'
}),
animate('400ms ease', style({opacity: '1'}))
]).create(this.testScreen);
setTimeout(() => {
this.player.play();
}, 0);
}
}
}
编辑:
BROWSER_ANIMATIONS_PROVIDERS
在 BrowserAnimationsModule 中提供,因此您应该在模块中导入 BrowserAnimationsModule
。这允许您在组件中使用 AnimationBuilder
。
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule
]
})