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

Question

我有 2 个模块，app.module和 lazy.module .可以想象，lazy.module被延迟加载到 app.module通过路由器。

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 {

Forked Stackblitz