Angularのコンテキスト外でInjectableを利用する方法

[ver-1000000]

v14でEnvironmentInjectorなどのAPIが導入され、よりサービスのDIがしやすくなりました。

私の認識では、
「EnvironmentInjector#runInContextを利用すると、Classではない単一の関数内などでもサービスがDIできるようになる」
はずだったのですが、実際に利用してみるとNG0203のエラーが出てしまいました。

具体的なケースとしては次のようなコードになります。

import { EnvironmentInjector, inject } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { OperatorFunction, pipe, switchMap, finalize } from 'rxjs';

/**
 * Observableの非同期処理内でIonicのLoadingControllerを使いやすくするためのRxJS用カスタムパイプ。
 *
 * - completeしないobservableに対しては使えないので注意
 *
 * @exmaple
 * this.http.get('/example.com').pipe(loading()).subscribe();
 */
export const loading = <T>(): OperatorFunction<T, T> => {
  const environment: EnvironmentInjector               = inject(EnvironmentInjector); // <- ここでエラーが出てそもそもEnvironmentInjectorをDIできない
  const loadingController: LoadingController           = environment.runInContext(() => inject(LoadingController));
  const loadingPromise: Promise<HTMLIonLoadingElement> = loadingController.create();

  return pipe(
    switchMap(async (value) => {
      await (await loadingPromise).present();
      return value;
    }),
    finalize(() => loadingPromise.then((loading) => loading.dismiss()))
  );
};

「EnvironmentInjectorはコンポーネントやサービスのconstructor contextでDIしないと利用できないのかな？」と想像しています。

このような用途でサービスを利用することは叶わないのでしょうか。
なにか手立てやアイディアがあればご回答頂きたいと思います😥

---

最悪
this.http.get('/example.com').pipe(loading(this.loadingController)).subscribe();
みたいになるのかなぁ、と考えています……。

関連/参考

• Angular 日本語ドキュメンテーション - EnvironmentInjector
• How to use inject() in a Pipe with Angular 14? - Stack Overflow
• Getting to Know the runInContext API in Angular | by Netanel Basal | Netanel Basal

[lacolaco]

EnvironmentInjectorはコンポーネントやサービスのconstructor contextでDIしないと利用できないのかな？」と想像しています

そのとおりです。そこでinjectしておいた EnvironmentInjector を保持しておいてあとで任意のコンテキストで呼び出すためのAPIです

[lacolaco]

なので、

this.http.get('/example.com').pipe(loading(this.loadingController)).subscribe();

だったり、

this.http.get('/example.com').pipe(this.loadingController.withLoading()).subscribe();

みたいにoperatorを返すサービスメソッドを作る感じになるかと思います

[ver-1000000]

ありがとうございます！ どうやら認識通りのようでした。
(this.http.get('/example.com').pipe(loading()).subscribe();ができたらかっこいいなぁと思っていたのでちょっと残念でした😢)

本回答を受け、カスタムパイプを関数で提供するのをやめ、
次のように使える「複数のカスタムパイプを提供するサービス」を作る方針でいくことにしました。

operators = inject(CustomOperatorsService);

hoge() {
  this.http.get('/example.com').pipe(this.operators.loading()).subscribe();
}