angularjs - 模块 'templates' 不可用!在 Angular js 中？

Question

我正在尝试使用 Jasmine 以 Angular 测试指令。我安装了 karma -ng-html2js-预处理器使用 NPM。然后我使用 Bower 安装了 jQuery，但我收到了这个错误

Connected on socket ndfTI8XJInIU5YJCAAAA with id 49983199
Chrome 47.0.2526 (Mac OS X 10.10.2) http controller test it should be one FAILED
        Error: [$injector:modulerr] Failed to instantiate module templates due to:
        Error: [$injector:nomod] Module 'templates' 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.
        http://errors.angularjs.org/1.4.8/$injector/nomod?p0=templates
            at /Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:68:12
            at /Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:2005:17
            at ensure (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:1929:38)
            at module (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:2003:14)
            at /Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/a

我做了这样的指令

   angular.module('app',[]).controller('first',function($scope,data){
    $scope.name='test';
    $scope.message='application';

    data.getData().then(function(data){
          console.log(data);
    })

}).factory('data',function($http){
    return{
        getData:getData
    }

    function getData(){
             return $http.get('data.json').success(successCall).error(errorcallback)
    }

    function   successCall(data){
          return data
    }
    function   errorcallback(data){
        return data
    }
}).directive('helloWorld',function(){
    return {
        restrict:'E',
        scope:{
            data:'=',
            message:'@'
        } ,
        templateUrl:'app/partial/home.html',
        link:function(s,e,a){

        }
    }
})

home.html

<div class="dir">

    <h1>{{data}}</h1>
    <h1>{{message}}</h1>
</div>

test.js

describe('http controller test', function () {

    var $rootScope,
        $scope,
        $compile,
        $body=$('body'),
        el,
        $el,
        controller,
        html='<hello-world data="name" message="{{message}}"></hello-world>';

    beforeEach(function(){
        module('templates','app')  ;

        inject(function($injector){
            $rootScope  =  $injector.get('$rootScope') ;
            $compile  =  $injector.get('$compile') ;

            $scope=$rootScope.$new();
            el=$compile(angular.element(html))($scope)
            controller =$injector.get('$controller')('first',{$scope:$scope})
        })
        $body.append(el);
        $rootScope.$digest();

        $el=$('.dir');

    })

    afterEach(function(){
        $body.empty();
    })

    it('it should be one',function(){
        expect($el.length).isEqual(1)
    })

    describe('Init value',function(){
        it('check name value',function(){
            expect($scope.name).toEqual('test');
        })

    })

    it('it should be true',function(){
        expect(true).toBeTruthy();

    })
})

还有 karma 配置文件

// Karma configuration
// Generated on Fri Dec 18 2015 19:53:32 GMT+0530 (IST)

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: [

        'bower_components/angular/angular.js' ,
        'bower_components/jquery/dist/jquery.js' ,

        'bower_components/angular-mocks/angular-mocks.js' ,
        'bower_components/angular-resource/angular-resource.js' ,
           'app/**/.html',
        'app/*.js',
      '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: {
        'app/**/.html':['ng-html2js']
    },

      ngHtml2JsPreprocessor:{
          moduleName:'templates'

    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultanous
    concurrency: Infinity
  })
}

我已经像这样声明了模板模块

ngHtml2JsPreprocessor:{
              moduleName:'templates'

        },

更新 1

 Connected on socket i5kkzULDwF1_ptvcAAAA with id 55433592
Chrome 47.0.2526 (Mac OS X 10.10.2) http controller test it should be one FAILED
        Error: [$injector:modulerr] Failed to instantiate module templates due to:
        Error: [$injector:nomod] Module 'templates' 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.
        http://errors.angularjs.org/1.4.8/$injector/nomod?p0=templates
            at /Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:68:12
            at /Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:2005:17
            at ensure (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:1929:38)
            at module (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:2003:14)
            at /Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:4435:22
            at forEach (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:340:20)
            at loadModules (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:4419:5)
            at Object.createInjector [as injector] (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular/angular.js:4344:11)
            at Object.workFn (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular-mocks/angular-mocks.js:2428:52)
            at window.inject.angular.mock.inject (/Users/naveenkumar/Documents/ionic_work/tes/bower_components/angular-mocks/angular-mocks.js:2411:37)
        http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=templates&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'templates'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%

Answer 1

我以前没有使用 karma-ng-html2js-preprocessor 的经验所以这更像是一种猜测——可能是因为没有找到模板而没有生成模板模块。

您能否尝试更改 files 的这一部分？您的 karma-config 的部分从:

'app/**/.html'

到:

'app/**/*.html'

和 preprocessors部分来自:

preprocessors: {
    'app/**/.html':['ng-html2js']
}

到

preprocessors: {
    'app/**/*.html':['ng-html2js']
}

更新:

如果这对您不起作用，您可以将 Karma 的日志级别设置为

logLevel: config.LOG_DEBUG

并尝试搜索以 DEBUG [preprocessor.html2js] 开头的行收集与 html2js 相关的其他信息预处理器。