錯誤：[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無法實例化它。 雖然這不是完全麻煩，但這完全是我的錯，但是如果角度庫在錯誤消息中包含發生故障的模塊的名稱，那將是非常棒的。