Using `$ mdToast` inside a circular dependency interceptor

Question

Question:

How can I use $mdToastinside an interceptor without causing an error?

Setup:

Interceptor Definition:

(function () {
  'use strict';

  angular
    .module('app.components.http-errors-interceptors')
    .factory('HttpError500Interceptor', HttpError500Interceptor);

  /* @ngInject */
  function HttpError500Interceptor($q,
                                   $mdToast,
                                   $filter) {

    var interceptor           = {};
    interceptor.responseError = responseError;

    function responseError(responseError) {
      if (responseError.status === 500) {
        $mdToast.show($mdToast.simple()
                              .content($filter('translate')('APP.COMPONENTS.HTTP_ERRORS_INTERCEPTORS.500'))
                              .position('bottom right')
                              .hideDelay(5000));
      }
      return $q.reject(responseError);
    }

    return interceptor;
  }
})();

Interceptor Configuration:

(function () {
  'use strict';

  angular
    .module('app.components.http-errors-interceptors')
    .config(moduleConfig);

  /* @ngInject */
  function moduleConfig($httpProvider) {
    $httpProvider.interceptors.push('HttpError500Interceptor');
  }
})();

Question:

When I download the application, it causes the following error:

Unprepared error: [$ injector: cdep] Circular dependency found: $ http <- $ templateRequest <- $$ animateQueue <- $ animate <- $$ interimElement <- $ mdToast <- HttpError500Interceptor <- $ http <- $ templateFactory <- - $ view <- $ state

Answer 1

, , , , , .

HTTP- interceptors , , , , $mdToast.

, , , , :

• HTTP- interceptors,
• notifications-hub.

interceptors :

$rootScope.$broadcast('notifications:httpError', responseError);

notifications-hub $mdToast, :

$rootScope.$on('notifications:httpError', function (event, responseError) { NotificationsHubService.processErrorsAndShowToast(responseError); });

NotificationsHubService - $mdToast.

:

, .

, .

Answer 2

, , - $injector, , . , - :

  /* @ngInject */
  function HttpError500Interceptor($q,
                                   $injector,
                                   $filter) {
    function responseError(responseError) {
      var $mdToast = $injector.get('$mdToast');

, , , , .

Answer 3

, ,

  var getToaster = ()=>{

    var toaster = $injector.get('$mdToaster');
    return toaster;
}

Now call it only when you need it - this will ensure work around the dependency circular