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

Question

I have 2 modules, the app.module and a lazy.module. As you can imagine, the lazy.module is lazy loaded into the app.module via router.

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

Now, in the app.module, I am importing the BrowserModule and the BrowserAnimationsModule

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

In the app.module, I have an animation called 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'))
]);

In the lazy.module, I have a FlyoutComponent that uses the above animation.

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

And the usage of the FlyoutComponent is as follows

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

Now, when you load the component that is using the app-flyout, you get the following error

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

I have created a Stackblitz to reproduce the error.

Answer 1

In order to calm down Angular compiler you should define animations property within @Component metadata for the component where you use that @flyInOut animation.

It's PersonListComponent in your case:

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

Forked Stackblitz