const BAR_TOKEN = new InjectionToken('Bar', {
  factory() {
    const foo = inject(FooService);
    return foo.bar;
  }
});

@Component({
  providers: [BAR_TOKEN], // this will not work even if we defined `factory` for the `BAR_TOKEN`
})
export class BarComponent {}

@Component({
  providers: [{ provide: BAR_TOKEN, useFactory: () => inject(FooService).bar }],
})
export class BarComponent {}

const BAR_TOKEN_1 = new InjectionToken('Bar', {
  providedIn: 'root',
  factory() {
    const foo = inject(FooService);
    return foo.bar;
  }
}); // BAR_TOKEN_1 is provided at the root level (no changes in this case)

const BAR_TOKEN_2 = new InjectionToken('Bar', {
  factory() {
    const foo = inject(FooService);
    return foo.bar;
  }
});

// BAR_TOKEN_2 is not provided anywhere by default,
// similar to `@Injectable()` that doesn't contain `{ providedIn: root }` config.
// However, `InjectionToken` with a factory can be provided in the following way:

@Component({
  providers: [BAR_TOKEN_2]
})
export class BarComponent {}

export function injectBar() {
  const foo = inject(FooService);
  return foo.bar;
}