Как добавить на страницу "matcard-content" из материала Angular?

Угловой 11 Я пытаюсь добавить "mat-card-content" из Angular Material в компонент HomePageComponent страницы. app.module.ts

import {MatCardModule} from '@angular/material/card';

@NgModule({
  declarations: [
    ...
    HomePageComponent
  ],
  imports: [
    BrowserModule,
    ...
    MatCardModule
  ],

Здесь IDEA возвращает ошибку:

Class MatCardModule is not an Angular module

home-page-component.html

<div id = "home-page">
  <mat-card-content>
    <p>home-page works!</p>
  </mat-card-content>
</div>

возвращает ошибку

Error: src/app/views/home-page/home-page.component.html:2:1 - error NG8001: 'mat-card-content' is not a known element:
  1. If 'mat-card-content' is an Angular component, then verify that it is part of this module.
  2. If 'mat-card-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Возможно, проблема в несовместимости версий некоторых компонентов. Но я не могу найти информацию о том, какие компоненты с какими сочетаются.

Вот что я установил.

package.json

{
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.0.7",
    "@angular/cdk": "^11.2.7",
    "@angular/common": "~11.0.6",
    "@angular/compiler": "~11.0.6",
    "@angular/core": "~11.0.6",
    "@angular/forms": "~11.0.6",
    "@angular/material": "^11.2.4",
    "@angular/platform-browser": "~11.0.6",
    "@angular/platform-browser-dynamic": "~11.0.6",
    "@angular/router": "~11.0.6",
    "@types/intro.js": "^3.0.0",
    "bootstrap-css-only": "^4.4.1",
    "intro.js": "^3.4.0",
    "ng-sidebar": "^9.4.2",
    "ngx-device-detector": "^2.0.6",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.6",
    "@angular/cli": "~11.0.6",
    "@angular/compiler-cli": "~11.0.6",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}