Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Unexpected synthetic property @transitionMessages found with standalone compoent angular 15

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

@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.

>Solution :

You’re missing the animations:

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading