title: TypeScript Module Importing & WebPack
body: <p>I'm having some trouble getting WebPack to inject imported dependencies for a project written in TypeScript. My first issue is getting TypeScript to recognize the imported module. </p>
  
  <p>I have a <strong>header.ts</strong> file that declares a module that is nested under <em>vi.input</em> and exports a <em>VIInputDirective</em> class. In the <strong>main.ts</strong> file, I try to import the exported <em>VIInputDirective</em> class from the <strong>header.ts</strong> file, but can't seem to get TypeScript to recognize it. </p>
  
  <p><strong>header.ts</strong></p>
  
  <pre><code>module vi.input.header {
    import IDirective = angular.IDirective;
  
    export class VIInputDirective implements IDirective {
      ...
    }
  }
  </code></pre>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import {VIInputDirective} from "./header.ts"; // Nothing imported; Cannot Resolve issue
  VIInputDirective.whatever(); // Does not work
  </code></pre>
  
  <p><strong>material.dt.s</strong></p>
  
  <pre><code>declare module vi.input {
    ...
  }
  </code></pre>
  
  <p>If I swap <code>import {VIInputDirective} from "./header.ts";</code> in the <strong>main.ts</strong> file with <code>import VIMHeaderDirective = vi.input.header.VIInputDirective;</code> it works fine, but then webpack on transpile/inject gives me the following error:</p>
  
  <pre><code>VM1469:1Uncaught ReferenceError: vi is not defined
  </code></pre>
  
  <p>I've tried exporting the <em>vi.input.header</em> module directly (i.e. export module vi.input.header) but that did not work. I also tried using the reference sytnax to include the file but that did not work either: <code>///&lt;reference path="file_path"/&gt;</code>. </p>
  
  <p>It's an issue with the nesting of modules because if I remove the module and directly export the VIInputDirective class, it works fine. However, I want to keep it in a nested module.</p>