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.
npm install gulp-ng2-template-wrap --save-devYou 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
//...
var templatesWrap = require('gulp-ng2-template-wrap');
gulp.task('templates', function(){
gulp.src('app/**/*.html').pipe(templatesWrap({
templateIdDelimiter: '_'
}));
});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 ...MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent