Angularjs Angular中的未知提供程序：已选中所有内容都可以'；我不理解错误的本质

我正在为Angular应用程序创建登录系统，遇到未知提供程序错误。我每样东西都检查了5次，看不出有什么问题

我正在使用Webpack作为构建系统

错误文本如下：

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module Universe due to:
Error: [$injector:modulerr] Failed to instantiate module layout due to:
Error: [$injector:unpr] Unknown provider: Self

挂起状态下有4个javascript文件，组成3个模块：

• app.js

  -包含

  Universe

  模块

• layout.module.js

  -包含

  layout

  模块

• auth.module.js

  -包含

  auth

  模块

• self.service.js

  -包含

  auth

资源工厂

Self

，表示有关登录用户的信息，导致错误

app.js

'use strict';

require("expose?$!expose?jQuery!jquery");
require("metisMenu/dist/metisMenu");
require("iCheck/icheck");
require("expose?_!lodash"); // was underscore

var angular = require("angular");
require("angular-animate");
require("angular-messages");
require("angular-resource");
require("angular-sanitize");
require("angular-cookies");
require("angular-ui-router");
require("bootstrap/dist/css/bootstrap.css");
require("font-awesome/css/font-awesome.css");
require("angular-bootstrap");

require("../assets/styles/style.scss");
require("../assets/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css");
require("../assets/fonts/pe-icon-7-stroke/css/helper.css");

// Import all html files to put them in $templateCache
// If you need to use lazy loading, you will probably need
// to remove these two lines and explicitly require htmls
const templates = require.context(__dirname, true, /\.html$/);
templates.keys().forEach(templates);

var LayoutModule = require("layout/layout.module");
var HomeModule = require("home/home.module");
var AccountModule = require("account/account.module");
var WorkflowModule =  require("workflow/workflow/workflow.module");
var TaskModule = require("workflow/task/task.module");
var ToolModule = require("workflow/tool/tool.module");

var NavigationModule = require("../components/navigation/navigation.module");
var PanelModule = require("../components/panel/panel.module");
var UniverseDirectives = require("../components/directives");
var AuthModule = require("../components/auth/auth.module");

angular.module("Universe", [
    "ngAnimate",
    "ngMessages",
    "ngResource",
    "ngSanitize",
    "ngCookies",
    "ui.router",
    "ui.bootstrap",

    LayoutModule.name,
    HomeModule.name,
    AccountModule.name,
    WorkflowModule.name,
    TaskModule.name,
    ToolModule.name,

    NavigationModule.name,
    PanelModule.name,
    UniverseDirectives.name,
    AuthModule.name
])
.config(function($urlRouterProvider, $locationProvider, $stateProvider) {
    // $urlRouterProvider.otherwise('/');

    // $locationProvider.html5Mode(true);

    $stateProvider
      .state('test', {
        url: "/test",
        template: "This is a test"
      });
})
.run(function($rootScope, Auth) {
    $rootScope.Auth = Auth;
});

import angular from "angular";

// @ngInject
function routes($stateProvider, Self) {
    $stateProvider.state("layout", {
        url: "",
        abstract: true,
        templateUrl: "/app/layout/layout.html",
        resolve: {
            self: function() {
                var self = Self({});
                return self;
            }
        }
    });
}

//export default 
module.exports = angular.module("layout", ["auth"]).config(routes);

'use strict';

var AuthService = require("./auth.service");
var UserResource = require("./user.service");
var SelfResource = require("./self.service");
var AuthInterceptor = require("./interceptor.service");
var UtilModule = require("../util/util.module");

module.exports = angular.module('auth', [
  'ui.router',
  UtilModule.name
])
  .factory('Auth', AuthService)
  .factory('User', UserResource)
  .factory('Self', SelfResource)
  .factory('AuthInterceptor', AuthInterceptor)
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');
  })
  .run(function($rootScope, $state, Auth) {
      // This is router decorator, it redirects users, lacking priviledges, to login page

      // Redirect to login if route requires auth and the user is not logged in, or doesn't have required role
      $rootScope.$on('$stateChangeStart', function(event, next) {    
          if (!next.authenticate) {
            return;
          }

          if (typeof next.authenticate === 'string') {
              Auth.hasRole(next.authenticate, _.noop).then(has => {
                  if(has) {
                      return;
                  }

                  event.preventDefault();
                  return Auth.isLoggedIn(_.noop).then(is => {
                       $state.go(is ? 'main' : 'login');
                  });
              });
          }
          else {
              Auth.isLoggedIn(_.noop).then(is => {
                  if(is) {
                      return;
                  }

                  event.preventDefault();
                  $state.go('main');
              });
          }
      });    
  });    

'use strict';

// @ngInject
function SelfResource($resource) {
    return $resource('/api/self/',
        {},
        {
            get: {
                method: 'GET'
            }
        },
        {
            stripTrailingSlashed: false
        }
    );
}

module.exports = SelfResource;

layout.js

'use strict';

require("expose?$!expose?jQuery!jquery");
require("metisMenu/dist/metisMenu");
require("iCheck/icheck");
require("expose?_!lodash"); // was underscore

var angular = require("angular");
require("angular-animate");
require("angular-messages");
require("angular-resource");
require("angular-sanitize");
require("angular-cookies");
require("angular-ui-router");
require("bootstrap/dist/css/bootstrap.css");
require("font-awesome/css/font-awesome.css");
require("angular-bootstrap");

require("../assets/styles/style.scss");
require("../assets/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css");
require("../assets/fonts/pe-icon-7-stroke/css/helper.css");

// Import all html files to put them in $templateCache
// If you need to use lazy loading, you will probably need
// to remove these two lines and explicitly require htmls
const templates = require.context(__dirname, true, /\.html$/);
templates.keys().forEach(templates);

var LayoutModule = require("layout/layout.module");
var HomeModule = require("home/home.module");
var AccountModule = require("account/account.module");
var WorkflowModule =  require("workflow/workflow/workflow.module");
var TaskModule = require("workflow/task/task.module");
var ToolModule = require("workflow/tool/tool.module");

var NavigationModule = require("../components/navigation/navigation.module");
var PanelModule = require("../components/panel/panel.module");
var UniverseDirectives = require("../components/directives");
var AuthModule = require("../components/auth/auth.module");

angular.module("Universe", [
    "ngAnimate",
    "ngMessages",
    "ngResource",
    "ngSanitize",
    "ngCookies",
    "ui.router",
    "ui.bootstrap",

    LayoutModule.name,
    HomeModule.name,
    AccountModule.name,
    WorkflowModule.name,
    TaskModule.name,
    ToolModule.name,

    NavigationModule.name,
    PanelModule.name,
    UniverseDirectives.name,
    AuthModule.name
])
.config(function($urlRouterProvider, $locationProvider, $stateProvider) {
    // $urlRouterProvider.otherwise('/');

    // $locationProvider.html5Mode(true);

    $stateProvider
      .state('test', {
        url: "/test",
        template: "This is a test"
      });
})
.run(function($rootScope, Auth) {
    $rootScope.Auth = Auth;
});

import angular from "angular";

// @ngInject
function routes($stateProvider, Self) {
    $stateProvider.state("layout", {
        url: "",
        abstract: true,
        templateUrl: "/app/layout/layout.html",
        resolve: {
            self: function() {
                var self = Self({});
                return self;
            }
        }
    });
}

//export default 
module.exports = angular.module("layout", ["auth"]).config(routes);

'use strict';

var AuthService = require("./auth.service");
var UserResource = require("./user.service");
var SelfResource = require("./self.service");
var AuthInterceptor = require("./interceptor.service");
var UtilModule = require("../util/util.module");

module.exports = angular.module('auth', [
  'ui.router',
  UtilModule.name
])
  .factory('Auth', AuthService)
  .factory('User', UserResource)
  .factory('Self', SelfResource)
  .factory('AuthInterceptor', AuthInterceptor)
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');
  })
  .run(function($rootScope, $state, Auth) {
      // This is router decorator, it redirects users, lacking priviledges, to login page

      // Redirect to login if route requires auth and the user is not logged in, or doesn't have required role
      $rootScope.$on('$stateChangeStart', function(event, next) {    
          if (!next.authenticate) {
            return;
          }

          if (typeof next.authenticate === 'string') {
              Auth.hasRole(next.authenticate, _.noop).then(has => {
                  if(has) {
                      return;
                  }

                  event.preventDefault();
                  return Auth.isLoggedIn(_.noop).then(is => {
                       $state.go(is ? 'main' : 'login');
                  });
              });
          }
          else {
              Auth.isLoggedIn(_.noop).then(is => {
                  if(is) {
                      return;
                  }

                  event.preventDefault();
                  $state.go('main');
              });
          }
      });    
  });    

'use strict';

// @ngInject
function SelfResource($resource) {
    return $resource('/api/self/',
        {},
        {
            get: {
                method: 'GET'
            }
        },
        {
            stripTrailingSlashed: false
        }
    );
}

module.exports = SelfResource;

auth.module.js

'use strict';

require("expose?$!expose?jQuery!jquery");
require("metisMenu/dist/metisMenu");
require("iCheck/icheck");
require("expose?_!lodash"); // was underscore

var angular = require("angular");
require("angular-animate");
require("angular-messages");
require("angular-resource");
require("angular-sanitize");
require("angular-cookies");
require("angular-ui-router");
require("bootstrap/dist/css/bootstrap.css");
require("font-awesome/css/font-awesome.css");
require("angular-bootstrap");

require("../assets/styles/style.scss");
require("../assets/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css");
require("../assets/fonts/pe-icon-7-stroke/css/helper.css");

// Import all html files to put them in $templateCache
// If you need to use lazy loading, you will probably need
// to remove these two lines and explicitly require htmls
const templates = require.context(__dirname, true, /\.html$/);
templates.keys().forEach(templates);

var LayoutModule = require("layout/layout.module");
var HomeModule = require("home/home.module");
var AccountModule = require("account/account.module");
var WorkflowModule =  require("workflow/workflow/workflow.module");
var TaskModule = require("workflow/task/task.module");
var ToolModule = require("workflow/tool/tool.module");

var NavigationModule = require("../components/navigation/navigation.module");
var PanelModule = require("../components/panel/panel.module");
var UniverseDirectives = require("../components/directives");
var AuthModule = require("../components/auth/auth.module");

angular.module("Universe", [
    "ngAnimate",
    "ngMessages",
    "ngResource",
    "ngSanitize",
    "ngCookies",
    "ui.router",
    "ui.bootstrap",

    LayoutModule.name,
    HomeModule.name,
    AccountModule.name,
    WorkflowModule.name,
    TaskModule.name,
    ToolModule.name,

    NavigationModule.name,
    PanelModule.name,
    UniverseDirectives.name,
    AuthModule.name
])
.config(function($urlRouterProvider, $locationProvider, $stateProvider) {
    // $urlRouterProvider.otherwise('/');

    // $locationProvider.html5Mode(true);

    $stateProvider
      .state('test', {
        url: "/test",
        template: "This is a test"
      });
})
.run(function($rootScope, Auth) {
    $rootScope.Auth = Auth;
});

import angular from "angular";

// @ngInject
function routes($stateProvider, Self) {
    $stateProvider.state("layout", {
        url: "",
        abstract: true,
        templateUrl: "/app/layout/layout.html",
        resolve: {
            self: function() {
                var self = Self({});
                return self;
            }
        }
    });
}

//export default 
module.exports = angular.module("layout", ["auth"]).config(routes);

'use strict';

var AuthService = require("./auth.service");
var UserResource = require("./user.service");
var SelfResource = require("./self.service");
var AuthInterceptor = require("./interceptor.service");
var UtilModule = require("../util/util.module");

module.exports = angular.module('auth', [
  'ui.router',
  UtilModule.name
])
  .factory('Auth', AuthService)
  .factory('User', UserResource)
  .factory('Self', SelfResource)
  .factory('AuthInterceptor', AuthInterceptor)
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');
  })
  .run(function($rootScope, $state, Auth) {
      // This is router decorator, it redirects users, lacking priviledges, to login page

      // Redirect to login if route requires auth and the user is not logged in, or doesn't have required role
      $rootScope.$on('$stateChangeStart', function(event, next) {    
          if (!next.authenticate) {
            return;
          }

          if (typeof next.authenticate === 'string') {
              Auth.hasRole(next.authenticate, _.noop).then(has => {
                  if(has) {
                      return;
                  }

                  event.preventDefault();
                  return Auth.isLoggedIn(_.noop).then(is => {
                       $state.go(is ? 'main' : 'login');
                  });
              });
          }
          else {
              Auth.isLoggedIn(_.noop).then(is => {
                  if(is) {
                      return;
                  }

                  event.preventDefault();
                  $state.go('main');
              });
          }
      });    
  });    

'use strict';

// @ngInject
function SelfResource($resource) {
    return $resource('/api/self/',
        {},
        {
            get: {
                method: 'GET'
            }
        },
        {
            stripTrailingSlashed: false
        }
    );
}

module.exports = SelfResource;

self.service.js

'use strict';

require("expose?$!expose?jQuery!jquery");
require("metisMenu/dist/metisMenu");
require("iCheck/icheck");
require("expose?_!lodash"); // was underscore

var angular = require("angular");
require("angular-animate");
require("angular-messages");
require("angular-resource");
require("angular-sanitize");
require("angular-cookies");
require("angular-ui-router");
require("bootstrap/dist/css/bootstrap.css");
require("font-awesome/css/font-awesome.css");
require("angular-bootstrap");

require("../assets/styles/style.scss");
require("../assets/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css");
require("../assets/fonts/pe-icon-7-stroke/css/helper.css");

// Import all html files to put them in $templateCache
// If you need to use lazy loading, you will probably need
// to remove these two lines and explicitly require htmls
const templates = require.context(__dirname, true, /\.html$/);
templates.keys().forEach(templates);

var LayoutModule = require("layout/layout.module");
var HomeModule = require("home/home.module");
var AccountModule = require("account/account.module");
var WorkflowModule =  require("workflow/workflow/workflow.module");
var TaskModule = require("workflow/task/task.module");
var ToolModule = require("workflow/tool/tool.module");

var NavigationModule = require("../components/navigation/navigation.module");
var PanelModule = require("../components/panel/panel.module");
var UniverseDirectives = require("../components/directives");
var AuthModule = require("../components/auth/auth.module");

angular.module("Universe", [
    "ngAnimate",
    "ngMessages",
    "ngResource",
    "ngSanitize",
    "ngCookies",
    "ui.router",
    "ui.bootstrap",

    LayoutModule.name,
    HomeModule.name,
    AccountModule.name,
    WorkflowModule.name,
    TaskModule.name,
    ToolModule.name,

    NavigationModule.name,
    PanelModule.name,
    UniverseDirectives.name,
    AuthModule.name
])
.config(function($urlRouterProvider, $locationProvider, $stateProvider) {
    // $urlRouterProvider.otherwise('/');

    // $locationProvider.html5Mode(true);

    $stateProvider
      .state('test', {
        url: "/test",
        template: "This is a test"
      });
})
.run(function($rootScope, Auth) {
    $rootScope.Auth = Auth;
});

import angular from "angular";

// @ngInject
function routes($stateProvider, Self) {
    $stateProvider.state("layout", {
        url: "",
        abstract: true,
        templateUrl: "/app/layout/layout.html",
        resolve: {
            self: function() {
                var self = Self({});
                return self;
            }
        }
    });
}

//export default 
module.exports = angular.module("layout", ["auth"]).config(routes);

'use strict';

var AuthService = require("./auth.service");
var UserResource = require("./user.service");
var SelfResource = require("./self.service");
var AuthInterceptor = require("./interceptor.service");
var UtilModule = require("../util/util.module");

module.exports = angular.module('auth', [
  'ui.router',
  UtilModule.name
])
  .factory('Auth', AuthService)
  .factory('User', UserResource)
  .factory('Self', SelfResource)
  .factory('AuthInterceptor', AuthInterceptor)
  .config(function($httpProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');
  })
  .run(function($rootScope, $state, Auth) {
      // This is router decorator, it redirects users, lacking priviledges, to login page

      // Redirect to login if route requires auth and the user is not logged in, or doesn't have required role
      $rootScope.$on('$stateChangeStart', function(event, next) {    
          if (!next.authenticate) {
            return;
          }

          if (typeof next.authenticate === 'string') {
              Auth.hasRole(next.authenticate, _.noop).then(has => {
                  if(has) {
                      return;
                  }

                  event.preventDefault();
                  return Auth.isLoggedIn(_.noop).then(is => {
                       $state.go(is ? 'main' : 'login');
                  });
              });
          }
          else {
              Auth.isLoggedIn(_.noop).then(is => {
                  if(is) {
                      return;
                  }

                  event.preventDefault();
                  $state.go('main');
              });
          }
      });    
  });    

'use strict';

// @ngInject
function SelfResource($resource) {
    return $resource('/api/self/',
        {},
        {
            get: {
                method: 'GET'
            }
        },
        {
            stripTrailingSlashed: false
        }
    );
}

module.exports = SelfResource;

所以，一切都应该正常：我在

auth.module.js

中导入了

SelfResource

，并将其声明为工厂。我还将

auth.module.js

中定义的

auth

模块声明为布局模块的依赖项

Webpack编译没有错误，所有模块都存在于输出包中。为什么会出错

---

更新： 我在

layout.module.js

的开头添加了以下几行：

var authModule = require("../../components/auth/auth.module");
console.log(authModule);

这给了我

auth

模块的内容：

Object {_invokeQueue: Array[4], _configBlocks: Array[1], _runBlocks: Array[1], requires: Array[2], name: "auth"}

---

它的

\u invokeQueue

包含

Self

工厂。所以，我想在接收端这是一个奇怪的问题。

你这里有一个未定义的自我？如果您指的是SelfResource，请确保导入和注入正确

import angular from "angular";

// @ngInject
function routes($stateProvider, Self) {
    $stateProvider.state("layout", {
        url: "",
        abstract: true,
        templateUrl: "/app/layout/layout.html",
        resolve: {
            self: function() {
                var self = Self({});
                return self;
            }
        }
    });
}

//export default 
module.exports = angular.module("layout", ["auth"]).config(routes);

---

是的，Angular在

布局

模块中找不到它，但它至少是从

self.service.js

正确导出的。我想，我正确地调用了

.factory（）

。因此，错误来源不清楚。您无法将服务/工厂注入配置。仅限供应商。只需注入服务即可解决：@PetrAveryanov再次感谢您，Petr，您帮助了我。@PetrAveryanov再想想，这是一个多么蹩脚的设计决定

$resource

和

resolve（）

本来是要一起使用的，现在我不得不发明一种拐杖来将它们一起使用。事实上，它们可以一起使用，但被人为禁止。