MVC5+Angular项目导入Angular Material时出现CDK/RxJS依赖错误求助

我来帮你搞定这个问题！你遇到的cdk未找到和rxjs/operator未找到错误，主要是SystemJS配置不全、RxJS版本不兼容，还有Material组件导入方式不对导致的，结合你给出的配置文件，给你几个针对性的解决步骤：

1. 完善SystemJS中CDK的映射配置 #

你的systemjs.config.js里只配置了CDK的主包，但Angular Material的组件（比如按钮）依赖CDK的子模块（比如overlay、platform这些），必须把这些子模块也添加到映射里。修改后的map部分应该像这样：

map: {
  // 原有配置保持不变...
  '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
  // CDK主包
  '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
  // 添加CDK子模块映射
  '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
  '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
  '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
  '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
  // 其他依赖的子模块可以按需添加
}

2. 升级RxJS版本并调整配置 #

你的package.json里RxJS版本是5.0.1，而Angular 5需要的RxJS版本至少是^5.5.0，低版本的RxJS会导致operator路径找不到的问题。先升级RxJS：

npm install rxjs@^5.5.11 --save

然后修改systemjs.config.js的packages部分，确保RxJS的子模块能被正确加载：

packages: {
  app: {
    defaultExtension: 'js',
    meta: {
      './*.js': {
        loader: 'Client/systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js',
    main: 'Rx.js'
  },
  'rxjs/operators': {
    main: 'index.js',
    defaultExtension: 'js'
  }
}

3. 修正Angular Material组件的导入方式 #

你在app.module.ts里直接导入了MatButton组件类，这是错误的！Angular Material的组件需要导入对应的Module，而不是组件本身。修改成这样：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AllMachines } from './app.service';
import { FormsModule } from '@angular/forms';
// 导入Button对应的Module
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [BrowserModule, HttpModule, FormsModule, MatButtonModule],
  declarations: [AppComponent], // 补充你的组件声明
  providers: [AllMachines], // 补充服务提供者
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 清理缓存并重新构建 #

做完上面的修改后，清理一下依赖缓存，重新安装并构建项目：

rm -rf node_modules
npm cache clean --force
npm install
npm run build

这些步骤应该能彻底解决你的问题，因为它们覆盖了导致错误的核心原因：SystemJS映射不全、RxJS版本不兼容、Material组件导入方式错误。

内容的提问来源于stack exchange，提问作者user9120125