javascript - StaticInjectorError [HttpClient]:不支持的函数/类

我正在尝试手动注入HttpClientModule，它在独立的外部运行（可能是！）从应用程序。在静态注射器之前，我使用反射式注射器，代码工作良好，但现在反射式注射器已经被弃用，我想用静态注射器更新我的代码。

//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客户端时，它给出了错误：
StaticInjectorError[HttpClent]: Function/class not supported

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

所以如果我记录它，它会记录app-injector然后bootstrapping。

最佳答案

StaticInjector应该是的替换，不需要ReflectiveInjector API。Reflect是低级黑客，在当前状态下它可能无法与getAnnotations一起工作。而且，StaticInjector在设计上与aot不兼容。
最好为一个模块创建一个注入器，就像它应该由框架完成的那样，也就是说，一个模块应该是自举的。因为没有要引导的组件，所以应该指定getAnnotations钩子。
默认情况下，引导过程是异步的。如果这不是问题，初始化承诺可以被链接以获取模块实例。
安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都兼容（这有利于使用ngDoBootstrap而不是angular，因为这大大降低了占用空间）。
否则，可以执行自定义同步引导例程。这是可能的，因为不需要异步初始化。
安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，应该使用HttpClient编译器编译它，并且应该创建使用模块工厂的单独入口点。引导程序变得更加简单，因为它不涉及编译器，比如：

...
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();

关于javascript - StaticInjectorError [HttpClient]:不支持的函数/类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50118712/

AOT

javascript - StaticInjectorError [HttpClient]:不支持的函数/类