代码之家 › 专栏 › 技术社区 › Melchia

找到了合成属性@enterAnimation。请在应用程序中包括“BrowserAnimationsModule”或“NoopAnimationsModule”。角度4

karma-jasmine testing typescript angular javascript

112

Melchia · 技术社区 · 8 年前

当运行Karma来测试我的Angular4应用程序时,我得到了这个错误 Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 应用程序。单元输电系统

        // 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 然而,我在因果报应上犯了这个错误。

8 回复 | 直到 8 年前

137

Nate Anderson 4 年前

未来的读者:当你忘记放置时,你也可以得到这个确切的错误

animations: [ <yourAnimationMethod()> ]

在您的 @Component

如果你正在使用 [@yourAnimationMethod] 在HTML模板上,即。 angular animations .

101

halfer Jatin Pandey 8 年前

app.component.spec.ts 相同的导入

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

Unheilig Adonis González 7 年前

对于Angular 6应用程序,我通过在组件中添加以下内容来解决问题 .规范ts 文件:

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

BrowserAnimationsModule 对于 TestBed.configureTestingModule 在同一组件中文件

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

Des Horsley 7 年前

对于angular 7和以前的版本,您只需要在 app.module.ts 文件,并记住将其也放在同一文件的导入阵列模块中:

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

saberprashant 5 年前

如果你在 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,上面提到的答案很好。

sai amar 6 年前

NoopAnimationsModule 进入你的等级库文件,它模拟真实的动画,而不是实际的动画

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

Mouad Chaouki 5 年前

如果包括 BrowserAnimationsModule animations 像这样将属性设置为@组件

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

ChampR 6 年前

对于我的例子,我所做的只是将这一行添加到我的组件(users-component.ts)

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

当然,请确保您已经在应用程序中导入了相关模块。组成部分ts或导入模块的位置

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

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