Angular自定义NPM动态Tooltip包绑定失败问题求助

核心问题排查方向 #

错误Can't bind to 'appDynamicTooltip' since it isn't a known property of 'div'本质是Angular无法识别指令的属性绑定，结合你怀疑的导出问题，按以下步骤逐一验证：

1. 检查包的模块导出配置 #

打开你包中的dynamic-tooltip.module.ts，确认AppDynamicTooltipDirective已添加到exports数组中：

@NgModule({
  declarations: [AppDynamicTooltipDirective],
  imports: [],
  exports: [AppDynamicTooltipDirective] // 必须导出，外部模块才能在模板中使用
})
export class DynamicTooltipModule { }

2. 验证公共API导出配置 #

确保包根目录的public-api.ts正确暴露模块和指令：

export * from './lib/dynamic-tooltip.module';
export * from './lib/app-dynamic-tooltip.directive';

Angular库依赖这个文件对外暴露可访问的API，缺失的话应用无法正确识别包内的指令。

3. 确认应用侧的导入范围 #

从截图的导入方式来看，需确保DynamicTooltipModule是在使用该指令的组件所属模块中导入的：

• 如果组件在根模块（AppModule），就把DynamicTooltipModule加入AppModule的imports数组
• 如果是懒加载模块，要在对应懒加载模块的imports中添加

4. 清理缓存并重新构建 #

• 应用侧执行清理命令，避免缓存导致的识别异常：

rm -rf node_modules package-lock.json
npm install
ng build --delete-output-path

• 包侧重新构建并发布（如果是本地测试，可使用npm link）：

ng build dynamic-tooltip
npm publish dist/dynamic-tooltip

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