{"id":20237,"library":"ngtemplate-loader","title":"ngtemplate-loader","description":"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.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":"git://github.com/WearyMonkey/ngtemplate-loader","tags":["javascript","webpack","angularjs","loader"],"install":[{"cmd":"npm install ngtemplate-loader","lang":"bash","label":"npm"},{"cmd":"yarn add ngtemplate-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add ngtemplate-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for parameter interpolation in module, relativeTo, and prefix options","package":"loader-utils","optional":false}],"imports":[{"note":"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.","wrong":"const template = require('ngtemplate!html!./file.html').default;","symbol":"require('ngtemplate!html!./file.html')","correct":"import template from 'ngtemplate!html!./file.html';"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        use: [\n          { loader: 'ngtemplate-loader', options: { relativeTo: 'src/' } },\n          { loader: 'html-loader' }\n        ]\n      }\n    ]\n  }\n};\n\n// In your AngularJS directive\napp.directive('myDirective', function() {\n  return {\n    restrict: 'E',\n    templateUrl: require('ngtemplate!html!./template.html')\n  };\n});","lang":"javascript","description":"Shows webpack configuration to load .html files with ngtemplate-loader and html-loader, and usage in an AngularJS directive via require."},"warnings":[{"fix":"Move the require() call outside the directive function, e.g., assign to a variable at the top of the module file.","message":"Using 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.","severity":"gotcha","affected_versions":"all"},{"fix":"Define a module rule for .html files that uses ngtemplate-loader and html-loader, then use simple require('./file.html') without inline loaders.","message":"The webpack inline loader syntax (e.g., require('ngtemplate!html!./file.html')) is deprecated in favor of using rule-based configuration in webpack.config.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure the relativeTo path matches a prefix of the absolute path of the source file, or use 'prefix' option alone.","cause":"The file path doesn't contain the relativeTo substring, so the template path becomes empty.","error":"Module build failed: Error: 'relativeTo' option is required or must match a path"},{"fix":"Run 'npm install ngtemplate-loader --save-dev' and ensure node_modules is in the resolve path.","cause":"ngtemplate-loader is not installed as a devDependency.","error":"Cannot find module 'ngtemplate-loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}