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

[elvisbegovic]

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

[cyrilletuzi]

Same error. It seems like one Material component now has a dependency to CDK OverlayModule. Would be a breaking change, but it's not documented in the changelog. Using RC12.

[crisbeto]

@cyrilletuzi the menu module has always had a dependency on the OverlayModule, I don't think anything has changed recently.

@istiti are you able to reproduce the error in a Stackblitz?

[cyrilletuzi]

For me it's not the menu, I don't use this one. But I just upgraded from Material 5 to 6, without any change in my app, and no I have the same error, needing OverlayModule. So at least one of my Material module has this new dependency.

[cyrilletuzi]

For me it's MatAutocomplete which now need OverlayModule (the error mentionsMatAutocompleteTrigger). Wasn't needed in v5 and not mentioned in documentation, no change in app.

[crisbeto]

The autocomplete module has also had the OverlayModule import for a long time now. We haven't even touched that line in more than six months.

[cyrilletuzi]

Then there really is an issue: I have to manually add the OverlayModule in my AppModule for the mat-autocomplete to continue to work in v6, and that doesn't seem normal if it's already imported.

[cyrilletuzi]

After some tests, it appears it's only happen in v6 when the module where MatAutocomplete is used is lazy-loaded.

[elvisbegovic]

Breaking change to my code or i used it wrongly but was working well in v5 simply adding MatMenuModule in certain lazymodule yes 😞

[crisbeto]

This sounds like a tooling issue. @cyrilletuzi can you double-check that both Material and all other @angular/* packages are on the same major version?

[cyrilletuzi]

@crisbeto Yep, everything (Angular / Material / CLI) is in v6 very last RC, and issue reproduced from scratch.

I've the same issue with the MatMenuTrigger.
Is there any workaround, which can make it work until the problem is solved?

[bardiel]

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

[bardiel]

Btw, this happened to me in a brand new project generated yesterday with all @angular/*@next deps.

Angular CLI: 6.0.0-rc.9
Node: 8.11.1
OS: linux x64
Angular: 6.0.0-rc.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.12
@angular-devkit/build-angular     0.5.12
@angular-devkit/build-optimizer   0.5.12
@angular-devkit/core              0.5.12
@angular-devkit/schematics        0.5.12
@angular/cdk                      6.0.0-rc.14
@angular/cli                      6.0.0-rc.9
@angular/flex-layout              6.0.0-beta.15
@angular/material                 6.0.0-rc.14
@ngtools/webpack                  6.0.0-rc.10
@schematics/angular               0.5.12
@schematics/update                0.5.12
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.6.0

[yokots]

when i import the overlay module in a lazy loading module it also dosen't work. and jsut import the OVERLAY_PROVIDERS is ok. like this

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

@NgModule({
  imports: [OverlayModule]
})
export class NoLazyLoadingModule { }