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

(完整的日志可以在下面看到)

(The full log can be seen below)

当我在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提出了类似的问题，例如>错误:没有提供叠加层的提供商！" .

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命令的更多信息，请查看文档，或更新Angular网站)

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

降级您的Angular CDK和Angular材质的版本.

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屋！