Registry / web-framework / grunt-angular-templates

grunt-angular-templates

library1.2.0jsnpmunverified

The `grunt-angular-templates` package provides a Grunt build task designed to optimize AngularJS applications by pre-compiling HTML templates into JavaScript and registering them directly within Angular's `$templateCache`. This process effectively eliminates subsequent AJAX requests for these templates, significantly enhancing application load times and overall performance. The package is currently at version 1.2.0. As a tool tightly coupled with the AngularJS ecosystem, which has reached its End-of-Life (EOL) status, the project is considered abandoned and is no longer actively developed. It automates the concatenation and optional minification (via `htmlmin` integration) of HTML files into a single JavaScript bundle, which then bootstraps into a specified Angular module's `run` block. Key differentiators include flexible options for customizing the generated JavaScript module name, specifying URL prefixes for cached templates, and direct integration capabilities with other Grunt plugins like `grunt-contrib-concat` and `grunt-usemin` for a streamlined build pipeline.

web-framework devops

npm install grunt-angular-templates

github ↗package ↗

INSTALL

IMPORT

SIG · GRUNT-ANGULAR-TEMP

grunt-angular-templates

web-frameworkjavascriptv1.2.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.

grunt-angular-templates

✓ grunt.loadNpmTasks('grunt-angular-templates');

✗ import gruntAngularTemplates from 'grunt-angular-templates';

This is a Grunt task plugin; it is loaded into the Grunt build system using `grunt.loadNpmTasks` within your `Gruntfile.js`. It does not expose symbols for direct JavaScript/TypeScript `import` or `require()` statements.

This Gruntfile.js configuration compiles HTML templates from `app/templates` into `dist/js/templates.js`, registering them with the Angular module `myAngularApp`, applying comprehensive HTML minification, and then concatenating the output with other JavaScript files.

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), ngtemplates: { app: { cwd: 'app', src: ['templates/**/*.html', '!templates/partials/**/*.html'], dest: 'dist/js/templates.js', options: { module: 'myAngularApp', htmlmin: { collapseBooleanAttributes: true, collapseWhitespace: true, keepClosingSlash: true, removeAttributeQuotes: true, removeComments: true, removeEmptyAttributes: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true }, prefix: '/static/' // Example: if served from /static/ } } }, // Example: Concatenate with other JS files concat: { dist: { src: ['dist/js/app.js', 'dist/js/templates.js'], dest: 'dist/js/optimized-app.js' } } }); grunt.loadNpmTasks('grunt-angular-templates'); grunt.loadNpmTasks('grunt-contrib-concat'); // Load other necessary tasks grunt.registerTask('build', ['ngtemplates', 'concat']); grunt.registerTask('default', ['build']); };

Debug

Known issues

breakingThis plugin requires Grunt `~0.4.0` and `grunt-usemin ~2.0.0` for integration. Older versions of Grunt or `grunt-usemin` may lead to build failures or unexpected behavior.

fix

Ensure your `package.json` specifies `grunt: "~0.4.0"` and `grunt-usemin: "~2.0.0"` (if used), then run `npm install` to update dependencies.

affects: <1.0.0

gotchaEnabling the `htmlmin` option provides significant file size reduction for templates but adds a noticeable performance cost to the build process due to the HTML parsing and minification steps.

fix

Only enable the `htmlmin` option for production builds where optimized file size is critical. For development, consider omitting `htmlmin` to speed up compilation.

affects: >=1.0.0

gotchaIf `htmlmin.removeComments` is set to `true`, any HTML comment directives within your templates (e.g., those used for conditional rendering or custom build markers) will be stripped, potentially breaking functionality.

fix

Set `htmlmin.removeComments: false` if your AngularJS templates rely on HTML comment directives for any specific functionality or processing.

affects: >=1.0.0

deprecatedThis plugin is designed exclusively for AngularJS (Angular 1.x), which has reached its End-of-Life (EOL) status. While the plugin remains functional for existing AngularJS projects, it is not compatible with modern Angular (2+) or other contemporary frameworks.

fix

For new projects or applications migrating from AngularJS, consider using templating and build tools native to your chosen modern framework (e.g., Angular CLI, Webpack loaders for React/Vue) instead of `grunt-angular-templates`.

affects: *

Errors

Common errors & fixes

Warning: Task "ngtemplates" not found.

The `grunt-angular-templates` plugin was not correctly loaded in your `Gruntfile.js`.

fix

Add `grunt.loadNpmTasks('grunt-angular-templates');` to your `Gruntfile.js` after defining your Grunt configuration.

Error: $injector:modulerr

The `module` option in your `ngtemplates` configuration does not match the name of your main AngularJS application module, or the generated template JS file is not included in your HTML.

fix

Ensure the `module` option in your `ngtemplates` task (e.g., `module: 'myAngularApp'`) precisely matches the name of your `angular.module()` declaration. Also, verify that the generated `templates.js` file is loaded *before* your main Angular application script in your `index.html`.

Template 'path/to/template.html' not found or returns empty content in browser console.

The `prefix` option in `ngtemplates` is misconfigured, causing the `$templateCache` keys to not match the paths used by `ng-include` or `templateUrl` in your AngularJS application.

fix

Adjust the `prefix` option in your `ngtemplates` configuration to correctly map the template URLs. For example, if `ng-include` uses `/views/home.html` and your source is `src/app/home.html`, you might need a prefix like `'/views/'` and a `cwd` to strip `src/app/`.

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

gruntrequiredRequired for running the Grunt task plugin.

grunt-useminoptionalOptional dependency for integration with the usemin build process.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/ericclemmons/grunt-angular-templates ↗

packagehttps://www.npmjs.com/package/grunt-angular-templates ↗