Angular 18 ERROR: NG05105 with animations

Question

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

Answer 1

I fixed the issue by changing the app.config.ts to the following:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()]
}