Cuando ejecuto Karma para probar mi aplicación Angular4, aparece este error Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. aunque ya importé el módulo en app.module.ts
// animation module import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ... @NgModule({ imports: [... BrowserAnimationsModule, ... ],y en mi componente :
import { Component, OnInit } from '@angular/core'; import { trigger, state, style, animate, transition } from '@angular/animations'; @Component({ selector: 'app-about', animations: [ trigger( 'enterAnimation', [ transition(':enter', [ style({ transform: 'translateX(100%)', opacity: 0 }), animate('500ms', style({ transform: 'translateX(0)', opacity: 1 })) ]), transition(':leave', [ style({ transform: 'translateX(0)', opacity: 1 }), animate('500ms', style({ transform: 'translateX(100%)', opacity: 0 })) ]) ] ), trigger( 'enterAnimationVetically', [ transition(':enter', [ style({ transform: 'translateY(100%)', opacity: 0 }), animate('500ms', style({ transform: 'translateY(0)', opacity: 1 })) ]), transition(':leave', [ style({ transform: 'translateY(0)', opacity: 1 }), animate('500ms', style({ transform: 'translateY(100%)', opacity: 0 })) ])] ) ], ... La aplicación funciona perfectamente con ng serve todavía, recibí este error con karma.
Futuros lectores: también pueden obtener este error exacto, cuando olvidan colocar
animations: [ <yourAnimationMethod()> ] en su archivo @Component ts.
eso es si está usando [@yourAnimationMethod] en la plantilla HTML, es decir, animaciones angulares .
Encontré la solución. Solo necesitaba importar en app.component.spec.ts la misma importación
// animation module import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ... @NgModule({ imports: [... BrowserAnimationsModule, ... ],Para mi aplicación Angular 6, resolví el problema agregando lo siguiente a mi archivo .spec.ts de componente:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; A continuación, agregue BrowserAnimationsModule a las importaciones de TestBed.configureTestingModule en el mismo archivo de componente .spec.ts
beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ LinkedSitesComponent ], imports: [ BrowserAnimationsModule ], }) .compileComponents(); }));