在Angular应用中引入自定义库执行ng serve报错NG6002如何解决？

根因定位 #

报错NG6002的直接原因是错误将非NgModule类的TestComponent加到了AppModule的imports数组中。Angular的NgModule的imports数组仅允许导入三类内容：

• 其他Angular NgModule类
• 标记了standalone: true的独立组件/指令/管道
• 符合Angular导入规则的第三方模块导出单元

分步解决步骤 #

• 第一步：修正导入内容，导入库暴露的TestModule而非组件
  你当前的导入语句是导入组件，需要改为导入模块：

// 错误写法
// import {TestComponent} from '../../dist/test'
// 正确写法
import { TestModule } from '../../dist/test';

• 第二步：将AppModule imports数组中的TestComponent替换为TestModule
  修改后的AppModule配置参考：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // 其他依赖模块...
    TestModule // 替换原来的TestComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 第三步：如果你的TestComponent是独立组件（standalone），不需要通过Module导出，则需要确认组件声明了standalone: true，此时可以直接导入组件到imports数组，不需要导入TestModule：

// TestComponent代码确认standalone标记
@Component({
  standalone: true,
  // 其他配置...
})
export class TestComponent {}

• 第四步：如果修改后仍报ngcc相关错误，执行以下操作清理缓存后重启服务：

# 清理Angular缓存
ng cache clean
# 删除node_modules和lock文件后重装依赖（可选）
rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
npm install
# 重新启动服务
ng serve

额外注意事项 #

如果你的库依赖了@angular/material的icon组件，需要确认TestModule中已经导入了对应的Material Icon模块，否则使用组件时会出现material icon不渲染的问题：

// TestModule补充导入MatIconModule
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [TestComponent],
  imports: [MatIconModule],
  exports: [TestComponent]
})
export class TestModule {}

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