Angular自定义npm包中mat-select报NG01203无值访问器错误求助

• 开发了包含共享组件的自定义npm包，部分组件使用mat-select，采用响应式表单开发。其他输入类型组件（如chips、按钮、单选框等）均正常工作，但包内所有mat-select组件运行时都会报错；而应用内原生使用的mat-select无异常。
• 包与应用中所有@angular/系列包（含animations、cdk、common等）版本均为20.3.18，仅@angular/material版本为20.2.14（v20分支最高版本）。
• 无构建错误，仅运行时抛出：ERROR RuntimeError: NG01203: No value accessor for form control name...
• 已排查package-lock.json3天仍未解决，早期代码版本运行正常。

相关表单代码：

<mat-form-field>
  <mat-label>Role</mat-label>
  <mat-select [multiple]="allowMultiple" formControlName="role" (selectionChange)="roleChange($event)">
    <mat-option *ngFor="let group of userGroups" [value]="group.groupName" [disabled]="shouldDisable(group.groupName)">{{userRoleLabel(group.groupName)}}</mat-option>
  </mat-select>
</mat-form-field>

可行的解决思路 #

1. 检查npm包中Material模块的导入与导出 #

确保共享组件所在的NgModule正确导入并导出MatSelectModule，应用侧需要通过包的模块获取MatSelect的表单访问器（ValueAccessor）：

import { NgModule } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';
import { YourSharedSelectComponent } from './your-shared-select.component';

@NgModule({
  declarations: [YourSharedSelectComponent],
  imports: [MatSelectModule],
  exports: [YourSharedSelectComponent, MatSelectModule] // 必须导出，否则应用侧无法识别
})
export class SharedComponentsModule {}

2. 强制依赖版本完全一致 #

虽然你确认了版本号，但要避免范围版本导致的隐式子版本差异：

• 把npm包package.json中@angular/material的版本改为精确版本："@angular/material": "20.2.14"（去掉^或~前缀）
• 同时检查应用侧的package.json保持同样的精确版本
• 删除双方的node_modules和package-lock.json，重新执行npm install，确保没有多版本共存

3. 排查ValueAccessor被覆盖的情况 #

NG01203本质是Angular找不到对应控件的ValueAccessor，检查共享组件的providers配置，有没有意外覆盖了MatSelect默认的ValueAccessor提供者。比如不要在组件层级添加自定义的NG_VALUE_ACCESSOR，除非你确实需要自定义实现。

4. 清理缓存并重新构建 #

• 清空npm包的构建输出目录（比如dist），重新执行构建命令（如ng build your-package）
• 应用侧执行npm cache clean --force，再重装依赖并启动项目

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