Angular 2 Make and Handle Ajax 在模块引导之前请求配置

Question

我正在使用 Angular 2.3.

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

到目前为止，我已经尝试了两种方法，但均无效：

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

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

在此示例中，initialize() returns 工厂在返回函数之前将其包装在函数中的承诺。这是唯一有效的组合。以下不起作用：(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));
    });

以上失败并出现此错误：未处理的 Promise 拒绝：无法在 CookieXSRFStrategy.configureRequest

处读取属性 'getCookie' 的 null

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

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

Answer 1

从我个人的经验来看，我从来没有能够让 APP_INITIALIZER 以我需要的方式工作。我找不到任何对我有用的例子。所以我只是运行你在第二次尝试中尝试做的事情。尽管如此，您需要扩展 CookieXSRFStrategy 并覆盖 configureRequest。这就是 NoopCookieXSRFStrategy 的来源。

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

见

Angular 2 Make and Handle Ajax 在模块引导之前请求配置

Angular 2 Make and Handle Ajax Request For Config Before Module Is BootStrapped

bootstrapping

angular