angularjs – 模块’模板’不可用！在角js？

发布时间：2020-12-17 18:04:37 所属栏目：安全来源：网络整理

导读：我试图使用Jasmine测试角度指令.我使用NPM安装了karma-ng-html2js-preprocessor.然后我使用Bower使用jQuery,但是我收到了这个错误 Connected on socket ndfTI8XJInIU5YJCAAAA with id 49983199Chrome 47.0.2526 (Mac OS X 10.10.2) http controller test it

我试图使用Jasmine测试角度指令.我使用NPM安装了karma-ng-html2js-preprocessor.然后我使用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-config文件

// 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%

解决方法

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

你能尝试改变你的karma-config的这部分文件部分：

'app/**/.html'

至：

'app/**/*.html'

和预处理器部分来自：

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

至

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

更新：

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

logLevel: config.LOG_DEBUG

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!