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

Question

I keep getting this error even though following official tutorial at angular docs. I also have imported BrowserAnimationsModule in app.module.ts but still getting same error.

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HeadComponent,
    PortfolioComponent,
    AboutComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

const routes: Routes = [
  { path: '', component: HeadComponent },
  { path: 'portfolio', component: PortfolioComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full' },
];

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

animations.ts

export const basic = trigger('routeAnimations', [
transition('* <=> *', [
    query(':enter, :leave', [
        style({
            position: 'absolute',
            left: 0,
            width: '100%',
            opacity: 0,
            transform: 'scale(0) translateY(100%)',
        }),
  // Animate the new page in
  query(':enter', [
    animate('600ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
  ])
    ], { optional: true }),
]),
]);

portfolio.component.ts

@Component({
  selector: 'app-portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.scss'],
  animations: [basic], <-- from animations.ts
})

head.component.ts

@Component({
  selector: 'app-head',
  templateUrl: './head.component.html',
  styleUrls: ['./head.component.scss'],
  animations: [basic], <-- from animations.ts
})

app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <main [@routeAnimations]="prepareRoute(outlet)">
      <router-outlet #outlet="outlet"></router-outlet>
    </main>
  `,
  styles: [
    'main { position: relative }',
  ],
})
export class AppComponent {

  prepareRoute(outlet: RouterOutlet) {
    return outlet?.isActivated || '';
  }
}

import statements are imported correctly, I didnt included them here to shorten the question