Найдено синтетическое свойство @enterAnimation. Пожалуйста, включите в приложение "BrowserAnimationsModule" или "NoopAnimationsModule". Angular4

При запуске 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, но я получил эту ошибку с кармой.

Ответ 1

Я нашел решение. Мне просто нужно было импортировать в app.component.spec.ts тот же импорт

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

Ответ 2

Будущие читатели: вы также можете получить эту точную ошибку, когда вы забудете разместить

animations: [ <yourAnimationMethod()> ]

в вашем файле @Component ts.

это если вы используете [@yourAnimationMethod] в шаблоне HTML.

Ответ 3

Для моего приложения 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();
  }));

Ответ 4

Для angular 7 и предыдущей версии вам нужно всего лишь добавить эту строку в файл app.module.ts и не забудьте добавить ее в модули массива app.module.ts в тот же файл:

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