Angular8导入自定义MaterialModule报模块未找到的解决方案咨询

常见问题原因及对应解决步骤 #

• 核对导入路径匹配性
  打开app.module.ts确认MaterialModule的导入逻辑，参考基础结构如下：

  import { NgModule } from '@angular/core';
  // 省略其他基础模块导入
  import { MaterialModule } from './library/material-module';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      // 省略其他基础模块
      MaterialModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

  对照项目实际文件存放位置核对导入路径的层级关系。如果实际文件存放路径和导入路径存在偏差（比如文件实际在src/app/shared/目录下，导入路径写为./library/），会直接触发模块导出找不到的报错。
• 检查material-module.ts文件的语法完整性
  对应文件基础结构如下：

  import { NgModule } from '@angular/core';
  import { A11yModule } from '@angular/cdk/a11y';
  // 省略其他Material模块导入
  import { MatTreeModule } from '@angular/material/tree';
  import { OverlayModule } from '@angular/cdk/overlay';
  
  @NgModule({
      exports: [
          A11yModule,
          CdkStepperModule,
          // 省略其他导出模块
          PortalModule,
          ScrollingModule,
      ]
  })
  export class MaterialModule { }
  

  重点检查两个语法问题：
  • 确认类声明前的export关键字没有遗漏
  • 检查省略位置的导入语句是否存在拼写错误、路径写错的问题。Angular AOT编译的容错性较低，任何一条导入语句解析失败，都会连带导致后续的类导出被标记为未识别。
• 核对版本依赖匹配性
  项目当前版本配置为@angular/core: ~8.2.14、@angular/material: ^8.2.3，需要补充核对同项目下的@angular/cdk版本：
  • Angular Material 8.x版本强依赖完全匹配版本的@angular/cdk，如果cdk版本缺失或者版本不匹配（比如装成了9.x版本），会直接触发模块解析失败。
  • 可在项目根目录执行npm ls @angular/cdk @angular/material @angular/core查看实际安装版本，如果不匹配，执行npm install @angular/cdk@8.2.3 --save安装对应版本即可。
• 清理编译缓存重试
  很多时候路径修正、语法修正完成后，Angular的本地编译缓存没有清空，会持续读取旧的解析结果报错：
  • 停止当前运行的ng serve进程
  • 删除项目下node_modules/.cache目录的缓存内容
  • 重新执行ng serve启动项目
• 检查编译配置是否排除目标文件
  核对tsconfig.json、angular.json中的编译配置，确认存放material-module.ts的目录没有被加入排除编译的规则中，避免Angular编译器根本没有扫描到该文件的导出内容。

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