CODEWITHSUNDEEP
angularangular-materialmaterial-ui
Snehal P
Snehal P

Reputation: 211

Angular material sidenav error Found the synthetic listener @transform.start

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

I am trying to use the material side nav but getting the following issue.

preview-29b0f46fcc27b310236ab.js:1 ERROR Error: Uncaught (in promise): Error: Found the synthetic listener @transform.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Error: Found the synthetic listener @transform.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

below is the code

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

Upvotes: 7

Views: 10996

Answers (2)

Tony Brasunas
Tony Brasunas

Reputation: 4601

The issue is your use of lazy-loaded modules.

With lazy-loading, you have to ensure you're importing BrowserModule and BrowserAnimationsModule in the right place.

It would be nice if adding the import in the lazy-loaded module that actually uses the sidenav worked, but the dependence on the BrowserModule and BrowserAnimationsModule has to be eager-loaded, so it has to be in the AppModule or another-eager loaded module.

Looking at your code, you're lazy-loading the ContactManager module (i.e. you use the loadChildren function),

example of loadChildren which is lazy-loaded module

You can't add the import to a lazy-loaded module like ContactManager. Only your AppModule is eager-loaded, so you have to add the import to your app.module.ts:

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

It's unfortunate that the error message you see isn't specific about this. It simply says to include the dependency to your application. It should say, in an eager-loaded module.

Upvotes: 1

Christian G&#225;lvez
Christian G&#225;lvez

Reputation: 183

the error thrown is telling us that you must include the module "BrowserAnimationsModule" or "NoopAnimationsModule" in your module.

If you module is AppModule, you have to include the import required by Angular Material, for example:

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

Try it

Upvotes: 4

Related Questions