未知提供者：Yeoman AngulajrJS 生成的应用程序中的提供者错误

Question

我使用 Yeoman AngularJS 生成器生成了一个 AngularJS 应用程序，当运行原始源代码。

但是当我尝试从 G运行t build 生成的 dist 文件夹中运行应用程序时我收到以下错误：

vendor.972e9c35.js:5 Error: [$injector:unpr] Unknown provider: aProvider <- a https://errors.angularjs.org/1.7.2/$injector/unpr?p0=aProvider%20%3C-%20a at vendor.972e9c35.js:3 at vendor.972e9c35.js:4 at Object.d [as get] (vendor.972e9c35.js:4) at vendor.972e9c35.js:4 at d (vendor.972e9c35.js:4) at e (vendor.972e9c35.js:4) at Object.g [as invoke] (vendor.972e9c35.js:4) at l.instance (vendor.972e9c35.js:5) at vendor.972e9c35.js:26 at i (vendor.972e9c35.js:6) "Possibly unhandled rejection: {}"

我看到这是一个常见错误，解决方案应该是在一个数组中声明所有服务（您可以使用带 ng-annotated 的 npm 模块自动执行此操作）——我这样做了，但我仍然得到相同的结果错误。

这是我包含所有控制器和服务的原始 .js 文件：

var routerApp = angular.module('routerApp', ['ui.router','ui.grid','ui.bootstrap']);


routerApp.controller('expensesListCtrl',["$http", "gridService", function ($http,gridService) {
    var vm = this;
    vm.recievedData = false;
    vm.searchInput;
    vm.gridOptions = gridService.getOption();
    //vm.gridOptions.columnDefs = [{field:"name"},{field:"amount"},{field:"type"},{field:"time",type:'date'}];

    $http.get("http://localhost:8080/expenses").then(function(response){

      gridService.setData(response.data.expenses);
      gridService.setUnfilteredData(response.data.expenses);
      vm.recievedData = true;
    }).catch(function (error) {
        console.log(error);
    });
}]);

routerApp.factory('gridService',function () {


  var gridServiceInstance = {};
  gridServiceInstance.gridOptions = {};
  gridServiceInstance.gridOptions.columnDefs = [{field:"name"},{field:"amount"},{field:"type"},{field:"time",type:'date'}];
  gridServiceInstance.unfilteredData;

  gridServiceInstance.getData = function () {
    return gridServiceInstance.gridOptions.data;
  }

  gridServiceInstance.setData = function (data) {
    gridServiceInstance.gridOptions.data = data;
  }

  gridServiceInstance.getOption = function(){
    return gridServiceInstance.gridOptions;
  }

  gridServiceInstance.setUnfilteredData = function (data) {
    gridServiceInstance.unfilteredData = data;
  }

  gridServiceInstance.getUnfilteredData = function(){
    return gridServiceInstance.unfilteredData;
  }

  return gridServiceInstance;

})

routerApp.controller('mainPageNavCtrl',["$scope", "$uibModal", "$http", "gridService", function ($scope,$uibModal,$http,gridService) {

    var vm = this;
    $scope.check = "check str";


    $scope.addPath = function(){
        console.log("add path");
        $uibModal.open({
            templateUrl: 'addPathModal.html',
            controller: ["$scope", "$uibModalInstance", function ($scope, $uibModalInstance) {

                $scope.addExpenseForm = {};

                $scope.ok = function () {
                    $http.post("http://localhost:8080/expenses",$scope.addExpenseForm).then(function(response){
                        console.log(response);
                    })
                    $uibModalInstance.close();
                };

                $scope.cancel = function () {
                    $uibModalInstance.dismiss('cancel');
                };
            }]
        })
    }
    $scope.searchText = function () {
      console.log("inside search text");

      if($scope.searchInputText == null || $scope.searchInputText.length == 0)
      {
        gridService.setData(gridService.getUnfilteredData());
        return;
      }

      var filteredData = gridService.getUnfilteredData().filter(function (element) {
        if ( (element.name.indexOf($scope.searchInputText) != -1) || element.type.indexOf($scope.searchInputText) != -1) {
          return true;
        }
        return false;
      });
      gridService.setData(filteredData);
    }

}])


routerApp.config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');
    $stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'expensesList.html',
            controller: 'expensesListCtrl as vm'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            // we'll get to this in a bit
        });

}]);

我错过了什么？感谢您的帮助！！

Answer 1

Angular 从控制器构造函数的参数名称推断出控制器的依赖关系，如果要缩小 expensesListCtrl 控制器的 JavaScript 代码，则其所有函数参数都将缩小为好吧，依赖注入器将无法正确识别服务。同样的逻辑适用于定义 services & factories.

您可以通过使用依赖项名称注释函数来解决此问题，以字符串形式提供，不会缩小。

Angular 通过注入器调用某些功能（如服务工厂和控制器）。您需要注释这些函数，以便注入器知道将哪些服务注入到函数中。使用服务名称信息注释代码的方式有以下三种：

使用内联数组注释（首选）
使用 $inject 属性注释
隐含地来自函数参数名称（有警告）所以，您已经使用了第一种方法，您还需要将它用于工厂（即使不需要明确的依赖关系）。

因此，以下应该可以解决问题：

routerApp.factory('gridService', [ function () { /*factory code*/ }]);

Angularjs dependency annotation

declaring-angularjs-modules-for-minification

未知提供者：Yeoman AngulajrJS 生成的应用程序中的提供者错误

Unknown provider: aProvider Error inside Yeoman AngulajrJS generated app

runtime-error

angularjs

yeoman