AngularJS + Karma + Ng-html2js => Fehler beim Instanziieren des Moduls ... html

Question

Ich kann Karma nicht für Direktiven erstellen, die externe Vorlagen haben.

Hier ist meine Karma-Konfigurationsdatei:

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

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

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

In der Richtlinie Datei:

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

In der Spec-Datei:

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

ich die folgende Fehlermeldung erhalten:

Failed to instantiate module /app/directives/loading/templates/loading.html due to: Error: No module: /app/directives/loading/templates/loading.html

Wenn ich den Quellcode des Karma-ng-html2js-Präprozessor ändern das Ergebnis der erzeugte Datei zu drucken, erhalte ich:

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>'); 
}); 

So scheint es, dass die erzeugte JS-Datei korrekt ist aber nicht von Karma geladen ...

auch, wenn ich --log-level Debug verwenden, sind hier die auf die Vorlage im Zusammenhang Linien:

DEBUG [preprocessor.html2js]: Processing "/home/rightink/public_html/bo2/master/web/app/directives/loading/templates/loading.html"

DEBUG [watcher]: Resolved files:

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

bin ich etwas fehlt ?

Danke,

Answer 1

Das ist nicht Ihr genaues Problem sein kann, aber in unserer Anwendung benötigt wir folgendes karma.conf.js hinzuzufügen:

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

Die entsprechende Preprozessoren Einstellung wie folgt aussieht:

Mein Verständnis war, dass dies aufgrund der Verwendung absoluter URLs in AngularJS bei der Angabe von Vorlagen - welche Karma wurde beim Ausführen von Tests neu schreiben?

Auf jeden Fall hoffe das hilft.

Answer 2

Ich bin gerade dabei, AngularJS zu lernen und stieß auf das gleiche Problem. Ich habe keine Ahnung warum, aber das Ändern des Ports in karma.conf.js hat es für mich repariert.

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

    ... 

    port: 9877, 

    ... 

    }); 
}; 

Edit:

Nach einem wenig mehr Tests ich, dass das Problem fand nur auf Chrome geschieht, und wurde von explizit Clearing alle Browserverlauf (Strg + F5 hat nicht funktioniert) aufgelöst.

Answer 3

Sie können zu einem Modul der Pre-Prozessor-Cache-Vorlagen haben, die dann vor eingeschlossen werden können, um Ihre Tests:

karma.conf.js

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

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

ngHtml2JsPreprocessor: { 
    moduleName: 'templates' 
}, 

Direktive Datei

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

Spec-Datei

describe('My directive', function() { 

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

Answer 4

Das Problem kann sein, dass relative Pfade in file Abschnitt angegeben Vollen erweitert erhalten.

So etwas wie directives/loading/templates/loading.html =>/home/joe/project/angular-app/directives/loading/templates/loading.html

... und dann bekommen Vorlagen mit ihren vollständigen Pfade registriert.

Die Lösung besteht darin, den Präprozessor ng-html2js so zu konfigurieren, dass der absolute Teil der Vorlagenpfade entfernt wird. Zum Beispiel in den karma.conf.js Datei hinzufügen, die stripPrefix Richtlinie wie folgt aus:

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

Beachten Sie, dass stripPrefix ein regexp ist.