Question

当运行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完美匹配，但我在业力方面遇到了这个错误。

Answer 1

我找到了解决方案。我只需要导入// animation module import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ... @NgModule({ imports: [... BrowserAnimationsModule, ... ],相同的导入

access_token, user_id = flow.finish(code)

Answer 2

未来的读者：当您忘记放置时，也会出现此确切错误

animations: [ <yourAnimationMethod()> ]

在您的@Component ts文件中。

也就是说，如果您在HTML模板上使用[@yourAnimationMethod]。

Answer 3

对于Angular 6应用程序，我通过将以下内容添加到组件 .spec.ts 文件中来解决了该问题：

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

然后将BrowserAnimationsModule添加到同一组件 .spec.ts 文件中的TestBed.configureTestingModule的导入

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

Answer 4

这应该有效。

1-在app.module.ts中导入BrowserAnimationsModule

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

2-添加到app.module.ts中的导入

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

Answer 5

对于angular 7和以前的版本，您只需要在app.module.ts文件中添加此行，并记住也将它放在导入数组模块的同一文件中：

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

Answer 6

对于我来说，我所做的就是将这一行添加到我的组件（users-component.ts）

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

当然要确保已将相关模块导入了app.component.ts或模块导入的位置

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

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

Answer 7

如果包含 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)')),
    ]),
  ],
})

Answer 8

如果您在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，上面提到的答案很有效！

Answer 9

如果在单元测试期间看到此错误，则可以将NoopAnimationsModule之类的实用程序模块导入您的spec文件中，该文件模拟真实的动画并且不进行动画处理

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

找到合成属性@enterAnimation。请包含＆＃34; BrowserAnimationsModule＆＃34;或者＆＃34; NoopAnimationsModule＆＃34;在你的申请中。 Angular4

9 个答案: