node_modules/@angular/material/index.d.ts 'не является модулем

Question

Я добавил Angular Material Design в мой проект jhipster, но получение index.d.ts 'не является ошибкой модуля, как показано ниже.

Ниже приведены файлы из моего проекта.

tsconfig. json

{
 "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "target/classes/static/app",
    "lib": ["es7", "dom"],
    "typeRoots": ["node_modules/@types"],
    "baseUrl": "./",
    "paths": {
      "app/*": ["src/main/webapp/app/*"]
    },
    "importHelpers": true,
    "allowJs": true
},
"include": ["src/main/webapp/app", "src/test/javascript/"],
"exclude": ["node_modules"]

}

jh-material.module.ts

import {A11yModule} from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {NgModule} from '@angular/core';
import {
        MatAutocompleteModule,
        MatBadgeModule,
        MatBottomSheetModule,
        ........,
      } from '@angular/material';

@NgModule({
        exports: [
          A11yModule,
          CdkStepperModule,
          CdkTableModule,
          CdkTreeModule,
          DragDropModule,
          ..........,
        ]
      })
export class JhMaterialModule {}

и пакет . json выглядит следующим образом

"dependencies": {
  "@angular/animations": "^9.1.1",
  "@angular/cdk": "^9.2.0",
  "@angular/common": "^8.2.14",
  "@angular/compiler": "8.2.14",
  "@angular/core": "^8.2.14",
  "@angular/flex-layout": "latest",
  "@angular/forms": "8.2.14",
  "@angular/material": "^9.2.0",
  "@angular/platform-browser": "8.2.14",
  "@angular/platform-browser-dynamic": "8.2.14",
  "@angular/router": "8.2.14",
  "@fortawesome/angular-fontawesome": "0.5.0",
  "@fortawesome/fontawesome-svg-core": "1.2.26",
  "@fortawesome/free-solid-svg-icons": "5.12.0",
  "@ng-bootstrap/ng-bootstrap": "5.1.4",
  "@ngx-translate/core": "11.0.1",
  "@ngx-translate/http-loader": "4.0.0",
  "@types/webrtc": "0.0.26",
  "bootstrap": "4.4.1",
  "core-js": "3.5.0",
  "hammerjs": "latest",
  "moment": "2.24.0",
  "ng-jhipster": "0.11.5",
  "ngx-cookie": "4.0.2",
  "ngx-infinite-scroll": "8.0.1",
  "ngx-webstorage": "4.0.1",
  "rxjs": "^6.5.3",
  "swagger-ui-dist": "3.24.3",
  "tslib": "1.10.0",
  "zone.js": "^0.10.2"
},

Я довольно новичок в этом техническом стеке и не уверен, в чем будет проблема.