Angular库npm安装后dfb-button的buttonSize绑定报NG8002错误

问题场景 #

开发包含入口组件的Angular组件库时，库内DynamicDialogMessageComponent模板中使用自定义<dfb-button>组件，发布到npm并安装到业务项目后，启动服务抛出如下错误：

error NG8002: Can't bind to 'buttonSize' since it isn't a known property of 'dfb-button'.

已尝试将ButtonComponent加入模块declarations、exports、entryComponents数组，问题仍未解决。
涉及的核心代码片段如下：

1. 动态弹窗组件模板

<div class="dfb-dynamic-dialog-message">
  <div class="body font-medium-medium">{{ bodyMessage }}</div>

  <div class="footer-buttons" *ngIf="primaryButtonMessage || secondaryButtonMessage">
    <dfb-button
      *ngIf="showSecondButton"
      [label]="secondaryButtonMessage"
      [buttonType]="buttonType.Third"
      [buttonSize]="buttonSize.Small"
      (click)="secondaryButtonAction()"></dfb-button>
    <dfb-button
      *ngIf="primaryButtonMessage"
      [label]="primaryButtonMessage"
      [buttonSize]="buttonSize.Small"
      (click)="primaryButtonAction()"></dfb-button>
  </div>
</div>

2. 库模块NgModule配置

@NgModule({
  declarations: [
    ...,
    DynamicDialogMessageComponent,
    ButtonComponent
  ],
  imports: [
    ...
  ],
  exports: [...],
  providers: [...,DialogService],
  entryComponents: [...,DynamicDialogMessageComponent],
})

3. ButtonComponent类定义

export class ButtonComponent {
  @Input() buttonShape: ButtonShape = ButtonShape.Square;
  @Input() buttonType: ButtonType = ButtonType.Primary;
  @Input() buttonSize: ButtonSize = ButtonSize.Icon;
  @Input() label: string = '';
  @Input() icon: string = '';
  @Input() selected: boolean = false;
  @Input() disabled: boolean = false;
  @Input() style: ButtonInputStyleInterface;

  buttonShapeEnum = ButtonShape;
  buttonTypeEnum = ButtonType;
  buttonSizeEnum = ButtonSize;

  constructor() {
    // This is intentional
  }
}

排查步骤（按问题出现概率从高到低排序） #

• 核对ButtonComponent的@Component装饰器配置
  贴出的代码仅包含类定义部分，首先确认组件类上方的@Component装饰器未遗漏，且selector字段值精确为'dfb-button'，不存在拼写错误、多余空格、选择器格式错误（比如误写成驼峰形式'dfbButton'、加了多余前缀'app-dfb-button'等不匹配的情况）。这类复制粘贴代码漏改selector的问题，是该报错最高发的诱因——一旦selector不匹配，Angular会把<dfb-button>识别为普通原生自定义HTML标签，自然无法识别@Input()装饰的属性，直接抛出当前错误。
• 检查库的公共导出逻辑
  Angular库有固定的公共导出规则，配置错误会导致模块声明关系失效：
  1. 确认ButtonComponent、DynamicDialogMessageComponent所属的根模块，已经在库的公共入口文件（通常为public-api.ts）中导出
  2. 业务项目导入库模块时，必须从npm包名的根路径导入，不要为了方便深层导入node_modules下的库内部文件，否则会跳过NgModule的声明校验
  3. 如果ButtonComponent原本属于独立子模块（比如ButtonModule），不要直接在库根模块的declarations中重复声明组件，应该将ButtonModule加入根模块的imports数组，同时确认ButtonModule自身的declarations和exports数组中都包含ButtonComponent
• 清除缓存验证安装包版本正确性
  本地调试、多次迭代发布版本时，缓存残留是非常容易踩的坑：
  1. 删除业务项目的node_modules文件夹，以及对应包管理器的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
  2. 执行npm cache clean --force清除npm全局缓存
  3. 重新执行依赖安装命令，确认安装的库版本是包含ButtonComponent正确配置的最新版本，尤其是之前用过npm link本地调试库的场景，很容易残留旧的构建产物，导致配置修改不生效
• 核对动态组件加载逻辑
  由于DynamicDialogMessageComponent是通过DialogService动态加载的入口组件，需要确认动态创建组件时，使用的是当前模块注入的ComponentFactoryResolver，不要在DialogService中硬编码其他模块的组件解析器，否则会导致组件解析时找不到同模块下声明的ButtonComponent。
• 验证库编译配置
  检查库项目的tsconfig.json和ng-package.json配置，Angular 12及以上版本的库编译输出必须设置为partial-Ivy模式，不要使用全量Ivy编译输出，也不要混用ViewEngine和Ivy的编译产物，否则会导致组件元数据丢失，出现Input属性无法识别的问题。

避坑提示 #

不要为了临时压制报错直接在模块中添加CUSTOM_ELEMENTS_SCHEMA或NO_ERRORS_SCHEMA，这两个配置会直接跳过自定义元素的属性校验，掩盖真实的组件识别问题，后续会引发组件不渲染、事件不触发等更难排查的问题。

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