升级Angular时大量Material元素报‘Not a known element’错误求助

核心错误排查 #

先看你代码里的两个明显问题：

1. admin.module.ts中的错误导入
   你的admin.module.ts的imports数组里写了NgModule，这完全是错误的——NgModule是定义模块用的装饰器，不是需要导入的Angular模块，必须删掉这一行。
   修正后的admin.module.ts imports部分：

   imports: [
     // 删掉NgModule，保留MaterialModule和其他必要模块（比如CommonModule、RouterModule等）
     MaterialModule,
     // 组件模板依赖CommonModule的指令，务必确保导入
     CommonModule
     ...
   ]
   

2. material.module.ts中的错误导出
   你的material.module.ts的exports数组里同样包含了NgModule，这也是无效的，必须移除这一项。导出数组只需保留Material和CDK的相关模块即可。

其他可能的原因及处理 #

1. 确认Angular与Material版本匹配 #

升级Angular时，必须保证@angular/material、@angular/cdk的版本和Angular核心框架（@angular/core、@angular/common等）的版本完全一致。查看package.json里的依赖版本，比如Angular是16.x，所有Material相关包也必须是16.x。

2. 检查懒加载模块的导入 #

如果应用使用了懒加载（判断方式：查看路由配置，是否有类似loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)的代码），那么每个懒加载的特性模块（比如AdminModule）都需要单独导入MaterialModule，或者导入包含MaterialModule的共享模块。

3. 确认组件所属模块正确 #

确保AfterhoursConfigComponent确实在AdminModule的declarations数组中，没有被错误声明在其他模块，或者被重复声明。

4. 清理缓存重启服务 #

修改模块导入后，清理Angular缓存并重启开发服务器：

ng cache clean
ng serve --open

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