Angularjs 角度不';t加载模块-$injector:moduler
我的应用程序中出现以下错误: 问题仅在加载特定模块时出现,以下是我的主要模块: app.module.jsAngularjs 角度不';t加载模块-$injector:moduler,angularjs,angular-module,Angularjs,Angular Module,我的应用程序中出现以下错误: 问题仅在加载特定模块时出现,以下是我的主要模块: app.module.js (function () { 'use strict'; angular .module( 'app', [ /* * Shared modules */ 'app.layout', 'app.core',
(function () {
'use strict';
angular
.module( 'app', [
/*
* Shared modules
*/
'app.layout',
'app.core',
/*
* Feature areas
*/
'app.users',
'app.purchases'//This is the module that generates the modulerr error
] )
.config( [ '$locationProvider', hashbagRemove ] );
function hashbagRemove( $locationProvider ) {
$locationProvider.html5Mode( true );
}
})();
(function () {
'use strict';
angular.module( 'app.purchases', [
'app.purchases.suppliers'
] );
})();
(function () {
'use strict';
angular.module( 'app.purchases.suppliers', [] );
})();
(function () {
'use strict';
angular
.module( 'app.purchases.suppliers' )
// Collect the ui-route states
.constant( 'states', getRouteStates() )
// Configure the ui-route states and state resolvers
.config( [ '$stateProvider', '$urlRouterProvider', 'states', stateConfigurator ] );
function stateConfigurator( $stateProvider, $urlRouterProvider, states ) {
states.forEach( function ( state ) {
$stateProvider.state( state.name, state.config );
} );
$urlRouterProvider.otherwise( "/" );
}
// Define the ui-route states
function getRouteStates() {
return [
{
name: 'suppliersDashboard',
config: {
url: '/compras/proveedores',
templateUrl: './modules/purchases/suppliers/suppliers-dashboard.view.html',
title: 'Menu Principal de Proveedores',
controller: 'SuppliersDashboardController',
controllerAs: 'vm'
}
},
{
name: 'createSupplier',
config: {
url: '/compras/proveedores/nuevo',
templateUrl: './modules/purchases/suppliers/create-supplier/create-supplier.view.html',
title: 'Nuevo Proveedor',
controller: 'CreateSupplierController',
controllerAs: 'vm'
}
},
{
name: 'listSupplier',
config: {
url: '/compras/proveedores/listado',
templateUrl: './modules/purchases/suppliers/read-supplier/list-supplier.view.html',
title: 'Listado de Proveedores',
controller: 'ReadSupplierController',
controllerAs: 'vm'
}
},
{
name: 'detailSupplier',
config: {
url: '/compras/proveedores/:supplierId/:supplierName',
templateUrl: './modules/purchases/suppliers/read-supplier/detail-supplier.view.html',
title: 'Detalles del Proveedor',
controller: 'ReadSupplierController',
controllerAs: 'vm'
}
},
{
name: 'updateSupplier',
config: {
url: '/compras/proveedores/:supplierId/:supplierName/editar',
templateUrl: './modules/purchases/suppliers/update-supplier/update-supplier.view.html',
title: 'Editar Proveedor',
controller: 'UpdateSupplierController',
controllerAs: 'vm'
}
}
];
}
})();
这是生成错误的模块:
purchases.module.js
(function () {
'use strict';
angular
.module( 'app', [
/*
* Shared modules
*/
'app.layout',
'app.core',
/*
* Feature areas
*/
'app.users',
'app.purchases'//This is the module that generates the modulerr error
] )
.config( [ '$locationProvider', hashbagRemove ] );
function hashbagRemove( $locationProvider ) {
$locationProvider.html5Mode( true );
}
})();
(function () {
'use strict';
angular.module( 'app.purchases', [
'app.purchases.suppliers'
] );
})();
(function () {
'use strict';
angular.module( 'app.purchases.suppliers', [] );
})();
(function () {
'use strict';
angular
.module( 'app.purchases.suppliers' )
// Collect the ui-route states
.constant( 'states', getRouteStates() )
// Configure the ui-route states and state resolvers
.config( [ '$stateProvider', '$urlRouterProvider', 'states', stateConfigurator ] );
function stateConfigurator( $stateProvider, $urlRouterProvider, states ) {
states.forEach( function ( state ) {
$stateProvider.state( state.name, state.config );
} );
$urlRouterProvider.otherwise( "/" );
}
// Define the ui-route states
function getRouteStates() {
return [
{
name: 'suppliersDashboard',
config: {
url: '/compras/proveedores',
templateUrl: './modules/purchases/suppliers/suppliers-dashboard.view.html',
title: 'Menu Principal de Proveedores',
controller: 'SuppliersDashboardController',
controllerAs: 'vm'
}
},
{
name: 'createSupplier',
config: {
url: '/compras/proveedores/nuevo',
templateUrl: './modules/purchases/suppliers/create-supplier/create-supplier.view.html',
title: 'Nuevo Proveedor',
controller: 'CreateSupplierController',
controllerAs: 'vm'
}
},
{
name: 'listSupplier',
config: {
url: '/compras/proveedores/listado',
templateUrl: './modules/purchases/suppliers/read-supplier/list-supplier.view.html',
title: 'Listado de Proveedores',
controller: 'ReadSupplierController',
controllerAs: 'vm'
}
},
{
name: 'detailSupplier',
config: {
url: '/compras/proveedores/:supplierId/:supplierName',
templateUrl: './modules/purchases/suppliers/read-supplier/detail-supplier.view.html',
title: 'Detalles del Proveedor',
controller: 'ReadSupplierController',
controllerAs: 'vm'
}
},
{
name: 'updateSupplier',
config: {
url: '/compras/proveedores/:supplierId/:supplierName/editar',
templateUrl: './modules/purchases/suppliers/update-supplier/update-supplier.view.html',
title: 'Editar Proveedor',
controller: 'UpdateSupplierController',
controllerAs: 'vm'
}
}
];
}
})();
suppliers.module.js
(function () {
'use strict';
angular
.module( 'app', [
/*
* Shared modules
*/
'app.layout',
'app.core',
/*
* Feature areas
*/
'app.users',
'app.purchases'//This is the module that generates the modulerr error
] )
.config( [ '$locationProvider', hashbagRemove ] );
function hashbagRemove( $locationProvider ) {
$locationProvider.html5Mode( true );
}
})();
(function () {
'use strict';
angular.module( 'app.purchases', [
'app.purchases.suppliers'
] );
})();
(function () {
'use strict';
angular.module( 'app.purchases.suppliers', [] );
})();
(function () {
'use strict';
angular
.module( 'app.purchases.suppliers' )
// Collect the ui-route states
.constant( 'states', getRouteStates() )
// Configure the ui-route states and state resolvers
.config( [ '$stateProvider', '$urlRouterProvider', 'states', stateConfigurator ] );
function stateConfigurator( $stateProvider, $urlRouterProvider, states ) {
states.forEach( function ( state ) {
$stateProvider.state( state.name, state.config );
} );
$urlRouterProvider.otherwise( "/" );
}
// Define the ui-route states
function getRouteStates() {
return [
{
name: 'suppliersDashboard',
config: {
url: '/compras/proveedores',
templateUrl: './modules/purchases/suppliers/suppliers-dashboard.view.html',
title: 'Menu Principal de Proveedores',
controller: 'SuppliersDashboardController',
controllerAs: 'vm'
}
},
{
name: 'createSupplier',
config: {
url: '/compras/proveedores/nuevo',
templateUrl: './modules/purchases/suppliers/create-supplier/create-supplier.view.html',
title: 'Nuevo Proveedor',
controller: 'CreateSupplierController',
controllerAs: 'vm'
}
},
{
name: 'listSupplier',
config: {
url: '/compras/proveedores/listado',
templateUrl: './modules/purchases/suppliers/read-supplier/list-supplier.view.html',
title: 'Listado de Proveedores',
controller: 'ReadSupplierController',
controllerAs: 'vm'
}
},
{
name: 'detailSupplier',
config: {
url: '/compras/proveedores/:supplierId/:supplierName',
templateUrl: './modules/purchases/suppliers/read-supplier/detail-supplier.view.html',
title: 'Detalles del Proveedor',
controller: 'ReadSupplierController',
controllerAs: 'vm'
}
},
{
name: 'updateSupplier',
config: {
url: '/compras/proveedores/:supplierId/:supplierName/editar',
templateUrl: './modules/purchases/suppliers/update-supplier/update-supplier.view.html',
title: 'Editar Proveedor',
controller: 'UpdateSupplierController',
controllerAs: 'vm'
}
}
];
}
})();
正如你所看到的,我有一个模块化的应用程序,问题是如果我加载该模块,应用程序崩溃,我已经检查了所有的控制器和工厂,看看那里是否有任何错误,所有这些都是正确的,而且我已经验证了我加载了所有必要的脚本,我不明白为什么错误持续存在
为了让您更清楚地了解我的应用程序的结构,这里有一张图片:
下面是index.html
<!DOCTYPE html>
<html lang="es" ng-app="app">
<head>
<meta charset="UTF-8">
<title>SOS Control</title>
<link rel="stylesheet" href="./components/bootstrap/bootstrap-3.1.1.min.css"/>
<link rel="stylesheet" href="./components/font-awesome/font-awesome-4.4.0.min.css"/>
<base href="/"/>
</head>
<body>
<div ui-view></div>
<!--==================================================== SCRIPTS ====================================================-->
<!----------------------------------------------Other-->
<!--<script src="./components/lodash/lodash-3.10.1.min.js"></script>-->
<script src="./components/underscore/underscore-1.8.3.min.js"></script>
<!---------------------------------------------JQuery-->
<script src="./components/jquery/jquery-2.1.4.min.js"></script>
<!--------------------------------------------Angular-->
<script src="./components/angular/angular-1.4.5.min.js"></script>
<script src="./components/bootstrap/ui-bootstrap-0.13.4.min.js"></script>
<script src="./components/angular-ui-router/angular-ui-router-0.2.15.min.js"></script>
<script src="./components/restangular/restangular-1.5.1.min.js"></script>
<!---------------------------------------Main Modules-->
<script src="./app.module.js"></script>
<script src="./modules/core/core.module.js"></script>
<script src="./modules/layout/layout.module.js"></script>
<!---------------------------------------Users Module-->
<script src="./modules/users/users.module.js"></script>
<script src="./modules/users/users.routes.js"></script>
<script src="./modules/users/signin/signin.controller.js"></script>
<script src="./modules/users/signout/signout.factory.js"></script>
<script src="./modules/users/account/account.module.js"></script>
<script src="./modules/users/account/account.routes.js"></script>
<script src="./modules/users/account/edit-data/edit-data.controller.js"></script>
<script src="./modules/users/account/reset-password/reset-password.controller.js"></script>
<!-----------------------------------Purchases Module-->
<script src="./modules/purchases/purchases.module.js"></script>
<script src="./modules/purchases/purchases.routes.js"></script>
<script src="./modules/purchases/suppliers/suppliers.module.js"></script>
<script src="./modules/purchases/suppliers/suppliers.routes.js"></script>
<script src="./modules/purchases/suppliers/suppliers-dashboard.controller.js"></script>
<script src="./modules/purchases/suppliers/create-supplier/create-supplier.factory.js"></script>
<script src="./modules/purchases/suppliers/create-supplier/create-supplier.controller.js"></script>
<script src="./modules/purchases/suppliers/read-supplier/read-supplier.factory.js"></script>
<script src="./modules/purchases/suppliers/read-supplier/read-supplier.controller.js"></script>
<script src="./modules/purchases/suppliers/update-supplier/update-supplier.factory.js"></script>
<script src="./modules/purchases/suppliers/update-supplier/update-supplier.controller.js"></script>
</body>
</html>
我要做的是在每个名为states
的模块中创建一个常量,我在其中存储状态属性(我使用ui路由器),然后在module.config
中迭代常量状态,将状态添加到$stateProvider
中
我认为可能导致问题的原因是,在每个模块中,我声明了相同的常量,
状态
,难道两个不同的模块不能有相同名称的常量吗?我看到您使用的是模块模式,这很好
糟糕的是,在app.purchases
模块调用的时候,也就是脚本被编译(从index.html
加载)之后,app.purchases.suppliers
没有被编译
解决方案:顺序在这里很重要,因为这些脚本的执行顺序是您在index.html
中引用它们的顺序
- 将引用
模块定义的app.purchases.suppliers
元素移动到引用
模块的元素上方app.purchases
- 确保链接到其模块的单元(服务、控制器、指令…)位于包含链接模块定义的文件之后
- 最后引用使用所有其他模块的主模块文件,然后引用自己的单元(服务、控制器、指令、配置…)
- 对于模块本身内的依赖项,也要遵循此规则(如果控制器正在使用某些服务,请确保该服务在控制器上方被引用)
建议:始终首先引用包含不依赖于其他单位的单位的文件。为了不担心这一点,您可以考虑使用<代码> Realjs< /Calp>> P> >问题是,在<强>购买.Realth.js:中,我声明了一个空JSON数组。
(function () {
'use strict';
angular.module('app.purchases')
// Collect the ui-route states
.constant('states', getRouteStates())
// Configure the ui-route states and state resolvers
.config(['$stateProvider', '$urlRouterProvider', 'states', stateConfigurator]);
function stateConfigurator($stateProvider, $urlRouterProvider, states) {
states.forEach(function (state) {
$stateProvider.state(state.name, state.config);
});
$urlRouterProvider.otherwise("/");
}
// Define the ui-route states
function getRouteStates() {
return [
{}//THIS WAS THE ERROR
];
}
})();
在遍历states
常量时,该数组没有任何属性,因此无法找到state.name
和state.config
谢谢,当我看到使用Angular的开发版本时出现完全错误时,我可以解决这个问题。所以
app.purchases
依赖模块app.purchases.suppliers
有问题。它是否已定义,您是否也可以显示该模块的定义?使用angular的开发版本获得更详细的错误和堆栈跟踪输出。然后用什么错误更新问题says@charlietfl您能告诉我从哪里获得开发版本吗,我找不到它…@l0lander是的,app.purchases.suppliers
已声明并loaded@l0lander刚刚在帖子中添加了app.purchases.suppliers
模块的声明。这肯定不起作用,我照你说的做了,现在它抛出了很多关于$injector:nomod
的错误还有,我怎么能在我的结构中使用react.js呢?它是requirejs
。但是我相信问题就在这里,如果错误的数量发生了变化,这意味着您正在找到正确的顺序,只需遵循我上面写的规则;)哦,抱歉,jaja,require.js
看起来不错,你能用一个使用它的例子更新你的答案吗?我已经解决了这个问题,但你的观点似乎是逻辑的,我不理解的是确保单元(服务、控制器、指令…)链接到其模块的文件位于包含链接模块定义的文件之后。
这是什么意思?例如,如果我有模块x、子模块xx和服务xx,我应该以什么顺序加载它们?