web-dev-qa-db-fra.com

NullInjectorError: Aucun fournisseur pour AnimationBuilder dans Angular 6

Bonjour je travaille avec le Angular 6 Et aussi avec la conception matérielle

J'ai inclus toute la dépendance du matériel et aussi des animations

Cela ne donne pas d'erreur au moment de la compilation, mais j'obtiens l'erreur suivante au moment du rendu du navigateur enter image description here

J'ai importé toutes les dépendances requises

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);
    }
} 
}
angularangular6angular-animations
7
Nitin

ÉDITER :

BROWSER_ANIMATIONS_PROVIDERS est fourni dans BrowserAnimationsModule , vous devez donc importer BrowserAnimationsModule dans votre module. Cela vous permet d'utiliser AnimationBuilder dans votre composant.

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

@NgModule({
  imports: [
    BrowserAnimationsModule
  ]
})
17
Amit Chigadani