web-dev-qa-db-ja.com

合成プロパティ@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,
        ...
      ],

そして、私のcomponent：

 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で完全に実行されますが、karmaでこのエラーが発生しました。

javascriptangulartypescripttestingkarma-jasmine
34
Melchia

私は解決策を見つけました。 app.component.spec.tsに同じインポートをインポートする必要がありました

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

将来の読者：配置を忘れたときに、この正確なエラーを取得することもできます

animations: [ <yourAnimationMethod()> ]

@Component tsファイル。

hTMLテンプレートで[@yourAnimationMethod]を使用している場合です。

43
Stavm

Angular 6アプリケーションの場合、コンポーネント。spec.tsファイルに次を追加することで問題を解決しました。

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

次に、同じコンポーネントのTestBed.configureTestingModuleのインポートにBrowserAnimationsModuleを追加します。spec.ts file

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

angular 7以前のバージョンの場合、この行をapp.module.tsファイルに追加するだけで、同じファイルのimports配列モジュールにも忘れずに配置してください。

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
6
Victor Alfonso Pinedo Martinez