注入カスタムサービスでエラーが発生します：不明なプロバイダ：[サービス]

Question

私はUI-ルータの設定機能の角アプリに私のカスタムサービスを注入したいと思います

。だから私は以下のようにルータを定義し、それにしようとしたときに$サービスを注入しています私はエラーを取得：不明プロバイダ：認証を。ここでのコードサンプルは次のとおりです。

'use strict'; 

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

    // This throws error Unknown provider: Auth 
    // config.$inject = ['$stateProvider', 'Auth']; 

    // This works, but Auth is of course 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'] 
     } 
    }); 

    } 

ここplunker上のアプリの作業examlpeは次のとおりです。 https://embed.plnkr.co/yIGMLCdOIHsB945NsHDl/

私は正しい方法でそれを注入していると思います。何も変わらないだろう「生命維持」を使用するようにコードを変更する（私はすでにチェックしました）。 https://docs.angularjs.org/guide/moduleによれば

Answer 1

：

angular.module('app.main') 
    .service('AuthProvider', function AuthProvider() { 
    this.$get = ['$http', function factory($http) { 
     return new AuthService($http); 
    }]; 
    }); 

function AuthService($http) { 

(...) 

Answer 2

のみプロバイダおよび定数缶：

Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

構成にサービスを注入できるようにするために、それは、プロバイダパターンを使用して記述する必要があります構成ブロックに注入する。これは、サービスが完全に構成される前に、サービスが誤ってインスタンス化されるのを防ぐためです。リゾルバ機能が格納された状態の試みにのみ呼び出されるので

コード

//function config($stateProvider, Auth) { 
function config($stateProvider) { 
    $stateProvider.state('default', { 
     url: '/', 
     template: '<div>default page.'+ 
        '<a ui-sref="default">default</a><br>'+ 
        '<a ui-sref="projects">projects</a>'+ 
        '</div>', 
     data: { 
      authorizedRoles: ['admin', 'editor'] 
     }, 
     //INJECT services in resolve functions 
     resolve: { 
      role: ["Auth", "$q", function(Auth, $q) { 
       return Auth.getUser().then(function(user) { 
        return user.role; 
       }).catch(function(error) { 
        return $q.reject(error); 
       }); 
      }] 
     } 
    }); 
} 

：¹

サービスのみAngularJS run段階の間、又はresolver機能に注入することができますその時にサービスを投入することは可能です。