“NullInjectorError：没有覆盖提供者！”在控制台中（角材料）答案

【问题标题】："NullInjectorError: No provider for Overlay!" in console (Angular Material)“NullInjectorError：没有覆盖提供者！”在控制台中（角材料）
【发布时间】：2020-12-08 08:15:15
【问题描述】：

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

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

【问题讨论】：

你能提供stackblitz吗？
您使用的模块不止两个？
我的项目是开源的。我用stackblitz打开了github的版本。 stackblitz.com/github/Eve-1995/ng-series-study
您正在使用相互冲突的 Angular 和 Angular Material 版本。 Angular Material v7 需要 Angular v7。
您是否也将必要的 Angular Material 模块导入到您的主应用程序模块中？

标签： angular angular-material

【解决方案1】：

您正在使用相互冲突的 Angular 和 Angular Material 版本。（您的 Angular 依赖项是版本 6，而 Angular CDK 和 Angular Material 依赖项是版本 7，这需要 Angular v7。）

您应该：

更新所有版本的 Angular。

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

（有关update 命令的更多信息，请查看docs 或Update Angular website）
降级您的 Angular CDK 和 Angular Material 版本。

这可以通过运行以下命令来实现：
```
npm i @angular/{cdk,material}@'^6.0.0'
```
此命令应安装 CDK 和 Angular Material 的第 6 版。

【讨论】：

我已尝试更新我的项目。但我的依赖项之一不支持 V7。我的项目的原始版本，cdk 和材料是 v6。但错误仍然显示。
@Eve 不支持 v7 的依赖是什么？能发一下日志吗？

【解决方案2】：

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

为我消除错误的是在AppModule 中包含MatDialogModule 和MatMenuModule，这不是延迟加载的：

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

然后错误消失了，mat-menu 再次工作

【讨论】：