angularjs - ngHtml2JsPreprocessor 不加载包含模板的模块，已使用 karma 测试

Question

使用 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。 感谢您的帮助

Answer 1

好吧，由于没有任何配置起作用，我选择使用不同的方法，下面是我最终为使其起作用所做的事情:

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 一起工作时，我将使用它。