Angular 13库集成Angular Material失败，求排查方案

一、解决 "is not a known element" 错误 #

1. 核实模块导入逻辑 #

• 确保在库的NgModule（而非应用模块）中正确导入MatCheckboxModule，并加入imports数组：

  import { NgModule } from '@angular/core';
  import { MatCheckboxModule } from '@angular/material/checkbox';
  import { YourLibComponent } from './your-lib.component';
  
  @NgModule({
    declarations: [YourLibComponent],
    imports: [MatCheckboxModule], // 必须添加这一行
    exports: [YourLibComponent]
  })
  export class YourLibModule { }
  

• 检查导入路径是否正确：MatCheckboxModule必须从@angular/material/checkbox导入，不要使用@angular/material的根导入（部分版本不支持）。

2. 修正依赖配置 #

• Angular库中，Angular Material应仅放在peerDependencies中（避免打包冗余依赖），package.json配置示例：

  "peerDependencies": {
    "@angular/common": "^13.0.0",
    "@angular/core": "^13.0.0",
    "@angular/material": "^13.0.0",
    "@angular/cdk": "^13.0.0"
  }
  

• 移除dependencies中重复的Material相关依赖，执行npm install重新同步依赖。

3. 检查库的构建配置 #

• 确认angular.json中库项目的build配置指向正确的tsconfig：

  "projects": {
    "your-library": {
      "architect": {
        "build": {
          "options": {
            "tsConfig": "./tsconfig.lib.json"
          }
        }
      }
    }
  }
  

• 打开tsconfig.lib.json，确保angularCompilerOptions.strictTemplates未误设为false（关闭后会隐藏模板元素检查错误）。

4. 清理缓存重新构建 #

• 执行以下命令彻底清理缓存与依赖：

  ng clean
  rm -rf node_modules package-lock.json
  npm install
  ng build your-library
  

二、解决rootDir相关TS编译错误 #

1. 校准tsconfig.lib.json配置 #

• 确保compilerOptions中的rootDir指向库源码根目录，且所有源码文件都在此目录下：

  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist", "src/test.ts"]
  }
  

• 检查是否有源码文件存放在src目录外（如项目根目录），这类文件会触发TS的rootDir校验错误。

2. 确认项目结构合规 #

• 确保库项目是通过ng generate library your-library创建的标准结构，避免自定义目录导致TS编译路径混乱。
• 测试文件应放在src/test或单独的目录中，且由tsconfig.spec.json单独配置编译范围，不要混入主源码目录。

3. 验证Angular版本兼容性 #

• 确保Angular Material版本与Angular 13完全匹配（均为13.x.x），版本不兼容可能间接导致TS编译路径解析异常。

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