ConnectionBackend 在 Angular 2 版本中不起作用？如何提供 XHRBackend？答案

【问题标题】：ConnectionBackend not working in angular 2 release? How do I provide XHRBackend?ConnectionBackend 在 Angular 2 版本中不起作用？如何提供 XHRBackend？
【发布时间】：2017-01-23 09:58:40
【问题描述】：

TypeProvider ConnectionBackend 在从 Angular 2.0.0-rc.5 升级到 2.0.0 后不再工作。

当我把它放在我的供应商列表中时。我从 Visual Studio 代码中得到这个错误。

[ts] 类型参数 '{ bootstrap: typeof AppComponent[];声明：（typeof LoginComponent | typeof EmailLoginCompo...' 不可分配给“NgModule”类型的参数。财产“提供者”的类型不兼容。类型 '(any[] | typeof HttpModule | typeof Location | typeof AuthStore | typeof RequestInterceptor | typ...' 不可分配给类型'(TypeProvider | ValueProvider | ClassProvider | ExistingProvider | FactoryProvider | any[])[]'。键入'任何 [] |类型的 HttpModule |位置类型 | typeof AuthStore |类型请求拦截器 | type...' 不能分配给类型 'TypeProvider |价值提供者 |类提供者 |现有提供者 |工厂供应商 |任何[]'。类型“typeof ConnectionBackend”不可分配给类型“TypeProvider |价值提供者 |类提供者 |现有提供者 |工厂供应商 |任何[]'。类型“typeof ConnectionBackend”不可分配给类型“any[]”。 “typeof ConnectionBackend”类型中缺少属性“push”。

我查看了changelog，但没有看到任何适用于此的内容。我确实注意到，例如 HTTP_PROVIDERS 已被替换为 HttpModule，但那是在更改日志中，并且整个参考都丢失了。这很陌生。

在 Angular 2 的发布版本中我打算使用什么来提供 XHRBackend？

这是所有相关代码的一种附录。问题部分已经结束：

这是我的 NGModule。我的应用程序运行良好（除了需要提供 Http 对象时中断），ConnectionBackend 行被注释掉了。

    @NgModule({
      bootstrap: [ AppComponent ],
      declarations: [
        AppComponent,
        LoginComponent,
        EmailLoginComponent,
        EmailLoginCodeComponent,
        ErrorComponent,
        ExampleComponent,
      ],
      imports: [
        BrowserModule,
        routing,
      ],
      providers: [
        appRoutingProviders,
        HttpModule,
        Location,
        AuthStore,
        RequestInterceptor,
        ResponseInterceptor,
        ConnectionBackend, // THIS IS THE PROBLEM LINE
        {
            provide: Config,
            deps: [XHRBackend, RequestOptions],
            useFactory: (
                backend: XHRBackend,
                defaultOptions: RequestOptions
                ) => {
                    let config = new Config(new Http(backend, defaultOptions));
                    // I hope this promise finishes
                    let promise: Promise<Config> = config.load().then( response => config);
                    return config;
                },
        },
        {
            provide: PanelGuidStore,
            useFactory: (
                () =>
                    new PanelGuidStore()
                ),
        },
        Locator,
        {
            provide: AuthService,
            // Factory for AuthService
            // use standard http here to avoid circular references
            //      (as well as pointless attempts to put Auth tokens inside Auth requests)
            deps: [XHRBackend, RequestOptions, AuthStore, Config, Locator, PanelGuidStore],
            useFactory: (
                backend: XHRBackend,
                defaultOptions: RequestOptions,
                authStore: AuthStore,
                config: Config,
                locator: Locator,
                panelGuidStore: PanelGuidStore
                ) =>
                new AuthService(
                    new Http(backend, defaultOptions), authStore, config, locator, panelGuidStore
                ),
        },
        {
            provide: Http,
            // Factory for Http
            // Use custom http provider to inject access tokens and deal with access token expiry
            deps: [XHRBackend, RequestOptions, Location, RequestInterceptor, ResponseInterceptor],
            useFactory: (
                backend: XHRBackend,
                defaultOptions: RequestOptions,
                location: Location,
                requestInterceptor: RequestInterceptor,
                responseInterceptor: ResponseInterceptor,
                authService: AuthService) =>
                new AuthHttpProvider(
                    backend, defaultOptions, requestInterceptor, responseInterceptor
                    ),
        },
      ],
    })

这就是 Visual Studio 代码对“提供者”参数的描述：

（属性）提供者：（any[] | typeof HttpModule | typeof Location | typeof AuthStore | typeof RequestInterceptor | typeof ResponseInterceptor | { [x：数字]：未定义；提供：类型配置； deps: (typeof XHRBackend | typeof RequestOptions)[]; useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => Config; } | { [x：数字]：未定义；提供：PanelGuidStore 类型； useFactory: () => PanelGuidStore; } | typeof 定位器 | { [x：数字]：未定义；提供： AuthService 类型； deps: (typeof XHRBackend | typeof RequestOptions | typeof AuthStore | typeof Config | typeof Locator | typeof PanelGuidStore)[]; useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, authStore: AuthStore, config: Config, locator: Locator, panelGuidStore: PanelGuidStore) => AuthService; } | { [x：数字]：未定义；提供：typeof Http； deps: (typeof XHRBackend | typeof RequestOptions | typeof Location | typeof RequestInterceptor | typeof ResponseInterceptor)[]; useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, location: Location, requestInterceptor: RequestInterceptor, responseInterceptor: ResponseInterceptor, authService: AuthService) => AuthHttpProvider; })[]

【问题讨论】：

ConnectionBackend 只是一个接口。这是XHRBackend 实现的接口。我们需要一个ConnectionBackend，而XHRBackend 是实现。所以你可以取出ConnectionBackend 提供者。
取出时有没有运行时错误？
@peeskillet 是的。 “没有 XHRBackend 的提供者”。如果我尝试直接提供XHRBackend，我会得到“No provider for BrowserXhr”，这会导致我无法找到结尾的兔子洞（我认为接下来是“No provider for ResponseOptions”）。
也许它没有从 HttpModule 获取 XHRBackend。也许尝试取出 HttpModule，然后查看 its source，并明确添加模块中缺少的其他提供程序。要清理它，只需创建自己的模块并导入它
Duhh 我想我看到了问题所在。您应该导入 HttpModule ，而不是将其添加为提供者

标签： javascript angularjs angular typescript

【解决方案1】：

ConnectionBackend 只是一个接口。这是XHRBackend 实现的接口。所以你可以去掉ConnectionBackend提供者。

您收到缺少HRBackend 错误的原因是因为您应该导入 HttpModule，而不是将其添加为提供程序

imports: [ HttpModule /* DO */ ],
providers: [ HttpModule /* DONT */ ]

【讨论】：