角度控制器错误：$ injector：modulerr模块错误

问题描述：

我试图uglify我的AngularJS代码。我跟所有在互联网上的教程现在有下面的代码，但uglifying后，我仍然得到和错误：

var app = angular.module('myapp', ['ngMaterial', 'pascalprecht.translate', 'ngSanitize', 'material.components.expansionPanels', 'ngFileSaver', 'ngMessages', 'ngFileUpload', 'ngStorage'] 

TestController.$inject = ['$scope', '$translate', '$timeout','$mdSidenav', '$log', '$sessionStorage']; 

angular.module('myapp').controller('TestController', TestController); 

function TestController ($scope, $translate, $timeout, $mdSidenav, $log, $sessionStorage) {}

编辑：我已经找到了问题。问题是我的可配置模块：

app.config(function ($locationProvider) { 
    $locationProvider.html5Mode(true); 
});

不是：

app.config(['$locationProvider', function ($locationProvider) { 
    $locationProvider.html5Mode(true); 
}]); 

app.directive('onReadFile', function ($parse) { 
    return { 
     restrict: 'A', 
     scope: false, 
     link: function(scope, element, attrs) { 
      var fn = $parse(attrs.onReadFile); 

      element.on('change', function(onChangeEvent) { 
       var reader = new FileReader(); 

       reader.onload = function(onLoadEvent) { 
        scope.$apply(function() { 
         fn(scope, {$fileContent:onLoadEvent.target.result}); 
        }); 
       }; 

       reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]); 
      }); 
     } 
    }; 
});

是您模块的名称'myapp'（全部小写）或'myApp'（骆驼）？ – Makoto

语法在这里不是问题！ – thigi

考虑到您在注射器方面存在问题......是的。这里没有足够的信息来说明它是什么;你能告诉我们你的模块中依赖哪些服务吗？ – Makoto

答

总是尝试，并试图丑化代码之前，请确保您的应用程序正常运行。

与您在使用控制器时一样，设置指令时使用相同的方法，您使用$ inject来声明依赖关系。

见下

app.directive('onReadFile',onReadFile); 

onReadFile.$inject = ['$parse']; 

function onReadFile($parse){ 

    var directive = { 
    restrict:'A', 
    scope: false, 
    link: link 
    } 

    return directive; 

    ////////// 

    function link(scope, element, attrs){ 

     var fn = $parse(attrs.onReadFile); 

     element.on('change', function(onChangeEvent) { 

     var reader = new FileReader(); 

     reader.onload = function(onLoadEvent) { 
      scope.$apply(function() { 
      fn(scope, {$fileContent:onLoadEvent.target.result}); 
      }); 
     }; 

     reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]); 
     }); 

    }// end link 

}// onReadFile

这个函数已经挂起了，直到Angular调用它才做了任何事情，所以我并不是100％相信它是声明顺序... – Makoto

@Makoto但是如果我们想要uglify，顺序可能很重要。 – valverde93

@ valverde93：不，订单并不重要。同样，函数被声明为“函数...”的事实将在其范围内提升它，所以它将变得易于使用。 – Makoto

答

的this question可能的复制。

尝试使用这种方式：

angular.module('myapp').controller('TestController', ['$scope', '$translate', '$timeout','$mdSidenav', '$log', '$sessionStorage', function checkInCtrl ($scope, $translate, $timeout, $mdSidenav, $log, $sessionStorage){}]);

这两种形式的依赖注入都是有效的和等价的，并且会在uglification中生存下来。 – Makoto

不知何故，我的表单无法存活！ @Makoto – thigi

角度控制器错误：$ injector：modulerr模块错误

相关推荐