Не удается получить Angular Материал, работающий в веб-приложении

Question

Я создал базовое веб-приложение ASP. Net с помощью Visual Studio, но по какой-то причине я не могу получить Angular Материал, добавленный в проект.

Я получаю это при импорте материала в моем app.module.ts:

My package.json looks like this

"dependencies": {
"@angular-builders/custom-webpack": "^8.4.1",
"@angular/animations": "^8.2.12",
"@angular/cdk": "^10.0.1",
"@angular/common": "8.2.12",
"@angular/compiler": "8.2.12",
"@angular/core": "8.2.12",
"@angular/forms": "8.2.12",
"@angular/material": "^10.0.1",
"@angular/platform-browser": "8.2.12",
"@angular/platform-browser-dynamic": "8.2.12",
"@angular/platform-server": "8.2.12",
"@angular/router": "8.2.12",
"@nguniversal/module-map-ngfactory-loader": "8.1.1",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.3.1",
"core-js": "^3.3.3",
"jquery": "^3.5.1",
"oidc-client": "^1.9.1",
"popper.js": "^1.16.0",
"rxjs": "^6.5.3",
"zone.js": "0.9.1"

devdependencies

 "@angular-devkit/build-angular": "^0.803.24",
"@angular/cli": "^8.3.26",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "^8.2.12",
"@types/jasmine": "~3.4.4",
"@types/jasminewd2": "~2.0.8",
"@types/node": "~12.11.6",
"codelyzer": "^5.2.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^5.0.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"typescript": "3.5.3"

Then my app.module.ts looks like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    MatSliderModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ])
  ],

When i remove this line the error goes away and everything compiles and runs, but there is no red line below it indicating there is an error:

import { MatSliderModule } from '@angular/material/slider';

My folder structure looks like this in my app: введите описание изображения здесь

Кажется, там есть все, что должно быть, например, анимация, cdk, material, cli.

Я пробовал предложения по другим связанным сообщениям, которые включают:

Установка следующего в папке приложения с помощью npm install --save @ angular / material @ angular / cdk npm install --save @ angular / animations

Указывается c при импорте компонента fe '@ angular / material / slider', а не только'@angular/material '.

Я добавил его в экспорт.

Я удалил package. json файл блокировки и обновил все снова с помощью npm update и npm install.

Кто-то предложил установить определенные c более старые версии материалов, а затем позволить npm обновить их снова, но ничего не повлияло на эту проблему.

Любые идеи приветствуются.