Webpack plugin that concatenates and registers AngularJS templates in the $templateCache.

License: MIT License

JavaScript 100.00%

angular-templatecache-webpack-plugin's Introduction

angular-templatecache-webpack-plugin

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

⚠️ If you are a `Laravel` user, check out this laravel mix package ⚠️

Install

Install with npm or yarn

  npm i --save angular-templatecache-webpack-plugin

  yarn add angular-templatecache-webpack-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-webpack-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

angular-templatecache-webpack-plugin's People

Contributors

Stargazers

Watchers

Forkers

tiagojacobs george-nacouzi enarbona xuxicheta slargemain nocksock matthew-b-payne bleupen szabadember ivanpenyahuguet w-komor nicolaslojo mikhong-te

angular-templatecache-webpack-plugin's Issues

Webpack exemple file for dev and build ?

Hi, thanks for this plugin it works well for build but how can it be integrated during dev.
I would like to have same file during dev and release.
Thanks.

Plugin is not working with webpack 5 (angular-cli) custom webpack plugins

I have set up an Angular 12 app with AngularCustomWebpackConfig
configuring as follows:

const AngularTemplateCacheWebpackPlugin = require('angular-templatecache-webpack-plugin');
module.exports = {
plugins: [
new AngularTemplateCacheWebpackPlugin({
source: './src/app/angular-js/**/*.html',
standalone: true
})
]
};

running will give me the following error:
An unhandled exception occurred: scriptAssetSource.sourceAndMap is not a function.

Other plugins I've tried, do work. The only thing I could find is that it has to do with webpack version 5

Setting for selecting a type of path separator

We are encountering the following error on our development workstations running Windows:

TS1125: Hexadecimal digit expected

Looking at our source code, we realized that the error was thrown on this line of the file we've specified in outputFilename:

$templateCache.put('formly\template\ui-select.html', …

What happens here is that the \ui-select is being interpreted as a Unicode character marker, due to \u.

In our case, the JavaScript/TypeScript code will always use the / path separator (e.g. formly/template/ui-select.html) when accessing the template from code, regardless of the execution environment. As a consequence, even if \u were not causing issues, the template cache would always fail to retrieve the appropriate value.

We've traced the root cause to this line:

let filename = path.relative(htmlRootDir, file);

where module "path" provides relative URLs using the system separator.

We haven't found an option that would allow us to specify that path fragments (e.g. formly\template\ui-select.html) in the file generated by angular-templatecache-webpack-plugin should use the Unix separator (/) instead of the Windows one (\). This issue is for requesting that such an option be added.

I'm even wondering if the path separator could not just be "forced" to the Unix one.

Task is not executed when .html file is changed

While trying this plugin I've found that it works correctly, however it does not rebuild when a .html file is saved ( running webpack watch ).

Is there any way to make it compatible with webpack watch?

rafaelmussi / angular-templatecache-webpack-plugin Goto Github PK