Registry / web-framework / ngtemplate-loader

ngtemplate-loader

library2.1.0jsnpmunverified

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.

web-framework

npm install ngtemplate-loader

github ↗package ↗

INSTALL

IMPORT

SIG · NGTEMPLATE-LOADER

ngtemplate-loader

web-frameworkjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

require('ngtemplate!html!./file.html')

✓ import template from 'ngtemplate!html!./file.html';

✗ const template = require('ngtemplate!html!./file.html').default;

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.

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') }; });

Debug

Known issues

gotchaUsing 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.

affects: all

deprecatedThe 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.

affects: >=2.0.0

Errors

Common errors & fixes

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

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.

Cannot find module 'ngtemplate-loader'

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.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

loader-utilsrequiredUsed for parameter interpolation in module, relativeTo, and prefix options

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/WearyMonkey/ngtemplate-loader ↗

packagehttps://www.npmjs.com/package/ngtemplate-loader ↗