Angular code gets broken after minified and concated by Ruby on Rails

Question

Ruby on Rails framework minifies and concats all files automatically which leads to this error:

"Error: [$injector:unpr] Unknown provider: eProvider <- e <- DialogCtrl

I remember reading somewhere that specific Angular syntax style may break program if minified. I am unsure which part of my code gets broken upon minfy.

This is how my controllers look like:

var AppControllers = angular.module('AppControllers',[]);

AppControllers.controller('MainCtrl',[
  function(){
}]);

AppControllers.controller('SidebarCtrl', [
  '$scope', '$timeout', '$mdSidenav', '$log', '$http',
  function($scope, $timeout, $mdSidenav, $log, $http){
    $scope.closeNav = function(){
      $mdSidenav('nav').close()
        .then(function(){
          $log.debug("close nav is done");
        });
    };
}]);

AppControllers.controller('DialogCtrl', function($scope, $mdDialog) {
  $scope.openDialog = function() {
    $mdDialog.show(
      $mdDialog.alert()
        .clickOutsideToClose(true)
        .title('Informacija o podacima')
        .textContent('Navedeni podaci su povijesni. flightmap4.me ne preuzimaju odgovornost za njihovo korištenje prilikom donošenja odluke o rezervaciji ili kupnji aviokarte. Cijena aviokarte ovisi o trenutnoj raspoloživosti na pojedinom letu. Finalna cijena aviokarte vidljiva je na trećem koraku rezervacijskog procesa.')
        .ariaLabel('Info dialog')
        .ok('Zatvori')
        .openFrom('#left')
        .closeTo(angular.element(document.querySelector('#left')))
    );
  };
});

And this is my app.js:

var Flightmap = angular.module('Flightmap', [
  'ngMaterial',
  'AppControllers'
]);

Which part of my code should I change and how should it look like to make this work as minified?

Answer 1

AppControllers.controller('DialogCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog) {
  $scope.openDialog = function() {
    $mdDialog.show(
      $mdDialog.alert()
        .clickOutsideToClose(true)
        .title('Informacija o podacima')
        .textContent('Navedeni podaci su povijesni. flightmap4.me ne preuzimaju odgovornost za njihovo korištenje prilikom donošenja odluke o rezervaciji ili kupnji aviokarte. Cijena aviokarte ovisi o trenutnoj raspoloživosti na pojedinom letu. Finalna cijena aviokarte vidljiva je na trećem koraku rezervacijskog procesa.')
        .ariaLabel('Info dialog')
        .ok('Zatvori')
        .openFrom('#left')
        .closeTo(angular.element(document.querySelector('#left')))
    );
  };
}]);

You should add controller function to array after it's arguments written in quotes. This allows argument names to be escaped from minification so Angular knows what to inject to controller function.

Answer 2

The problem depends on the annotation for the $injector.

When you perform a variable mangling, for example, the service UserService becomes a and it cannot be resolved by the $injector container.

You need to annotate this dependencies and angular provides many way to do that:

1. Array notation: app.controller('MyCtrl', ['$scope', 'greeter', function($scope, greeter) {}]);

   2. $inject property: function MyCtrl($scope, greeter) {} MyCtrl.$inject = ['$scope', 'greeter']; app.controller('MyCtrl', MyController);

further information are available here: https://docs.angularjs.org/guide/di

there are many plugins that do that for you: https://github.com/kikonen/ngannotate-rails

finally, if you want to be always sure that your code works fine even when minified, use the ng-strict-di directive (even in development). https://docs.angularjs.org/error/$injector/strictdi