2
votes

Le déclencheur d'animation angulaire 7 provoque une erreur de console

J'essaye de mettre en place une animation fadeInOut sur un composant. Mon module d'application importe BrowserAnimationsModule.

J'ai créé une animation et un déclencheur dans un fichier séparé:

   <app-global-alert [@fadeInOut]>Hello world</app-global-alert>

Ensuite, j'ai créé un composant et vérifié que le composant lui-même fonctionne:

<div>
lots of html
</div>
   <app-global-alert>Hello world</app-global-alert>

Notez que je stocke l'état indiquant si cette alerte doit apparaître dans un fichier globals.ts, bien que ce ne soit pas lié:

import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  hasGlobalAlert = true;
}

J'utilise donc le composant dans le html d'un autre composant comme ceci:

import { Component, OnInit } from '@angular/core';
import { Globals } from '@app/globals';
import { fadeInOut } from '@app/animations';

@Component({
  selector: 'app-global-alert',
  template: `
    <div class="global-alert" *ngIf="globalAlert">
      <div class="global-alert-message"><ng-content></ng-content></div>
      <div class="close" (click)="closeGlobalAlert()"></div>
    </div>
  `,
  styles: [],
  animations: [fadeInOut]
})
export class GlobalAlertComponent implements OnInit {
  private globalAlert: boolean;

  constructor(private globals: Globals) {
    this.globalAlert = globals.hasGlobalAlert;
  }

  ngOnInit() {}

  closeGlobalAlert() {
    this.globals.hasGlobalAlert = false;
    this.globalAlert = false;
  }
}

Cela fonctionne, l'alerte est rejetée lorsque vous cliquez sur le bouton de fermeture bouton, tout fonctionne comme prévu. Cependant, lorsque j'essaye d'y ajouter mon déclencheur

import { animate, style, animation, trigger, useAnimation, transition } from '@angular/animations';

export const fadeIn = animation([style({ opacity: 0 }), animate('500ms', style({ opacity: 1 }))]);
export const fadeOut = animation(animate('500ms', style({ opacity: 0 })));

export const fadeInOut = trigger('fadeInOut', [
  transition('void => *', useAnimation(fadeIn)),
  transition('* => void', useAnimation(fadeOut))
]);

j'obtiens une erreur de console Erreur: la propriété synthétique @fadeInOut a été trouvée. Veuillez inclure "BrowserAnimationsModule" ou "NoopAnimationsModule" dans votre application.

J'ai googlé ceci, mais AFAICT j'ai couvert tous les pièges dans la plupart des réponses: j'ai inclus la déclaration animations dans le composant, etc.

Qu'est-ce que j'ai manqué?

javascript angular animation angular-animations

0 commentaires

3 Réponses :

-1
votes

J'obtiens une erreur de console Erreur: J'ai trouvé la propriété synthétique @fadeInOut. Veuillez inclure "BrowserAnimationsModule" ou "NoopAnimationsModule" dans votre application.

Cette erreur se produit lorsque vous n'avez pas importé le module "BrowserAnimationsModule" ou "NoopAnimationsModule" dans votre composant contenant Module. Si votre composant d'animation est dans le module App, vérifiez si app.module contient les éléments suivants dans le @NgModule -

@NgModule({  
  imports: [
    BrowserModule,
    BrowserAnimationsModule //or NoopAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4 commentaires

Vous souhaitez simplement confirmer si votre GlobalAlertComponent fait partie d'AppModule, pas d'un autre module de fonctionnalités? S'il fait partie du module de fonctionnalités, alors le module de fonctionnalités respectif doit avoir BrowserAnimationsModule importé.

GlobalAlertComponent fait partie de SharedModule . Si j'essaye d'importer BrowserAnimationsModule dans SharedModule , j'obtiens une erreur différente Erreur: Uncaught (promis): Erreur: BrowserModule a déjà été chargé. . Si j'essaie de le supprimer d'AppModule, j'obtiens toujours l'erreur.

Veuillez essayer de réexporter BroswerAnimationModule dans le module partagé, c'est-à-dire exporter: BrowserAnimationModule et supprimer la référence du module App.

Voir la réponse acceptée: cela n'a rien à voir avec le module. Je pense que angular devrait générer une erreur plus utile ici.

-2
votes

Vous devez ajouter BrowserAnimationsModule Dans le fichier app-module.ts de la section import.

import: [
BrowserAnimationsModule
]

J'espère que cela vous aidera. Bon codage :)

0 commentaires

0
votes

Comme indiqué dans les documents , l'animation doit être ajoutée à la propriété de métadonnées du composant. Il existe une telle propriété dans GlobalAlertComponent ici:

<div>
  lots of html
</div>
  <app-global-alert [@fadeInOut]>Hello world</app-global-alert>

Cela permet d'utiliser une animation sur n'importe quel élément à l'intérieur de la partie html de ce composant. Mais l'animation @fadeInOut a été utilisée dans le html d'un autre composant ici:

@Component({
  animations: [fadeInOut],
  ...
})
export class GlobalAlertComponent implements OnInit {
...

Assurez-vous que ce composant a une importation et une animation propriété dans ses métadonnées.

2 commentaires

Cela a corrigé l'erreur, bien que l'animation réelle ne fonctionne pas encore. Je pense que c'est parce que mon ngIf est à l'intérieur du modèle du composant et non sur le composant lui-même.

Oui, c'était ça. J'ai tout déplacé dans le composant d'alerte globale, y compris le déclencheur. Fonctionne maintenant. Merci @vadi