[解決済み] Angularで外部スクリプトを動的に読み込むには？

質問

を追加することなく、外部ライブラリと追加ロジックをコンポーネント化するモジュールがあります。 <script> タグをindex.htmlに直接挿入しています。

import 'http://external.com/path/file.js'
//import '../js/file.js'

@Component({
    selector: 'my-app',
    template: `
        <script src="http://iknow.com/this/does/not/work/either/file.js"></script>
        <div>Template</div>`
})
export class MyAppComponent {...}

私は、この import は静的で、実行時ではなくTypeScriptのトランスパイル時に解決される仕様です。

file.jsがCDNまたはローカルフォルダから読み込まれるように設定する方法はありますか？ Angular 2にスクリプトを動的にロードするように指示する方法は？

解決方法は？

system.jsを使っている場合は System.import() を実行時に指定します。

export class MyAppComponent {
  constructor(){
    System.import('path/to/your/module').then(refToLoadedModule => {
      refToLoadedModule.someFunction();
    }
  );
}

webpackを使用している場合、その堅牢なコード分割のサポートを最大限に活用するために、以下のようにします。 require.ensure :

export class MyAppComponent {
  constructor() {
     require.ensure(['path/to/your/module'], require => {
        let yourModule = require('path/to/your/module');
        yourModule.someFunction();
     }); 
  }
}