“NullInjectorError: No provider for Overlay!” in console (Angular Material)

Question

I\'m getting an error when using Angular Material. Specifically,

ERROR Error: Uncaught (in promise): Error:
StaticInjectorError(AppModule)[CdkConnectedOverlay -&         


        

Answer 1

You're using conflicting versions of Angular and Angular Material. (Your Angular dependencies are on version 6, while the Angular CDK & Angular Material dependencies are on version 7, which require Angular v7.)

You should either:

• Update all versions of Angular.

  This can be done by running ng update @angular/core which should update all Angular dependencies.

  (For more info about the update command, check out the docs, or the Update Angular website)

• Downgrade your version of the Angular CDK and Angular Material.

  This can be achieved by running the following command:

  npm i @angular/{cdk,material}@'^6.0.0'
  

  This command should install version 6 of the CDK and Angular Material.

Answer 2

I was getting the exact same error, due to lazy loaded modules which had the mat-menu component in them.

What removed the error for me, was including MatDialogModule and MatMenuModule in the AppModule, which isn't lazy-loaded:

import { MatDialogModule } from '@angular/material/dialog';
import { MatMenuModule } from '@angular/material/menu';

Then the error was gone, and the mat-menu worked again