Angular Material sidenav 错误找到合成监听器@transform.start答案

【问题标题】：Angular material sidenav error Found the synthetic listener @transform.startAngular Material sidenav 错误找到合成监听器@transform.start
【发布时间】：2021-01-14 09:37:44
【问题描述】：

https://stackblitz.com/github/snehalp29/ng10-material10

我正在尝试使用材料侧导航，但遇到以下问题。

preview-29b0f46fcc27b310236ab.js:1 错误错误：未捕获（承诺）：错误：找到合成侦听器@transform.start。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。错误：找到合成侦听器@transform.start。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。

下面是代码

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>
    Sidenav content
    <app-toolbar></app-toolbar>
  </mat-sidenav>
  <mat-sidenav-content
    >Main content
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

【问题讨论】：

那么..你添加了那些模块吗..？
是的，我已经添加了这些模块
我在您的 ContactManagerModule 中没有看到它..？

标签： angular angular-material material-ui

【解决方案1】：

问题在于您使用了延迟加载的模块。

使用延迟加载，您必须确保在正确的位置导入 BrowserModule 和 BrowserAnimationsModule。

如果在实际使用sidenav 的延迟加载模块中添加导入会很好，但是对BrowserModule 和BrowserAnimationsModule 的依赖必须是预先加载的，所以它必须是在 AppModule 或另一个急切加载的模块中。

查看您的代码，您正在延迟加载 ContactManager 模块（即 you use the loadChildren function），

您不能将导入添加到像ContactManager 这样的延迟加载模块。只有您的 AppModule 是预先加载的，因此您必须将导入添加到您的 app.module.ts：

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule ]
})

很遗憾，您看到的错误消息并没有具体说明这一点。它只是说包含对你的应用程序的依赖。它应该说，在一个预先加载的模块中。

【讨论】：

【解决方案2】：

抛出的错误告诉我们您必须在您的模块中包含模块“BrowserAnimationsModule”或“NoopAnimationsModule”。

如果你的模块是 AppModule，你必须包含 Angular Material 所需的导入，例如：

@NgModule({
  declarations: [...],
  imports: [
    others imports here...,
    BrowserAnimationsModule <---- the import required!
  ]
})

试试看

【讨论】：