升级到Angular12后ng2-nouislider的ngModel双向绑定失效如何解决？

你遇到的报错如下：

The property and event halves of the two-way binding 'ngModel' are not bound to the same target.

错误原因 #

Angular 12 对双向绑定的合法性校验逻辑进行了升级，旧版本ng2-nouislider@1.8.2的内置ngModel实现不符合新的校验规则，就会触发该报错。全新项目可以正常运行是因为依赖安装时自动拉取了适配 Angular 12 的子依赖版本，升级项目因为依赖锁定文件缓存了旧版本依赖，所以会出现兼容问题。

修复步骤 #

• 第一步：清理旧依赖缓存
  先删除项目根目录下的node_modules文件夹、package-lock.json（npm用户）或yarn.lock（yarn用户），再运行命令清理全局缓存：

  npm cache clean --force
  

• 第二步：固定兼容版本
  修改package.json中的依赖配置，使用经过验证适配 Angular 12 的版本组合：

  "ng2-nouislider": "1.8.3",
  "nouislider": "14.6.4",
  

• 第三步：重新安装依赖
  运行命令重新安装所有依赖：

  npm install
  

• 临时规避方案
  如果上述步骤仍未解决问题，可以将双向绑定拆分为单独的属性绑定和事件绑定，完全绕过 Angular 的双向绑定校验，效果和原[(ngModel)]写法完全一致：

  <nouislider [ngModel]="test" (ngModelChange)="test = $event"></nouislider>
  

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