NullInjectorError: No provider for AnimationBuilder in Angular 6

Question

Hello I working with the Angular 6 And also with the material design

I have included all the dependency of the material and also of the animations as well

It's not giving error at time of the compilation but I get following error at time of browser rendering

I have imported all required dependencies

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

@DharmarajKavatagi when i try to import that it gives me error of not assignable — Nitin, Jul 26 '18 at 04:27

score 74 · Accepted Answer · edited Jul 26 '18 at 05:31

74

EDIT :

BROWSER_ANIMATIONS_PROVIDERS is provided within BrowserAnimationsModule, so you should be importing BrowserAnimationsModule in your module. This allows you to use AnimationBuilder in your component.

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

@NgModule({
  imports: [
    BrowserAnimationsModule
  ]
})

edited Jul 26 '18 at 05:31

Nitin

881
2
10
37

answered Jul 26 '18 at 04:14

Amit Chigadani

28,482
13
80
98

it gives error that types of AnimationBuilder are not assignable to providers – Nitin Jul 26 '18 at 04:23
Ok, Can you show your module file? Please add related code to your question. And you can take off the screen shot from your question. – Amit Chigadani Jul 26 '18 at 04:31
1

I am sure you are not importing `BrowserAnimationsModule`. Import that in your module. `import { BrowserAnimationsModule } from '@angular/platform-browser/animations';` – Amit Chigadani Jul 26 '18 at 04:36
oops I missed it that was the only problem Thanks for it you can keep this in your answer i will upvote it – Nitin Jul 26 '18 at 04:46
If you get this in a test, importing `NoopAnimationsModule` may be better: `import { NoopAnimationsModule } from '@angular/platform-browser/animations';` [Understand the difference](https://stackoverflow.com/questions/43362898/whats-the-difference-between-browseranimationsmodule-and-noopanimationsmodule) – Touré Holder Oct 08 '21 at 20:21

NullInjectorError: No provider for AnimationBuilder in Angular 6

1 Answers1