Ошибка крутильной ошибки Angular.js в обертке ui-router

Question

Я следую за руководством по угловому стилю Джона Папы (https://github.com/johnpapa/angular-styleguide#routing) и используя пользовательскую оболочку вокруг углового ui-router, представленную в этом руководстве. Однако, оболочка не работает для меня, и я получаю ошибку циклической зависимости при закачке $ состояния:

Uncaught Error: [$injector:cdep] Circular dependency found: $rootScope <- $timeout <- $$rAF <- $$animateQueue <- $animate <- toastr <- logger <- $exceptionHandler <- $rootScope <- $state <- routerHelper 

Я попытался инъекционным $ состояния вручную, используя $ форсунки, но это дает мне неизвестную ошибку поставщика.

Вот код:

(function() { 
'use strict'; 

angular 
    .module('blocks.router') 
    .provider('routerHelper', routerHelperProvider); 

routerHelperProvider.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider', '$injector']; 

function routerHelperProvider($locationProvider, $stateProvider, $urlRouterProvider) { 


    this.$get = RouterHelper; 

    $locationProvider.html5Mode(true); 

    RouterHelper.$inject = ['$state']; 

    function RouterHelper($state) { 
     var hasOtherwise = false; 

     var service = { 
      configureStates: configureStates, 
      getStates: getStates 
     }; 

     return service; 

     function configureStates(states, otherwisePath) { 
      states.forEach(function (state) { 
       $stateProvider.state(state.state, state.config); 
      }); 
      if (otherwisePath && !hasOtherwise) { 
       hasOtherwise = true; 
       $urlRouterProvider.otherwise(otherwisePath); 
      } 
     } 

     function getStates() { 
      return $state.get(); 
     } 
    } 

} 
})(); 

Answer 1

Я думаю, что это проблема с toastr, а не код пользовательского интерфейса маршрутизатора.

John Papa основывает свои примеры на простом пакете «toastr», а не на пакете «угловатый тост».

toastr: https://github.com/CodeSeven/toastr

угловой toastr: https://github.com/Foxandxss/angular-toastr

С пакетом 'toastr' он регистрирует глобальный экземпляр toastr используя константу:

.module('app.core') 
    .constant('toastr', toastr); 

что делает его доступным для инъекций в службу регистрации:

logger.$inject = ['$log', 'toastr']; 

/* @ngInject */ 
function logger($log, toastr) { 

---

Однако, если вы используете пакет углового toastr, объект toastr вводит набор зависимостей на некоторых угловых объекты:

$rootScope <- $timeout <- $$rAF <- $$animateQueue <- $animate <- toastr 

И это вызывает циклическую зависимость, потому что $ rootScope имеет обработку исключений, которая использует регистрирующее/toastr объекты:

toastr <- logger <- $exceptionHandler <- $rootScope 

---

Я не был уверен, как правильно реорганизовать это, чтобы удалить циклическую зависимость. Так, как временный обходной путь, я изменил службу регистратора, чтобы отложить разрешение зависимости toastr с помощью $ injector. Не идеально, но я смог переходить к другим насущным проблемам.

logger.$inject = ['$log', '$injector']; // 'toastr' 

/* @ngInject */ 
function logger($log, $injector) { // toastr 

    var service = { 
     showToasts: true, 

     info : info, 
     success : success, 
     warning : warning, 
     error : error, 

     // straight to console; bypass toastr 
     log  : $log.log 
    }; 

    return service; 
    ///////////////////// 


    function info(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.info(message, title); 
     $log.info('Info: ' + message, data); 
    } 

    function success(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.success(message, title); 
     $log.info('Success: ' + message, data); 
    } 

    function warning(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.warning(message, title); 
     $log.warn('Warning: ' + message, data); 
    } 

    function error(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.error(message, title); 
     $log.error('Error: ' + message, data); 
    } 

}