In the world of ASP.NET (or gulp), bundling and minification are taken care of. However, a different issue arises when following Angular2 tutorials: the view HTML is typically embedded within the component itself. Fortunately, there is a way to separate the HTML into its own .ts and .html files using TypeScript. Here's how:
...
/// <reference path="./view-declaration.d.ts" />
...
import {html} from '/app.html!text';
...
@Component({
...
template: html
})
...
To fake .html as a module in the view-declaration.d.ts file:
declare module '/app.html!text' {
var html:string;
return default html;
}
This method utilizes SystemJS with its text plugin. However, it does not generate System.register for .html files, preventing the bundling of HTML files along with transpiled .js files.
The question remains – how can you separate HTML from JavaScript while still bundling them properly?
It's important to note that this approach is similar to setting the templateUrl on your component, both of which hinder bundling and increasing server hits per component. Angular2 suggests using strings and setting template directly on a component instead. This solution may be more practical for junior developers and code reviews (as opposed to running the whole codebase just to see if the browser complains about a non-closed tag!).