templateUrl paths broken when running Karma Unit Tests with Angular

Question

Given the following structure.

root
---app
-----components

all of the directive templates use 'components/somemodule/some-template.html'

My node server typically runs the app from /app using express.static. Everything works fine.

PROBLEM: When running Karma Unit tests from the ROOT using grunt and trying to place a directive.. 404 not found : 'components/somemodule/some-template.html'

Obviously because the references should be: 'app/components/somemodule/some-template.html'

I cannot change this in my directive templates. Is there a way to tell Karma to find the right paths or have Karma run at the app level so it can resolve the paths?

Answer 1

The best solution I found was to have your templates loaded as JS into the browser that karma is running. There are any number of ways in which that can be done.

A preprocessor like ng-html2js is something that can do that for you, by converting all of the templates to js for testing only. It also includes a number of path configuration options so that you shouldn't have to modify the path in your code.

Otherwise, a tool like ng-templates does the same thing but for use in your production code, again with the ability to adjust paths so that you aren't tied down to a relative folder structure.