Angular中用Token配置Provider报错：MY_TOKEN未定义的疑问

这个问题我刚接触框架依赖注入机制的时候也踩过一模一样的坑！咱们一步步把问题拆解清楚：

为什么会报错？ #

你写的MY_TOKEN在这里是一个未定义的变量，JavaScript/TypeScript并不会自动把它当作字符串字面量处理。在依赖注入系统里，provide字段需要的是一个「注入令牌（Injection Token）」——它可以是字符串、类，或者专门的令牌对象，但前提是这个令牌必须先被定义，不能直接写一个未声明的标识符。

两种可行的解决方案 #

方案1：直接使用字符串字面量当令牌 #

如果你想把它当作字符串来用，必须给它加上引号，这样它就变成了一个合法的字符串令牌：

providers: [{ provide: 'MY_TOKEN', useValue: 'dfd' }]

之后在组件/服务中注入时，也要用对应的字符串配合@Inject()装饰器：

import { Inject } from '@angular/core';

constructor(@Inject('MY_TOKEN') private myTokenValue: string) {}

方案2：使用官方推荐的InjectionToken（更推荐） #

对于中大型项目，框架官方更建议用InjectionToken来创建类型安全的注入令牌，步骤如下：

1. 先定义令牌（通常单独放在一个文件里，或者和模块/服务同文件）：

import { InjectionToken } from '@angular/core';

// 泛型<string>指定令牌对应值的类型，实现类型校验
export const MY_TOKEN = new InjectionToken<string>('MY_TOKEN_DESCRIPTION');

2. 在模块的providers中引用这个已经定义好的令牌：

// 先导入刚才定义的MY_TOKEN
import { MY_TOKEN } from './path-to-your-token-file';

providers: [{ provide: MY_TOKEN, useValue: 'dfd' }]

3. 注入时同样引用这个令牌：

import { Inject } from '@angular/core';
import { MY_TOKEN } from './path-to-your-token-file';

constructor(@Inject(MY_TOKEN) private myTokenValue: string) {}

两种方案的区别 #

• 字符串令牌：简单快捷，适合小型项目或临时场景，但容易出现拼写错误，且没有类型校验。
• InjectionToken：类型安全，能避免拼写错误，还可以通过泛型指定值的类型，适合大型项目和需要严格类型校验的场景。

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