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

elvisbegovic · 2018-04-12T13:41:37Z

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

The text was updated successfully, but these errors were encountered:

cyrilletuzi · 2018-04-20T08:09:11Z

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 · 2018-05-01T18:07:16Z

@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 · 2018-05-01T19:29:09Z

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 · 2018-05-01T19:34:33Z

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 · 2018-05-01T19:46:55Z

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 · 2018-05-01T19:55:01Z

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 · 2018-05-01T20:30:26Z

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

elvisbegovic · 2018-05-01T21:07:50Z

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

crisbeto · 2018-05-02T15:20:26Z

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 · 2018-05-02T15:47:33Z

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

ghost · 2018-05-03T08:38:16Z

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

bardiel · 2018-05-03T09:19:37Z

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 · 2018-05-03T09:22:46Z

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 · 2018-05-04T09:39:24Z

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

yushihui · 2018-05-04T19:53:40Z

Today I updated to angular 6 have the same issue,

ERROR Error: StaticInjectorError(WzzModule)[MatMenuTrigger -> Overlay]:
StaticInjectorError(Platform: core)[MatMenuTrigger -> Overlay]:
NullInjectorError: No provider for Overlay!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
at resolveToken (core.js:1232)
at tryResolveToken (core.js:1182)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
at resolveToken (core.js:1232)
at tryResolveToken (core.js:1182)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
at resolveNgModuleDep (core.js:9238)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9919)
at inject (core.js:1334)

yushihui · 2018-05-04T20:05:46Z

@yokots
I tried your fix, but it does not work for me

yushihui · 2018-05-04T21:00:59Z

when I add
import {OverlayModule} from '@angular/cdk/overlay';
to my root module
it works

keatkeat87 · 2018-05-05T03:54:25Z

i guess this cause Overlay must provide in root injector.

yokots · 2018-05-05T08:53:31Z

@yushihui The OVERLAY_PROVIDERS was deprecated. Just use OverlayModule.

cyrilletuzi · 2018-05-05T12:24:47Z

What's happening is quite strange: modules using Overlay (like MatMenu or MatAutocomplete) are already importing OverlayModule. So, lazy-loading or not, it should work.

The fact that when lazy-loading a module with MatMenu or MatAutocomplete, we have this error, means that something outside the module is using Overlay, which doesn't seem normal.

Eddygn · 2018-05-06T15:08:44Z

Having similar issue due to [matTooltip].
Project was upgraded to 6 (release)

ERROR Error: StaticInjectorError(AppModule)[CdkConnectedOverlay -> Overlay]: 
  StaticInjectorError(Platform: core)[CdkConnectedOverlay -> Overlay]: 
    NullInjectorError: No provider for Overlay!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get

Hope it helps

yokots · 2018-05-06T15:12:55Z

@crisbeto here is an example in Stackblitz

Tyler-V · 2018-05-07T18:09:55Z

What about if importing OverlayModule at the app.module.ts isn't an option? I am shipping a component as a library that uses material.

Importing OverlayModule at the library.module does not resolve the issue, only if I import it at the app.module of the project that uses my library... this would require the user to perform additional setup instead of just being able to import my library and use it right away,

Is there anyway around this?

StaticInjectorError(Platform: core)[MatMenuTrigger -> Overlay]: 
    NullInjectorError: No provider for Overlay!

…loaded modules Fixes injection errors being thrown by the overlay-based providers that have injection tokens for the default scroll strategy. The error comes from the fact that the scroll strategies were being provided at the root, whereas the `Overlay` provider was provided normally, causing it to be missing when a module is lazy-loaded. Fixes angular#10820.

AnthonyNahas · 2018-05-09T07:16:25Z

I am facing the same problem with matToolTip -->

core.js:1601 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MatTooltip -> Overlay]: 
  StaticInjectorError(Platform: core)[MatTooltip -> Overlay]: 
    NullInjectorError: No provider for Overlay!
Error: StaticInjectorError(AppModule)[MatTooltip -> Overlay]: 
  StaticInjectorError(Platform: core)[MatTooltip -> Overlay]: 
    NullInjectorError: No provider for Overlay!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at

Im getting the error since I updated angular from v5 to v6

CharlBest · 2018-05-10T10:36:01Z

Yes this is also breaking for me after updating to v6.

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MatTooltip -> Overlay]:
StaticInjectorError(Platform: core)[MatTooltip -> Overlay]:
NullInjectorError: No provider for Overlay!
Error: StaticInjectorError(AppModule)[MatTooltip -> Overlay]:
StaticInjectorError(Platform: core)[MatTooltip -> Overlay]:
NullInjectorError: No provider for Overlay!

renatop7 · 2018-05-10T18:01:58Z

For everyone having problems with the NullInjectorError: No provider for Overlay! when trying to lazy load, just try to add OverlayModule to app.module imports, or your root module, for me it worked like a charm.

It's a temporary fix until they update the code...

Tyler-V · 2018-05-10T18:11:03Z

@renatop7 I too saw that referenced in another issue however that doesn't work for me inside a library, importing it inside the project's module or app module results in the same error.

renatop7 · 2018-05-10T20:16:02Z

@Tyler-V Yeah, it seems another problem.
What you could do is try to implement a forRoot() method in your library, and add the Overlay provider in there.
I'm not sure if this would help you, and I can't test it, but it was something that came to mind when I read your response.

AnthonyNahas · 2018-05-10T20:40:04Z

@renatop7 you have right! The only way to get that thing working is to import OverlayModule
in the app component (the root) module and not in the lazy loaded module..... 🍰

…loaded modules Fixes injection errors being thrown by the overlay-based providers that have injection tokens for the default scroll strategy. The error comes from the fact that the scroll strategies were being provided at the root, whereas the `Overlay` provider was provided normally, causing it to be missing when a module is lazy-loaded. Fixes angular#10820.

…loaded modules (#11213) Fixes injection errors being thrown by the overlay-based providers that have injection tokens for the default scroll strategy. The error comes from the fact that the scroll strategies were being provided at the root, whereas the `Overlay` provider was provided normally, causing it to be missing when a module is lazy-loaded. Fixes #10820.

matheusdavidson · 2018-05-18T18:02:25Z

Same problem with v6 and Material Datepicker.
Importing OverlayModule into app.module(must be loaded here) solved the problem.

cgatian · 2018-05-21T14:59:47Z

@jelbourn It would be nice when regressions are found if there was a milestone/timeline created to provide insight on when merged issues would be released.

wangyud · 2018-06-13T05:48:42Z

@yushihui @matheusdavidson I do this . but it doesn't work

fazpu · 2018-06-18T07:07:21Z

Hi, I had the same problem.

Turned out it was caused by importing @import '~bootstrap/scss/bootstrap'; in styles.scss

I ended up importing only

@import '~bootstrap/scss/bootstrap-grid';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';

This was sufficient for my needs and the error went away.

idshdx · 2018-08-07T14:45:58Z

The quickfix does not work for a NgModule created with the TestBed..

TestBed.configureTestingModule({
      providers: [
        UiEffects,
        // MatDialogModule,
        OverlayModule,
        // MatDialog,
        DialogService,
       .....

Error: StaticInjectorError(DynamicTestModule)[MatDialog -> Overlay]:

alanxone · 2018-08-24T18:09:10Z

Just wanna check if the issue fixed in the latest version 6.4.6, because our apps still encounter the same problem after upgrading to 6.4.6.

michaelspeed · 2018-11-21T12:53:01Z

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

Maryannah · 2019-03-27T14:38:43Z

Hello,

Although I am late to the post, I am facing the same issue.

I have created a showcase project for a library I'm coding. When using a custom overlay service that I wrote, I faced the error.

Simply providing my service into the module, instead of using providedIn: root solved the issue.

I'm posting that just in case someone encounters the same issue in the same case.

Sorry I bothered you all !

SarveshDeshmukh · 2019-04-03T19:00:56Z

Hello,

Although I am late to the post, I am facing the same issue.

I have created a showcase project for a library I'm coding. When using a custom overlay service that I wrote, I faced the error.

Simply providing my service into the module, instead of using providedIn: root solved the issue.

I'm posting that just in case someone encounters the same issue in the same case.

Sorry I bothered you all !

This worked for me!

deepthan · 2019-04-04T08:08:59Z

If you use ng-zorro-antd, you can try it with the following versions:

 "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "core-js": "^2.6.3",
    "ng-zorro-antd": "^7.0.3",
    "zone.js": "~0.8.29"
 },
 "devDependencies": {
    "@angular-devkit/build-angular": "0.12.3",
    "@angular/cli": "~7.3.6",
    "@angular/compiler-cli": "^7.2.9",
    "@angular/language-service": "^7.2.9",
    "@angularclass/hmr": "^2.1.3",
    "@types/jasmine": "~3.3.12",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~11.11.4",
    "codelyzer": "~5.0.0-beta.1",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.0.3",
    "tslint": "~5.14.0",
    "typescript": "3.2.4"
  }

vanessaLatefa · 2019-04-16T09:40:20Z

Hello, Im also facing this error, and I dont know how to fix it..
I am lazy loading my log in from a home module..
Login has Auth service and Auth guard.
Please help!

[Error] ERROR – Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[LoginComponent -> MatSnackBar]:
StaticInjectorError(Platform: core)[LoginComponent -> MatSnackBar]:
NullInjectorError: No provider for MatSnackBar!
get@http://localhost:4200/vendor.js:69847:28
resolveToken@http://localhost:4200/vendor.js:70092:27
tryResolveToken@http://localhost:4200/vendor.js:70036:28

lppedd · 2019-06-11T07:52:23Z

Same problem after updating to Angular 8.

billbarni · 2019-06-27T18:45:39Z

Same problem. Angular 7.2.

Vasu6916 · 2019-07-14T05:25:23Z

import { Overlay } from '@angular/cdk/overlay' in the spec file
This fixed the issue for me

angular-automatic-lock-bot · 2019-09-11T02:02:30Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

andrewseguin assigned crisbeto Apr 23, 2018

crisbeto added P2 The issue is important to a large percentage of users, with a workaround has pr labels May 7, 2018

crisbeto mentioned this issue May 7, 2018

fix(overlay): injection errors for scroll strategy providers in lazy-loaded modules #11213

Merged

crisbeto mentioned this issue May 11, 2018

[Bug?] MatMenuModule throws injection error on lazy loaded modules #11273

Closed

tinayuangao closed this as completed in #11213 May 16, 2018

ravishivt mentioned this issue Sep 11, 2018

No provider for CdkAccordion! StaticInjectorError #13069

Closed

coreyterminator mentioned this issue Jul 11, 2019

Overlay dependency injection error GetTerminus/terminus-ui#1596

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019

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

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

Comments

elvisbegovic commented Apr 12, 2018

Bug, feature request, or proposal:

What are the steps to reproduce?

Before

Current

cyrilletuzi commented Apr 20, 2018 • edited Loading

crisbeto commented May 1, 2018

cyrilletuzi commented May 1, 2018

cyrilletuzi commented May 1, 2018 • edited Loading

crisbeto commented May 1, 2018

cyrilletuzi commented May 1, 2018

cyrilletuzi commented May 1, 2018 • edited Loading

elvisbegovic commented May 1, 2018

crisbeto commented May 2, 2018

cyrilletuzi commented May 2, 2018 • edited Loading

ghost commented May 3, 2018

bardiel commented May 3, 2018 • edited Loading

bardiel commented May 3, 2018 • edited Loading

yokots commented May 4, 2018 • edited Loading

yushihui commented May 4, 2018

yushihui commented May 4, 2018

yushihui commented May 4, 2018 • edited Loading

keatkeat87 commented May 5, 2018 • edited Loading

yokots commented May 5, 2018

cyrilletuzi commented May 5, 2018

Eddygn commented May 6, 2018

yokots commented May 6, 2018

Tyler-V commented May 7, 2018 • edited Loading

AnthonyNahas commented May 9, 2018

CharlBest commented May 10, 2018

renatop7 commented May 10, 2018

Tyler-V commented May 10, 2018

renatop7 commented May 10, 2018

AnthonyNahas commented May 10, 2018

matheusdavidson commented May 18, 2018

cgatian commented May 21, 2018

wangyud commented Jun 13, 2018

fazpu commented Jun 18, 2018

idshdx commented Aug 7, 2018 • edited Loading

alanxone commented Aug 24, 2018 • edited Loading

michaelspeed commented Nov 21, 2018

Maryannah commented Mar 27, 2019

SarveshDeshmukh commented Apr 3, 2019

deepthan commented Apr 4, 2019

vanessaLatefa commented Apr 16, 2019 • edited Loading

lppedd commented Jun 11, 2019

billbarni commented Jun 27, 2019

Vasu6916 commented Jul 14, 2019

angular-automatic-lock-bot bot commented Sep 11, 2019

cyrilletuzi commented Apr 20, 2018 •

edited

Loading

cyrilletuzi commented May 1, 2018 •

edited

Loading

cyrilletuzi commented May 1, 2018 •

edited

Loading

cyrilletuzi commented May 2, 2018 •

edited

Loading

bardiel commented May 3, 2018 •

edited

Loading

bardiel commented May 3, 2018 •

edited

Loading

yokots commented May 4, 2018 •

edited

Loading

yushihui commented May 4, 2018 •

edited

Loading

keatkeat87 commented May 5, 2018 •

edited

Loading

Tyler-V commented May 7, 2018 •

edited

Loading

idshdx commented Aug 7, 2018 •

edited

Loading

alanxone commented Aug 24, 2018 •

edited

Loading

vanessaLatefa commented Apr 16, 2019 •

edited

Loading