Unknown provider error for filter in AngularJS ES6 syntax

Question

I'm having trouble using a filter in my app after bundling and deploying to a remote server. It works fine locally, but if I run my app remotely i get the error:

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

This is my code:

app.js:

import myFilters from "./shared/filters";
import myModule from "./myModule";

export default angular.module('app', [
    lots-of-modules...,
    myFilters,])
    .config(defaultRouting)
    .run(["$http", "$rootScope", "$state", function($http, $rootScope, $state){ //code.. }]);

index.js(in shared/filters folder):

import filterByQuery from "./filterbyquery.filter.js";
import highlightQuery from "./highlightquery.js";
import dateFormatter from "../formatter/dateFormatter";

export default angular.module("my.filters", [])
    .filter("filterByQuery", filterByQuery)
    .filter("highlightQuery", highlightQuery)
    .filter("dateFormatter", dateFormatter)
    .name;

another-module.js (where i try to use the filter):

export default class anotherModule{

    constructor() {
        this.restrict = 'E';
        this.replace = false;
        this.template = require('./template.html');

        this.scope = {};

        this.controller = AnotherModule;
        this.controllerAs = 'ctrl';
    }
}

class AnotherModule{
    constructor($scope, $filter) {
        this.$filter = $filter;
    }
}

AnotherModule.$inject = [..., "$filter"];

Using the filter in the controller:

res = this.$filter("filterByQuery")(res, this.filterString);

I'm not really sure what I'm doing wrong here considering it works fine locally. Also, the highlightQuery filter works by using the pipe syntax in the template.html

Anyone have any idea what is happening here?

Answer 1

Minified AngularJS applications should be properly annotated in order to perform dependency injection.

filterByQuery filter factory function wasn't annotated. Since it's contained in separate file, it makes sense to use $inject annotation in order to keep it in same module as the function itself. It is the preferable way of annotation in ES6 with ES modules and proposed by John Papa style guide