找到合成属性@enterAnimation。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。 Angular4

Question

当运行噶测试我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

我找到了解决方案。我只需要导入app.component.spec.ts相同的进口

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