auto-ngtemplate-loader

3.1.2 verified Sat Apr 25 auth: no javascript maintenance

Webpack loader that automatically requires AngularJS 1.x templates when templateUrl is encountered in JavaScript files. Version 3.1.2 drops Node.js 8 support. It works alongside ngtemplate-loader and html-loader to preprocess template paths. Key differentiator: eliminates manual require calls for templates by transforming templateUrl strings into require() statements at build time. Supports custom path resolution and variable naming to avoid conflicts. Recommended to run before transpilation. Maintained but mature, with infrequent releases.

Common errors

error Module not found: Error: Can't resolve 'ngtemplate-loader' ↓

cause ngtemplate-loader is not installed or not added to the webpack rule for .html files.

fix

Install ngtemplate-loader: npm install ngtemplate-loader --save-dev, then add it to the module.rules for .html files.

error Error: autoNgTemplateLoaderTemplate is not defined ↓

cause The variable name used by auto-ngtemplate-loader conflicts with another variable or is not properly injected.

fix

Use the variableName option to set a unique variable name, e.g., { loader: 'auto-ngtemplate-loader', options: { variableName: 'myTemplateVar' } }.

error ERROR in ./src/app.js Module build failed (from ./node_modules/auto-ngtemplate-loader/index.js): TypeError: The 'compilation' argument must be an instance of Compilation ↓

cause Incompatibility with webpack 5; auto-ngtemplate-loader may not support it.

fix

Use webpack 4 or check for updates on the package. Consider using a different loader if unsupported.

Warnings

breaking Node.js v8 support dropped ↓

fix Upgrade to Node.js >=10 or use version 2.x if needed.

deprecated Webpack v1 compatibility is deprecated, useResolverFromConfig option may not work with newer webpack versions. ↓

fix Use webpack v2+ and pass options via loader options object.

gotcha Loader must run before transpilation to operate on unchanged source code ↓

fix Place auto-ngtemplate-loader before transpilers like babel-loader in the use array.

gotcha templateUrl detection may fail on Windows paths in older versions ↓

fix Upgrade to version >=2.0.1.

gotcha If ngtemplate-loader is not configured correctly, template paths may include absolute user-specific paths ↓

fix Set the relativeTo option on ngtemplate-loader to a common source directory (e.g., 'src/').

Install

npm install auto-ngtemplate-loader

yarn add auto-ngtemplate-loader

pnpm add auto-ngtemplate-loader

Imports

auto-ngtemplate-loader

wrong

import autoNgTemplateLoader from 'auto-ngtemplate-loader';

correct

module.exports = { module: { rules: [{ test: /\.js$/, use: ['auto-ngtemplate-loader'] }] } }

This is a webpack loader, not a JavaScript module. It should be used in webpack config as a string in the use array.

Options (variableName)
wrong
```
use: ['auto-ngtemplate-loader?variableName=myTemplateVar']
```
correct
```
use: [{ loader: 'auto-ngtemplate-loader', options: { variableName: 'myTemplateVar' } }]
```
Query string syntax works but options object is preferred for readability. variableName defaults to 'autoNgTemplateLoaderTemplate'.

Options (pathResolver)

wrong

use: [{ loader: 'auto-ngtemplate-loader', options: { pathResolver: 'myFunction' } }]

correct

use: [{ loader: 'auto-ngtemplate-loader', options: { pathResolver: (path) => './' + path } }]

pathResolver must be a function. In webpack 1, useResolverFromConfig option must be true and define autoNgTemplateLoader in webpack config.

Quickstart

Configures webpack to auto-require AngularJS templates from templateUrl properties, using ngtemplate-loader and html-loader for processing.

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