3

使用 karma ngHtml2JsPreprocessor 测试我的 Angular 应用程序，我已经阅读了几十页关于如何配置 karma 以生成 js 模板而不是由 Angular 指令加载的 html 模板，我被以下消息所困扰：

Module 'js_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.6/$injector/nomod?p0=js_templates

我的文件夹结构是这样的：

/System/Root/Path/      
    web/
        js/ 
            app/
                test/
                    specs/
                        UserModule/
                            UserDirectives.spec.js
                modules/    
                    UserModule/ 
                        UserDirectives.js  <=== Where the directive is defined
        Templates
            login.tpl.html

我的指令是这样定义的：

directives.directive("loginForm", [function(){
return{
    restriction: "E",
    templateUrl: assetsRootPath+'/Templates/login.tpl.html' //assetsRootPath is defined to '' for karma
}]);

Karma 配置如下：

module.exports = function(config) {
  config.set({

    basePath: './web/js/',
    frameworks: ['jasmine', 'requirejs'],
    preprocessors: {
      '../Templates/**/*.html': ['ng-html2js']
    },
    ngHtml2JsPreprocessor: {
      stripPrefix: '.*web/',
      prependPrefix: '/',
      moduleName: 'js_templates',
      enableRequireJs: false
    },
    plugins : [
      'karma-chrome-launcher',
      'karma-jasmine',
      'karma-requirejs',
      'karma-ng-html2js-preprocessor'
    ],

    // list of files / patterns to load in the browser
    files: [
      { pattern: '../Templates/**/*.html', included: false },
      //....Other needed files
    ]

测试指令的规范：

define(['angular', 'ngmocks', 'app/modules/UserModule/UserDirectives'], function() {
    describe("Test User Directive > ", function () {
        var $compiler, compiledElement;
        beforeEach(module('User.Directives'));
        beforeEach(module('js_templates'));

        beforeEach(inject(function (_$rootScope_, _$compile_) {
            $rootScope = _$rootScope_;
            $compile = _$compile_;
            scope = $rootScope.$new();
            compiledElement = $compile("<login-form></login-form>")(scope);
            scope.$digest();
        }));

        it('Tries to test', function(){
            expect(1).toEqual(1);
        });
    });
});

当我启动测试时，出现以下错误：

Module 'js_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.6/$injector/nomod?p0=js_templates

我尝试了很多配置，但没有任何效果，我还尝试通过添加一些 log.debug 来调试 ngHtml2JsPreprocessor 并且我看到模块“js_templates”是正确创建的，问题是为什么我不能为规范加载它. 可能有用的信息（不确定它是否会改变某些东西）：我正在使用 requirejs。谢谢你的帮助

4

1 回答 1

0

好吧，由于没有任何配置有效，我选择使用不同的方法，以下是我最终要使其工作的方法：

1 - 删除所有预处理器 2 - 安装简单的 html2js 节点插件：npm install karma-html2js-preprocessor --save-dev 3 - 在我的 karma.conf 文件中：

pattern: { files: '../Templates/**/*.html', included : true } //Note the included property to true
preprocessors: {
  '../Templates/**/*.html': ['html2js']
},

plugins : [
  'karma-chrome-launcher',
  'karma-jasmine',
  'karma-requirejs',
  'karma-html2js-preprocessor'
],

在我的 test-main.js 文件中，这是 require-js 的入口点，我已经这样做了：

require([
        'angular',
        ...
    ], function(angular, app) {
        var $html = angular.element(document.getElementsByTagName('html')[0]);
        angular.element().ready(function() {
            // bootstrap the app manually
            angular.bootstrap(document, ['app']);

            //Making all templates to be availabe through js_template module
            angular.module('js_templates', []).run(function($templateCache){
                angular.forEach(window.__html__, function(content, filename){
                    var modifiedFilename = filename;
                    /*****************Modify this to fit your app**********************/
                    var breakPos = modifiedFilename.indexOf('/Templates');
                    modifiedFilename = filename.substr(breakPos, modifiedFilename.length - breakPos);
                    /*****************/Modify this to fit your app*********************/
                    $templateCache.put(modifiedFilename, content);
                });
            });
        });
    }
);

不是很锋利，但也不是那么糟糕，无论如何它确实有效，这正是我想要的。当一个解决方案可以自然地与 ngHtml2JsPreprocessor 一起工作时，我会使用它。

于 2015-12-07T07:35:44.867 回答