"unknown provider" for dependency declared on provider $get function... but only in minified code

Question

I have an angular (1.4.3) app and a gulp pipeline that uses ngAnnotate and uglify to minimize it.

I have a Provider for a service that has a function that opens a (ui.bootstrap) modal:

angular.module('myapp', ['ui.bootstrap'])
   .provider('AuthUser', function(){  

        return {
            //stuff
            $get: function($q, MyConstant, $modal){ 

                  return {
                      showLoginModal : showLoginModal
                  }

                 function showLoginModal() { 
                    $modal.open({ 
                         templateUrl: '/path/to.html'
                         //stuff
                     });
                 }
            }
        }
    }

This works fine in development mode (non-minimized), and the minimized code, when running on a node dev server, runs fine on my local (Windows) machine. But when I pull the code into my AWS (ubuntu) instance, gulp build and serve it statically, I crash on an $injector:unpr: Unknown provider: Provider <-

The error message itself (and the corresponding error reference link I'm given) don't tell me what provider is missing, they just have an empty space. Following the trace, I can see that it's occurring on the call to $modal.open(), and therefore assume the missing dependency is $modal, but can't figure out why.

MyConstant is injected and used elsewhere in the service without issue, so I assume it's not a minimization problem, but for the record, here's how it's minimized:

angular.module("civ.core").provider("AuthUser", function() {
    var e = this;
    return e.token = null ,
    e.user = null ,
    {
        initialize: function(t) {
            e.token = t.token,
            e.user = t.user
        },
        $get: ["$http", "$q", "$localStorage", "$modal", "DEVELOPMENT", "PRODUCTION", function(t, i, n, o, s, a) {
            function l(e, i) {
                t.defaults.headers.common.token = "Token " + e,
                t.defaults.headers.common.user = i
            }
            function r() {
                console.log("instantiating"),
                console.log(e),
                x.user = e.user,
                x.authToken = e.token,
                x.user.anonymous && (x.user.votes = {},
                x.user.pinnedTags = [])
            }
            function c(e) {
                return o.open({
                    templateUrl: "app/core/templates/login.html",
                    //stuff... 

That said, this is one of my first forays into both minification and gulp - so help me out...

Answer 1

You certainly need to inject the $modal service into your own service:

angular.module('myapp', ['ui.boostrap'])
    .service('AuthUser', ['$modal',
        function ($modal) {
            //stuff with your modal
    }])

Also, unless you have a compelling reason to, I suggest using the angular service or factory shorthands instead of provider.

From the docs:

The Provider recipe is the core recipe type and all the other recipe types are just syntactic sugar on top of it. It is the most verbose recipe with the most abilities, but for most services it's overkill.

The Provider recipe is syntactically defined as a custom type that implements a $get method... If you define a Factory recipe, an empty Provider type with the $get method set to your factory function is automatically created under the hood.