karma-ng-html2js-preprocessor 不工作 gulp + angular + karma + ng-html2js答案

【问题标题】：karma-ng-html2js-preprocessor not working gulp + angular + karma + ng-html2jskarma-ng-html2js-preprocessor 不工作 gulp + angular + karma + ng-html2js
【发布时间】：2015-02-11 21:29:50
【问题描述】：

我无法让 karma-ng-html2js-preprocessor 为外部模板工作。

打包Json文件：

    .....
    "gulp-karma": "*",
    "karma-coverage": "*",
    "karma-jasmine": "*",
    "karma-ng-html2js-preprocessor": "*",
    "karma-phantomjs-launcher": "*",
    .....

Karma 配置文件：

    config.set({
        browsers: [
             ....
        ],
        frameworks: [
            'jasmine'
        ],
        plugins: [
            'karma-jasmine',
            'karma-phantomjs-launcher',
            'karma-ng-html2js-preprocessor'
        ],
        preprocessors: {
            'app/**/*.html': 'ng-html2js'
        },
        ngHtml2JsPreprocessor: {
            stripPrefix: 'app/'
        }
    });

文件在构建文件中定义并传递给 gulp-karma。以下是定义的文件：

config = {  test: {
          configFile: '.../karma.conf.js',
          depends: [
              .......
          ],
          files: [
            "app/**/*.js",
            'app/**/*.html'
          ]
       }
    }

在我的指令规范中加载模板，如下所示：

beforeEach(module('app'));
beforeEach(module('app/tem/mytemp.html'));

我收到以下错误：

Error: [$injector:modulerr] Failed to instantiate module app/tem/mytemp.html due to:
Error: [$injector:nomod] Module 'app/tem/mytemp.html' is not available! You either misspelled the

在 karma debug.html html 文件被加载到链接标签输出中：

<script type="text/javascript" src="/absoluteC:.../app/tem/comp/mydirective.js"></script>
<link href="/absoluteC:..../app/tem/mytemp.html" rel="import">
<script type="text/javascript">
window.__karma__.loaded();

我错过了什么吗？如何调试并解决此问题？

【问题讨论】：

标签： angularjs karma-jasmine ng-html2js gulp-karma

【解决方案1】：

这是我解决完全相同问题的方法：

1) npm install karma-ng-html2js-preprocessor --save-dev（你已经这样做了）

2) 在 karma.config.js 中：

// .... 

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

// ....

ngHtml2JsPreprocessor: {
  stripPrefix: 'app/',  // <-- change as needed for the project
  // include beforeEach(module('templates')) in unit tests
  moduleName: 'templates'
},

plugins : [
    'karma-phantomjs-launcher',
    'karma-jasmine',
    'karma-ng-html2js-preprocessor'
]

3) 由于 gulp-karma 覆盖了 karma.conf.js 的 files 属性，为您的测试设置更改 gulp 任务配置（我有两个：一个 @987654324 @ 运行测试一次，另一个调用 tdd 进行持续测试）到这样的东西：

gulp.task('test', function() {
  var bowerDeps = ...

  var testFiles = bowerDeps.js.concat([
    'app/scripts/**/*.js',
    'test/unit/**/*.js',
    'app/**/*.html' // <-- This is what you need to add to load the .html files 
  ]);

  return gulp.src(testFiles)
    .pipe($.karma({
      configFile: 'test/karma.conf.js',
      action: 'run'
    }))
  ....
});

希望这会对某人有所帮助。

【讨论】：

【解决方案2】：

我也是新手，我正在谷歌搜索另一个问题，但我认为我比你走得更远（我也意识到这个任务有点老了）。

我所做的是对 Karma 配置文件的 ngHtml2JsPreprocessor 部分进行以下更改

ngHtml2JsPreprocessor: {
    stripPrefix: 'app/',

    // ADDED THIS: the name of the Angular module to create
    moduleName: "my.templates"
}

然后在我的测试中，我引用了该模块名称而不是 HTML 名称。

beforeEach(module('my.templates'));

我希望这会有所帮助，即使已经很晚了。或者其他人在搜索时发现这些信息很有用。

【讨论】：