ngtemplate-loader

2.1.0 verified Sat Apr 25 auth: no javascript

Webpack loader that bundles AngularJS templates into the JavaScript bundle and pre-populates the $templateCache, eliminating initial load time for templates. Version 2.1.0 is stable, with maintenance releases on GitHub. Key differentiators: it does not minify/process HTML, instead working with html-loader or raw-loader for flexibility; supports parameter interpolation via webpack loader-utils; handles module, relativeTo, prefix, and pathSep options for path customization.

Common errors

error Module build failed: Error: 'relativeTo' option is required or must match a path ↓

cause The file path doesn't contain the relativeTo substring, so the template path becomes empty.

fix

Ensure the relativeTo path matches a prefix of the absolute path of the source file, or use 'prefix' option alone.

error Cannot find module 'ngtemplate-loader' ↓

cause ngtemplate-loader is not installed as a devDependency.

fix

Run 'npm install ngtemplate-loader --save-dev' and ensure node_modules is in the resolve path.

Warnings

gotcha Using require() inside a directive definition function will cause the template to be processed too late (after angular bootstrap). The require() must be called at module load time, not inside the directive function. ↓

fix Move the require() call outside the directive function, e.g., assign to a variable at the top of the module file.

deprecated The webpack inline loader syntax (e.g., require('ngtemplate!html!./file.html')) is deprecated in favor of using rule-based configuration in webpack.config. ↓

fix Define a module rule for .html files that uses ngtemplate-loader and html-loader, then use simple require('./file.html') without inline loaders.

Install

npm install ngtemplate-loader

yarn add ngtemplate-loader

pnpm add ngtemplate-loader

Imports

require('ngtemplate!html!./file.html')
wrong
```
const template = require('ngtemplate!html!./file.html').default;
```
correct
```
import template from 'ngtemplate!html!./file.html';
```
This is a webpack loader, not a library. It must be used in a webpack configuration via require or inline import syntax. The export is a string path to the template URL used in the $templateCache.

Quickstart

Shows webpack configuration to load .html files with ngtemplate-loader and html-loader, and usage in an AngularJS directive via require.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          { loader: 'ngtemplate-loader', options: { relativeTo: 'src/' } },
          { loader: 'html-loader' }
        ]
      }
    ]
  }
};

// In your AngularJS directive
app.directive('myDirective', function() {
  return {
    restrict: 'E',
    templateUrl: require('ngtemplate!html!./template.html')
  };
});