Angular 6 AOT生产构建报错：无法绑定'disabled'到div，求排查方法

结合你的场景（JIT正常、AOT构建报错，刚切换为懒加载特性模块），这个问题大概率和AOT的严格编译规则、模块导入逻辑有关，按以下步骤逐步排查：

1. 优先确认特性模块的导入逻辑是否正确 #

你提到不再把所有内容导入app.module.ts，这是最可能的问题根源：

• 如果FormButtonComponent属于某个共享模块（比如SharedModule），请确保每个用到formButton指令的特性模块都导入了该共享模块，同时共享模块必须将FormButtonComponent声明并导出：

  @NgModule({
    declarations: [FormButtonComponent],
    exports: [FormButtonComponent] // 导出后其他模块才能使用该组件
  })
  export class SharedModule {}
  

• 若FormButtonComponent是单独模块的一部分，每个使用它的特性模块都需要显式导入该组件所在的模块。

为什么这会导致AOT报错？JIT是运行时解析指令，对模块导入的检查比较宽松；而AOT在构建阶段就需要明确知道每个模板指令的归属，若模块未正确导入，AOT会把formButton识别为普通HTML属性，进而错误关联[disabled]绑定到宿主元素（哪怕你没在div上用这个指令，编译错误的提示可能出现偏差）。

2. 彻底排查是否存在div元素使用formButton指令的情况 #

你说搜索代码库没找到，但可以试试更全面的检查方式：

• 用IDE的全局搜索功能，覆盖所有HTML模板、动态生成的内容（比如innerHTML渲染的模板、TemplateRef创建的片段）。
• 检查*ngIf、*ngFor等结构指令嵌套的内容里，是否不小心给div加了formButton指令，这类嵌套内容容易被忽略。
• 查看第三方组件或自定义扩展模板中，是否存在误用formButton的div元素。

你的FormButtonComponent用了@HostBinding('disabled')，而div本身没有disabled原生属性，一旦在div上使用该指令，AOT会直接抛出错误（JIT可能会忽略这个问题）。

3. 检查FormButtonComponent的模块声明是否规范 #

确认组件所在的模块（比如ButtonModule）已正确声明并导出该组件：

@NgModule({
  declarations: [FormButtonComponent],
  exports: [FormButtonComponent]
})
export class ButtonModule {}

如果未导出，即使其他模块导入了该模块，也无法使用FormButtonComponent，AOT编译时会将formButton判定为无效属性。

4. 清理构建缓存后重新尝试 #

旧的构建缓存可能引发奇怪的AOT编译错误，执行以下命令清理后再构建：

ng clean
ng build --prod

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