错误：[ng：areq]参数'fn'不是一个函数，得到了对象

Question

版本：

• 角度v1.6.4
• ui路由器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的文档，据我所知，似乎我已正确定义了resolve部分。 如果需要我提供更多的拼图，请记住，这是一个大角度的应用程序。

注意：转换为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参数中获得了以下内容。 我不确定它是否提供任何线索。 我省略了视图的模板内容，因为大量的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路由问题没有直接关系。 当angular启动我的一项服务时，它得到的是“对象”而不是它期望的功能。 我苦苦挣扎的部分是了解哪种服务才是罪魁祸首（此应用程序具有数百种服务，因此很难仅简单地逐个浏览每个服务）。 为了确定罪魁祸首，我切换到了angular的非最小版本，然后使用了chrome开发人员工具的“ Sources”选项卡，并选中了“ Pause On Caught Exceptions”复选框。 刚开始时，您可能会拾取与您的应用程序无关的其他异常，因此您可能需要几次（或多次）F8直到看到红色字体错误为止。 查看右侧的堆栈轨迹，我能够从最后一个堆栈开始，一直向上移动，直到遇到带有“ serviceName”变量的角度库中的某个位置，该变量实际上指示了该服务是无法实例化。 我还能够在角度库（实例化模块的数组）中找到“缓存”变量，并在该数组中注意到了我的服务。 查看阵列中的其他服务，它们是类型函数，而错误的服务则显示为“对象”类型（啊哈！）。 该服务未遵循正确的服务格式，因此angular无法实例化它。 虽然这不是完全麻烦，但这完全是我的错，但是如果角度库在错误消息中包含发生故障的模块的名称，那将是非常棒的。