Question

我试图围绕Webpack，Angular和Karma ...特别是关于html模板。

例如，我有一个指令：

return {
    restrict: 'E',
    scope: {
        ...
    },
    template: require('../partials/dashboard.html'),
    link: link
};

感谢webpack config html-loader，我能够将html内联到指令中：

{
    test: /\.html$/,
    exclude: /node_modules/,
    loader: 'html'
},

通过webpack捆绑后，一切正常。

现在，问题是我想测试这个指令......但它抱怨因为它无法找到/my/karma/path/partials/dashboard.html.js。所以我将ng-html2js预处理器添加到Karma，但现在它抱怨：

Uncaught ReferenceError: angular is not defined ... at line 5

生成的dashboard.html.js如下所示：

(function(module) {
try {
  module = angular.module('templates');
} catch (e) {
  module = angular.module('templates', []);
}

所以它实际上找到了文件，转到第5行并且不知道角度是什么......

有人能指出一个与我试图做的相似的工作实例吗？或者给我一些建议？谢谢！

另外 - 我没有挂在使用html-loader的解决方案上......但是尝试使用ng-cache-loader和其他人，我最终遇到了同样的问题......

编辑：karma.conf.js：

var path = require('path');
module.exports = function(config) {
    config.set({
        basePath: '../..',

        files: [
            // external libraries
            { pattern: 'main/themes/node_modules/requirejs/require.js', included: false },
            { pattern: 'main/themes/node_modules/angular/angular.js', included: false },
            (...)
            // html templates
            { pattern: 'main/webapp/static/bla/bla/partials/*.html', included: false },
            // test cases
            { pattern: 'test/webapp/static/bla/bla/**/*.spec.js', included: false },
            // main require config for testing
            'test/webapp/static/bla/bla/scripts/test-main.js'
        ],
        frameworks: ['jasmine', 'requirejs', 'sinon'],
        preprocessors: {
            'main/webapp/static/bla/bla/partials/*.html': 'ng-html2js'
        },
        ngHtml2JsPreprocessor: {
            moduleName: 'templates'
        },    
        (... some other configs...)

    })
}

Karma使用模板测试Angular指令：require（...）和Webpack

0 个答案: