Angular 14升级后自定义组件app-input-text的simpleList属性绑定报错咨询

你在升级到Angular 14后遇到的这个绑定错误，虽然看起来组件和模块配置都没问题，但结合Angular版本升级的特性，大概率是缓存冲突或者严格模式校验导致的。下面是一步步的排查和修复方案：

1. 先清理缓存和依赖（最可能解决问题） #

版本升级后旧缓存和新框架不兼容是常见坑，先执行以下操作：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json（npm用户）或yarn.lock（yarn用户）
• 重新安装依赖：npm install 或 yarn install
• 清理Angular CLI缓存：ng cache clean
• 重新构建项目：ng build

这一步解决过很多升级后的奇怪绑定问题，优先尝试。

2. 双重验证模块导入导出逻辑 #

虽然你的配置看起来没问题，但再仔细核对细节：

• 确认SharedModule在AppModule的imports数组中，拼写完全一致（大小写敏感）
• 确认InputTextComponent同时出现在SharedModule的declarations和exports数组中（你的代码里已经做到了，这一步是防手抖的双重检查）
• 检查InputTextComponent的selector严格是app-input-text，和模板中的使用完全匹配

3. 适配Angular 14的严格模板校验 #

Angular 14默认开启了更严格的strictTemplates选项，可能会放大之前版本忽略的类型细节：

• 先临时关闭tsconfig.json中angularCompilerOptions下的strictTemplates: false，重新构建测试。如果错误消失，说明是严格校验导致的：
  • 保持严格模式，给simpleList添加默认值，明确类型：

    @Input() simpleList: string[] = [];
    

  • 确保模板中传递的数组确实是string[]类型（你的代码里是正确的，但严格模式下需要更明确的类型声明）

4. 排查重复组件声明 #

确认InputTextComponent只在SharedModule中声明，没有在AppModule或其他模块重复声明——重复声明会导致Angular无法识别正确的组件实例。

5. 检查@Input装饰器语法 #

确保simpleList的装饰器没有语法错误：

// 正确写法
@Input() simpleList: string[];
// 或者带默认值
@Input() simpleList: string[] = [];

注意不要错误添加别名（比如@Input('simple-list')），否则模板需要用[simple-list]而不是[simpleList]，你的代码里没有这个问题，但可以再确认。

如果以上步骤都无效，可以临时在AppModule中直接导入InputTextComponent（不推荐长期这么做，只是测试用），如果错误消失，说明SharedModule可能存在循环依赖或其他隐藏问题，需要进一步排查模块间的引用关系。

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