Angular使用Symbol注入服务在Firefox报错，Chrome正常求解决方案

问题场景 #

我的Angular应用在Chrome中运行正常，核心代码如下：

export interface UserService {
  me(): Observable<Response<User>>;
}

export const UserServiceRef = Symbol();

// 提供者配置
providers: [
    {
      provide: UserServiceRef,
      useClass: UserServiceGqlImpl,
    },
]

但在Firefox中触发如下错误：

ERROR TypeError: WeakMap key Symbol() must be an object

将令牌改为字符串后错误消失：

export const UserServiceRef = 'UserServiceRef';

问题原因 #

这个报错源于Firefox对WeakMap键的类型限制，以及Angular DI系统的底层实现：

• WeakMap规范在ES2018才允许Symbol作为键，部分旧版本Firefox未支持该特性；
• 部分旧版本Angular的DI系统使用WeakMap存储令牌关联数据，当传入Symbol类型令牌时，不符合WeakMap要求键必须是对象的旧规范，从而抛出错误。

解决方案 #

1. 使用Angular官方推荐的InjectionToken（最优方案） #

InjectionToken是Angular专门设计的DI令牌类型，兼容性更好，完全避免这类跨浏览器问题：

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

export interface UserService {
  me(): Observable<Response<User>>;
}

// 创建类型安全的InjectionToken
export const UserServiceRef = new InjectionToken<UserService>('UserServiceRef');

// 提供者配置无需修改
providers: [
    {
      provide: UserServiceRef,
      useClass: UserServiceGqlImpl,
    },
]

2. 升级Firefox版本 #

将Firefox升级到最新稳定版，确保其支持ES2018标准中Symbol作为WeakMap键的特性。

3. 升级Angular版本 #

升级到较新版本的Angular，官方已修复此类跨浏览器兼容问题。

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