“NullInjectorError: No provider for Overlay!” in c

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

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.