Question

基本上我正在测试我的app的PROD版本是如何看的;我继续通过一些gulp任务（缩小，删除未使用的css等）运行它并得到此错误：

 Error: [$injector:unpr] Unknown provider: tProvider <- t <- myActiveLinkDirective

任何人都可以帮助解决这里发生的事情吗？

这是我的角色代码：

  var rustyApp = angular.module('rustyApp', [
    'ngAnimate',
    'ngRoute',
    'viewController',
    'mm.foundation',
    'angular-flexslider',
    'ui.router']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
          $routeProvider.when('/', {
        title: 'home',
        templateUrl: '/partials/home.html',
        controller: 'HomeController'
    }).when('/work', {
        title: 'my work',
        templateUrl: '/partials/work.html',
        controller: 'WorkController'
    }).when('/contact', {
        title: 'contact',
        templateUrl: '/partials/contact.html',
        controller: 'ContactController'
    }).otherwise({redirectTo: '/'});
    // configure html5 to get links working

    $locationProvider.html5Mode(true);

    }]);




     rustyApp.controller('BasicSliderCtrl', function($scope) {
        $scope.slides = [
           '../images/sliderContent/1.jpg',
           '../images/sliderContent/2.jpg',
           '../images/sliderContent/3.jpg',
           '../images/sliderContent/4.jpg'
        ];

     });

     rustyApp.run(function() {
        FastClick.attach(document.body);
     });

    rustyApp.run(['$location', '$rootScope', function($location, $rootScope) {
        $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
            $rootScope.title = current.$$route.title;
        });
    }]);


    rustyApp.controller('HomeController', function($scope) {
        $scope.pageClass = 'home';
    });
    rustyApp.controller('WorkController', function($scope) {
        $scope.pageClass = 'work';
    });
    rustyApp.controller('ContactController', function($scope) {
        $scope.pageClass = 'contact';
    });

    rustyApp.controller('OffCanvasDemoCtrl', function($scope) {});


    var OffCanvasDemoCtrl = function($scope) {};

    rustyApp.controller('ContactController', function($scope, $http) {
    $scope.result = 'hidden'
    $scope.resultMessage;
    $scope.formData; //formData is an object holding the name, email, subject, and message
    $scope.submitButtonDisabled = false;
    $scope.submitted = false; //used so that form errors are shown only after the form has been submitted
    $scope.submit = function(contactform) {
        $scope.submitted = true;
        $scope.submitButtonDisabled = true;
        if (contactform.$valid) {
            $http({
                method: 'POST',
                url: '../partials/mailer.php',
                data: $.param($scope.formData), //param method from jQuery
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                } //set the headers so angular passing info as form data (not request payload)
            }).success(function(data) {
                console.log(data);
                if (data.success) { //success comes from the return json object
                    $scope.submitButtonDisabled = true;
                    $scope.resultMessage = data.message;
                    $scope.result = 'bg-success';
                    if ($scope.result === 'bg-success') {
                        $scope.class = "bg-success";
                    }
                    // if($scope.result){setTimeout(window.location.reload(true),4000);}
                    if ($scope.result) {
                        setTimeout(function() {
                            window.location.reload(true)
                        }, 4000);
                    }
                } else {
                    $scope.submitButtonDisabled = false;
                    $scope.resultMessage = data.message;
                    $scope.result = 'bg-danger';
                }
            });
        } else {
            $scope.submitButtonDisabled = false;
            if ($scope.submitButtonDisabled) {
                $scope.class = "bg-danger";
            }
            $scope.resultMessage = 'Failed Please fill out all the fields.';
            $scope.result = 'bg-danger';
        }
    }
});

var viewController = angular.module('viewController', []);

rustyApp.directive('myActiveLink', function($location) {
    return {
        restrict: 'A',
        scope: {
            path: "@myActiveLink"
        },
        link: function(scope, element, attributes) {
            scope.$on('$locationChangeSuccess', function() {
                if ($location.path() === scope.path) {
                    element.addClass('uk-active');
                } else {
                    element.removeClass('uk-active');
                }
            });
        }
    };
});
// var $j = jQuery.noConflict();

// $j(function() {
//     $j('#Container').mixItUp();

// });

    rustyApp.directive('mixItUp', function() {
        var directive = {
            restrict: 'A',
            link: link
        };

        return directive;

        function link(scope, element, attrs) {
            var $j = jQuery.noConflict();
            var mixContainer = $j('#Container');
            mixContainer.mixItUp();
            mixContainer.on('$destroy', function() {
                mixContainer.mixItUp('destroy');
            });

        }
    });


    rustyApp.directive('share', function() {
        var directive = {
            restrict: 'A',
            link: link
        };

        return directive;

        function link(scope, element, attrs) {
            var $s = jQuery.noConflict();
            // mixContainer.on('$destroy', function() {
            //     mixContainer.mixItUp('destroy');
            // });
        var $s = new Share(".share-button", {
          networks: {
            facebook: {
              app_id: "602752456409826",
            }
          }
        });

        }
    });

    rustyApp.directive('animationOverlay', function() {
        var directive = {
            restrict: 'A',
            link: link
        };

        return directive;

        function link(scope, element, attrs) {
            var modal = $.UIkit.modal(".modalSelector");

            if (modal.isActive()) {
                modal.hide();
            } else {
                modal.show();
            }

        }
    });

更新代码

    var rustyApp = angular.module('rustyApp', [
    'ngAnimate',
    'ngRoute',
    'viewController',
    'mm.foundation',
    'angular-flexslider',
    'ui.router'
]).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        title: 'home',
        templateUrl: '/partials/home.html',
        controller: 'HomeController'
    }).when('/work', {
        title: 'my work',
        templateUrl: '/partials/work.html',
        controller: 'WorkController'
    }).when('/contact', {
        title: 'contact',
        templateUrl: '/partials/contact.html',
        controller: 'ContactController'
    }).otherwise({redirectTo: '/'});
    // configure html5 to get links working

    $locationProvider.html5Mode(true);

}]);


 rustyApp.controller('BasicSliderCtrl', ['$scope', 
    function($scope) {
    $scope.slides = [
        '../images/sliderContent/1.jpg',
        '../images/sliderContent/2.jpg',
        '../images/sliderContent/3.jpg',
        '../images/sliderContent/4.jpg'
    ];

}]);


rustyApp.run(function() {
    FastClick.attach(document.body);
  });

rustyApp.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);


rustyApp.controller('HomeController', ['$scope', function($scope) {
     $scope.pageClass = 'home';
}]);
rustyApp.controller('WorkController', ['$scope', function($scope) {
     $scope.pageClass = 'work';
}]);
rustyApp.controller('ContactController', ['$scope', function($scope) {
     $scope.pageClass = 'contact';
}]);
rustyApp.controller('OffCanvasDemoCtrl', ['$scope', function($scope) {}]);


var OffCanvasDemoCtrl = function($scope) {};

rustyApp.controller('ContactController', ['$scope', function($scope, $http) {
    $scope.result = 'hidden'
    $scope.resultMessage;
    $scope.formData; //formData is an object holding the name, email, subject, and message
    $scope.submitButtonDisabled = false;
    $scope.submitted = false; //used so that form errors are shown only after the form has been submitted
    $scope.submit = function(contactform) {
        $scope.submitted = true;
        $scope.submitButtonDisabled = true;
        if (contactform.$valid) {
            $http({
                method: 'POST',
                url: '../partials/mailer.php',
                data: $.param($scope.formData), //param method from jQuery
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                } //set the headers so angular passing info as form data (not request payload)
            }).success(function(data) {
                console.log(data);
                if (data.success) { //success comes from the return json object
                    $scope.submitButtonDisabled = true;
                    $scope.resultMessage = data.message;
                    $scope.result = 'bg-success';
                    if ($scope.result === 'bg-success') {
                        $scope.class = "bg-success";
                    }
                    // if($scope.result){setTimeout(window.location.reload(true),4000);}
                    if ($scope.result) {
                        setTimeout(function() {
                            window.location.reload(true)
                        }, 4000);
                    }
                } else {
                    $scope.submitButtonDisabled = false;
                    $scope.resultMessage = data.message;
                    $scope.result = 'bg-danger';
                }
            });
        } else {
            $scope.submitButtonDisabled = false;
            if ($scope.submitButtonDisabled) {
                $scope.class = "bg-danger";
            }
            $scope.resultMessage = 'Failed Please fill out all the fields.';
            $scope.result = 'bg-danger';
        }
    }
}]);

var viewController = angular.module('viewController', []);

rustyApp.directive('myActiveLink', ['$location', function($location) {
    return {
        restrict: 'A',
        scope: {
            path: "@myActiveLink"
        },
        link: function(scope, element, attributes) {
            scope.$on('$locationChangeSuccess', function() {
                if ($location.path() === scope.path) {
                    element.addClass('uk-active');
                } else {
                    element.removeClass('uk-active');
                }
            });
        }
    };
}]);
// var $j = jQuery.noConflict();

// $j(function() {
//     $j('#Container').mixItUp();

// });

rustyApp.directive('mixItUp', function() {
    var directive = {
        restrict: 'A',
        link: link
    };

    return directive;

    function link(scope, element, attrs) {
        var $j = jQuery.noConflict();
        var mixContainer = $j('#Container');
        mixContainer.mixItUp();
        mixContainer.on('$destroy', function() {
            mixContainer.mixItUp('destroy');
        });

    }
});


rustyApp.directive('share', function() {
    var directive = {
        restrict: 'A',
        link: link
    };

    return directive;

    function link(scope, element, attrs) {
        var $s = jQuery.noConflict();
        // mixContainer.on('$destroy', function() {
        //     mixContainer.mixItUp('destroy');
        // });
    var $s = new Share(".share-button", {
      networks: {
        facebook: {
          app_id: "602752456409826",
        }
      }
    });

    }
});

rustyApp.directive('animationOverlay', function() {
    var directive = {
        restrict: 'A',
        link: link
    };

    return directive;

    function link(scope, element, attrs) {
        var modal = $.UIkit.modal(".modalSelector");

        if (modal.isActive()) {
            modal.hide();
        } else {
            modal.show();
        }

    }
});

更新

所以我使用gulp-ng-annotate创建并且它似乎添加了下面建议的语法:)然而，当我尝试PROD构建时，我没有得到任何错误或任何东西，它只是默默地失败。有人可以帮忙吗？

Answer 1

在我有机会看到您发布的其他代码之前，我发布了以下通用答案。是的，确实你有一些使用推理的控制器和指令。更改代码以使用内联注释$inject属性;或者更少侵入性地使用像ng-annotate这样的工具（感谢@deitch指针）。

如果您正在缩小代码，请不要使用依赖性注释的推理样式。使用$inject属性或使用内联注释。请参阅https://docs.angularjs.org/api/auto/service/$injector。

实施例

不要依赖推理：

function ($scope, $timeout, myFooService) {
}

使用内联注释：

[ '$scope', '$timeout', 'myFooService', function ($scope, $rootScope, myFooService) {
}]

或$inject属性：

function MyFactory($scope, $timeout, myFooService) {
}

MyFactory.$inject = [ '$scope', '$timeout', 'myFooService' ];

这是因为推理风格依赖于要保留的函数的参数名称（并与现有服务匹配）。你可能会在缩小时失去原来的名字。

Answer 2

设置 mangle：false 。

此设置解决了我遇到的同样问题。

var $ = require（＆＃39; gulp-load-plugins＆＃39;）（）;

$ .uglify（{ mangle：false，压缩：真实，输出：{ 美化：虚假 } }）

什么是错误：[$ injector：unpr]未知提供者：tProvider＆lt; - t＆lt; - myActiveLinkDirective是什么意思？

2 个答案:

实施例