{"id":18958,"library":"angular2-template-loader","title":"angular2-template-loader","description":"A webpack loader for Angular 2+ applications that inlines template URLs and style URLs into component metadata at build time. It replaces templateUrl and styleUrls declarations in Angular component decorators with synchronous require() calls, enabling bundling of HTML templates and CSS styles. Currently at version 0.6.2, this package is in maintenance mode and is primarily used with older Angular versions and webpack configurations. It requires a separate loader (e.g., raw-loader) to handle .html and .css files. Alternatives include the Angular CLI's built-in handling or @ngtools/webpack.","status":"maintenance","version":"0.6.2","language":"javascript","source_language":"en","source_url":"https://github.com/TheLarkInn/angular2-template-loader","tags":["javascript","angular2","webpack","angularjs","loader","angular2-loader"],"install":[{"cmd":"npm install angular2-template-loader","lang":"bash","label":"npm"},{"cmd":"yarn add angular2-template-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add angular2-template-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Needed to handle .html and .css files that are inlined via require() statements","package":"raw-loader","optional":false}],"imports":[{"note":"The loader is typically not imported directly but used in webpack config as a string. No common import mistakes.","wrong":"import { angular2TemplateLoader } from 'angular2-template-loader'","symbol":"angular2-template-loader","correct":"import ngTemplateLoader from 'angular2-template-loader'"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.ts$/,\n        use: [\n          'awesome-typescript-loader',\n          'angular2-template-loader'\n        ],\n        exclude: [/\\.spec\\.ts$/]\n      },\n      {\n        test: /\\.(html|css)$/,\n        use: 'raw-loader',\n        exclude: /\\.async\\.(html|css)$/\n      }\n    ]\n  }\n};\n\n// app.component.ts\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent { }","lang":"javascript","description":"Configures webpack to use angular2-template-loader to inline templateUrl and styleUrls into components."},"warnings":[{"fix":"Use Angular CLI or @ngtools/webpack for AoT builds; or use angular2-template-loader with JiT only.","message":"Angular AoT compilation incompatible with angular2-template-loader without additional configuration; the loader generates require() calls that AoT cannot resolve","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Migrate to Angular CLI or use @ngtools/webpack for new projects.","message":"Package is in maintenance mode; new Angular versions (>=6) typically use Angular CLI and @ngtools/webpack instead","severity":"deprecated","affected_versions":">=0.6.0"},{"fix":"Install @types/node or @types/requirejs, or declare var require: any; in a global declaration file.","message":"Webpack compilation fails with 'require is not defined' if TypeScript doesn't have Node or RequireJS type definitions","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Add appropriate loaders for file types when keepUrl=true, e.g., file-loader.","message":"Using keepUrl=true may cause unexpected behavior if no file-loader or similar is configured for .html/.css","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"Upgrade to version 0.5.0+ which added support for inline styles via require() in styles array.","message":"Angular 2.0.x components using styles instead of styleUrls may not be inlined","severity":"breaking","affected_versions":"<0.5.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install raw-loader: npm install raw-loader --save-dev and add rule for .html and .css files.","cause":"Missing raw-loader or other loader for .html and .css files","error":"ERROR in ./src/app/app.component.ts\nModule build failed: Error: Cannot find module 'raw-loader'"},{"fix":"Ensure the template file path is correct and exists, or use absolute paths.","cause":"The template file path is incorrect or does not exist relative to the component file","error":"ERROR in ./src/app/app.component.ts\nModule build failed: Error: angular2-template-loader: templateUrl path './app.component.html' not found"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}