2

I am trying to inject a service in app.config as illustrated in Inject service in app.config. However, minification breaks the app. How to overcome this?

This doesn't work with minification:

app.config(['$routeProvider',function ($routeProvider) {
    $routeProvider
        .when('/',
        {
            templateUrl: "partials/editor.html",
            controller: "AppCtrl",
            resolve: {
                       //Following method doesn't work with minification
                        data: getData
                     }
        })
     function getData (dbService) {
         return dbService.getData();
     }
}]);

Please note the following code doesn't work: (Typescript does not allow compilation)

['dbService',function getData(dbService){
               return dbService.getData();
}]
Shyamal Parikh
  • 2,988
  • 4
  • 37
  • 78

1 Answers1

4

In order to safeguard against minification, you need to annotate (see Dependency Annotation here) the data function like you did with the config function.

There are two ways to do this.

1.

Instead of passing a function, pass an array with the names of the dependencies and the function

app.config(['$routeProvider',function ($routeProvider) {
$routeProvider
    .when('/',
    {
        templateUrl: "partials/editor.html",
        controller: "AppCtrl",
        resolve: {
            //annotate this to prevent against minification
            data: ['dbService', getData]
        }
    })

    function getData (dbService) {
        return dbService.getData();
    }
}]);

2.

Add your dependencies to a $inject property on your function

app.config(['$routeProvider',function ($routeProvider) {
    $routeProvider
        .when('/',
        {
            templateUrl: "partials/editor.html",
            controller: "AppCtrl",
            resolve: {
                //function annotated below
                data: getData
            }
        })

    //annotate this function with $inject so proper dependencies injected after minification
    getData.$inject = ['dbService'];
    function getData (dbService) {
        return dbService.getData();
    }
}]);
Dustin Hodges
  • 4,110
  • 3
  • 26
  • 41
  • Tried it gives Error: [ng:areq] https://docs.angularjs.org/error/ng/areq?p0=fn&p1=not%20a%20function,%20got%20undefined – Shyamal Parikh Nov 25 '15 at 16:59
  • Please post what you have now. That's an internal angular error which I wouldn't expect with this code. Perhaps you didn't wrap the function in the array correctly? – Dustin Hodges Nov 25 '15 at 17:01
  • Looked at your update. You still aren't annotating the function in resolve. Check out my edit and see if that works for you – Dustin Hodges Nov 25 '15 at 17:07
  • Thanks a lot, the first array method is also working. I was trying to directly array annotate as shown in the question which was giving a typescript error. – Shyamal Parikh Nov 25 '15 at 17:19
  • 1
    You're welcome. Angular is a bit tricky at first with some new patterns you have to learn. FWIW, I generally prefer the $inject method of annotating as I find it more readable – Dustin Hodges Nov 25 '15 at 17:23
  • I just tried the $inject method it gave me the following error. 'TypeError: Cannot read property 'dbService' of undefined' – Shyamal Parikh Nov 25 '15 at 17:27
  • Interesting. I would expect to see that if you were trying to read a dbService of some null object. e.g. var x = null; x.dbService(); Where is that error happening in your code? – Dustin Hodges Nov 25 '15 at 17:33
  • Happens exactly where I try to invoke the service through $inject. However, at the same time ['service',functionCall] works. – Shyamal Parikh Nov 25 '15 at 17:37