从Angular 4升级至Angular 5后自定义FormControl报错求助

我之前处理过几起Angular 4升5后自定义表单控件报这个错的情况，给你梳理下问题根源和解决思路：

这个报错本质是Angular 5对表单模块的依赖注入机制做了更严格的校验和元数据追踪：

• Angular 5新增了__source属性来记录InjectionToken（这里就是NgValueAccessor）的来源信息，当同一个令牌被重复配置、或者配置方式不符合新版本规范时，就会触发“无法重定义属性”的错误。
• 另一个常见诱因是升级不彻底：项目中同时存在多个版本的@angular/forms包（比如第三方依赖还停留在Angular 4版本），导致令牌的元数据产生冲突。

1. 检查自定义表单控件的providers配置是否合规 #

确保你的自定义控件在注册NG_VALUE_ACCESSOR时遵循Angular 5的标准写法，避免重复注册：
正确的注册方式应该是：

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'your-custom-control',
  template: `...`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => YourCustomControlComponent),
      multi: true
    }
  ]
})
export class YourCustomControlComponent implements ControlValueAccessor {
  // ... 实现ControlValueAccessor的方法
}

• 不要在父组件/模块的providers中重复注册同一个NG_VALUE_ACCESSOR令牌
• 避免同时使用useClass和useExisting指向同一个组件

2. 彻底清理并统一Angular依赖版本 #

升级后很容易出现依赖版本不一致的问题，按以下步骤操作：

• 删除node_modules文件夹和package-lock.json（或yarn.lock）
• 执行安装命令重新拉取依赖：

rm -rf node_modules package-lock.json
npm install

• 打开package.json，确认所有@angular/*开头的包版本都是5.2.10，没有混合4.x和5.x的情况
• 如果发现第三方依赖拖了后腿（比如某些UI库还依赖Angular 4），尝试升级这些库到兼容Angular 5的版本，或者用npm ls @angular/forms命令排查依赖树中的版本冲突

3. 排查过时的表单扩展库 #

如果项目中用到了@ng-bootstrap/ng-bootstrap、Angular Material这类UI组件库，一定要确认它们的版本和Angular 5.2.10兼容。旧版本的库可能沿用了Angular 4的表单注入逻辑，和新版本的机制冲突。

4. 调试令牌注册情况（可选） #

如果以上步骤没解决问题，可以临时在自定义组件的构造函数中注入Injector，打印已注册的NG_VALUE_ACCESSOR实例，排查是否有重复注册：

import { Injector } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

constructor(private injector: Injector) {
  const registeredAccessors = this.injector.get(NG_VALUE_ACCESSOR);
  console.log('已注册的Value Accessor:', registeredAccessors);
}

如果输出中出现多个相同的组件实例，说明存在重复注册，需要清理多余的providers配置。

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