question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No provider for Overlay! StaticInjectorError(AppModule)[MatMenuTrigger -> Overlay]:

See original GitHub issue

Bug, feature request, or proposal:

bug

What are the steps to reproduce?

I update from angular 5.x and cli 1.7.x and rxjs 5.x to v6rc.x I only update in my module this MatMenuModule and use it like:

<div *ngFor="let item of data">
  <button mat-icon-button [matMenuTriggerFor]="appMenu"></button>
  <mat-menu #appMenu="matMenu" [overlapTrigger]="false"
            class="slds-dropdown slds-dropdown_left slds-dropdown_actions">
    <ul class="slds-dropdown__list" role="menu">
      <li (click)="onClickCreerPO.emit({bail:item, nature:'Rent'})">
        <a href="javascript:void(0);">PO Loyer</a>
      </li>
      <li (click)="onClickCreerPO.emit({bail:item, nature:'AddedRent'})">
        <a href="javascript:void(0);">PO Surplus</a>
      </li>
    </ul>
  </mat-menu>
</div>

Before

It was working before update.

Current

image

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:10
  • Comments:44 (10 by maintainers)

github_iconTop GitHub Comments

11reactions
bardielcommented, May 3, 2018

I also fixed it by importing OverlayModule in my app.module.ts. Importing OverlayModule in lazy-loaded modules by the Router would’t work.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { OverlayModule } from "@angular/cdk/overlay";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    OverlayModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [
    AppComponent,
  ],
})
export class AppModule { }
8reactions
michaelspeedcommented, Nov 21, 2018

i am still getting this error, although i have added OverlayModule in the AppModule. i even tried adding them to all the LazyLoad Modules, still no fix

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error: No provider for Overlay! - angular
I managed to eliminate this error by adding this to app.module.js: import {OVERLAY_PROVIDERS} from "@angular/material"; @NgModule({ imports: ...
Read more >
No provider for Overlay!” in console (Angular Material ...
I'm getting an error when using Angular Material. Specifically, ERROR Error: Uncaught (in promise): Error: ...
Read more >
No Provider For Overlay! In Console (Angular Material)
Error: No provider for Overlay! Solution: I managed to eliminate this error by adding this to app.module.js: import {OVERLAYPROVIDERS} from.
Read more >
[Debugging] NullInjectorError: No provider for {Class}!
In this video, you'll learn what the error "NullInjectorError: No provider for {Class}!" means, how to debug it, and prevent it from ...
Read more >
Menu | Angular Material
Class or list of classes to be added to the overlay panel. ... number. Number of parent menus that come before the menu....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found