Angular4项目使用Material模块报错求助：依赖与配置排查

从你的报错信息和依赖配置来看，核心问题是Angular Material/CDK版本与Angular核心版本不兼容，同时还有TypeScript版本适配和AppModule结构的小问题，下面逐一解决：

1. 版本不匹配（最关键的问题） #

你当前使用的是Angular 4.3.6，但@angular/material和@angular/cdk却是5.0.4版本——Angular Material 5.x系列是专门为Angular 5.x设计的，和Angular 4.x的核心API、类型定义存在冲突，这就是你看到MatOptgroup、MatProgressSpinner无法正确实现接口的根本原因。

解决方法： #

将@angular/material和@angular/cdk降级到与Angular 4.x兼容的4.x版本，比如4.0.2（这是Angular Material 4系列的稳定版本）。修改你的package.json依赖：

"dependencies": {
  // ... 其他依赖保持不变
  "@angular/cdk": "^4.0.2",
  "@angular/material": "^4.0.2",
  // ...
}

2. TypeScript版本调整 #

Angular 4.x官方推荐的TypeScript版本是2.3.x到2.4.x，你当前使用的2.2.0版本过低，可能会触发一些类型检查的兼容性问题。修改devDependencies中的typescript版本：

"devDependencies": {
  // ... 其他依赖保持不变
  "typescript": "~2.3.4",
  // ...
}

3. 修复AppModule的结构 #

报错AppModule is not an NgModule是因为你的AppModule缺少了必要的declarations数组——Angular要求NgModule必须声明它管辖的组件。修改你的app.module.ts：

import { AppComponent } from './app.component'; // 确保导入AppComponent
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";

@NgModule({
  declarations: [AppComponent], // 添加这行，声明AppComponent
  bootstrap: [ AppComponent ],
  imports: [ MatProgressSpinnerModule ],
})
export class AppModule { } // 确保正确导出AppModule类

最后一步：重新安装依赖 #

完成上述修改后，删除现有的node_modules并重新安装依赖，确保版本完全匹配：

rm -rf node_modules
yarn install

执行完这些步骤后，再运行yarn start应该就能正常启动项目了。

内容的提问来源于stack exchange，提问作者Joey Yi Zhao