gulp-inline-ng2-template

6.0.0 verified Fri May 01 auth: no javascript

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.

Common errors

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

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

error TypeError: Cannot read property 'replace' of undefined ↓

cause 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 Error: Callback called multiple times or not called ↓

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

error SyntaxError: Unexpected token '`' ↓

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

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

cause 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';

Warnings

breaking Version 5.0.0 drops Node 4 support and adds sourcemap support; check your Node version. ↓

fix Update Node to version 6 or higher.

breaking Version 4.0.0 now escapes backslashes in templates; custom workarounds may need removal. ↓

fix Remove any custom backslash escaping logic from processors.

breaking Version 3.0.0 changes the processor function signature; old processors will break. ↓

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

breaking Version 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.

breaking Version 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.

gotcha If 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.

gotcha When 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').

Install

npm install gulp-inline-ng2-template

yarn add gulp-inline-ng2-template

pnpm add gulp-inline-ng2-template

Imports

inlineNg2Template
wrong
```
const inlineNg2Template = require('gulp-inline-ng2-template');
```
correct
```
import inlineNg2Template from '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)

wrong

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

correct

gulp.task('inline', () => { return 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

wrong

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

correct

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

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

default (CommonJS require)
wrong
```
const inlineNg2Template = require('gulp-inline-ng2-template');
```
correct
```
const inlineNg2Template = require('gulp-inline-ng2-template').default;
```
In TypeScript with esModuleInterop, require directly works, but in pure CommonJS the .default property is needed.

Quickstart

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'));
});