gulp-ng2-template-wrap
v0.0.5
Published
Gulp plugin to wrap Angular2 templates into separate ES6 module.
Downloads
4
Maintainers
Readme
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