First of all, I imported BrowserAnimationsModule in my profile.module.ts to my animations to work but it threw an error that BrowserModule is imported twice, I went through GitHub issues and found out I should import BrowserModule and BrowserAnimationsModule only once in my app.module.ts But the animation seems not to work in components that are imported in profile.module.ts

this is my animations from my component that doesn't work (component belongs to profile.module.ts)

animations: [
    trigger('animationOption2', [      
      transition(':enter', [
        style({ backgroundColor: 'yellow' }),
        animate(300)
      ]),
      transition(':leave', [
        animate(300, style({ backgroundColor: 'yellow' }))
      ]),
      state('*', style({ backgroundColor: 'green' })),
    ])
]