Question

我有一个角度路由器，它使用解析功能并调用服务MyService。

var Router = function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state(home, {
            resolve:{
                myFactory: 'MyFactory',
                checkUser: function(myFactory){
                    return myFactory.getUser().then(function(data){
                        // some logic with data
                    });
                }
            },
        });
};

module.exports = ['$stateProvider', '$urlRouterProvider', Router];

当我通过缩小器运行时，我最终得到：

var e = function(t, e) {

    t.state(home, {
        url: "/home",
        resolve: {
            myFactory: "MyFactory",
            checkUser: function(t){
                return t.getUser().then(function(e){

                });
            }
        },
    })
}
;
t.exports = ["$stateProvider", "$urlRouterProvider", e]

此处的问题是变量t和e。

在顶层：

t = $stateProvider
e = $urlRouterProvider

但是，在我的resolve中，再次使用t和e，但是：

t = $stateProvider but should = myFactory
e = $urlRouterProvider but should = data

因此t.getUser或t.getProducts实际上并不存在，因此我的应用无法加载。

更新：

带注释的版本：

var Router = function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state(home, {
            resolve:{
                myFactory: 'MyFactory',
                checkUser: ['myFactory', function(myFactory){
                    return myFactory.getUser().then(function(data){
                        // some logic with data
                    });
                }]
            },
        });
};

module.exports = ['$stateProvider', '$urlRouterProvider', Router];

Answer 1

叶氏。你需要NG-Annotate。例如，对于Gulp，我使用了this one.

Answer 2

myFactory是此解析程序中的本地依赖项。与任何其他依赖项一样，它应该是annotated，以便在缩小的JS中正确注入。

            checkUser: ['myFactory', function(myFactory){
                return myFactory.getUser().then(function(data){
                    // some logic with data
                });
            }]

Strict mode可用于避免生产中出现此类错误。

Answer 3

这实际上是从对象的“方法”中访问对象及其属性的问题，因为它是正确编写的。

我已经为你创建了一个Fiddle Example of Object Access，它展示了如何访问对象属性以及如何区分访问它的属性和传递给函数的参数。

要纠正您的特定错误，您的决心可能需要看起来像这样，但我建议您查看小提琴示例并尝试自己搞清楚。我有0个角度的经验，从我看来你可以在那里引用$ scope，这可以作为this的替代，但正如我所说我不熟悉，希望这有帮助：

resolve:{
            self: this,
            myFactory: 'MyFactory',
            checkUser: function(){
                return self.myFactory.getUser().then(function(data){
                    // some logic with data
                });
            }
        },

Answer 4

这是标准的缩小器方法，为了使代码更小，它还将变量名称更改为更小。

您可以通过三种方式解决问题：

a）在minifier中你必须指定no来改变变量名。（例如uglify插件中的mangle: false）

b）使用角度数组表示法，例如：

angular.service(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { .... } ]);

c）使用$ inject属性，例如：

var Router = function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state(home, {
            resolve:{
                myFactory: 'MyFactory',
                checkUser: function(myFactory){
                    return myFactory.getUser().then(function(data){
                    // some logic with data
                });
            }
        },
    });
};
Router.$inject = ['$stateProvider', '$urlRouterProvider'];
module.exports = ['$stateProvider', '$urlRouterProvider', Router];

在您的特定情况下，只有a）和c）可以正常工作

Minifier混淆变量名称

4 个答案: