Unexpected synthetic property @transitionMessages found with standalone compoent angular 15

Question

I am migrating the angular application to the standalone component. Removed the ngModule and app.module.ts file

main.ts

bootstrapApplication(AppComponent,{
  providers:[importProvidersFrom(FalconCoreModule.forRoot(environment)),
             importProvidersFrom(RouterModule.forRoot(routes))]
}).catch(err => console.error(err));

app.component.scss

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports:[RouterModule,FalconCoreModule]
})
export class AppComponent {}

auto-complete.component.ts

@Component({
  selector: 'app-auto-complete',
  templateUrl: './auto-complete.component.html',
  styleUrls: ['./auto-complete.component.scss'],
  standalone: true,
  imports:[FalconCoreModule,CodeGeneratorComponent,HighlightModule,CodeButtonComponent]
})
export class AutoCompleteComponent
  extends BaseFormComponent<string>
  implements OnInit {}

Error

core.mjs:9229 ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
  - There is corresponding configuration for the animation named `@transitionMessages` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).
    at checkNoSyntheticProp (vendor.js:138357:11)
    at DefaultDomRenderer2.setProperty (vendor.js:138340:22)
    at elementPropertyInternal (vendor.js:67372:14)
    at Module.ɵɵproperty (vendor.js:70152:5)
    at MatFormField_div_17_Template (vendor.js:112220:61)
    at executeTemplate (vendor.js:66899:5)
    at refreshView (vendor.js:66783:7)
    at refreshEmbeddedViews (vendor.js:67903:9)
    at refreshView (vendor.js:66806:5)
    at refreshComponent (vendor.js:67948:7)

If I import BrowserAnimationsModule to auto-complete.component.ts

imports:[FalconCoreModule,CodeGeneratorComponent,HighlightModule,CodeButtonComponent,BrowserAnimationsModule]

Exception

 Uncaught (in promise): Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.

Bailiff

Answer 1

You're missing the providers required for animations:

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

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations()
  ]
})

Constance

Could you clarify what is file name (and if possible the file directory) where these changes have to be applied? – Friendship

@IdurJul Apply these changes to the main.ts file in your project's file directory. – Possible

Answer 2

I also faced with the same issue, afler using Angular 15. An error message was:

Error: Unexpected synthetic property @transitionMessages found. Please make sure that:
- Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
- There is corresponding configuration for the animation named `@transitionMessages` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).

Adding of BrowserAnimationsModule importing given other issues. To resolve this you need import 'provideAnimations'

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

And to add the provideAnimations provider to bootstrapApplication function:

bootstrapApplication(App, {
  providers: [
    provideAnimations()
  ]
});

Result

Answer 3

Generally it was solved by replacing within bootstrapApplication(<1st_arg>,{}); where should be <1st_arg> => AppComponent, instead of AppModule

Junker

Answer 4

I was also getting this error.

After adding:

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

And:

providers: [
  provideAnimations()
]

appConfig.ts:

After adding appConfig.ts:

Sponge

Answer 5

if you are getting this type of issue please enter following angular command. your issue will be resolve.

npm install @angular/animations

than execute it

Ondine