“NullInjectorError:没有覆盖的提供者！";在控制台中(角材料) [英] "NullInjectorError: No provider for Overlay!" in console (Angular Material)

问题描述

我在使用 Angular Material 时遇到错误.具体来说，

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

(完整日志见下方)

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

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

在 Google 上搜索此问题，从 StackOverflow 中发现了类似的问题，例如 "错误:没有 Overlay 提供程序！".

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.

我也在使用来自 Angular Material 的工具栏和抽屉组件.

I'm also using the toolbar and drawer components from 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 { }

推荐答案

您正在使用 Angular 和 Angular Material 的冲突版本.(您的 Angular 依赖项在版本 6 上，而 Angular CDK 和 Angular Material 依赖项在版本 7 上，这需要 Angular v7.)

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

你应该:

• 更新所有版本的 Angular.

• Update all versions of Angular.

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

This can be done by running ng update @angular/core which should update all Angular dependencies.

(有关 update 命令的更多信息，请查看 docs 或 更新 Angular 网站)

(For more info about the update command, check out the docs, or the Update Angular website)

降级您的 Angular CDK 和 Angular Material 版本.

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'

此命令应安装 CDK 和 Angular Material 的第 6 版.

This command should install version 6 of the CDK and Angular Material.

这篇关于“NullInjectorError:没有覆盖的提供者！";在控制台中(角材料)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！