"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 -> Overlay]:
  StaticInjectorError(Platform: core)[CdkConnectedOverlay -> Overlay]:
    NullInjectorError: No provider for Overlay!
Error: StaticInjectorError(AppModule)[CdkConnectedOverlay -> Overlay]:
  StaticInjectorError(Platform: core)[CdkConnectedOverlay -> Overlay]:
    NullInjectorError: No provider for Overlay!
    ...

(The full log can be seen below)

The error above is logged in the Chrome DevTools console when I append the ng build command with the aot flag.

Searching on Google for the issue came up with a similar question from StackOverflow such as "Error: No provider for Overlay!".

However, the answer in the question didn't work for me.

I'm also using the toolbar and drawer components from Angular Material.

Here's the package.json file:

...
"dependencies": {
  "@angular/animations": "^6.0.0",
  "@angular/cdk": "^7.2.0",
  "@angular/common": "^6.0.0",
  "@angular/compiler": "^6.0.0",
  "@angular/core": "^6.0.0",
  "@angular/forms": "^6.0.0",
  "@angular/http": "^6.0.0",
  "@angular/material": "7.2.0",
  "@angular/platform-browser": "^6.0.0",
  "@angular/platform-browser-dynamic": "^6.0.0",
  "@angular/router": "^6.0.0",
  "@ngx-loading-bar/router": "^2.1.2",
  "codemirror": "^5.39.0",
  "core-js": "^2.5.4",
  "ng-zorro-antd": "1.8.1",
  "ng2-codemirror": "^1.1.3",
  "rxjs": "^6.0.0",
  "zone.js": "^0.8.26"
},
...

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
import { OverlayModule } from '@angular/cdk/overlay';

import { LayoutModule } from './layout/layout.module';
import { PagesRoutingModule } from './pages/pages-routing.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    LoadingBarRouterModule,
    HttpClientModule,
    RouterModule,
    PagesRoutingModule,
    LayoutModule,
    OverlayModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My project is open source.And I use stackblitz open the version of github. https://stackblitz.com/github/Eve-1995/ng-series-study — Eve-Sama, Jan 06 '19 at 06:47
You're using conflicting versions of Angular and Angular Material. Angular Material v7 requires Angular v7. — Edric, Jan 06 '19 at 07:06
Are you also importing the necessary Angular Material modules into your main app module? — Edric, Jan 06 '19 at 07:10
Actually,the previous version is V6.Both Material and Angular.But the error shows,then I guess maybe the high version could solve this problem.So I tried.But still not work. — Eve-Sama, Jan 06 '19 at 09:17
Make sure when you install an npm package you look at its version and Angular compatibility. Normally, you can see that on every npm package page you want to install. — Marin, Jan 19 '21 at 13:24

Edric · Accepted Answer · 2019-01-06T14:50:41.373

4

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.

edited Jan 06 '19 at 14:50

answered Jan 06 '19 at 07:09

Edric

24,639
13
81
91

I have tried update my project.But one of my dependencies doesn't support V7.And privious version of my project,the cdk and material is v6.But the error still shows. – Eve-Sama Jan 06 '19 at 09:19
@Eve What's the dependency that doesn't support v7? Could you post the log? – Edric Jan 06 '19 at 14:50

score 2 · Answer 2 · answered Dec 08 '20 at 00:15

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

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

2 Answers2

Linked