angular-templatecache-webpack5-plugin

1.1.3 • Public • Published

angular-templatecache-webpack5-plugin

npm npm license

Speed up your AngularJS app by automatically combining, concatenating, registering and caching your AngularJS HTML templates in the $templateCache. This is a fork of https://github.com/rafaelmussi/angular-templatecache-webpack-plugin with specific intend of webpack 5 compatiblity.

Install | Usage | Options and Defaults | License


Install

Install with npm or yarn

  npm i --save angular-templatecache-webpack5-plugin
  yarn add angular-templatecache-webpack5-plugin

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-templatecache-webpack5-plugin');

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:

ℹ️ 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.

ℹ️ 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

Dependents (0)

Package Sidebar

Install

npm i angular-templatecache-webpack5-plugin

Weekly Downloads

87

Version

1.1.3

License

MIT

Unpacked Size

14.9 kB

Total Files

5

Last publish

Collaborators

  • matthew-b-payne