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 编译器平静下来，您应该在 @Component 组件元数据中定义 animations 属性您使用 [=24] 的组件 =]那个@flyInOut动画。

你的情况是PersonListComponent：

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

Forked Stackblitz

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

Angular 8 Animations Error on Lazy Loaded Module - Found Synthetic Property

angular

angular-animations

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

Angular 8 Animations Error on Lazy Loaded Module - Found Synthetic Property

angular

angular-animations

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