angular2-template-loader

0.6.2 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error ERROR in ./src/app/app.component.ts Module build failed: Error: Cannot find module 'raw-loader' ↓

cause Missing raw-loader or other loader for .html and .css files

fix

Install raw-loader: npm install raw-loader --save-dev and add rule for .html and .css files.

error ERROR in ./src/app/app.component.ts Module build failed: Error: angular2-template-loader: templateUrl path './app.component.html' not found ↓

cause The template file path is incorrect or does not exist relative to the component file

fix

Ensure the template file path is correct and exists, or use absolute paths.

Warnings

breaking Angular AoT compilation incompatible with angular2-template-loader without additional configuration; the loader generates require() calls that AoT cannot resolve ↓

fix Use Angular CLI or @ngtools/webpack for AoT builds; or use angular2-template-loader with JiT only.

deprecated Package is in maintenance mode; new Angular versions (>=6) typically use Angular CLI and @ngtools/webpack instead ↓

fix Migrate to Angular CLI or use @ngtools/webpack for new projects.

gotcha Webpack compilation fails with 'require is not defined' if TypeScript doesn't have Node or RequireJS type definitions ↓

fix Install @types/node or @types/requirejs, or declare var require: any; in a global declaration file.

gotcha Using keepUrl=true may cause unexpected behavior if no file-loader or similar is configured for .html/.css ↓

fix Add appropriate loaders for file types when keepUrl=true, e.g., file-loader.

breaking Angular 2.0.x components using styles instead of styleUrls may not be inlined ↓

fix Upgrade to version 0.5.0+ which added support for inline styles via require() in styles array.

Install

npm install angular2-template-loader

yarn add angular2-template-loader

pnpm add angular2-template-loader

Imports

angular2-template-loader
wrong
```
import { angular2TemplateLoader } from 'angular2-template-loader'
```
correct
```
import ngTemplateLoader from 'angular2-template-loader'
```
The loader is typically not imported directly but used in webpack config as a string. No common import mistakes.

Quickstart

Configures webpack to use angular2-template-loader to inline templateUrl and styleUrls into components.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'awesome-typescript-loader',
          'angular2-template-loader'
        ],
        exclude: [/\.spec\.ts$/]
      },
      {
        test: /\.(html|css)$/,
        use: 'raw-loader',
        exclude: /\.async\.(html|css)$/
      }
    ]
  }
};

// app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }