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.
You're missing the providers required for animations:
import { provideAnimations } from '@angular/platform-browser/animations';
bootstrapApplication(AppComponent, {
providers: [
provideAnimations()
]
})