Angular route transition animation throw error (missing module)

Question

I'm trying to set up a route animation in Angular in only one component, but it throws the following error:
"core.js:6210 ERROR Error: Found the synthetic property @routeAnimations. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application."

I have imported the animation module in the app.module.ts as follows:

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

I have then tried to delete all the code to see where the importation problem took place. It returns the error when I add the animation in the appComponent (in the div parent of router-outlet) and another identical when I add data object ("{animation : name-animation}") in the Routes array.
It doesn't run the animation, that should run when I insert a string in the search bar and press Enter.
When I load the page, it shows the page as it has already been triggered, and when i insert a value in the search bar pressing Enter it returns at it should be and then never run the animation. This phoenomenon takes place only when data object is inserted in the Route array.

I have already tried to implement the animation module in all the component involved in the process.
I have another animation in that component, and it works perfectly.
I really don't have a clue about what the problem is: I followed the official tutorial and looking online it seems (to me) that I did the same as a lot of working examples.

Here's the code:

app.component.html

<div [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
</div>

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'foody-client';

  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent, data: {animation: 'HomePage'} },
  { path: 'search/:q', component: HomeComponent, data: {animation: 'SearchPage'}}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

animations.ts

import { animation, animate, style, state, transition, trigger, query, stagger, group } from '@angular/animations';

  export const fade = animation([
    state('*', style({ opacity : 0 })),
    style({ opacity: 1 }),
    animate('{{ time }}')
  ]);

  export const fadeRouting =
  trigger('routeAnimations', [
    transition('HomePage <=> SearchPage', [
      /*animation code*/
    ])
  ]);

home.component.ts

import { fadeRouting } from '../../shared/animations';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-home',//
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations: [
    fadeRouting,

    trigger('resizeBg', [
      state('reduced', style({ minHeight: '30%' })),
      state('*', style({ minHeight: '*' })),
      transition('reduced <=> *', animate('200ms ease-out'))
    ])
  ]
})

Answer 1

I found out the problem: I was importing the animation in the home.component.ts, while I should have imported and used it in the app.component.ts