Registry / web-framework / angular2-template-loader

angular2-template-loader

library0.6.2jsnpmunverified

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.

web-framework serialization

npm install angular2-template-loader

github ↗package ↗

INSTALL

IMPORT

SIG · ANGULAR2-TEMPLATE-

angular2-template-loader

web-frameworkjavascriptv0.6.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

angular2-template-loader

✓ import ngTemplateLoader from 'angular2-template-loader'

✗ import { angular2TemplateLoader } from 'angular2-template-loader'

The loader is typically not imported directly but used in webpack config as a string. No common import mistakes.

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 { }

Debug

Known issues

breakingAngular 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.

affects: >=0.4.0

deprecatedPackage 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.

affects: >=0.6.0

gotchaWebpack 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.

affects: >=0.2.0

gotchaUsing 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.

affects: >=0.4.0

breakingAngular 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.

affects: <0.5.0

Errors

Common errors & fixes

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

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 in ./src/app/app.component.ts Module build failed: Error: angular2-template-loader: templateUrl path './app.component.html' not found

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.

Upgrade

Version history

0.6.2latest on npm

Audit

Dependencies

raw-loaderrequiredNeeded to handle .html and .css files that are inlined via require() statements

Agent activity

39 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/TheLarkInn/angular2-template-loader ↗

packagehttps://www.npmjs.com/package/angular2-template-loader ↗