如何在 ASP.NET Core MVC 和 Angular 项目中使用 Angular Material 组件（特别是滑块）？

Question

我使用 Angular 模板创建了一个全新的 ASP.NET Core MVC（Web 应用程序 - .NET Core 版本 = 3.1）项目：

它带有一些基本的预定义模块和组件：

开箱即用，效果很好。 一旦我在“app.module.ts”模块中的任何 Angular Material 模块上添加导入，当我尝试通过 IIS Express 在本地调试它时，我立即收到以下错误：

我什至还没有尝试实现材料组件，我所做的只是将导入添加到我的 app.module.ts。我注意到的唯一其他错误是每当我执行ng serve 我的控制台时说： 但它仍然会启动 Angular 服务器。

当我遇到这个问题时，我正在遵循入门指南：https://material.angular.io/guide/getting-started

这是我的 app.module.ts（除了导入语句之外，与使用 Visual Studio Angular 模板自动生成的内容相比几乎没有任何变化）：

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,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ]),
    MatSliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我真的很想开始使用 Angular，但到底是什么？

更新：这是我的 package.json 文件：

{
  "name": "testangularmaterial",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run TestAngularMaterial:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.12",
    "@angular/cdk": "^10.2.3",
    "@angular/common": "8.2.12",
    "@angular/compiler": "8.2.12",
    "@angular/core": "8.2.12",
    "@angular/forms": "8.2.12",
    "@angular/material": "^10.2.3",
    "@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.4.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.26",
    "@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"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}

另外，我注意到在这个测试项目中，我的 Angular CLI 版本是 8.3.26，所以我使用空白模板创建了另一个全新的测试项目 (ASP.NET Core MVC)，并手动运行 ng 命令将 Angular 项目添加到它。尽管如此，仍然遇到与上述相同的问题。

Answer 1

您似乎将 npm 依赖项安装在错误的位置。默认情况下，在Visual Studio中打开终端时，会在项目根目录下打开终端，但是我们的依赖项必须安装在ClientApp目录下。操作方法如下：

1. 在 VS 中，转到工具 > 命令行 > 开发人员命令提示符。
2. 导航到 ClientApp（输入 cd project-name\ClientApp）
3. 运行npm i
4. 运行ng add @angular/material