title: Angular 1 - Service to detect change redux state change
body: <p>I am trying to create a service that will detect a change in the redux state of my application to be able to redirect to different pages.</p>
  
  <p>The error that I am getting is:</p>
  
  <pre><code>Error: [$injector:unpr] Unknown provider: translate2FilterProvider &lt;- 
  translate2Filter
  </code></pre>
  
  <p><a href="http://errors.angularjs.org/1.6.4/" rel="nofollow noreferrer">http://errors.angularjs.org/1.6.4/</a>$injector/unprp0=translate2FilterProvider%20%3C-%20translate2Filter</p>
  
  <p>Here is my redirection service:</p>
  
  <pre><code>import * as angular from 'angular'
  import {
      IStateService,
  } from 'angular-ui-router'
  import {subscribe} from 'awesomeLibrary_web_stateSubscribe'
  import {getUser} from '../redux/get'
  import {
      INgRedux,
      State,
  } from '../redux/redux'
  import {RouterParams} from '../redux/root/router/routerReducers'
  
  
  export class RedirectionService {
  
      constructor(
          public  $ngRedux:       INgRedux,
          public  $stateParams:   RouterParams,
          public  $state:         IStateService,
          $scope:                 angular.IScope,
      ) {
  
          $scope.$on('$destroy', this.$ngRedux.connect(s =&gt; this._mapState(s))(this))
  
          $ngRedux.subscribe(async () =&gt; { await this.redirectinDetection() })
  
      }
  
      public async redirectinDetection() {
  
          const state = this.$ngRedux.getState()
          const user = getUser(state)
  
          if (this.$state.is('site.user')) {
              // Here it will redirect to user/:userId
              if (user &amp;&amp; !this.$stateParams.userId) {
                  this.$state.go('site.user', {userId: user.id})
              }
              else if (!user) {
                  // not logged in
              }
          }
  
      }
  
      private _mapState = (state: State) =&gt; ({
          user: getUser(state),
      })
  
  }
  
  angular.module('Site')
      .service('redirectionSerivce', RedirectionService)
  </code></pre>
  
  <p>Below is the component in which I am trying to inject the redirectionService into. It is the main top level component as I want this service to run on the entire site:</p>
  
  <pre><code>import * as es6Promise from 'es6-promise'
  es6Promise.polyfill()
  
  import * as angular from 'angular'
  import 'angular-animate'
  import 'angular-aria'
  import 'angular-local-storage'
  import 'angular-material'
  import 'angular-messages'
  import 'angular-ui-router'
  import 'ng-redux'
  import {
      INgRedux,
      State,
  } from './redux/redux'
  import {RouterParams} from './redux/root/router/routerReducers'
  import '../../node_modules/angular-elastic/elastic'
  import '../../node_modules/angular-material/angular-material.min.css'
  import './cUser/cUser'
  import './mConfig/persistentQueryParamsConfig'
  import './mConfig/routeConfig'
  import './mDirectives/mDirectives'
  import './mServices/mServices'
  import './redux/redux'
  
  class SiteController {
  
      constructor(
          $ngRedux: INgRedux,
      ) {
          $ngRedux.connect(s =&gt; this._mapState(s))(this)
      }
  
      private _mapState = (state: State) =&gt; ({
          metaTitle:          'title'),
      })
  
  }
  
  class StatelessController {
  
      constructor(
          public $stateParams: RouterParams,
      ) {}
  
  }
  
  angular.module('Site').controller('SiteController', SiteController)
  angular.module('Site').controller('StatelessController', StatelessController)
  angular.module('Site').run([
      'redirectionService',
      angular.noop, // tslint:disable-line:no-unbound-method
  ])
  </code></pre>