javascript 单元测试 AngularJS：未捕获的错误：[$injector:nomod] 模块不可用！和 ReferenceError: 运行 Karma 时未定义模块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28869877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unit-Testing AngularJS: Uncaught Error: [$injector:nomod] Module is not available! and ReferenceError: module is not defined when run Karma
提问by Pham Minh Tan
I've a small unitTest in Jasmine run with Karma. But when i run Karma it show errors:
我在 Jasmine 中有一个使用 Karma 运行的小型 unitTest。但是当我运行 Karma 时，它显示错误：
Uncaught Error: [$injector:nomod] Module 'material.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
FAILED Unit: LoginController encountered a declaration exception
ReferenceError: module is not defined
未捕获的错误：[$injector:nomod] 模块“material.controllers”不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
FAILED 单元：LoginController 遇到声明异常
参考错误：模块未定义
Here are my source code, config Karma file and unitTest.
karma.conf.js
这是我的源代码、配置 Karma 文件和 unitTest。
业力配置文件
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'/home/tanpham/Angular/Dev/libs/angular/angular.js',
'/home/tanpham/Angular/Dev/js/**/*.js',
'/home/tanpham/Angular/Dev/js/*.js',
'/home/tanpham/Angular/Test/*.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
index.html
索引.html
<body ng-app="material" ng-controller="AppController">
<ui-view></ui-view>
</body>
app.js
应用程序.js
angular.module('material.controllers', []);
angular.module('material.services', []);
angular.module('material.directives',[]);
angular.module('material.filters',[]);
var app = angular.module('material', ['ui.router','material.directives','http-auth-interceptor','material.controllers','material.services','material.filters'])
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app.html"
}).state('login', {
url: "/login",
templateUrl: "views/login.html",
controller: "LoginController"
});
$urlRouterProvider.otherwise('/login');
})
loginController
登录控制器
angular.module('material.controllers').controller('LoginController', function($scope) {
$scope.name = "Ari";
$scope.sayHello = function() {
$scope.greeting = "Hello " + $scope.name;
}
});
helloSpec.js
helloSpec.js
describe('Unit: LoginController', function() {
// Load the module with LoginController
beforeEach(module('material.controllers'));
var ctrl, scope;
// inject the $controller and $rootScope services
// in the beforeEach block
beforeEach(inject(function($controller, $rootScope) {
// Create a new scope that's a child of the $rootScope
scope = $rootScope.$new();
// Create the controller
ctrl = $controller('LoginController', {
$scope: scope
});
}));
it('should create $scope.greeting when calling sayHello',
function() {
expect(scope.greeting).toBeUndefined();
scope.sayHello();
expect(scope.greeting).toEqual("Hello Ari");
});
})
So, i can do with that and my module's name is right?
所以，我可以做到这一点，我的模块名称是对的吗？
回答by Madhan Ganesh
Check the order in which the angular modules are loaded. As your listing of javascript files in karma conf, see if the module defined files are loaded first before other files that use it.
检查 angular 模块的加载顺序。作为 karma conf 中 javascript 文件的列表，请查看模块定义的文件是否在其他使用它的文件之前首先加载。
Adjust the order in this listing, are explicitly load the file where 'material.controllers' module is defined.
调整此列表中的顺序，显式加载定义了“material.controllers”模块的文件。
files: [
'/home/tanpham/Angular/Dev/libs/angular/angular.js',
'/home/tanpham/Angular/Dev/js/**/*.js',
'/home/tanpham/Angular/Dev/js/*.js',
'/home/tanpham/Angular/Test/*.js'
],
回答by Jet Geng
i have met this issue. and solved it. just add ",[]" behind the module name in the module declare statement。 in this case chaged code will be :
我遇到过这个问题。并解决了它。只需在模块声明语句中的模块名称后面添加“，[]”。在这种情况下，更改的代码将是：
angular.module('material.controllers',[])
.controller('LoginController', function($scope) {
$scope.name = "Ari";
$scope.sayHello = function() {
$scope.greeting = "Hello " + $scope.name;
}
});
