{"id":13261,"library":"grunt-angular-templates","title":"Grunt AngularJS Template Caching","description":"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.","status":"abandoned","version":"1.2.0","language":"javascript","source_language":"en","source_url":"git://github.com/ericclemmons/grunt-angular-templates","tags":["javascript","gruntplugin","angular","template","templates","concat"],"install":[{"cmd":"npm install grunt-angular-templates","lang":"bash","label":"npm"},{"cmd":"yarn add grunt-angular-templates","lang":"bash","label":"yarn"},{"cmd":"pnpm add grunt-angular-templates","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for running the Grunt task plugin.","package":"grunt","optional":false},{"reason":"Optional dependency for integration with the usemin build process.","package":"grunt-usemin","optional":true}],"imports":[{"note":"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.","wrong":"import gruntAngularTemplates from 'grunt-angular-templates';","symbol":"grunt-angular-templates","correct":"grunt.loadNpmTasks('grunt-angular-templates');"}],"quickstart":{"code":"module.exports = function(grunt) {\n  grunt.initConfig({\n    pkg: grunt.file.readJSON('package.json'),\n    ngtemplates: {\n      app: {\n        cwd: 'app',\n        src: ['templates/**/*.html', '!templates/partials/**/*.html'],\n        dest: 'dist/js/templates.js',\n        options: {\n          module: 'myAngularApp',\n          htmlmin: {\n            collapseBooleanAttributes: true,\n            collapseWhitespace: true,\n            keepClosingSlash: true,\n            removeAttributeQuotes: true,\n            removeComments: true,\n            removeEmptyAttributes: true,\n            removeRedundantAttributes: true,\n            removeScriptTypeAttributes: true,\n            removeStyleLinkTypeAttributes: true\n          },\n          prefix: '/static/' // Example: if served from /static/\n        }\n      }\n    },\n    // Example: Concatenate with other JS files\n    concat: {\n      dist: {\n        src: ['dist/js/app.js', 'dist/js/templates.js'],\n        dest: 'dist/js/optimized-app.js'\n      }\n    }\n  });\n\n  grunt.loadNpmTasks('grunt-angular-templates');\n  grunt.loadNpmTasks('grunt-contrib-concat'); // Load other necessary tasks\n\n  grunt.registerTask('build', ['ngtemplates', 'concat']);\n  grunt.registerTask('default', ['build']);\n};","lang":"javascript","description":"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."},"warnings":[{"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.","message":"This 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.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Only enable the `htmlmin` option for production builds where optimized file size is critical. For development, consider omitting `htmlmin` to speed up compilation.","message":"Enabling 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set `htmlmin.removeComments: false` if your AngularJS templates rely on HTML comment directives for any specific functionality or processing.","message":"If `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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`.","message":"This 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.","severity":"deprecated","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `grunt.loadNpmTasks('grunt-angular-templates');` to your `Gruntfile.js` after defining your Grunt configuration.","cause":"The `grunt-angular-templates` plugin was not correctly loaded in your `Gruntfile.js`.","error":"Warning: Task \"ngtemplates\" not found."},{"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`.","cause":"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.","error":"Error: $injector:modulerr"},{"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/`.","cause":"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.","error":"Template 'path/to/template.html' not found or returns empty content in browser console."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}