AngularJS + RequireJS - 未知提供者，角錯誤？

我收到了以下例外'未知的提供者：authSvc'，它來源於我的config.js文件，我將在下面發表。我明白這個錯誤意味着我的authSvc模塊沒有被註冊並且不可用，但是在我嘗試注入之前創建了該服務。有人可以幫幫我嗎？我迷失在這一個......所以我以爲我會轉向SO。謝謝。AngularJS + RequireJS - 未知提供者，角錯誤？

的index.html

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
     <!-- Place favicon.ico in the root directory --> 

     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> --> 
     <script data-main="js/main" src="js/vendor/require.js"></script>  
    </head> 
    <body> 
     <!--[if lt IE 8]> 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
     <![endif]--> 
    <nav class="navbar navbar-inverse navbar-fixed-top" ng-controller="navCtrl"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><button class="btn btn-default navbar-btn" ng-click="login()">Login</button></li> 
       <li><button class="btn btn-info navbar-btn" ng-click="register()">Register</button></li> 
      </ul> 
     </div><!--/.navbar-collapse --> 
     </div> 
    </nav> 
     <div ng-view></div> 
    </body> 
</html>

main.js

require.config({ 

    paths: { 
     'angular': 'vendor/angular', 
     'domReady': 'vendor/domready', 
     'angularRoute': 'vendor/angular-route', 
     'angularLocalStorage': 'vendor/angular-local-storage', 
     'bootstrapCss': 'vendor/bootstrap-css' 
    }, 

    shim: { 
     'angular': { 
      exports: 'angular' 
     }, 
     'angularRoute': { 
      deps: ['angular'] 
     }, 
     'angularLocalStorage': { 
      deps: ['angular'] 
     } 
    }, 

    deps: ['./bootstrap'] 
});

bootstrap.js

require([ 
    'angular', 
    'app', 
    'services/authSvc', 
    'controllers/navCtrl', 
    'controllers/landingPageCtrl', 
    'controllers/homeCtrl', 
    'controllers/loginCtrl', 
    'config', 
    'routes' 
    ], function (angular) { 
    'use strict'; 

    angular.element(document).ready(function() { 
     angular.bootstrap(document, ['myApp']); 
    }); 

});

app.js

define([ 
    'angular', 
    'angularRoute', 
    'angularLocalStorage' 
], function(angular, angularRoute, angularLocalStorage) { 

'use strict'; 

var app = angular.module('myApp', ['ngRoute', 'LocalStorageModule']); 

return app; 

});

authSvc.js

define(['app'], function(app) { 

    app.service('authSvc', function($http, localStorageService) { 

     this.setToken = function(token) { 
      return localStorageService.set('token', token); 
     } 

     this.getToken = function() { 
      return localStorageService.get('token'); 
     } 

     this.login = function(username, password) { 
      return $http.post('/api/login', {username: username, password: password}); 
     } 

    }); 

    console.log('authSvc registered'); 

});

config.js

define(['app'], function(app) { 
    'use strict'; 

    app.config(function($httpProvider, authSvc) { 
     $httpProvider.interceptors.push(function($q) { 
      return { 
      'request': function(config) { 
       // same as above 
       //config.headers.token = authSvc.getToken(); 
       return config; 
      }, 

      'response': function(response) { 
       // same as above 
       return response; 
      } 
      }; 
     }); 
    }); 

    console.log('config registered'); 

});

來源

2016-01-24 David Stampher

服務實例如果任何人都可以幫幫忙，我的項目是完全停頓，直到我可以排序了這一點。我檢查了我的控制檯的網絡面板，並且按照它們在bootstrap.js中的順序加載，這意味着在使用注入的服務調用.config（）之前正在創建服務。沒有任何意義，它是投擲未知提供程序 –

更新：一直在修補，注意到authSvc工作正常時，注入一個控制器，例如navCtrl，只是拋出未知的提供程序時注入.config（）。這是一個錯誤？ –

不能在配置塊注射服務。只有提供者。

app 
    .factory('yourInterceptor', yourInterceptor) 
    .config(configureInterceptor); 

function configureInterceptor($httpProvider) { 
    $httpProvider.interceptors.push('yourInterceptor'); 
} 

function yourInterceptor(authSvc) { 
    return { 
     'request': function (config) { 
      // same as above 
      //config.headers.token = authSvc.getToken(); 
      return config; 
     }, 

     'response': function (response) { 
      // same as above 
      return response; 
     } 
    }; 
}

編輯：

通注射到你的攔截，並得到使用注射器

function yourInterceptor($injector) { 
    return { 
     'request': function (config) { 
      var authService = $injector.get('authSvc'); 


      //config.headers.token = authSvc.getToken(); 
      return config; 
     }, 

     'response': function (response) { 
      // same as above 
      return response; 
     } 
    }; 
}

來源

2016-01-24 16:57:39 Prashant

因此，如果我有一個服務從本地存儲獲取身份驗證令牌，那麼如何將該服務注入app.config（）內的http攔截器？謝謝。 –

我想唯一的解決方案是不使用app.service（'authSvc'，...）？ –

我會嘗試一下你在編輯中的方式，如果它有效，我會將它標記爲答案。 –

AngularJS + RequireJS - 未知提供者，角錯誤？

回答

相關問題