javascript - StaticInjectorError [HttpClent] : Function/class not supported

Question

我正在尝试手动注入(inject)HttpClientModule，它在外部独立运行(可能是!)在使用静态注入(inject)器之前，我使用的是反射注入(inject)器并且代码工作正常，但现在反射注入(inject)器已被弃用，我想用静态注入(inject)器更新我的代码。

//appInjector.ts
export class AppInjector {

  private static _instance: AppInjector = new AppInjector();
  private _injector;

  constructor() {
    console.log('app-injector');
    AppInjector._instance = this;
    this._injector = ReflectiveInjector.resolveAndCreate([
        ...[getAnnotations(HttpClientModule)[0].providers],
        MY_HTTP_DEPENDENT_PROVIDERS
        ]);
        
  static getInstance(): AppInjector {
    return AppInjector._instance;
  }

  get(cls: any): any {
    return this._injector.get(cls);
  }
}
//someFile.ts
const translate = AppInjector.getInstance().get(TranslateResource);

引用This Post用于注释 fn。现在，当我尝试将 Http 客户端与静态注入(inject)一起使用时，它给出了错误:StaticInjectorError[HttpClent]:不支持函数/类

//app module
@NgModule({
  imports: [],
  declarations: [],
  providers: [],
  entryComponents: [App]
})
export class AppModule {
  ngDoBootstrap(app) {
    console.log('bootstrapping');
    app.bootstrap(App);
  }

因此，如果我记录，它将记录 app-injector，然后是 bootstrapping。

Answer 1

StaticInjector 应该是 ReflectiveInjector 的替代品，它不需要 Reflect API。 getAnnotations 是低级 hack，在当前状态下它可能无法与 StaticInjector 一起使用。此外，getAnnotations 在设计上与 AOT 不兼容。

最好按照框架应该完成的方式为模块创建注入(inject)器，即应该引导模块。由于没有要引导的组件，因此应指定 ngDoBootstrap Hook 。

默认情况下，引导过程是异步的。如果这不是问题，可以链接初始化 promise 以获取模块实例。

安example :

@NgModule({
  imports: [BrowserModule, HttpClientModule]
})
export class MyHttpModule {
  static httpClient?: HttpClient;
  httpClient?: HttpClient;

  constructor(private _injector: Injector) {}

  ngDoBootstrap() {
    MyHttpModule.httpClient = this.httpClient = this._injector.get(HttpClient);
  }  
}

platformBrowserDynamic().bootstrapModule(MyHttpModule)
.then((myHttpModule: NgModuleRef<MyHttpModule>) => {
    // HttpClient instance is available here
    const httpClient = myHttpModule.instance.httpClient;
    httpClient.get('/foo', { responseType: 'text'}).subscribe();
})
.catch(err => console.error(err));

这种方法开箱即用地与 JIT 和 AOT 兼容(除了 Angular 之外，这对于使用 HttpClient 非常有用，因为这会显着降低占用空间)。

否则可以改为执行自定义同步引导例程。这是可能的，因为 HttpClient 不需要异步初始化。

安example :

@NgModule({
  imports: [BrowserModule, HttpClientModule]
})
export class MyHttpModule {
  static httpClient?: HttpClient;

  constructor(public _injector: Injector) {
    MyHttpModule.httpClient = this._injector.get(HttpClient);
  }

  ngDoBootstrap() {}  
}

const platform = platformBrowserDynamic();
const compiler = platform.injector.get(CompilerFactory).createCompiler();
const moduleFactory = compiler.compileModuleSync(MyHttpModule);

platform.bootstrapModuleFactory(moduleFactory)
.catch(err => console.error(err));

const httpClient = MyHttpModule.httpClient;
httpClient.get('/foo').subscribe();

这将在 JIT 中工作，但在上面的代码中 Angular CLI 无法有效地处理 AOT。代码涉及编译器，AOT 编译模式不需要编译器(这就是它的目的)。为了使用 AOT，应该用 ngc 编译器编译它，并且应该创建一个使用模块工厂的单独入口点。 Bootstrap 例程变得更加简单，因为它不涉及编译器，例如:

...
import { platformBrowser } from '@angular/platform-browser-dynamic';
import { AppModuleNgFactory } from '<path to aot>/src/app/my-http-module.ngfactory';

const platform = platformBrowser();
platform.bootstrapModuleFactory(AppModuleNgFactory)
.catch(err => console.error(err));

const httpClient = MyHttpModule.httpClient;
httpClient.get('/foo').subscribe();