在 Angular 4 中手动注入 Http

Question

我想手动引导一个 Angular 4 应用程序（使用 CLI 创建）。 在main.ts 我正在这样做：

const injector = ReflectiveInjector.resolveAndCreate([
  Http,
  BrowserXhr,
  {provide: RequestOptions, useClass: BaseRequestOptions},
  {provide: ResponseOptions, useClass: BaseResponseOptions},
  {provide: ConnectionBackend, useClass: XHRBackend},
  {provide: XSRFStrategy, useFactory: () => new CookieXSRFStrategy()},
]);
const http = injector.get(Http);

http.get('assets/configs/configuration.json')
  .map((res: Response) => {
    return res.json();
  }).subscribe((config: Configuration) => {
  configuration = config;
  console.log(JSON.stringify(configuration));
  platformBrowserDynamic().bootstrapModule(AppModule);
});

我似乎得到了一个有效的 Http 实例，但是当我使用它时 (http.get) 我得到了这个错误：

Uncaught TypeError: Cannot read property 'getCookie' of null
    at CookieXSRFStrategy.webpackJsonp.../../../http/@angular/http.es5.js.CookieXSRFStrategy.configureRequest (vendor.bundle.js:141626)

我的 http 对象如下所示：

Answer 1

您可以在 Angular 开始使用 ReflectiveInjector 之前使用 HttpClient 服务，如下所示：

import { ReflectiveInjector } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
const injector = ReflectiveInjector.resolveAndCreate(getAnnotations(HttpClientModule)[0].providers);

const http = injector.get(HttpClient);
http.get('/posts/1').subscribe((r) => {
  ConfigurationService.configuration = <Configuration>JSON.parse(config);
  platformBrowserDynamic().bootstrapModule(AppModule);
});

这一行：

getAnnotations(HttpClientModule).providers

引用在HttpClientModule 上注册的所有提供程序，因此您不必手动指定它们。 This answer 详细解释了 getAnnotations 函数。

我展示的方法“有点”类似于您将HttpClientModule 导入AppModule 时所做的：

@NgModule({
    imports: [HttpClientModule, ...],
})
export class AppModule {}

详情请见this plunker。

Answer 2

作为另一种方法，您可以使用本机浏览器fetch api。所以你不必处理 angular http 等

我就是这样做的：

fetch(configUrl, { method: 'get' })
.then((response) => {
  response.json()
    .then((data: any) => {
      if (environment.production) {
        enableProdMode();
      };
      platformBrowserDynamic([{ provide: AppSettings, useValue: new AppSettings(data.config) }]).bootstrapModule(AppModule);
    });
});

但请记住，fetch 在old browsers 中并没有得到太多的爱，所以如果你想支持，你需要用whatwg-fetch 像npm install whatwg-fetch --save 然后在polyfills.ts 中添加import 'whatwg-fetch'旧浏览器。

更新： 是的，您可以使用XMLHttpRequest，但您将获得与fetch 相同的浏览器支持，只是XMLHttpRequest 的现代替代品。

Answer 3

可能原来的答案以前有效，但在 Angular 5 中我无法使用它，函数 getAnnotations 没有定义。然而，这对我有用：

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

// https://github.com/angular/angular/blob/master/packages/common/http/src/xhr.ts#L45
export class BrowserXhr implements XhrFactory {
  build(): any { return <any>(new XMLHttpRequest()); }
}

const injector = ReflectiveInjector.resolveAndCreate([
  HttpClient,
  HttpXhrBackend,
  { provide: HttpBackend, useExisting: HttpXhrBackend },
  { provide: HttpHandler, useExisting: HttpBackend },
  { provide: XhrFactory, useClass: BrowserXhr},
]);

const http: HttpClient = injector.get(HttpClient);

http.get('/url').subscribe((response) => {
  console.log(response);
});

Answer 4

谢谢，昆切维奇。我想出了这个解决方案，效果很好：

function httpGetAsync(theUrl, callback) {
  const xmlHttp = new XMLHttpRequest();

  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
      callback(xmlHttp.responseText);
    }
  }

  xmlHttp.open('GET', theUrl, true); // true for asynchronous
  xmlHttp.send(null);
}

httpGetAsync('assets/configs/configuration.json', (config: string) => {
  ConfigurationService.configuration = <Configuration>JSON.parse(config);
  platformBrowserDynamic().bootstrapModule(AppModule);
});