Question

版本：

angular v1.6.4
ui-router v0.3.2

我正在使用webpack转换要构建的大角度应用程序。自设置构建过程以来，我在Chrome开发者控制台中多次重复此错误。

Error: [ng:areq] Argument 'fn' is not a function, got Object

我发现当我从下面的代码块中注释掉整个解决方案部分（正在设置ui路由状态）时，我没有错误，但是我的应用程序视图没有启动，因此我的应用程序没有工作。对于上下文，此代码位于一个函数内，该函数作为config块添加到主角度应用程序模块中。

$stateProvider.state('productCart', {
    url: '/productCart',
    resolve: {
        initProductCartService: [
            '$state', '$q', 'constants', 'ProductCartService', 'ConfigService', 'StateService',
            function($state, $q, constants, ProductCartService, ConfigService, StateService) {
                var isReadOnlyMode = StateService.isReadOnlyMode;
                var isBypassProductCart = constants.systemProperties.IsBypassShoppingCart;
                var productCartState = constants.systemProperties.productCartState;

                return ProductCartService.getProductCartItems(true).then(function(productCartLineItems) {
                    if(!(angular.isArray(productCartLineItems) && productCartLineItems.length > 0) && !isReadOnlyMode || isBypassProductCart){
                    $state.go('catalog');

                } else {
                    return ConfigService.getProductCartPageUrl().then(function(pageUrl) {
                        if (pageUrl != null) {
                            window.location = pageUrl;
                            //handles first time returning from VF page scenario
                            window.setTimeout(function(){window.location = pageUrl}, 1000);
                            return $q.reject();
                        } else if (productCartState != null && productCartState == 'productcart') {
                            $state.go('productcart');

                        }
                    });
                }
            });
        }
    ]
},
views: {
    'header@': {
        template: require('./views/header-global.html')
    },
    'selector@productCart': {
        template: require('./views/selector-summary.html')
    },
    'cNotification@productCart': {
        template: require('./views/c-notification.html')
    },
    'recommendedProducts@productCart': {
        template: require('./views/recommended-products.html')
    },
    'processIcon@': {
        template: require('./views/process-icon.html')
    },
    'notification@': {
        template: require('./views/notification.html')
    },
    'actions@': {
        template: require('./views/actions.html')
    },
    'layout@': {
        template: require('./views/layout.html')
    },
    'layoutSingle@productCart': {
        template: require('./views/product-cart.html')
    }
},
onEnter: [
    'ConstraintRulesService',
    function (ConstraintRulesService) {
        ConstraintRulesService.setContext(0, [0]);
    }
]
});

我遇到过有关类似错误的多个问题，但他们的问题/解决方案似乎与我的不一样。我已经查看了一些关于stateProvider的文档，看来我已经正确定义了解析部分，据我所知。如果您需要我提供更多拼图，请告诉我，请记住这是一个大角度的应用程序。

注意：在转换为webpack时，我确实将ui-router的版本升级到v0.3.2，因为当我尝试使用npm安装旧版本时，我会收到以下错误。

angular-ui-router@0.2.15 invalid

我为状态提供程序错误添加了以下事件侦听器。

angular.module('myModule').run( function($rootScope) {
    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
        debugger
    });
});

我从toState和fromState参数中得到以下内容。我不确定它是否提供了任何线索。我省略了观点＆＃39;由于大量HTML而导致的模板内容远离了我试图说明的内容。 event参数似乎不包含我可以看到的任何有价值的内容，toParams是一个空对象，fromParams是一个空对象，而error参数只包含错误我发布了这个问题的标题。

toState = {
    "url": "/productCart",
    "resolve": {
    "initProductCartService": [
        "$state",
        "$q",
        "constants",
        "ProductCartService",
        "ConfigService",
        "StateService",
        null
    ]
},
    "views": {
    "header@": {
        "template": "HEADER TEMPLATE CONTENT",
            "resolveAs": "$resolve"
    }
},
    "onEnter": [
    "ConstraintRulesService",
    null
],
    "name": "productCart"
}

fromState =     {
    "name": "",
    "url": "^",
    "views": null,
    "abstract": true
}

我将ui-router降级为0.2.15（尽管无效警告/错误，但仍然安装）并继续收到此错误。

Answer 1

在我的案例中，这与ui-route问题没有直接关系。虽然angular是引导我的一个服务，但是它获得了一个“对象”，而不是它所期望的功能。我努力的部分是了解哪个服务是罪魁祸首（这个应用程序有数百个服务，很难简单地逐个完成每个服务）。为了确定罪魁祸首我切换到非缩小版角度，然后使用chrome开发人员工具“Sources”选项卡并选中“Pause On Caught Exceptions”复选框。首先，您可能会选择与您的应用程序无关的其他异常，因此您可能需要F8几次（或更多次），直到您看到红色字体的错误。查看右侧的堆栈跟踪，我能够从最后一个堆栈开始，然后沿着堆栈向上工作，直到我在角度库中找到一个带有“serviceName”变量的位置，该变量实际上表明了它的服务未能实例化。我还能够在角度库（实例化模块的数组）中找到“缓存”变量，并在此数组中注意到我的服务。查看数组中的其他服务，它们是类型函数，而错误服务显示为具有“对象”类型（啊哈！）。此服务未遵循正确的服务格式，因此angular无法实例化它。虽然这不是太麻烦，但如果角度库在错误消息中包含失败模块的名称，这将是非常棒的。

错误：[ng：areq]参数＆＃39; fn＆＃39;不是一个函数，得到了Object

1 个答案: