"NullInjectorError: Нет поставщика для наложения!" в консоли (угловой материал)

Question

Я получаю ошибку при использовании углового материала. В частности,

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

(полный журнал можно увидеть ниже)

Приведенная выше ошибка регистрируется в консоли Chrome DevTools, когда я добавляю команду ng build с флагом aot.

Поиск в Google по этой проблеме вызвал похожий вопрос от StackOverflow, например «Ошибка: нет поставщика для наложения!» .

Однако ответ на вопрос не сработал для меня.

Я также использую компоненты панели инструментов и ящика от 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 Material. (Ваши зависимости Angular относятся к версии 6, а зависимости Angular CDK и Angular Material относятся к версии 7, для которых требуется Angular v7.)

Вы должны либо:

• Обновление всех версий Angular.

  Это можно сделать, запустив ng update @angular/core, который должен обновить все угловые зависимости.

  (Более подробную информацию о команде update можно получить на документах или на веб-сайте Update Angular )

• Понизьте вашу версию Angular CDK и Angular Material.

  Этого можно достичь, выполнив следующую команду:

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

  Эта команда должна установить версию 6 CDK и Angular Material.