Search code examples
javascriptangularjsangularjs-directiveminifyangularjs-controller

Angular minification with directive controller?


If I have the following:

myapp.directive('directivename', ...

    return {
        ...
        restrict: 'E',
        controller: MyController,
        ...
    }

    function MyController($scope, $somethingelse) {
        // Contents of controller here
    }
);

How do I modify this such that MyController will not get destroyed when minified? I am getting the following error:

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


Solution

  • It can be resolved by using explicit dependency annotation. What you have it implicit annotation which causes issues while minification. You could use $inject or inline array annotation to annotate the dependencies in the directive as well.

    MyController.$inject = ['$scope', '$somethingelse'];
    
    function MyController($scope, $somethingelse) {
        // Contents of controller here
    }
    

    Or in the directive:

    return {
        ...
        restrict: 'E',
        controller: ['$scope', '$somethingelse', MyController],
        ...
    }
    

    Or register your controller using .controller syntax

    app.controller('MyController', ['$scope', '$somethingelse', MyController]);
    

    and set up controller name in the directive instead of the constructor.

    return {
        ...
        restrict: 'E',
        controller: 'MyController',
        ...
    }
    

    You can also take a look at ng-annotate with which you don't need to use explicit annotation.