gulp-ng2-template-wrap

Gulp plugin to wrap Angular2 templates into separate ES6 module which can be used by other modules. Allows you to avoid additional HTTP requests.

Initially was created to use in Ionic projects that support iOS "WKWebView". With this plugin local server plugins are not needed on iOS.

note:

• 0.0.4 the very first version of project, not tested. Not recommended to use in producti.

Installation

npm install gulp-ng2-template-wrap --save-dev

Configuration

You can pass a configuration object to the plugin.

defaults = {
  baseDir: 'app',                         // Angular2 application base folder
  templatesModulePath: 'templates.js'     // Use components relative assset paths
  templateIdDelimiter: '.'                // Delimiters used for templates IDs
};

Defaults are configured for the following project structure

+-- app
|   +-- pages
    |   +-- page1.html
    |   +-- page2.html
|   +-- app.js
|   +-- templates.js (will be created)
+-- index.html
+-- gulpfile.js
+-- packages.json

Example usage

//...
var templatesWrap = require('gulp-ng2-template-wrap');
 
gulp.task('templates', function(){
  gulp.src('app/**/*.html').pipe(templatesWrap({
    templateIdDelimiter: '_'
  }));
});

How it works

app/pages/template1.html

<p>
  Hello world 1
</p>

app/pages/template2.html

<p>
  Hello world 2
</p>

result (app/templates.js)

var templates = {
  'pages_page1': ... // page1.html content
  'pages_page2': ... // page2.html content
}
 
export function getTemplate(id){
  return templates[id];
}

othermodule (othermodule.js)

import {getTemplate} from 'templates';
 
@Component({
  template: getTemplate('pages_page1')
})
export class ...
 

Licence

MIT