How I fixed @routerTransition Error in Angular

While working with Angular 6, I was getting an error as "Found the synthetic property @routerTransition. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application." These two modules where already added in the application and the suggestions seems to be misleading.

In my application I was using routerTransition in one of my component as:

<div class="row clearfix" [@routerTransition]>
  ...
</div>

and thus while loading the component I was gettting the above mentioned error.

To fix the issue, I have added the metadata property animations within the @component() decorator as shown below.

import { appModuleAnimation } from '@shared/animations/routerTransition';

@Component({
 selector: 'app-questions',
 templateUrl: './questions.component.html',
 styleUrls: ['./questions.component.css'],
 animations: [appModuleAnimation()]
})

The above change has fixed the "Found the synthetic property @routerTransition" error.