ERROR Error: NG05105: Unexpected synthetic property @transitionMessages found




Asked on April 29, 2024
In my Angular Material standalone application, I am creating a form with <mat-form-field> such as
 
<mat-form-field>
  <mat-label>Enter name</mat-label>
  <input matInput>
</mat-form-field>

It throws error in console. 

Error:

ERROR Error: NG05105: 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




Replied on April 29, 2024
In Angular standalone application, to enable animation use provideAnimations() with bootstrapApplication as below.

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

Your issue will be resolved.

Animations are enabled using following providers in standalone application.

1. provideAnimations()

It is useful when we want to enable animations with bootstrapApplication.
provideAnimations() eagerly loads BrowserAnimationsModule and hence we need not to import it in component.


2.  provideAnimationsAsync()

It is also useful when application is using bootstrapApplication. But it loads BrowserAnimationsModule lazily.

bootstrapApplication(AppComponent, {
    providers: [
       provideAnimationsAsync()
    ]
});

3. provideNoopAnimations()

It is also useful when application is using bootstrapApplication. It disables animations.

bootstrapApplication(AppComponent, {
    providers: [
       provideNoopAnimations()
    ]
});



References:

https://angular.io/api/platform-browser/animations/provideAnimations
https://angular.io/api/platform-browser/animations/async/provideAnimationsAsync
https://angular.io/api/platform-browser/animations/provideNoopAnimations




Replied on April 29, 2024
Thanks. Resolved.


Replied on April 29, 2024
1. Import provideAnimations()

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

2. Import  provideAnimationsAsync()

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

3. Import provideNoopAnimations()

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



Write Answer












©2024 concretepage.com | Privacy Policy | Contact Us