延迟加载模块上的 Angular 8 动画错误 - 发现合成属性

Question

我有 2 个模块，app.module和一个lazy.module. 可以想象，它lazy.module是延迟加载到app.modulevia 路由器中的。

const routes: Routes = [
  { path: '', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];

现在，在 中app.module，我正在导入BrowserModule和BrowserAnimationsModule

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

在 中app.module，我有一个名为flyInOutAnimation

export const flyInOutAnimation = trigger('flyInOut', [
  state('out', style({
    transform: 'translateX(-250px)',
    display: 'none'
  })),
  state('in', style({
    transform: 'translateX(0)'
  })),
  transition('in <=> out', animate('400ms ease-in-out'))
]);

在 中lazy.module，我有一个FlyoutComponent使用上述动画的。

@Component({
  // ...
  animations: [ flyInOutAnimation ]
})

的用法FlyoutComponent如下

<app-flyout [@flyInOut]="showFlyout ? 'in' : 'out'"></app-flyout>

现在，当您加载使用 的组件时app-flyout，您会收到以下错误

Error: Found the synthetic property @flyInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

我创建了一个Stackblitz来重现错误。

Answer 1

为了让 Angular 编译器平静下来，您应该在使用该动画的组件的元数据animations中定义属性。@Component@flyInOut

就PersonListComponent你的情况而言：

@Component({
  ...
  animations: [ flyInOutAnimation ] <=========== add this
})
export class PersonListComponent implements OnInit {

叉式堆栈闪电战