Angular中Value Provider注入报错问题排查求助

这个错误的核心原因是Angular无法找到你要注入的TEXTE_VIDE_VALEUR对应的依赖配置，通常是注入令牌与构造函数声明不匹配或者Value Provider的配置有误。下面分两种常见场景给出解决方案：

场景1：你使用了自定义InjectionToken作为注入令牌 #

如果你的TEXTE_VIDE_VALEUR是通过InjectionToken定义的自定义令牌（比如下面的示例）：

// 在SharedModule相关文件中定义
import { InjectionToken } from '@angular/core';

export class TexteVide {
  texte = '默认空文本内容';
}

// 自定义注入令牌
export const TEXTE_VIDE_VALEUR = new InjectionToken<TexteVide>('TexteVideValue');

并且在SharedModule的providers中配置了：

providers: [
  { provide: TEXTE_VIDE_VALEUR, useValue: new TexteVide() }
]

那你的TestsComponent构造函数必须通过@Inject()装饰器明确指定要注入的令牌——因为Angular默认会把参数的类型（这里是TexteVide类）当作查找的令牌，而不是你自定义的TEXTE_VIDE_VALEUR。修改构造函数如下：

import { Component, Inject } from '@angular/core';
import { TEXTE_VIDE_VALEUR, TexteVide } from '../shared/shared.module';

@Component({
  selector: 'app-tests',
  templateUrl: './tests.component.html'
})
export class TestsComponent {
  // 用@Inject指定注入令牌
  constructor(@Inject(TEXTE_VIDE_VALEUR) private texteVide: TexteVide) {
    console.log(texteVide.texte);
  }
}

场景2：你想直接注入TexteVide类的实例 #

如果你的目标是直接注入TexteVide类的实例，不需要自定义令牌，那要调整SharedModule的Provider配置，把provide字段设为TexteVide类本身：

// SharedModule的providers配置
providers: [
  { provide: TexteVide, useValue: new TexteVide() }
  // 如果你不需要自定义实例值，也可以直接简写为：TexteVide（这是用类作为工厂创建实例）
]

此时构造函数可以直接声明类型，无需@Inject装饰器：

constructor(private texteVide: TexteVide) {
  console.log(texteVide.texte);
}

额外检查项 #

• 确保TexteVide类和自定义令牌（如果使用）已经在SharedModule中正确导出，并且TestsComponent所在的模块已经导入了SharedModule。
• 如果你使用了Angular 8+的providedIn: 'root'方式注册Provider，无需在SharedModule的providers中重复配置，避免注入器冲突。

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