What is the best way to "compile" HTML templates in production?

Question

i'm developing my first Angular2 app and i'm using this folders structure:

components
    component1
        home.component.ts
        home.component.html
        home.component.scss

I'm using Gulp to run tasks for building the app. The final folders structure will be this one:

scripts
    somefile1.js
    somefile2.js
    ...
styles
    mine.css
    vendor.css
index.html
favicon.ico

Can you tell me what is the best way to incorporate HTML templates within Javascript files? Besides i would be able to easily debug code, so i would see the original folders structure in browser's inspection tools. I'm currently using gulp-sourcemaps plugin and sourceMap option set to true for Typescript compiler to do the same for Styles and Scripts.

What node plugins could i use to reach this purpose for HTML templates?

Answer 1

I've used gulp-angular-embed-templates on multiple projects with great success.

Here is an example task:

gulp.task('embed-templates', () => {
    gulp.src('app/**/**.js')
        .pipe(embedTemplates({sourceType:'js', minimize: {quotes: true, empty: true}}))
        .pipe(gulp.dest('app/'));
});