Angular filter with typescript is not working after minification

I wrote an angular filter with typescript which works fine until I minify the source code.

Here is the filter:

module App.Test {

    export interface IGroupingFilter extends ng.IFilterService {
        (name:"grouping-filter"): (collection:any[]) => collection:any[];
    }

    class GroupingFilter {
        static $inject:string[] = ["underscore"];

        static ConvertDateTime(item:any):number {
            var time = "" + item.time;
            var newTime = (time.length == 3) ? "0" + time : time;

            return +(item.pickupDate.replace(/\-/g, '') + newTime);
        }

        public static Factory(underscore:UnderscoreStatic) {
            return underscore.memoize((collection:any[]) => {
                var groupKey = "id";

                var group:any = underscore.groupBy(collection, (item:any) => {
                    return item[groupKey];
                });

                var grpArray = [];
                angular.forEach(group, (item) => {
                    grpArray.push({
                        "groupKey": item[0][groupKey],
                        "items": item
                    });
                });

                var grpArraySorted = underscore.sortBy(grpArray, (grpObj:any) => {
                    var min:any = underscore.min(grpObj.items, (item:any) => {
                        return GroupingFilter.ConvertDateTime(item);
                    });

                    return GroupingFilter.ConvertDateTime(min);
                });

                return grpArraySorted;
            });
        }
    }

    angular.module("app").filter("groupingFilter", GroupingFilter.Factory);
}

Here is the minified version:

var App;
!function (t) {
    var e;
    !function (t) {
        var e = function () {
            function t() {
            }

            return t.ConvertDateTime = function (t) {
                var e = "" + t.time, r = 3 == e.length ? "0" + e : e;
                return +(t.pickupDate.replace(/\-/g, "") + r)
            }, t.Factory = function (e) {
                return e.memoize(function (r) {
                    var n = "id", i = e.groupBy(r, function (t) {
                        return t[n]
                    }), o = [];
                    angular.forEach(i, function (t) {
                        o.push({groupKey: t[0][n], items: t})
                    });
                    var a = e.sortBy(o, function (r) {
                        var n = e.min(r.items, function (e) {
                            return t.ConvertDateTime(e)
                        });
                        return t.ConvertDateTime(n)
                    });
                    return a
                })
            }, t.$inject = ["underscore"], t
        }();
        angular.module("app").filter("groupingFilter", e.Factory)
    }(e = t.Test || (t.Test = {}))
}(App || (App = {}));

Here is the angular error message

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

Many thanks

Answers


The reason it does not work when minified is that you inject "underscore" into the FooFilter class not the actual filter, which is the result of FooFilter.Factory. To create such a simple filter you don't really need a class, just pass a simple function.

angular.module('app').filter('fooFilter', fooFilter);

fooFilter.$inject = ['underscore'];

function fooFilter(underscore) {
    return underscore.memoize((collection:any[]) => {
        return underscore.shuffle(collection);
    });
}

If you really want to write the filter factory function as a static class method, you could use the array syntax like this:

 angular.module("app")
   .filter("groupingFilter", ['underscore', GroupingFilter.Factory]);

Remove the $inject array from your class in this case.


Need Your Help

ajax call vulnerable to xss attack

ajax security web xss

I have a simple web application in which I make a call to a java servlet using ajax from a jsp page (via post). In the servlet I take data from the database and formulate a JSON and retreive in the...