使用独立组件 Angular 15 发现意外的合成属性 @transitionMessages

Question

我正在将角度应用程序迁移到standalone component. 删除了ngModule和app.module.ts文件

\n

主要.ts

\n

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

\n

应用程序组件.scss

\n

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

\n

自动完成.component.ts

\n

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

\n

错误

\n

core.mjs:9229 ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:\n  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.\n  - 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).\n    at checkNoSyntheticProp (vendor.js:138357:11)\n    at DefaultDomRenderer2.setProperty (vendor.js:138340:22)\n    at elementPropertyInternal (vendor.js:67372:14)\n    at Module.\xc9\xb5\xc9\xb5property (vendor.js:70152:5)\n    at MatFormField_div_17_Template (vendor.js:112220:61)\n    at executeTemplate (vendor.js:66899:5)\n    at refreshView (vendor.js:66783:7)\n    at refreshEmbeddedViews (vendor.js:67903:9)\n    at refreshView (vendor.js:66806:5)\n    at refreshComponent (vendor.js:67948:7)\n

\n

如果我导入BrowserAnimationsModule到auto-complete.component.ts

\n

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

\n

例外

\n

 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.\nError: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.\n

\n

Answer 1

您缺少动画所需的提供程序：

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


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

Answer 2

在使用 Angular 15 之后，我也遇到了同样的问题。错误消息是：

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

鉴于其他问题，添加了 BrowserAnimationsModule 导入。要解决此问题，您需要导入“provideAnimations”

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

并将 ProvideAnimations 提供程序添加到 bootstrapApplication 函数：

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