title: How to import external HTML files into a TypeScript class
body: <p>I'm attempting to build a JavaScript package that is using <a href="https://webpack.github.io/" rel="nofollow noreferrer">Webpack</a> to compile a TypeScript file and all its imports into a single JavaScript file.</p>
  
  <p>The main goal with this package is to spit out HTML to any application consuming the package, following a given set of conditions.</p>
  
  <p>At the moment, I have this working well by using template literals. But, ideally I would love to move the markup into separate HTML template files that can be imported and parsed by relevant TypeScript classes. I'm assuming the best way to handle this scenario is to have Webpack convert that HTML to JavaScript during the build.</p>
  
  <p>Unfortunately, this package must be framework agnostic, and can't take advantage of Angular or React, or anything like that.</p>
  
  <p>Is this possible and is it worth the effort? If so, what do I need to do?</p>
  
  <p>Here's an exmaple of what I'm doing:</p>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import { Header } from './app/header';
  
  (function(){
    new Header();
  })();
  </code></pre>
  
  <p><strong>header.html</strong></p>
  
  <pre><code>export class Header {
  
    public el: any;
  
    constructor() {
      this.el = document.querySelectorAll('[data-header]')[0];
      this.el.className += 'header';
  
      this.render();
    }
  
    public render() {
      this.el.innerHTML += `
        &lt;a href="#" class="navbar-brand logo"&gt;
          &lt;svg viewBox="0 0 578 84" width="578" height="84"&gt;
            &lt;use href="assets/svgs/logo-crds.svg#logo-crds"&gt;&lt;/use&gt;
          &lt;/svg&gt;
        &lt;/a&gt;
      `;
    }
  }
  </code></pre>
  
  <p>In this example, I'd like to move the template we see in the <code>render()</code> function into its own <code>header.html</code> file.</p>