AngularJS 1.5.x injecting service in routing config


    'use strict';
    var project = angular.module('app.project', []);
    var app = angular.module('app.main', ['ui.router', 'app.project']);
    
    app.run(runBlock);

    function runBlock() {
      console.log('custom initial configuration');
    }

<!DOCTYPE html>
<html ng-app="app.main">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script data-require="ui-router@*" data-semver="1.0.0-beta.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.2/angular-ui-router.js"></script>
    <script src="app.js"></script>
    <script src="auth.js"></script>
    <script src="projects.directive.js"></script>
    <script src="projects.routing.js"></script>
    
  </head>

  <body>
    <ui-view>
      <a ui-sref="default">default</a><br>
      <a ui-sref="projects">projects</a>
    </ui-view>
  </body>

</html>

/* Put your css in here */

  'use strict';


  angular.module('app.main')
  .service('AuthProvider', function AuthProvider() {
    this.$get = ['$http', function factory($http) {
      return new AuthService($http);
    }];
  }).constant('USER_ROLES', {
      all: '*',
      admin: '1',
      super_admin: '2',
      editor: '3',
      guest: '0'
    });


  AuthService.$inject = ['$http'];

  function AuthService($http) {

    this.login = function() {
      console.log('login');
    }

    this.logout = function() {
      console.log('logout');
    }

    this.isAuthenticated = function() {
      return true;
    }
  }

  'use strict';

  angular.module('app.project')
    .config(config);

  // This throws error
  config.$inject = ['$stateProvider', 'Auth'];
  
  // This works, but Auth is undefined.
  // config.$inject = ['$stateProvider'];

  function config($stateProvider, Auth) {

    console.log(Auth);

    $stateProvider
      .state('default', {
        url: '/',
        template: `<div>default page. </div>
                <a ui-sref="default">default</a><br>
              <a ui-sref="projects">projects</a>`,
        data: {
          authorizedRoles: ['admin', 'editor']
        }
      })
      .state('projects', {
        url: '/projects',
        template: `<ul><li>Project #1</li><li>Project #2</li></ul>
                <a ui-sref="default">default</a><br>
      <a ui-sref="projects">projects</a>`,
        data: {
          authorizedRoles: ['admin', 'editor']
        }
      });

  }