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

Question

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

它带有一些基本的 pre-defined 模块和组件：

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

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

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

这是我的 app.module.ts（从字面上看，auto-generated 与 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，所以我创建了另一个 b运行d 新测试项目（ASP.NET Core MVC）空白模板并手动运行 ng 命令向其添加 Angular 项目。尽管如此，仍然运行遇到与上述完全相同的问题。

Answer 1

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

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

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

How to use Angular Material components (specifically the slider) in an ASP.NET Core MVC and Angular project?

c#

asp.net-core-mvc

angular-material

angular-components

angular