title: Load JavaScript file in angular2 app
body: <p>I'm working on a angular2 application written in TypeScript.</p>
  
  <h2>This works:</h2>
  
  <p>I have a module called <code>plugin-map.ts</code> which looks something like this:</p>
  
  <pre><code>import { Type } from '@angular/core';
  
  import { SomeComponent } from './plugins/some.component';
  
  export const PluginMap: { [key: string]: Type&lt;any&gt; } = {
      'e690bec6-f8d1-46a5-abc4-ed784e4f0058': SomeComponent
  };
  </code></pre>
  
  <p>It gets transpiled to a <code>plugin-map.js</code> which looks something like this:</p>
  
  <pre><code>"use strict";
  var some_component_1 = require('./plugins/some.component');
  exports.PluginMap = {
      'e690bec6-f8d1-46a5-abc4-ed784e4f0058': some_component_1.SomeComponent
  };
  //# sourceMappingURL=plugin-map.js.map
  </code></pre>
  
  <p>And in other modules I'm importing my <code>PluginMap</code> like this:</p>
  
  <pre><code>import { PluginMap } from './plugin-map';
  </code></pre>
  
  <h2>What I want:</h2>
  
  <p>Now I want to create <code>plugin-map.js</code> at runtime when my server starts. So I want to get rid of my <code>plugin-map.ts</code> and instead have only a (generated) <code>plugin-map.js</code>. And I don't want to have any transpile-time dependencies to that <code>plugin-map.js</code>.</p>
  
  <h2>What I tried:</h2>
  
  <p>In modules where I need to access the <code>PluginMap</code> I replaced the <code>import</code> statement with a declaration like this:</p>
  
  <pre><code>declare const PluginMap: { [key: string]: Type&lt;any&gt; }; 
  </code></pre>
  
  <p>Now of course at runtime I get a <code>Error: (SystemJS) 'PluginMap' is undefined</code>. So my next step was to load <code>plugin-map.js</code> explicitly from my <code>index.html</code> like this:</p>
  
  <pre><code>...
  &lt;script src="js/system.src.js"&gt;&lt;/script&gt;
  &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
  &lt;script&gt;
        System.import('./app/plugins/plugin-map.js').catch(function (err) { console.error(err); });
        System.import('app').catch(function(err){ console.error(err); });
  &lt;/script&gt;
  ...
  </code></pre>
  
  <p>When I start my application I can see that the browser actually requests the <code>plugin-map.js</code> file. But I still get the <code>Error: (SystemJS) 'PluginMap' is undefined</code>.</p>
  
  <h2>Question:</h2>
  
  <p>How/where do I have to load my generated <code>plugin-map.js</code> so that this works?</p>