{"id":13491204,"url":"https://github.com/karma-runner/karma-ng-html2js-preprocessor","last_synced_at":"2025-05-16T03:03:16.483Z","repository":{"id":6750084,"uuid":"7996482","full_name":"karma-runner/karma-ng-html2js-preprocessor","owner":"karma-runner","description":"A Karma plugin. Compile AngularJS 1.x and 2.x templates to JavaScript on the fly.","archived":false,"fork":false,"pushed_at":"2019-11-06T17:56:22.000Z","size":75,"stargazers_count":267,"open_issues_count":79,"forks_count":146,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-10T07:02:16.471Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/karma-runner.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-02-03T20:53:52.000Z","updated_at":"2025-03-12T15:43:12.000Z","dependencies_parsed_at":"2022-09-06T05:21:33.188Z","dependency_job_id":null,"html_url":"https://github.com/karma-runner/karma-ng-html2js-preprocessor","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karma-runner%2Fkarma-ng-html2js-preprocessor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karma-runner%2Fkarma-ng-html2js-preprocessor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karma-runner%2Fkarma-ng-html2js-preprocessor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karma-runner%2Fkarma-ng-html2js-preprocessor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/karma-runner","download_url":"https://codeload.github.com/karma-runner/karma-ng-html2js-preprocessor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459083,"owners_count":22074604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:00:54.547Z","updated_at":"2025-05-16T03:03:11.474Z","avatar_url":"https://github.com/karma-runner.png","language":"CoffeeScript","funding_links":[],"categories":["CoffeeScript"],"sub_categories":[],"readme":"# karma-ng-html2js-preprocessor\n\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/karma-runner/karma-ng-html2js-preprocessor)\n [![npm version](https://img.shields.io/npm/v/karma-ng-html2js-preprocessor.svg?style=flat-square)](https://www.npmjs.com/package/karma-ng-html2js-preprocessor) [![npm downloads](https://img.shields.io/npm/dm/karma-ng-html2js-preprocessor.svg?style=flat-square)](https://www.npmjs.com/package/karma-ng-html2js-preprocessor)\n\n[![Build Status](https://img.shields.io/travis/karma-runner/karma-ng-html2js-preprocessor/master.svg?style=flat-square)](https://travis-ci.org/karma-runner/karma-ng-html2js-preprocessor) [![Dependency Status](https://img.shields.io/david/karma-runner/karma-ng-html2js-preprocessor.svg?style=flat-square)](https://david-dm.org/karma-runner/karma-ng-html2js-preprocessor) [![devDependency Status](https://img.shields.io/david/dev/karma-runner/karma-ng-html2js-preprocessor.svg?style=flat-square)](https://david-dm.org/karma-runner/karma-ng-html2js-preprocessor#info=devDependencies)\n\n\u003e Preprocessor for converting HTML files to [AngularJS 1.x](http://angularjs.org/) and [Angular 2](http://angular.io/) templates.\n\n*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).\n\n## Installation\n\nThe easiest way is to keep `karma-ng-html2js-preprocessor` as a devDependency in your `package.json`. Just run\n\n```bash\n$ npm install karma-ng-html2js-preprocessor --save-dev\n```\n\n## Configuration\n```js\n// karma.conf.js\nmodule.exports = function(config) {\n  config.set({\n    preprocessors: {\n      '**/*.html': ['ng-html2js']\n    },\n\n    files: [\n      '*.js',\n      '*.html',\n      '*.html.ext',\n      // if you wanna load template files in nested directories, you must use this\n      '**/*.html'\n    ],\n\n    // if you have defined plugins explicitly, add karma-ng-html2js-preprocessor\n    // plugins: [\n    //     \u003cyour plugins\u003e\n    //     'karma-ng-html2js-preprocessor',\n    // ]\n\n    ngHtml2JsPreprocessor: {\n      // strip this from the file path\n      stripPrefix: 'public/',\n      stripSuffix: '.ext',\n      // prepend this to the\n      prependPrefix: 'served/',\n\n      // or define a custom transform function\n      // - cacheId returned is used to load template\n      //   module(cacheId) will return template at filepath\n      cacheIdFromPath: function(filepath) {\n        // example strips 'public/' from anywhere in the path\n        // module(app/templates/template.html) =\u003e app/public/templates/template.html\n        var cacheId = filepath.strip('public/', '');\n        return cacheId;\n      },\n\n      // - setting this option will create only a single module that contains templates\n      //   from all the files, so you can load them all with module('foo')\n      // - you may provide a function(htmlPath, originalPath) instead of a string\n      //   if you'd like to generate modules dynamically\n      //   htmlPath is a originalPath stripped and/or prepended\n      //   with all provided suffixes and prefixes\n      moduleName: 'foo'\n    }\n  })\n}\n```\n\n### Multiple module names\n\nUse *function* if more than one module that contains templates is required.\n\n```js\n// karma.conf.js\nmodule.exports = function(config) {\n  config.set({\n    // ...\n\n    ngHtml2JsPreprocessor: {\n      // ...\n\n      moduleName: function (htmlPath, originalPath) {\n        return htmlPath.split('/')[0];\n      }\n    }\n  })\n}\n```\n\nIf only some of the templates should be placed in the modules,\nreturn `''`, `null` or `undefined` for those which should not.\n\n```js\n// karma.conf.js\nmodule.exports = function(config) {\n  config.set({\n    // ...\n\n    ngHtml2JsPreprocessor: {\n      // ...\n\n      moduleName: function (htmlPath, originalPath) {\n        var module = htmlPath.split('/')[0];\n        return module !== 'tpl' ? module : null;\n      }\n    }\n  })\n}\n```\n\n\n## How does it work ?\n\nThis 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.\n\nFor instance this `template.html`...\n```html\n\u003cdiv\u003esomething\u003c/div\u003e\n```\n... will be served as `template.html.js`:\n```js\nangular.module('template.html', []).run(function($templateCache) {\n  $templateCache.put('template.html', '\u003cdiv\u003esomething\u003c/div\u003e')\n})\n```\n\nSee the [ng-directive-testing](https://github.com/vojtajina/ng-directive-testing) for a complete example.\n\n----\n\n## Angular2 template caching\n\nFor using this preprocessor with Angular 2 templates use `angular: 2` option in the config file.\n\n```js\n// karma.conf.js\nmodule.exports = function(config) {\n  config.set({\n    // ...\n\n    ngHtml2JsPreprocessor: {\n      // ...\n\n      angular: 2\n    }\n  })\n}\n```\n\nThe template `template.html`...\n```html\n\u003cdiv\u003esomething\u003c/div\u003e\n```\n... will be served as `template.html.js` that sets the template content in the global $templateCache variable:\n```js\nwindow.$templateCache = window.$templateCache || {}\nwindow.$templateCache['template.html'] = '\u003cdiv\u003esomething\u003c/div\u003e';\n```\n\nTo 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.\n```js\n// karma-test-shim.js\n...\nSystem.import('angular2/testing').then(function(testing) {\n  return System.import('angular2/platform/testing/browser').then(function(providers) {\n    testing.setBaseTestProviders(\n      providers.TEST_BROWSER_PLATFORM_PROVIDERS,\n      [providers.TEST_BROWSER_APPLICATION_PROVIDERS, providers.CACHED_TEMPLATE_PROVIDER]);\n  });\n}).then(function() {\n...\n```\n\nNow 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.\n\n---\n\nFor more information on Karma see the [homepage].\n\n\n[homepage]: http://karma-runner.github.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarma-runner%2Fkarma-ng-html2js-preprocessor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkarma-runner%2Fkarma-ng-html2js-preprocessor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarma-runner%2Fkarma-ng-html2js-preprocessor/lists"}