javascript - tutorial - Encontré la propiedad sintética @enterAnimation. Incluya ya sea "BrowserAnimationsModule" o "NoopAnimationsModule" en su aplicación. Angular4

unit test angular 5

Question

Cuando ejecuto Karma para probar mi aplicación Angular4, recibo este error. Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 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 se ejecuta perfectamente con ng serve embargo, recibí este error con karma.

Answer 1

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,
...
],

Answer 2

Futuros lectores: también puede obtener este error exacto, cuando se olvida de colocar

animations: [ <yourAnimationMethod()> ]

en su archivo @Component ts.

es decir, si está utilizando [@yourAnimationMethod] en la plantilla HTML.

Answer 3

Para angular 7 y la versión anterior, solo necesita agregar esta línea en su archivo app.module.ts, y recuerde colocarla en los módulos de matriz de importación también en el mismo archivo:

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

Answer 4

Para mi aplicación Angular 6, resolví el problema agregando lo siguiente a mi archivo componente .spec.ts :

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

Luego agregue BrowserAnimationsModule a las importaciones del TestBed.configureTestingModule en el mismo componente .spec.ts file

 beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LinkedSitesComponent ], imports: [ BrowserAnimationsModule ],
})
.compileComponents();
}));