karma-ng-html2js-preprocessor
Preprocessor for converting HTML files to AngularJS 1.x and Angular 2 templates.
Note: If you are looking for a general preprocessor that is not tied to Angular, check out karma-html2js-preprocessor.
Installation
The easiest way is to keep karma-ng-html2js-preprocessor
as a devDependency in your package.json
. Just run
$ npm install karma-ng-html2js-preprocessor --save-dev
Configuration
// karma.conf.jsmodule { config}
Multiple module names
Use function if more than one module that contains templates is required.
// karma.conf.jsmodule { config}
If only some of the templates should be placed in the modules,
return ''
, null
or undefined
for those which should not.
// karma.conf.jsmodule { config}
How does it work ?
This preprocessor converts HTML files into JS strings and generates Angular modules. These modules, when loaded, puts these HTML files into the $templateCache
and therefore Angular won't try to fetch them from the server.
For instance this template.html
...
something
... will be served as template.html.js
:
angular
See the ng-directive-testing for a complete example.
Angular2 template caching
For using this preprocessor with Angular 2 templates use angular: 2
option in the config file.
// karma.conf.jsmodule { config}
The template template.html
...
something
... will be served as template.html.js
that sets the template content in the global $templateCache variable:
window$templateCache = window$templateCache || {}window$templateCache'template.html' = '<div>something</div>';
To use the cached templates in your Angular 2 tests use the provider for the Cached XHR implementation - CACHED_TEMPLATE_PROVIDER
from angular2/platform/testing/browser
. The following shows the change in karma-test-shim.js
to use the cached XHR and template cache in all your tests.
// karma-test-shim.js...System
Now when your component under test uses template.html
in its templateUrl
the contents of the template will be used from the template cache instead of making a XHR to fetch the contents of the template. This can be useful while writing fakeAsync tests where the component can be loaded synchronously without the need to make a XHR to get the templates.
For more information on Karma see the homepage.