javascript - 将 $http 拦截器创建为独立模块时 Angular 中的依赖项错误

Question

这是一个工作示例，说明我如何设置一个拦截器，该拦截器将身份验证 token 附加到每个请求(这或多或少是来自 https://docs.angularjs.org/api/ng/service/ $http 的示例)

angular.module("app", [])
.config(function ($httpProvider) {
  $httpProvider.interceptors.push("authInterceptor");
})
.factory("authInterceptor", function ($q) {
  return {
  // interceptor configuration here
  }
})

我的 config 和 run block 中还有很多其他东西，它们从不同的 Angular 模块调用和启动服务，所以我想稍微整理一下。但是我知道在 config block 中有一些非常具体的依赖注入(inject)规则，我不太明白，这些规则阻止我在单独的模块。当 config 和 run block 中的其他逻辑调用应用程序中的其他模块时，声明那里的拦截器看起来不合适。

这就是我想要做的:

angular.module("services.authInterceptor", [])
.factory("authInterceptor", function ($q) {
  return {
  // interceptor configuration here
  }
});

angular.module("app", [
 "services.authInterceptor"
]).config(function ($httpProvider, authInterceptor) {
  $httpProvider.interceptors.push("authInterceptor");
});

// Error: Unknown provider authInterceptor.

我尝试将它注入(inject) run block ，但我猜你不允许在那里注入(inject) $httpProvider:

angular.module("app", [
  "services.authInterceptor"
]).run(function ($httpProvider, authInterceptor) {
  $httpProvider.interceptors.push("authInterceptor");
});

// Error: Unknown provider: $httpProviderProvider <- $httpProvider

我应该在哪里注入(inject)模块以便 $httpProvider 也是可注入(inject)的，我应该在哪里添加拦截器到现有的拦截器？我的主要目标是将拦截器和其他类似服务保留在它们自己的自包含模块中。

编辑

当我声明 provider 而不是 factory 时，我得到了一个不同的错误，这似乎让我更接近了(出于某种原因，我一直认为它们是可以互换的):

angular.module("services.authInterceptor")
.provider("authInterceptor", function ($q) {
  return {}
})

// Error: Unknown provider: $q

因此它现在成功地将 authInterceptor 注入(inject)到我的 config block 中，但是在尝试查找 $q 时失败了。

Answer 1

在配置阶段只能注入(inject)提供者和常量。这是为了防止服务在完全配置之前实例化。

这就是您按名称注册拦截器的原因(将名称作为字符串推送到 $httpProvider.interceptors 数组中)。它们将在稍后的运行时得到解决。

这正是您在工作示例中所做的，也是您在第二个示例中需要做的，即使拦截器位于另一个模块中也是如此:

angular.module("services.authInterceptor", [])
.factory("authInterceptor", function ($q) {
  return {
  // interceptor configuration here
  }
});

angular.module("app", ["services.authInterceptor"])
.config(function ($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
});

演示: http://plnkr.co/edit/A8SgJ87GOBk6mpXsoFuZ?p=preview