web-dev-qa-db-ja.com

AngularJS + Karma + Ng-html2js =>モジュールのインスタンス化に失敗しました... html

Karmaを外部テンプレートを持つディレクティブに対して機能させることはできません。

これが私のカルマ設定ファイルです：

preprocessors: {
    'directives/loading/templates/loading.html': 'ng-html2js'
},

files: [
    ...
    'directives/loading/templates/loading.html',
]

ngHtml2JsPreprocessor: {
    prependPrefix: '/app/'
},

ディレクティブファイル：

...
templateUrl: '/app/directives/loading/templates/loading.html'
...

スペックファイル内：

describe('Loading directive', function() {
    ...
    beforeEach(module('/app/directives/loading/templates/loading.html'));
    ...
});

次のエラーが発生します。

次の理由により、モジュール/app/directives/loading/templates/loading.htmlのインスタンス化に失敗しました：エラー：モジュールなし：/app/directives/loading/templates/loading.html

Karma-ng-html2js-preprocessorのソースコードを変更して、生成されたファイルの結果を出力すると、次のようになります。

angular.module('/app/directives/loading/templates/loading.html', []).run(function($templateCache) {
    $templateCache.put('/app/directives/loading/templates/loading.html',
        '<div ng-hide="hideLoading" class="loading_panel">\n' +
        '   <div class="center">\n' +
        '       <div class="content">\n' +
        '           <span ng-transclude></span>\n' +
        '           <canvas width="32" height="32"></canvas>\n' +
        '       </div>\n' +
        '   </div>\n' +
    '</div>');
});

だから、生成されたJSファイルは正しいようですが、カルマによって読み込まれていません...

また、--log-level debugを使用する場合、テンプレートに関連する行は次のとおりです。

デバッグ[preprocessor.html2js]：「/home/rightink/public_html/bo2/master/web/app/directives/loading/templates/loading.html」を処理しています

デバッグ[ウォッチャー]：解決済みファイル：

      /correct/path/to/the/app/directives/loading/templates/loading.html.js

何か不足していますか？

おかげで、

templatesangularjstestingdirectivekarma-runner
26
Vincent

問題は、fileセクションで指定された相対パスが完全なパスに展開されることである可能性があります。

何かのようなもの directives/loading/templates/loading.html => /home/joe/project/angular-app/directives/loading/templates/loading.html

...そして、テンプレートはフルパスで登録されます。

解決策は、ng-html2jsプリプロセッサを設定して、テンプレートパスの絶対部分を削除することです。たとえば、karma.conf.jsファイルで、次のようにstripPrefixディレクティブを追加します。

ngHtml2JsPreprocessor: {
    // strip this from the file path
    stripPrefix: '.*/project/angular-app/'
    prependPrefix: '/app/'
}

StripPrefixは正規表現であることに注意してください。

12
Siggen

プリプロセッサにテンプレートをモジュールにキャッシュさせ、テストの前に組み込むことができます。

karma.conf.js

files: [
  ...
  'app/**/*.html'
],

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

ngHtml2JsPreprocessor: {
   moduleName: 'templates'
},

ディレクティブファイル

...
templateUrl: 'app/path-to-your/template.html',
...

スペックファイル

describe('My directive', function() {

  beforeEach(module('templates'));
  ...
});
11
scarlz

これは正確な問題ではないかもしれませんが、私たちのアプリケーションでは、karma.conf.jsに以下を追加する必要がありました。

ngHtml2JsPreprocessor: {
    cacheIdFromPath: function(filepath) {
        return '/vision/assets/' + filepath;
    }
}

対応するプリプロセッサ設定は次のようになります。

preprocessors: {
    'views/**/*.html': 'html2js'
},

私の理解では、これはテンプレートを指定するときにAngularJSで絶対URLを使用したことが原因でした-テストの実行時にどのカルマが書き換えていたのですか？

とにかくこれが役立つことを願っています。

4
Alex Osborn

私はAngularJSを学習している最中で、同じ問題に遭遇しました。理由はわかりませんが、karma.conf.jsのポートを変更すると修正されました。

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

    ...

    port: 9877,

    ...

  });
};

編集：

もう少しテストしたところ、問題はChromeでのみ発生していることがわかりました。ブラウザの履歴をすべて明示的に消去することで解決しました（Ctrl + F5は機能しませんでした）。

2
Jason