ERROR Error: NG05105: Unexpected synthetic property @transitionMessages found

Angular

Piyush

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>

</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

Amrendra

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

Piyush

Replied on April 29, 2024

Thanks. Resolved.

Piyush

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';