Angular resolve not working while bundling and minification

Question

When i bundle the js files then resolve statement is not working in angular project. Below is the code

app.js

    app.config(["$stateProvider",
        "$urlRouterProvider",
        function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/");

            $stateProvider
                 .state("home", {
                     // welcome
                     url: "/",
                     templateUrl: "app/views/welcomeView.html"
                 })
               .state("productList", {
                    // Product List
                    url: "/products",
                    templateUrl: "app/views/productListView.html",
                    controller: "ProductListCtrl as vm"
                })
             .state("productDetail", {
                // Product Details
                url: "/products/:productId",
                templateUrl: "app/views/productDetailView.html",
                controller: "ProductDetailCtrl as vm",
                resolve: {
                    productResource: "productResource",
                    product: function (productResource, $stateParams) {
                        var productId = $stateParams.productId;
                        return productResource.get({ id: productId }, function (data) {
                            return data;
                        });
                    }
                }
            });

        }]
);

productDetailCtrl.js

(function () {
"use strict";

angular
    .module("productManagement")
    .controller("ProductDetailCtrl",["product",ProductDetailCtrl]
);

function ProductDetailCtrl(product) {
    var vm = this;
    vm.product = product;
    vm.title = "Product Detail: " + vm.product.productName;
}
}());

After login i can see product list perfectly but when I try to see details of product nothing happens not error in console as well. If I comment resolve property and remove product parameter in controller then it works fine. This problem occur only after bundling and minification. If I refer bare files its working fine. Please suggest me where I made mistake.

Answer 1

Use in-line array annotation for the resolver function:

resolve: {
    productResource: "productResource",
    //product: function (productResource, $stateParams) {
    product: ["productResource", "$stateParams", function (productResource, $stateParams) {
        var productId = $stateParams.productId;
        return productResource.get({ id: productId }, function (data) {
            return data;
        }).$promise;
    //}
    }]
}

For more information, see AngularJS Developer Guide - Dependency Injection -- Inline Array Annotation

Answer 2

You can use the same pattern of passing an array with the argument names as strings before the function anywhere angular uses dependency injection.

resolve: {
    productResource: "productResource",
    product: ["productResource", "$stateParams", function (productResource, $stateParams) {
        ...
    }]
}