コンポーネント内のライブラリJavaScriptをインポートするにはどうすればいいですか？

Question

私は、角度-cli.jsonを使用してインポートする方法を知っている角度CLIで

を角度2を使用しています。しかし、私はコンポーネント内でインポートしたい。

ファイルが大きすぎるため、最初のシステム負荷で読み込まないようにしています。

特定のコンポーネントがロードされているときに外部ライブラリをロードするにはどうすればよいですか？

私のシステムは、クライアントの支払いを受け取るためにライブラリを使用します。このライブラリを支払いコンポーネントにインポートする必要があります：https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js

インポート後、このインポートされたファイルのいくつかの機能を使用してトークンを生成する必要があります。このトークンを使用して、支払取引を実行することができます。

私の問題は、このファイルを最初のアップロードにアップロードしたくないということです。特定のルートが呼び出されたときにのみロードしたいと思います。 exemple：/有料署名

Answer 1

あなたは、コード自体の中importステートメントを使用するオプションを持っているTypeScript 2.4ので、あなたはライブラリをロードするために、独自のローダーを書き込むことができます。

async getLib(name: string): Promise<any> { 
    return await import(name); 
} 

あなたはこれをラップする必要があります上記のライブラリを使用する任意のパスのResolveサービスの周り。あなたは/最新の活字体を使用することができますしたくない場合は

、あなたはscriptタグを作成し、loadイベントをリッスンすることができます答えを

getLib(name: string): Promise<any> { 
    return new Promise((resolve) => { 
     let script: HTMLScriptElement = document.createElement('script'); 
     script.addEventListener('load', r => resolve()); 
     script.src = string; 
     document.head.appendChild(script);  
    });  
}