NullInjectorError：Angular 6 中没有 AnimationBuilder 的提供者答案

【问题标题】：NullInjectorError: No provider for AnimationBuilder in Angular 6NullInjectorError：Angular 6 中没有 AnimationBuilder 的提供者
【发布时间】：2019-01-02 23:31:21
【问题描述】：

您好，我正在使用 Angular 6 以及材料设计

我已经包含了材质和动画的所有依赖项

编译时没有报错，但浏览器渲染时出现以下错误

我已导入所有必需的依赖项

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);
    }
} 
}

【问题讨论】：

App.Module.ts中的动画模块你导入了吗
@DharmarajKavatagi 当我尝试导入时，它给了我不可分配的错误
@AmitChigadani 错误粘贴
你导入BrowserAnimationsModule了吗？

标签： angular angular6 angular-animations

【解决方案1】：

编辑：

BROWSER_ANIMATIONS_PROVIDERS 在BrowserAnimationsModule 中提供，因此您应该在模块中导入BrowserAnimationsModule。这允许您在组件中使用AnimationBuilder。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule
  ]
})

【讨论】：

它给出了 AnimationBuilder 类型不能分配给提供者的错误
好的，你能展示你的模块文件吗？请在您的问题中添加相关代码。你可以从你的问题中删除屏幕截图。
我确定您没有导入BrowserAnimationsModule。将其导入您的模块中。 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
哎呀我错过了这是唯一的问题谢谢你可以在你的答案中保留这个我会支持它
如果你在测试中得到这个，导入NoopAnimationsModule可能会更好：import { NoopAnimationsModule } from '@angular/platform-browser/animations';Understand the difference