“ NullInjectorError：没有提供叠加层！”在控制台中（角度材质）

Question

使用Angular Material时出现错误。具体来说，

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!
    ...

（完整的日志可以在下面看到）

当我在ng build命令后附加aot标志时，上述错误会记录在Chrome DevTools控制台中。

在Google上搜索该问题时，StackOverflow也提出了类似的问题，例如"Error: No provider for Overlay!"。

但是，问题中的答案对我不起作用。

我还使用了Angular Material的工具栏和抽屉组件。

这是package.json文件：

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

Answer 1

您正在使用相互矛盾的Angular和Angular材质版本。 （您的Angular依赖关系在版本6上，而Angular CDK和Angular Material依赖关系在版本7上，需要Angular v7。）

您应该：

• 更新所有版本的Angular。

  这可以通过运行ng update @angular/core来完成，它应该更新所有Angular依赖项。

  （有关update命令的更多信息，请查看docs或Update Angular website）

• 降级您的Angular CDK和Angular材质的版本。

  这可以通过运行以下命令来实现：

  npm i @angular/{cdk,material}@'^6.0.0'
  

  此命令应安装CDK和Angular Material的版本6。

Answer 2

由于延迟加载的模块中包含mat-menu组件，我得到了完全相同的错误。

为我消除了错误的原因是，MatDialogModule中包含了MatMenuModule和AppModule，它们不是延迟加载的：

import { MatDialogModule } from '@angular/material/dialog';
import { MatMenuModule } from '@angular/material/menu';

然后错误消失了，mat-menu又开始工作了