Angular 2, animation trigger has not been registered

Question

It's the first time I work with Angular 2 animation and I have a little problem with implementation. I used the Angular guide but I have the following error :

ERROR Error: The provided animation trigger "menubarState" has not been 
registered!
at AnimationTransitionNamespace._getTrigger (transition_animation_engine.js:239)
at AnimationTransitionNamespace.trigger (transition_animation_engine.js:262)
at TransitionAnimationEngine.trigger (transition_animation_engine.js:896)
at InjectableAnimationEngine.AnimationEngine.process (animation_engine_next.js:146)
at AnimationRenderer.setProperty (animation_renderer.js:500)
at DebugRenderer2.setProperty (services.js:1206)
at setElementProperty (element.js:386)
at checkAndUpdateElementValue (element.js:308)
at checkAndUpdateElementInline (element.js:243)
at checkAndUpdateNodeInline (view.js:468)

My component code:

import { Component } from '@angular/core';
import { trigger, state, transition, style, animate } from 
'@angular/animations';

@Component({
  selector: "rendez-vous",
  templateUrl: "./composants/rendezVous/rendezVous.html",
  styleUrls: ["./composants/rendezVous/rendezVous.css"],
  animations: [
    trigger("menubarState", [
    state('in', style({height: '*'})),
    transition('* => void', [
      style({height: '*'}),
    animate(250, style({height: 0}))
    ])
  ])]
})
export class rendezVousComposant {

etatAffichage : string = "off";

gestionAffichage () {
  this.etatAffichage = 'in';
}
}

My html code :

<div class="rendezVous">
<div (ngClick)="gestionAffichage()">Afficher</div>
<div [@menubarState]="etatAffichage">...</div>
</div>

My dependencies :

"dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.0",
    "systemjs": "^0.20.13",
    "zone.js": "^0.8.12"
    },
    "devDependencies": {
    "@types/core-js": "^0.9.41"
}

Thanks for your help

Answer 1

I too encountered with this problem and it was just a typo.

I declared the trigger with name as fade and used in template like face

export let fade = trigger('fade', [
    transition(':enter', [
        style({ opacity: 0 }),
        animate(2000)
    ])
])

// here it was the mistake
<div @face></div>

That's the reason I was getting this error.

Answer 2

The name used in your template must be the name defined as a string, not the property name or exported name.

So here I have a property fadeInOutAnimation but the trigger is actually called fadeAnimation.

So you must use [@fadeAnimation] in your template, and not [@fadeInOutAnimation]. It's probably a best practice for them to match as much as possible.