{"id":18973,"library":"auto-ngtemplate-loader","title":"auto-ngtemplate-loader","description":"Webpack loader that automatically requires AngularJS 1.x templates when templateUrl is encountered in JavaScript files. Version 3.1.2 drops Node.js 8 support. It works alongside ngtemplate-loader and html-loader to preprocess template paths. Key differentiator: eliminates manual require calls for templates by transforming templateUrl strings into require() statements at build time. Supports custom path resolution and variable naming to avoid conflicts. Recommended to run before transpilation. Maintained but mature, with infrequent releases.","status":"maintenance","version":"3.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/yashdalfthegray/auto-ngtemplate-loader","tags":["javascript","webpack","loader","ngtemplate","angularjs","angular","templates"],"install":[{"cmd":"npm install auto-ngtemplate-loader","lang":"bash","label":"npm"},{"cmd":"yarn add auto-ngtemplate-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add auto-ngtemplate-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for webpack loader utilities like urlToRequest","package":"loader-utils","optional":false}],"imports":[{"note":"This is a webpack loader, not a JavaScript module. It should be used in webpack config as a string in the use array.","wrong":"import autoNgTemplateLoader from 'auto-ngtemplate-loader';","symbol":"auto-ngtemplate-loader","correct":"module.exports = { module: { rules: [{ test: /\\.js$/, use: ['auto-ngtemplate-loader'] }] } }"},{"note":"Query string syntax works but options object is preferred for readability. variableName defaults to 'autoNgTemplateLoaderTemplate'.","wrong":"use: ['auto-ngtemplate-loader?variableName=myTemplateVar']","symbol":"Options (variableName)","correct":"use: [{ loader: 'auto-ngtemplate-loader', options: { variableName: 'myTemplateVar' } }]"},{"note":"pathResolver must be a function. In webpack 1, useResolverFromConfig option must be true and define autoNgTemplateLoader in webpack config.","wrong":"use: [{ loader: 'auto-ngtemplate-loader', options: { pathResolver: 'myFunction' } }]","symbol":"Options (pathResolver)","correct":"use: [{ loader: 'auto-ngtemplate-loader', options: { pathResolver: (path) => './' + path } }]"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        exclude: /node_modules/,\n        use: ['babel-loader', 'auto-ngtemplate-loader'],\n      },\n      {\n        test: /\\.html$/,\n        use: [\n          { loader: 'ngtemplate-loader', options: { relativeTo: 'src/' } },\n          { loader: 'html-loader' },\n        ],\n      },\n    ],\n  },\n};","lang":"javascript","description":"Configures webpack to auto-require AngularJS templates from templateUrl properties, using ngtemplate-loader and html-loader for processing."},"warnings":[{"fix":"Upgrade to Node.js >=10 or use version 2.x if needed.","message":"Node.js v8 support dropped","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use webpack v2+ and pass options via loader options object.","message":"Webpack v1 compatibility is deprecated, useResolverFromConfig option may not work with newer webpack versions.","severity":"deprecated","affected_versions":">=1.3.0"},{"fix":"Place auto-ngtemplate-loader before transpilers like babel-loader in the use array.","message":"Loader must run before transpilation to operate on unchanged source code","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to version >=2.0.1.","message":"templateUrl detection may fail on Windows paths in older versions","severity":"gotcha","affected_versions":"<2.0.1"},{"fix":"Set the relativeTo option on ngtemplate-loader to a common source directory (e.g., 'src/').","message":"If ngtemplate-loader is not configured correctly, template paths may include absolute user-specific paths","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install ngtemplate-loader: npm install ngtemplate-loader --save-dev, then add it to the module.rules for .html files.","cause":"ngtemplate-loader is not installed or not added to the webpack rule for .html files.","error":"Module not found: Error: Can't resolve 'ngtemplate-loader'"},{"fix":"Use the variableName option to set a unique variable name, e.g., { loader: 'auto-ngtemplate-loader', options: { variableName: 'myTemplateVar' } }.","cause":"The variable name used by auto-ngtemplate-loader conflicts with another variable or is not properly injected.","error":"Error: autoNgTemplateLoaderTemplate is not defined"},{"fix":"Use webpack 4 or check for updates on the package. Consider using a different loader if unsupported.","cause":"Incompatibility with webpack 5; auto-ngtemplate-loader may not support it.","error":"ERROR in ./src/app.js Module build failed (from ./node_modules/auto-ngtemplate-loader/index.js): TypeError: The 'compilation' argument must be an instance of Compilation"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}