{"id":25696,"library":"gulp-inline-ng2-template","title":"gulp-inline-ng2-template","description":"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.","status":"active","version":"6.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/ludohenin/gulp-inline-ng2-template","tags":["javascript","angular2","template","styles","gulpplugin","browserify","typescript","es6","es5"],"install":[{"cmd":"npm install gulp-inline-ng2-template","lang":"bash","label":"npm"},{"cmd":"yarn add gulp-inline-ng2-template","lang":"bash","label":"yarn"},{"cmd":"pnpm add gulp-inline-ng2-template","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used to create a transform stream for Gulp","package":"through2","optional":false},{"reason":"Used for Gulp-compatible error handling","package":"plugin-error","optional":false},{"reason":"Used to replace file extension when outputting inlined files","package":"replace-ext","optional":false}],"imports":[{"note":"Package uses CommonJS default export; both import styles work, but ESM import is preferred in TypeScript projects.","wrong":"const inlineNg2Template = require('gulp-inline-ng2-template');","symbol":"inlineNg2Template","correct":"import inlineNg2Template from 'gulp-inline-ng2-template';"},{"note":"Missing return statement or using async callback can cause Gulp to not wait for stream completion.","wrong":"gulp.task('inline', () => { gulp.src('src/**/*.ts').pipe(inlineNg2Template({ base: '/src' })).pipe(gulp.dest('dist')); });","symbol":"gulp.task (with inlineNg2Template)","correct":"gulp.task('inline', () => { return gulp.src('src/**/*.ts').pipe(inlineNg2Template({ base: '/src' })).pipe(gulp.dest('dist')); });"},{"note":"Type import is not a value; use 'import type' to avoid runtime errors.","wrong":"import { InlineNg2TemplateOptions } from 'gulp-inline-ng2-template';","symbol":"InlineNg2TemplateOptions","correct":"import type { InlineNg2TemplateOptions } from 'gulp-inline-ng2-template';"},{"note":"In TypeScript with esModuleInterop, require directly works, but in pure CommonJS the .default property is needed.","wrong":"const inlineNg2Template = require('gulp-inline-ng2-template');","symbol":"default (CommonJS require)","correct":"const inlineNg2Template = require('gulp-inline-ng2-template').default;"}],"quickstart":{"code":"const gulp = require('gulp');\nconst inlineNg2Template = require('gulp-inline-ng2-template');\n\ngulp.task('inline', function() {\n  return gulp.src('src/**/*.ts')\n    .pipe(inlineNg2Template({\n      base: '/src',\n      target: 'es6',\n      indent: 2,\n      useRelativePaths: false,\n      removeLineBreaks: false,\n      removeModuleId: false,\n      templateExtension: '.html',\n      supportNonExistentFiles: false\n    }))\n    .pipe(gulp.dest('dist'));\n});","lang":"javascript","description":"Basic Gulp task that inlines Angular component templates and styles into TypeScript files, outputting to dist."},"warnings":[{"fix":"Update Node to version 6 or higher.","message":"Version 5.0.0 drops Node 4 support and adds sourcemap support; check your Node version.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Remove any custom backslash escaping logic from processors.","message":"Version 4.0.0 now escapes backslashes in templates; custom workarounds may need removal.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update processor functions to accept (path, ext, file, callback) signature.","message":"Version 3.0.0 changes the processor function signature; old processors will break.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Modify templateProcessor and styleProcessor to accept a callback as third argument.","message":"Version 2.0.0 makes the parser async and adds callback argument to processors.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Update configuration to use templateProcessor/styleProcessor instead of html/css props.","message":"Version 1.0.0 drops jade support and changes configuration object (html and css props removed).","severity":"breaking","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Ensure your build pipeline includes a transpiler step after inlining if targeting ES5.","message":"If using ES6 target, templates are inlined as ES6 template literals; transpiler (TypeScript/Babel) must be set up for ES5 output.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Set base option to the root of your application (e.g., '/src').","message":"When using `useRelativePaths: true`, asset paths are resolved relative to the component file; may require base configuration adjustment.","severity":"gotcha","affected_versions":">=0.0.10"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure base path and file extensions are configured correctly; consider enabling `supportNonExistentFiles: true`.","cause":"Referenced template or style file does not exist at expected path.","error":"Error: ENOENT: no such file or directory, open '...'"},{"fix":"Make sure gulp.src includes the files to inline; add `{}` if using glob patterns.","cause":"File content is undefined because source file is empty or not read properly.","error":"TypeError: Cannot read property 'replace' of undefined"},{"fix":"Ensure the callback is called (with error or null, and result) exactly once in custom templateProcessor/styleProcessor.","cause":"Custom processor does not invoke callback exactly once.","error":"Error: Callback called multiple times or not called"},{"fix":"Set target to 'es5' or add a transpiler (e.g., gulp-typescript or gulp-babel) after the inline plugin.","cause":"ES6 template literals are not transpiled when target is ES5 but no transpiler step after inlining.","error":"SyntaxError: Unexpected token '`'"},{"fix":"Install @types/gulp-inline-ng2-template if available, or create a custom declaration: `declare module 'gulp-inline-ng2-template';`","cause":"TypeScript cannot resolve the module type definitions.","error":"TypeScript error: Cannot find module 'gulp-inline-ng2-template'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}