Registry / devops / gulp-inline-ng2-template

gulp-inline-ng2-template

library6.0.0jsnpmunverified

Gulp plugin to inline Angular 2+ component HTML templates and CSS styles into JavaScript/TypeScript files using ES6 template literals (or ES5 concatenation). Version 6.0.0 drops Node 4 and adds sourcemap support. It is primarily used during build to avoid extra HTTP requests and simplify testing, and is especially helpful for component library authors who want to avoid setting moduleId. Unlike webpack/Angular CLI, this plugin works in Gulp-based workflows and with Browserify.

devops web-framework

npm install gulp-inline-ng2-template

github ↗package ↗

INSTALL

IMPORT

SIG · GULP-INLINE-NG2-TE

gulp-inline-ng2-template

devopsjavascriptv6.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

inlineNg2Template

✓ import inlineNg2Template from 'gulp-inline-ng2-template';

✗ const inlineNg2Template = require('gulp-inline-ng2-template');

Package uses CommonJS default export; both import styles work, but ESM import is preferred in TypeScript projects.

gulp.task (with inlineNg2Template)

✓ gulp.task('inline', () => { return gulp.src('src/**/*.ts').pipe(inlineNg2Template({ base: '/src' })).pipe(gulp.dest('dist')); });

✗ gulp.task('inline', () => { gulp.src('src/**/*.ts').pipe(inlineNg2Template({ base: '/src' })).pipe(gulp.dest('dist')); });

Missing return statement or using async callback can cause Gulp to not wait for stream completion.

InlineNg2TemplateOptions

✓ import type { InlineNg2TemplateOptions } from 'gulp-inline-ng2-template';

✗ import { InlineNg2TemplateOptions } from 'gulp-inline-ng2-template';

Type import is not a value; use 'import type' to avoid runtime errors.

default (CommonJS require)

✓ const inlineNg2Template = require('gulp-inline-ng2-template').default;

✗ const inlineNg2Template = require('gulp-inline-ng2-template');

In TypeScript with esModuleInterop, require directly works, but in pure CommonJS the .default property is needed.

Basic Gulp task that inlines Angular component templates and styles into TypeScript files, outputting to dist.

const gulp = require('gulp'); const inlineNg2Template = require('gulp-inline-ng2-template'); gulp.task('inline', function() { return gulp.src('src/**/*.ts') .pipe(inlineNg2Template({ base: '/src', target: 'es6', indent: 2, useRelativePaths: false, removeLineBreaks: false, removeModuleId: false, templateExtension: '.html', supportNonExistentFiles: false })) .pipe(gulp.dest('dist')); });

Debug

Known issues

breakingVersion 5.0.0 drops Node 4 support and adds sourcemap support; check your Node version.

fix

Update Node to version 6 or higher.

affects: >=5.0.0

breakingVersion 4.0.0 now escapes backslashes in templates; custom workarounds may need removal.

fix

Remove any custom backslash escaping logic from processors.

affects: >=4.0.0

breakingVersion 3.0.0 changes the processor function signature; old processors will break.

fix

Update processor functions to accept (path, ext, file, callback) signature.

affects: >=3.0.0 <4.0.0

breakingVersion 2.0.0 makes the parser async and adds callback argument to processors.

fix

Modify templateProcessor and styleProcessor to accept a callback as third argument.

affects: >=2.0.0 <3.0.0

breakingVersion 1.0.0 drops jade support and changes configuration object (html and css props removed).

fix

Update configuration to use templateProcessor/styleProcessor instead of html/css props.

affects: >=1.0.0 <2.0.0

gotchaIf using ES6 target, templates are inlined as ES6 template literals; transpiler (TypeScript/Babel) must be set up for ES5 output.

fix

Ensure your build pipeline includes a transpiler step after inlining if targeting ES5.

affects: >=0.0.1

gotchaWhen using `useRelativePaths: true`, asset paths are resolved relative to the component file; may require base configuration adjustment.

fix

Set base option to the root of your application (e.g., '/src').

affects: >=0.0.10

Errors

Common errors & fixes

Error: ENOENT: no such file or directory, open '...'

Referenced template or style file does not exist at expected path.

fix

Ensure base path and file extensions are configured correctly; consider enabling `supportNonExistentFiles: true`.

TypeError: Cannot read property 'replace' of undefined

File content is undefined because source file is empty or not read properly.

fix

Make sure gulp.src includes the files to inline; add `{}` if using glob patterns.

Error: Callback called multiple times or not called

Custom processor does not invoke callback exactly once.

fix

Ensure the callback is called (with error or null, and result) exactly once in custom templateProcessor/styleProcessor.

SyntaxError: Unexpected token '`'

ES6 template literals are not transpiled when target is ES5 but no transpiler step after inlining.

fix

Set target to 'es5' or add a transpiler (e.g., gulp-typescript or gulp-babel) after the inline plugin.

TypeScript error: Cannot find module 'gulp-inline-ng2-template'

TypeScript cannot resolve the module type definitions.

fix

Install @types/gulp-inline-ng2-template if available, or create a custom declaration: `declare module 'gulp-inline-ng2-template';`

Upgrade

Version history

6.0.0latest on npm

Audit

Dependencies

through2requiredUsed to create a transform stream for Gulp

plugin-errorrequiredUsed for Gulp-compatible error handling

replace-extrequiredUsed to replace file extension when outputting inlined files

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/ludohenin/gulp-inline-ng2-template ↗

packagehttps://www.npmjs.com/package/gulp-inline-ng2-template ↗