Injecting a service in Angular using a Symbol does not work in Firefox

My Angular app works in Chrome.

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

export const UserServiceRef = Symbol();

----

providers: [
    {
      provide: UserServiceRef,
      useClass: UserServiceGqlImpl,
    },

However, I get this error in Firefox.

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

If I change it this way, then it doesn't give the error anymore.

export const UserServiceRef = 'UserServiceRef';

Can anyone help me?

You could provide either a string or an InjectionToken - (Old Docs Recommended since it contains more detailed explanation) as an input to provide.

As per the docs:

provide ( any ):

An injection token. (Typically an instance of Type or InjectionToken, but can be any).

export const UserServiceRef = new InjectionToken<string>('UserServiceRef');
// export const UserServiceRef = 'UserServiceRef';
----

providers: [
    {
      provide: UserServiceRef,
      useClass: UserServiceGqlImpl,
    },