Знайдено синтетичне властивість @enterAnimation. Будь ласка, включіть у свій додаток “BrowserAnimationsModule” або “NoopAnimationsModule”. Кутова4

Під час запуску Karma для тестування моєї програми Angular4 я отримую цю помилку, Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.хоча я вже імпортував модуль у app.module.ts

        // animation module
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
    ...
@NgModule({
    imports: [...
        BrowserAnimationsModule,
        ...
      ],

і в моєму компоненті :

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

Додаток працює ще ідеально ng serve, я отримав цю помилку з кармою.

Майбутні читачі: Ви також можете отримати саме цю помилку, коли забудете розмістити

animations: [ <yourAnimationMethod()> ]

у вашому @Componentфайлі ts.

тобто, якщо ви використовуєте [@yourAnimationMethod]шаблон HTML.

Я знайшов рішення. Мені просто потрібно було імпортувати в app.component.spec.tsтому ж імпорті

 // animation module
        import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
    ...
@NgModule({
    imports: [...
        BrowserAnimationsModule,
        ...
      ],

Для моєї програми Angular 6 я вирішив проблему, додавши до мого файлу .spec.ts наступного :

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

Потім додайте BrowserAnimationsModuleдо імпорту файлу TestBed.configureTestingModuleтого самого компонента .spec.ts

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

Для angular 7 та попередньої версії вам потрібно лише додати цей рядок у свій app.module.tsфайл, і пам’ятайте, що в модулі масиву імпорту теж в цьому ж файлі:

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

Це має спрацювати.

1- Імпортувати BrowserAnimationsModule в app.module.ts

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

2 - Додати до імпорту в app.module.ts

imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
Ng2SmartTableModule,
TreeModule,
BrowserAnimationsModule]

Якщо ви побачите цю помилку під час модульного тестування, ви можете імпортувати утилітний модуль, як NoopAnimationsModuleу файл специфікації, який висміює реальну анімацію і фактично не анімує

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

для мого випадку все, що я зробив, - це додати цей рядок до мого компонента (users-component.ts)

@Component({
animations: [appModuleAnimation()],
})

звичайно, переконайтеся, що ви імпортували відповідний модуль в app.component.ts або куди ви імпортуєте свої модулі

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

    @NgModule({
         imports: [
            BrowserAnimationsModule,
        ],
    })

Якщо ви зіткнулися з цією помилкою в Storybook, щось не імпортувати це , BrowserAnimationsModuleщоб moduleMetadataу вашій історії.
Подобається це,

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


export const Primary = () => ({
  template: `
   <div style="width: 720px">
    <view-list [data]="data"></view-list>
   </div>
   `,
  moduleMetadata: {
    imports: [AppModule, BrowserAnimationsModule],
  },
  props: {
    data: SOME_DATA_CONSTANT,
  },
});

PS: Для Angular відповіді, згадані вище, добре працюють!