title: How to load external js script in angular 2 in runtime?
body: <p>I am using Twitter digits for authentication. It needs a small .js script to be downloaded and initialize it. They recommend directly fetching the file from their server.</p>
  
  <p>I have to import</p>
  
  <p><code>&lt;script id="digits-sdk" src="https://cdn.digits.com/1/sdk.js" async&gt;&lt;/script&gt;
  </code></p>
  
  <p>and initialize the sdk using like <code>Digits.init({})</code>.</p>
  
  <p>I am using <a href="https://github.com/AngularClass/angular2-webpack-starter" rel="nofollow">angular2 webpack starter</a> template which uses webpack.</p>
  
  <p>Earlier I was using systemjs, where I just map the file name to the url and import it at my component. Like this</p>
  
  <pre><code>  var map = { 'Digits':'https://cdn.digits.com/1/sdk' };
  </code></pre>
  
  <p>then import it in angular component like <code>import * as Digits from 'Digits';</code></p>
  
  <p>I know there is webpack externals, but it is inconsistent.</p>
  
  <p><code>console.log(Digits)</code> in <code>ngOnInit()</code> sometime shows the correct object sometimes undefined error.</p>