Здравствуйте, я новичок в angular и пытался заставить анимацию работать, но получаю следующую ошибку «NG05105», ниже будет 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 { }
Я не знаю, почему это происходит, согласно документации, это должно быть правильно. Это мой @Component, где я использую анимацию.
@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 }))
])
])
]
})
и ниже HTML-файл
<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>
Я попытался создать новый проект, подумал, может быть, я что-то напутал, но проблема все та же: должно было произойти то, что он должен изменить цвет фона на желтый и непрозрачность на 0, а затем через 2 секунды он должен изменить цвет фона. на белый и непрозрачность на 1, понятия не имею, буду очень признателен за любую помощь.
эй @NarenMurali, я пытался скопировать твой код в код VS, но, похоже, он не работает в моем локальном каталоге





Я исправил проблему, изменив app.config.ts на следующее:
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()]
}
проблема возникает где-то еще, найдите stackblitz, где он работает нормально! пожалуйста, повторите проблему здесь и поделитесь ею!