Gathering detailed insights and metrics for @jhhernandez/ngtemplate-loader
Gathering detailed insights and metrics for @jhhernandez/ngtemplate-loader
Gathering detailed insights and metrics for @jhhernandez/ngtemplate-loader
Gathering detailed insights and metrics for @jhhernandez/ngtemplate-loader
Include AngularJS templates in the Webpack bundle and preload the template cache.
npm install @jhhernandez/ngtemplate-loader
Typescript
Module System
Node Version
NPM Version
JavaScript (94.17%)
HTML (5.83%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
53 Commits
1 Forks
1 Branches
1 Contributors
Updated on Jun 22, 2020
Latest Version
2.0.3
Package Id
@jhhernandez/ngtemplate-loader@2.0.3
Unpacked Size
16.29 kB
Size
5.75 kB
File Count
14
NPM Version
6.14.5
Node Version
12.16.1
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
2
4
Includes your AngularJS templates into your webpack Javascript Bundle. Pre-loads the AngularJS template cache to remove initial load times of templates. This fork works for versions of html-loader>=1.0.0.
ngTemplate loader does not minify or process your HTML at all, and instead uses the standard loaders such as html-loader or raw-loader. This gives you the flexibility to pick and choose your HTML loaders.
npm install @jhhernandez/ngtemplate-loader --save-dev
ngTemplate loader will export the path of the HTML file, so you can use require directly AngularJS with templateUrl parameters e.g.
1var templateUrl = require('ngtemplate!html!./test.html'); 2 3app.directive('testDirective', function() { 4 return { 5 restrict: 'E', 6 templateUrl: templateUrl 7 } 8});
To remove the extra require
, check out the Baggage Example below.
ngTemplate creates a JS module that initialises the $templateCache with the HTML under the file path e.g.
1require('!ngtemplate?relativeTo=/projects/test/app!html!file.html'); 2// => generates the javascript: 3// angular.module('ng').run(['$templateCache', function(c) { c.put('file.html', '<file.html processed by html-loader>') }]);
The following code is wrong, Because it'll operate only after angular bootstraps:
app.directive('testDirective', function() {
return {
restrict: 'E',
templateUrl: require('ngtemplate!html!./test.html') // <- WRONG !
}
});
relativeTo
and prefix
You can set the base path of your templates using relativeTo
and prefix
parameters. relativeTo
is used
to strip a matching prefix from the absolute path of the input html file. prefix
is then appended to path.
The prefix of the path up to and including the first relativeTo
match is stripped, e.g.
1require('!ngtemplate?relativeTo=/src/!html!/test/src/test.html'); 2// c.put('test.html', ...)
To match the from the start of the absolute path prefix a '//', e.g.
1require('!ngtemplate?relativeTo=//Users/WearyMonkey/project/test/!html!/test/src/test.html'); 2// c.put('src/test.html', ...)
You can combine relativeTo
and prefix
to replace the prefix in the absolute path, e.g.
1require('!ngtemplate?relativeTo=src/&prefix=build/!html!/test/src/test.html'); 2// c.put('build/test.html', ...)
module
By default ngTemplate loader adds a run method to the global 'ng' module which does not need to explicitly required by your app.
You can override this by setting the module
parameter, e.g.
1require('!ngtemplate?module=myTemplates&relativeTo=/projects/test/app!html!file.html'); 2// => returns the javascript: 3// angular.module('myTemplates').run(['$templateCache', function(c) { c.put('file.html', '<file.html processed by html-loader>') }]);
module
, relativeTo
and prefix
parameters are interpolated using
Webpack's standard interpolation rules.
Interpolation regular expressions can be passed using the extra parameters moduleRegExp
, relativeToRegExp
and prefixRegExp
which apply to single parameters, or regExp
which will apply to all three parameters.
By default, ngTemplate loader will assume you are using unix style path separators '/' for html paths in your project.
e.g. templateUrl: '/views/app.html'
. If however you want to use Window's style path separators ''
e.g. templateUrl: '\\views\\app.html'
you can override the separator by providing the pathSep parameter.
1require('ngtemplate?pathSep=\\!html!.\\test.html')
Make sure you use the same path separator for the prefix
and relativeTo
parameters, all templateUrls and in your webpack.config.js file.
This module relies on angular being available on window
object. However, in cases angular is connected from node_modules
via require('angular')
, option to force this module to get the angular should be used:
1require('!ngtemplate?requireAngular!html!file.html'); 2 3// => generates the javascript: 4// var angular = require('angular'); 5// angular.module('ng').run(['$templateCache', function(c) { c.put('file.html', '<file.html processed by html-loader>') }]);
It's recommended to adjust your webpack.config
so ngtemplate!html!
is applied automatically on all files ending with .html
. For Webpack 1 this would be something like:
1module.exports = { 2 module: { 3 loaders: [ 4 { 5 test: /\.html$/, 6 loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app')) + '/!html' 7 } 8 ] 9 } 10};
For Webpack 2 this would be something like:
1module.exports = { 2 module: { 3 rules: [ 4 { 5 test: /\.html$/, 6 use: [ 7 { loader:'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, './app')) }, 8 { loader: 'html-loader' } 9 ] 10 } 11 ] 12 } 13};
Make sure you already have html-loader
installed. Then you only need to write: require('file.html')
.
Webpack's dynamic requires do not implicitly call the IIFE wrapping each
call to window.angular.module('ng').run(...)
, so if you use them to
require a folder full of partials, you must manually iterate through the
resulting object and resolve each dependency in order to accomodate angular's
side-effects oriented module system:
1var templates = require.context('.', false, /\.html$/); 2 3templates.keys().forEach(function(key) { 4 templates(key); 5}); 6
ngTemplate loader works well with the Baggage Loader to remove all those extra HTML and CSS requires. See an example of a directive and webpack.config.js below. Or take a look at more complete example in the examples/baggage folder.
With a folder structure:
app/
├── app.js
├── index.html
├── webpack.config.js
└── my-directive/
├── my-directive.js
├── my-directive.css
└── my-directive.html
and a webpack.config.js for webpack 1 like:
1module.exports = { 2 module: { 3 preLoaders: [ 4 { 5 test: /\.js$/, 6 loader: 'baggage?[file].html&[file].css' 7 } 8 ], 9 loaders: [ 10 { 11 test: /\.html$/, 12 loader: 'ngtemplate?relativeTo=' + __dirname + '/!html' 13 } 14 ] 15 } 16};
For webpack 2 like:
1module.exports = { 2 module: { 3 rules: [ 4 { 5 test: /\.js$/, 6 enforce: 'pre', 7 use: [{ loader:'baggage?[file].html&[file].css' }] 8 }, 9 { 10 test: /\.html$/, 11 use: [ 12 { loader: 'ngtemplate-loader?relativeTo=' + __dirname + '/' }, 13 { loader: 'html-loader' }] 14 ] 15 } 16 ] 17 } 18};
You can now skip the initial require of html and css like so:
1app.directive('myDirective', function() { 2 return { 3 restrict: 'E', 4 templateUrl: require('./my-directive.html') 5 } 6});
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
28 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More