angular-cache-webpack5

Speed up your AngularJS app by automatically combining, concatenating, registering and caching your AngularJS HTML templates in the $templateCache.

Install | Usage | Options and Defaults | License

Extended from https://github.com/rafaelmussi/angular-templatecache-webpack-plugin

:warning: If you are a Laravel user, check out this laravel mix package :warning:

Install

Install with npm or yarn

  npm i --save angular-cache-webpack5

  yarn add angular-cache-webpack5

Usage

This webpack plugin will combine all your angular .html templates and save to dist/templates.js (default filename). Just add the plugin to your webpack config as follows:

webpack.config.js

const AngularTemplateCacheWebpackPlugin = require('angular-cache-webpack5')

module.exports = {
	plugins: [
		new AngularTemplateCacheWebpackPlugin({
			source: 'templates/**/*.html',
			/**
			 * See options and defaults below for more details
			 */
		}),
	],
}

This will generate a file dist/templates.js containing the following:

:informationsource: Sample output (_prettified).

angular.module('templates').run([
	$templateCache,
	function ($templateCache) {
		$templateCache.put(
			'template-file-01.html'
			// content of template-file-01.html (escaped)
		)
		$templateCache.put(
			'template-file-02.html'
			// content of template-file-02.html (escaped)
		)
		// etc...
	},
])

Include this file in your app and AngularJS will use the $templateCache when available.

:information_source: This plugin will NOT create a new AngularJS module by default, but use a module called templates. If you want to create a new module, set options.standalone to true.

Options and Defaults

| Name | Type | Default | Description | | ---------------- | ----------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | source | {String} | undefined | Your html templates path/folder. You can also use glob patterns to use multiple files. | | outputFilename | {String} | 'dist/templates.js' | The path/filename.js where the output file should be saved. | | root | {String} | undefined | Prefix for template URLs. | | module | {String} | 'templates' | Name of the existing AngularJS module. | | standalone | {Boolean} | false | Create a new AngularJS module, instead of using an existing one. | | escapeOptions | {Object} | {} | An object with jsesc-options. See jsesc for more information. | | templateHeader | {String} | *See below | Override template header. | | templateBody | {String} | *See below | Override template body. | | templateFooter | {String} | *See below | Override template footer. |

Default Templates

templateHeader:

'angular.module("<%= module %>"<%= standalone %>).run(["$templateCache", function($templateCache) {'

---

templateBody:

'$templateCache.put("<%= url %>","<%= contents %>");'

---

templateFooter:

'}]);'

License

MIT