Angular 2 在引导模块之前制作和处理 Ajax 配置请求答案

【问题标题】：Angular 2 Make and Handle Ajax Request For Config Before Module Is BootStrappedAngular 2 在引导模块之前制作和处理 Ajax 配置请求
【发布时间】：2016-12-19 00:55:22
【问题描述】：

我正在使用 Angular 2.3。

我想发出一个 ajax 请求以将数据加载到我的配置服务中，并且只有在收到并处理了 ajax 响应后才允许将配置服务注入到其他组件和服务中。

到目前为止，我已经尝试了两种技术，但都没有奏效：

首先，我在 app 模块中使用了这种技术：

providers: [
  Config2Service,
  {
    provide: APP_INITIALIZER,
    deps: [ Config2Service ],
    multi: true,
    useFactory: (configService: Config2Service) => {
      return () => configService.initialize();
    }
  }
]

在本例中，initialize() 返回一个承诺，工厂在返回该函数之前将其包装在一个函数中。这是唯一有效的组合。以下不起作用：（1）返回 config.initialize 本身。 (2) 返回调用configservice.initialize()的结果。

不要误会我的意思，configService 的初始化函数在早期被调用，但是返回的 promise 没有得到等待；当组件尝试访问配置服务中的配置数据时，应用程序引导程序会失败。一段时间后，配置数据出现并被正确处理，但为时已晚，应用程序崩溃了。

在第二种情况下，我删除了上述内容，并尝试这样做：

let providers = [
    {
      provide: Http, useFactory: (backend: XHRBackend, options: RequestOptions) => {
        return new Http(backend, options);
      },
      deps: [XHRBackend, RequestOptions]
    },
    BrowserXhr,
    ConfigService,
    XHRBackend,
    { provide: RequestOptions, useClass: BaseRequestOptions },
    { provide: ResponseOptions, useClass: BaseResponseOptions },
    { provide: XSRFStrategy, useValue: new CookieXSRFStrategy() }
];

let configService: ConfigService = ReflectiveInjector.resolveAndCreate(providers).get(ConfigService);

configService.initialize()
    .then(configData => {
        platformBrowserDynamic().bootstrapModule(MyAccountModule.factory(configService));
    });

上述失败并出现以下错误：未处理的承诺拒绝：无法在 CookieXSRFStrategy.configureRequest 读取属性“getCookie”的 null

在我从中得到的 SO 示例中，具体的 XSRFStrategy 被称为 NoopCookieXSRFStrategy 但我在 @angular/http 文件夹中找不到它。我也找不到我认为该代码源自的 HTTP_PROVIDERS。

我已经尝试过我正在尝试做的事情，我错过了什么？

【问题讨论】：

标签： angular bootstrapping

【解决方案1】：

根据我的个人经验，我也无法让APP_INITIALIZER 以我需要的方式工作。我找不到任何对我有用的例子。因此，我只是按照您在第二次尝试中尝试做的事情来运行。尽管如此，您需要扩展CookieXSRFStrategy 并覆盖configureRequest。这就是NoopCookieXSRFStrategy 的来源。

class NoopCookieXSRFStrategy extends CookieXSRFStrategy {
  configureRequest(request) {
    // noop
  }
}

见complete example

【讨论】：

宾果游戏。谢谢。