# karma-ng-html2js-preprocessor
> A Karma plugin. Compile AngularJS templates to JavaScript on the fly.
Latest version **1.0.0** (published 2016-05-04) · MIT license · 0 weekly downloads
## Install
```sh
npm install karma-ng-html2js-preprocessor
pnpm add karma-ng-html2js-preprocessor
yarn add karma-ng-html2js-preprocessor
bun add karma-ng-html2js-preprocessor
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-05-04 |
| First published | 2013-06-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 266 |
| Author | Vojta Jina |
| Maintainers | vojtajina, zzo, dignifiedquire |
| Keywords | karma-plugin, karma-preprocessor, angularjs, angular, html2js |
## Links
- npm: https://www.npmjs.com/package/karma-ng-html2js-preprocessor
- Repository: https://github.com/karma-runner/karma-ng-html2js-preprocessor
- Homepage: https://github.com/karma-runner/karma-ng-html2js-preprocessor#readme
- Issues: https://github.com/karma-runner/karma-ng-html2js-preprocessor/issues
- npm.io page: https://npm.io/package/karma-ng-html2js-preprocessor
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 1.0.0 (latest) — 2016-05-04
- 0.2.2 — 2016-04-07
- 0.2.1 — 2016-02-12
- 0.2.0 — 2015-10-08
- 0.1.2 — 2014-10-24
- 0.1.1 — 2014-10-15
- 0.1.0 — 2013-08-06
- 0.0.4 — 2013-08-05
- 0.0.3 — 2013-07-29
- 0.0.2 — 2013-07-04
- 0.0.1 — 2013-06-27
## README
# karma-ng-html2js-preprocessor
[](https://github.com/karma-runner/karma-ng-html2js-preprocessor)
[](https://www.npmjs.com/package/karma-ng-html2js-preprocessor) [](https://www.npmjs.com/package/karma-ng-html2js-preprocessor)
[](https://travis-ci.org/karma-runner/karma-ng-html2js-preprocessor) [](https://david-dm.org/karma-runner/karma-ng-html2js-preprocessor) [](https://david-dm.org/karma-runner/karma-ng-html2js-preprocessor#info=devDependencies)
> Preprocessor for converting HTML files to [AngularJS 1.x](http://angularjs.org/) and [Angular 2](http://angular.io/) templates.
*Note:* If you are looking for a general preprocessor that is not tied to Angular, check out [karma-html2js-preprocessor](https://github.com/karma-runner/karma-html2js-preprocessor).
## Installation
The easiest way is to keep `karma-ng-html2js-preprocessor` as a devDependency in your `package.json`. Just run
```bash
$ npm install karma-ng-html2js-preprocessor --save-dev
```
## Configuration
```js
// karma.conf.js
module.exports = function(config) {
config.set({
preprocessors: {
'**/*.html': ['ng-html2js']
},
files: [
'*.js',
'*.html',
'*.html.ext',
// if you wanna load template files in nested directories, you must use this
'**/*.html'
],
// if you have defined plugins explicitly, add karma-ng-html2js-preprocessor
// plugins: [
//
// 'karma-ng-html2js-preprocessor',
// ]
ngHtml2JsPreprocessor: {
// strip this from the file path
stripPrefix: 'public/',
stripSuffix: '.ext',
// prepend this to the
prependPrefix: 'served/',
// or define a custom transform function
// - cacheId returned is used to load template
// module(cacheId) will return template at filepath
cacheIdFromPath: function(filepath) {
// example strips 'public/' from anywhere in the path
// module(app/templates/template.html) => app/public/templates/template.html
var cacheId = filepath.strip('public/', '');
return cacheId;
},
// - setting this option will create only a single module that contains templates
// from all the files, so you can load them all with module('foo')
// - you may provide a function(htmlPath, originalPath) instead of a string
// if you'd like to generate modules dynamically
// htmlPath is a originalPath stripped and/or prepended
// with all provided suffixes and prefixes
moduleName: 'foo'
}
})
}
```
### Multiple module names
Use *function* if more than one module that contains templates is required.
```js
// karma.conf.js
module.exports = function(config) {
config.set({
// ...
ngHtml2JsPreprocessor: {
// ...
moduleName: function (htmlPath, originalPath) {
return htmlPath.split('/')[0];
}
}
})
}
```
If only some of the templates should be placed in the modules,
return `''`, `null` or `undefined` for those which should not.
```js
// karma.conf.js
module.exports = function(config) {
config.set({
// ...
ngHtml2JsPreprocessor: {
// ...
moduleName: function (htmlPath, originalPath) {
var module = htmlPath.split('/')[0];
return module !== 'tpl' ? module : null;
}
}
})
}
```
## 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`...
```html
something
```
... will be served as `template.html.js`:
```js
angular.module('template.html', []).run(function($templateCache) {
$templateCache.put('template.html', 'something
')
})
```
See the [ng-directive-testing](https://github.com/vojtajina/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.
```js
// karma.conf.js
module.exports = function(config) {
config.set({
// ...
ngHtml2JsPreprocessor: {
// ...
angular: 2
}
})
}
```
The template `template.html`...
```html
something
```
... will be served as `template.html.js` that sets the template content in the global $templateCache variable:
```js
window.$templateCache = window.$templateCache || {}
window.$templateCache['template.html'] = 'something
';
```
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.
```js
// karma-test-shim.js
...
System.import('angular2/testing').then(function(testing) {
return System.import('angular2/platform/testing/browser').then(function(providers) {
testing.setBaseTestProviders(
providers.TEST_BROWSER_PLATFORM_PROVIDERS,
[providers.TEST_BROWSER_APPLICATION_PROVIDERS, providers.CACHED_TEMPLATE_PROVIDER]);
});
}).then(function() {
...
```
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].
[homepage]: http://karma-runner.github.com
---
_Source: https://npm.io/package/karma-ng-html2js-preprocessor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._