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