使用注入时，ng-file-upload 不适用于 MEAN.JS 应用程序答案

【问题标题】：The ng-file-upload doesn't work with MEAN.JS app when injection is used使用注入时，ng-file-upload 不适用于 MEAN.JS 应用程序
【发布时间】：2017-02-10 21:58:00
【问题描述】：

抛出错误：

angular.js:13920 Error: [$injector:unpr] Unknown provider: ngFileUploadProvider <- ngFileUpload <- MyCtrl
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=ngFileUploadProvider%20%3C-%20ngFileUpload%20%3C-%20MyCtrl
    at http://192.168.99.100:3000/lib/angular/angular.js:68:12
    at http://192.168.99.100:3000/lib/angular/angular.js:4511:19
    at Object.getService [as get]

当Controller定义如下：

(function ($, angular) {
'use strict';
angular.module('myapp').controller('MyCtrl', MyCtrl);

  function MyCtrl(
    $scope,
    $q,
    $stateParams,
    Upload,
    $timeout
  ){

    var vm = this;

    function setup(){

      vm.stateParams = $stateParams;

      //set scope variables here

      viewApi();
    }

    function viewApi(){

      vm.uploadImage = function(file, errFiles) {
        vm.uploadedThumbnail = file;
        vm.errFile = errFiles && errFiles[0];
        if (file) {

          file.upload = Upload.upload({
            url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
            data: { file: file }
          });

          file.upload.then(uploadSuccess, uploadError, uploadEvent);

        }
      };
    }
    ... 
    setup();
  }

  MyCtrl.$inject = [
    '$scope',
    '$q',
    '$stateParams',
    'ngFileUpload', // Note that 'Upload' doesn't work either
    '$timeout'
  ];

}(window.jQuery || window.$, window.angular));

我尝试了ngFileUpload 并上传了相同的结果。所有依赖项都被声明和加载。这与注入模式无法正常工作有关。

【问题讨论】：

bower 依赖声明：“ng-file-upload”：“^12.2.12”

标签： angularjs node.js mean-stack ng-file-upload

【解决方案1】：

您需要将ngFileUpload 添加到您的模块定义中，如下所示：

angular.module('myapp', ['ngFileUpload', 'ui.router', 'other.dependencies', ...]).controller('MyCtrl', MyCtrl);
...

【讨论】：

根据文档实际上不是 'ngFileUploadProvider' 而是 'ngFileUpload' 但它不能解决问题 - 它会产生不同的问题。
至于另一个错误，你只能声明你的模块一次。它的所有依赖项都必须包含在该原始数组中。我很确定 $state 提供程序来自 ui.router。因此，您需要在初始模块数组中包含它以及所有其他依赖项。

【解决方案2】：

其实我发现解决方法比较简单：

angular.module('myapp', ['ngFileUpload']).controller('MyCtrl', MyCtrl);

它解决了上述问题，但通过删除应用程序状态提供程序产生了一个新问题： angular.js:68 未捕获的错误：[$injector:modulerr] 无法实例化模块 myapp 由于：错误：[$injector:unpr] 未知提供者：$stateProvider http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24stateProvider

所以我们通过创建一个新问题来解决一个问题。

现在还有一个新问题：如何在不覆盖其他应用程序依赖项的情况下添加“ngFileUpload”依赖项。

【讨论】：