Angular Controller Error: $injector:modulerr Module Error

Question

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 1

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