javascript - 使用 ES6 时出现未知提供者错误

Question

我正在尝试在 Angular 1.4.x(使用 ES6 和 Babel)中创建一个简单的 HTTP 拦截器。它唯一需要做的就是在检测到 HTTP 500 时重定向到错误页面。代码:

app/middleware/securityInterceptor.service.js

export default class SecurityInterceptorService {

  constructor($q, $location, config) {
    'ngInject';

    this.$location = $location;
    this.config = config;
    this.$q = $q;
  }

  responseError(rejection) {
    var deferred = this.$q.defer();

    if (rejection.status === 500) {
      this.$location.path(this.config.errorPagePath);
    }

    deferred.reject(rejection);
    return deferred.promise;
  }
}

现在，我在尝试运行应用程序时收到未知提供程序错误，指出 SecurityInterceptorService 未知。所以我看了一下它是如何注册的。但是，我没有看到任何明显的错误:

index.module.js

import interceptorConfig from './index.interceptors';

import SecurityInterceptorService from '../app/middleware/securityInterceptor.service';
// other imports

angular.module('app', ['ngTouch' /*, other dependencies */])
  .config(interceptorConfig)
  .service('securityInterceptorService', SecurityInterceptorService)
  // other declarations

index.interceptors.js

export default function interceptorConfig($httpProvider, securityInterceptorService) {
  'ngInject';

  // Security interceptor
  $httpProvider.interceptors.push(securityInterceptorService);
}

移除securityInterceptorService依赖时，我可以进入interceptorConfig函数。所以看来该服务没有注册。检查所有文件路径，检查变量名称中的拼写错误等。

如果有人能够指出我所犯的错误，我将不胜感激。

------------------------更新

通过 .config() 注入(inject)的以下函数确实可以工作。然而，当我尝试在此函数中推送 securityInterceptor 时，我收到相同的未知提供程序错误。

export default function config($logProvider, $locationProvider, toastr, $compileProvider) {
  'ngInject';

  // Enable log
  $logProvider.debugEnabled(true);

  // Set options third-party lib
  toastr.options.timeOut = 3000;
  toastr.options.positionClass = 'toast-top-right';
  toastr.options.preventDuplicates = true;
  toastr.options.progressBar = true;

  // HTML 5 Modus Enabled No #
  $locationProvider.html5Mode({
    enabled: true,
    requireBase: false,
    hashPrefix: '!'
  });

  // Disable debug info
  $compileProvider.debugInfoEnabled(true);
}

Answer 1

事实证明，您无法在 .config() 中注入(inject)服务。将 index.interceptors.js 更改为以下内容时一切正常:

export default function interceptorConfig($httpProvider) {
  'ngInject';

  // Security interceptor
  $httpProvider.interceptors.push('securityInterceptorService');
}