Angular 5中如何通过ReflectiveInjector解决HTTP依赖（非构造注入）

你的问题根源在于依赖了Angular内部的私有API——直接访问HttpClientModule的decorators属性。开发模式下Angular会保留这些装饰器元数据，但生产构建（或者开启优化的构建）时，编译器会移除这类未公开的属性，导致(<any>HttpClientModule).decorators变成undefined，自然就会抛出Cannot read property '0' of undefined的错误。decorators是Angular内部用来处理元数据的属性，绝对不应该在业务代码里直接调用。

下面给你两种靠谱的解决方案，都能避开这个坑：

方案一：直接提供HttpClient的核心依赖 #

如果只是需要获取一个可用的HttpClient实例，可以直接声明它运行所需的核心服务，不需要碰模块的私有属性：

import { ReflectiveInjector } from '@angular/core';
import { HttpClient, HttpHandler, HttpXhrBackend } from '@angular/common/http';

private http: HttpClient;

constructor() {
  // 构建注入器，传入HttpClient及其必要依赖
  const injector = ReflectiveInjector.resolveAndCreate([
    HttpClient,
    HttpHandler,
    HttpXhrBackend
  ]);
  
  this.http = injector.get(HttpClient);
  console.log(this.http);
}

这种方式简单直接，开发和构建环节都能正常运行，完全不依赖内部API。

方案二：通过临时NgModule复用完整配置 #

如果你需要用到HttpClientModule的完整配置（比如全局拦截器、默认请求配置等），可以创建一个临时的NgModule来导入它，再从模块的注入器里拿实例：

import { ReflectiveInjector, NgModule, NgModuleRef } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';

// 临时模块，专门用来导入HttpClientModule
@NgModule({
  imports: [HttpClientModule]
})
class TemporaryHttpModule {}

private http: HttpClient;

constructor() {
  // 创建注入器并获取临时模块的引用
  const injector = ReflectiveInjector.resolveAndCreate([TemporaryHttpModule]);
  const moduleRef = injector.get(NgModuleRef<TemporaryHttpModule>);
  
  // 从模块的注入器中获取配置完整的HttpClient
  this.http = moduleRef.injector.get(HttpClient);
  console.log(this.http);
}

这种方式能完整复用HttpClientModule的所有预设配置，同时避开了私有API的坑。

额外小提醒 #

虽然你明确要求用ReflectiveInjector而非构造函数注入，但还是得说一句：Angular官方最推荐的依赖注入方式就是构造函数注入，这种方式更符合框架的设计逻辑，代码也更易维护和测试。如果没有特殊的业务场景限制，建议直接用这种标准方式：

// 第一步：在你的根模块或功能模块中导入HttpClientModule
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule]
})
export class YourFeatureModule {}

// 第二步：在组件/服务的构造函数中直接注入
constructor(private http: HttpClient) {
  console.log(this.http);
}

内容的提问来源于stack exchange，提问作者AbuHuraira Lakdawala