Angular "Unkown Provider" - how to use a factory within routeProvider configuration?

Question

While playing around with Angular I try to understand better how to use factory, services, constants, routing and other core concepts. So I build a simple demo app with node, express, jade and angular.

Now I would like to use a value inside the routeProvider configuration. I created a constant, this works fine. To make it more flexible for future usage I build a factory then, but this fails with "unknown provider". Is this a question of instantiation sequence in Angular? Why I cannot inject the factory into the .config section? Before I tried the same with a service instead of a factory, with the same error. Hopefully I didn't make a simple typo or syntax error, so far I didn't find any.

angular
  .module('main', [
    'ngRoute'
  ])

  .constant('cApp', {
      'defaultPath': '/home'
  })

  .factory('svcState', function(){
      var appState;

      function getState(){
          return appState;
      }

      function init() {
          appState='/home';
      }

      init();

      return{
          getState: getState
      };
  })

  .config(function($routeProvider, svcState, cApp){

      $routeProvider
          .when('/home', {
              templateUrl: "partials/home"
          })
          .when('/info', {
              templateUrl: "partials/info"
          })
          .otherwise({
              //redirectTo: cApp.defaultPath  // this works fine
              redirectTo: svcState.getState   // this fails with "Error: [$injector:unpr] Unknown provider: svcState"
          })

      })

;

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

svcState should be provider rather than service. Because service/factory won't be accessible inside config phase. You need to change the implementation of svcState to provider so that it will be available in config block of angular.

After provider implementation you could inject that provider using svcStateProvider in config block.

.config(function($routeProvider, svcStateProvider, cApp){

  $routeProvider
      .when('/home', {
          templateUrl: "partials/home"
      })
      .when('/info', {
          templateUrl: "partials/info"
      })
      .otherwise({
          redirectTo: svcStateProvider.getState() //<--change herer
      })

  })

Look at this answer to know more about provider

edited May 23 '17 at 11:43

Community

1
1

answered May 13 '15 at 07:42

Pankaj Parkar

134,766
23
234
299

fast answer .. thanks a lot! I understand service and factory are derived from provider. But ok, it seems it has to be "real" provider. – Rainer May 13 '15 at 07:45
@Rainer yes you need to change your service implementation to provider – Pankaj Parkar May 13 '15 at 07:51

score 0 · Answer 2 · answered May 13 '15 at 08:55

Here is what I changed:

angular
    .module('main', [
        'ngRoute'
    ])

    .provider('appState', function(){
        var appState;

        this.setState = function(newState) {
            appState = newState;
        };

        this.getState = function() {
            return appState;
        };

        this.$get = function() {
            return appState;
        };

        function init() {appState='/home';}
        init();

    })
    .config(function($routeProvider, appStateProvider){

        $routeProvider
            .when('/home', {
                templateUrl: "partials/home"
            })
            .when('/info', {
                templateUrl: "partials/info"
            })
            .otherwise({
                redirectTo: appStateProvider.getState()
            })

    })

;

Hi @pankajparkar, maybe you have another minute? I now try to SET a value this way, but get an error "not a function": `.run(function ($rootScope, appState) { $rootScope.$on('$routeChangeStart', function (event, next, current) { if (next.$$route) { appState.setState(next.originalPath); // ERROR: "TypeError: appState.setState is not a function" } }) })` Sorry, I still have to learn formatting a bit better here ... — Rainer, May 13 '15 at 09:08

Angular "Unkown Provider" - how to use a factory within routeProvider configuration?

2 Answers2

Linked