가상 속성 @enterAnimation을 찾았습니다.응용 프로그램에 "Browser Animations Module" 또는 "Noop Animations Module"을 포함하십시오.각도 4

가상 속성 @enterAnimation을 찾았습니다.응용 프로그램에 "Browser Animations Module" 또는 "Noop Animations Module"을 포함하십시오.각도 4

Karma를 실행하여 Angular4 응용 프로그램을 테스트하면 이 오류가 발생합니다.Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.이미 app.module.ts에 모듈을 Import했습니다.

        // 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()> ]

에@Componentts 파일.

즉, 이 기능을 사용하여[@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.tsimports 어레이 모듈에도 같은 파일에 저장해야 합니다.

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

에서 이 에러가 발생했을 경우Storybook를 Import 합니다.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의 경우 위의 답변이 효과적입니다.

유닛 테스트 중에 이 오류가 발생하면 다음과 같이 유틸리티 모듈을 Import할 수 있습니다.NoopAnimationsModule실제 애니메이션을 조롱하고 실제로 애니메이션을 수행하지 않는 스펙 파일로 변환합니다.

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

포함되어 있는 경우BrowserAnimationsModule하지만 여전히 작동하지 않습니다.animations다음과 같이 @component에 기인합니다.

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.scss'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({
        height: '0px',
        minHeight: '0'
      })),
      state('expanded', style({
        height: '*'
      })),
      transition('expanded <=> collapsed', animate('225ms cubic-   bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})

이 행을 컴포넌트(users-component.ts)에 추가했을 뿐입니다.

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

물론 관련 모듈을 app.component.ts 또는 모듈을 Import한 위치에 Import했는지 확인합니다.

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

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

언급URL : https://stackoverflow.com/questions/45730753/found-the-synthetic-property-enteranimation-please-include-either-browseranim