Dynamically load HTML template in angular2
<p>I have created a project using <code>angular-cli</code> which contains <strong>AppComponent</strong> as follows:</p>

<pre><code>import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}
</code></pre>

<p>And <strong>app.component.html</strong> as </p>

<pre><code>&lt;h1&gt;
  Good Morning, {{title}}
&lt;/h1&gt;
</code></pre>

<p>So when I build it with <code>ng build</code> it generates some files like this <strong>./dist/main.bundle.js</strong> which contents some code as follows-</p>

<pre><code>/* 586 */
/***/ function(module, exports) {

module.exports = "&lt;h1&gt;\n  Good Morning, {{title}}\n&lt;/h1&gt;\n"

/***/ },
/* 587 */
</code></pre>

<p>That means, at the time of build the compiler/bundle-er is reading the html file and concatenating those into the generated js file. </p>

<p>But in my case the html is also <strong>dynamic</strong> and content-driven from server side. Lets say, instead of html, my template file is <strong>app.component.jsp</strong> and residing on some different server or folder altogether.</p>

<p>Also that JSP file sometimes returns <code>&lt;h1&gt;Good Morning, {{title}}&lt;/h1&gt;</code>
and sometimes <code>&lt;h1&gt;Good Afternoon, {{title}}&lt;/h1&gt;</code> depending on current server time.</p>

<p>How to achieve this functionality?</p>

<p>What I understand is that, I need to define some kind of loader function say : <code>loadDynamicTemplate(template_url)</code></p>

<p>and need to use that loader-function on Component decorator template property. In that case, when the main.bundle.JS is generated, it will use that function also. So in runtime angular will call this function and load the HTML by ajax and use it.</p>

<p><strong>Update 1</strong></p>

<p><a href="https://stackoverflow.com/questions/38263406/what-are-differences-between-systemjs-and-webpack">Here</a> I found some difference between SystemJS and Webpack . I also found we can load the HTML files in run-time if we can use SystemJS. So I believe this problem can be solved with SystemJS configuration. But for that another problem comes into play, though I believe that could be a separate question. So I posted a new question to sort it out <a href="https://stackoverflow.com/questions/42417832/configure-angular-cli-to-use-systemjs">here</a>.</p>

<p>Probably if that question get solved I will try with SystemJS and then post solution here if it helps.</p>