Angular 18 ERROR: NG05105 with animations

Hello there I am new to angular and was trying to get animations to work but I am getting the following error "NG05105" below will be app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app.routes';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './home/home.component';
import { LeaderboardComponent } from './leaderboard/leaderboard.component';
import { TeamsComponent } from './teams/teams.component';
import { DriversComponent } from './drivers/drivers.component';
import { MatchesComponent } from './matches/matches.component';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
LeaderboardComponent,
TeamsComponent,
DriversComponent,
MatchesComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


I don't know why this is happening according to the documention this should be correct blow is my @Component for where I am using the animations

@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
animations: [
trigger('fade', [
transition(':enter', [ // alias for 'void => *'
style({ backgroundColor: 'yellow', opacity: 0 }),
animate('2000ms', style({ backgroundColor: 'white', opacity: 1 }))
])
])
]
})


and below is the HTML file

<div class="home-container">
<h1 @fade>Welcome to the Racing League</h1>
<p @fade>Keep track of your favorite teams, drivers, and matches.</p>
<button @fade routerLink="/leaderboard" class="home-button">View Leaderboard</button>
</div>


I tried to make a new project thought maybe I messed something up but still the same issue, whats supposed to happen is that its supposed to change bacground color to yellow and opacity to 0 and then in a 2 second duration its supposed to turn background color to white and opacity to 1, I have no clue and any help would be greatly appreciated

Continue reading...