将自定义服务注入 ui-router 配置会引发错误：未知提供者：[服务]答案

【问题标题】：Injecting custom service into ui-router config throws error: Unknown provider: [Service]将自定义服务注入 ui-router 配置会引发错误：未知提供者：[服务]
【发布时间】：2017-04-25 01:08:45
【问题描述】：

我想在 ui-router 配置函数中将我的自定义服务注入到 Angular 应用程序中。因此，我将路由器定义如下，但是在尝试 $inject 服务时出现错误：未知提供者：Auth。这是代码示例：

 '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 上应用程序的工作示例： https://embed.plnkr.co/yIGMLCdOIHsB945NsHDl/

我认为我正在以正确的方式注入它。更改代码以使用“iife”不会改变任何东西（我已经检查过了）。

【问题讨论】：

标签： angularjs dependency-injection angular-ui-router

【解决方案1】：

根据https://docs.angularjs.org/guide/module：

配置块 - 在提供程序注册期间执行和配置阶段。只能注入提供者和常量进入配置块。这是为了防止意外实例化完全配置之前的服务。

为了能够将服务注入配置，需要使用提供者模式编写：

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

function AuthService($http) {

(...)

【讨论】：

【解决方案2】：

只有提供者和常量可以注入配置块。这是为了防止在完全配置服务之前意外实例化服务。¹

服务只能在 AngularJS run 阶段或resolver 函数中注入：

代码

//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);
                 });
            }]
         }
     });
}

由于解析器函数被存储并且仅在状态尝试加载时才被调用，因此可以在那个时候注入服务。

【讨论】：