{"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,"search_vec":"'2.1.0':27 'angularj':8,74 'bundl':7,13 'custom':71 'differenti':36 'elimin':20 'flexibl':53 'github':34 'handl':62 'html':41,46 'html-loader':45 'initi':21 'instead':42 'interpol':56 'javascript':12,72 'key':35 'load':22 'loader':3,5,47,51,60,75 'loader-util':59 'mainten':31 'minify/process':40 'modul':63 'ngtemplat':2 'ngtemplate-load':1 'option':68 'paramet':55 'path':70 'pathsep':67 'popul':17 'pre':16 'pre-popul':15 'prefix':65 'raw':50 'raw-load':49 'relativeto':64 'releas':32 'stabl':29 'support':54 'templat':9,25 'templatecach':19 'time':23 'util':61 'version':26 'via':57 'webpack':4,58,73 'work':43","created_at":"2026-04-25T11:22:02.849576+00:00","updated_at":"2026-04-25T11:22:02.849576+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/WearyMonkey/ngtemplate-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/ngtemplate-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}