thigi thigi - 2 months ago 26
AngularJS Question

Angular Controller Error: $injector:modulerr Module Error

I am trying to uglify my AngularJS Code. I followed all the tutorials on the internet an have now the following code but I am still getting and error after 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) {}


Edit:
I have found the problem. The problem was I configurated the module with:

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


Rather than:

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

Answer

Always try and make sure your app is running correctly before trying to uglify the code.

Same as you were doing with the controller, when setting up your directives use the same approach where you use $inject to declare the dependencies.

See below

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