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();
  }));