角4のコンポーネントに外部Javascriptライブラリをロードする方法

Question

私は、四角形の接続APIを使用するためにナンスを生成するために特定のサードパーティのライブラリを使用する必要があるという問題があります。私は通常のようにロードできるnode_moduleを持っていないので、外部のjavascriptライブラリをロードする方法を見つけるのに困っています。外部ライブラリでは、私はこのようなものを意味する<script src="https://js.squareup.com/v2/paymentform " type="text/javascript">私はこれを私のアプリケーションにロードして使用できる良い方法を見つけられませんでした。どのように私はこの問題を解決することができます上の任意のアイデア？私が使用している

Answer 1

いくつかのオプション：

1. グローバルスクリプトangular-cli

   "scripts": [ 
       "global-script.js", 
       { "input": "lazy-script.js", "lazy": true }, 
       { "input": "pre-rename-script.js", "output": "renamed-script" }, 
   ] 
   

2. を使用しては

   import { NgModule } from '@angular/core'; 
   ... 
   require('chart.js'); 
   require('../../libs/chartjs-plugin-annotation'); 
   ... 
   

3. 特定のモジュールに要求し、実行時にグローバル・スクリプトを追加します。いくつかの条件に基づいて

   if (this.usesCKEditor(permissions) && !window['CKEDITOR']) { 
       const url = '//cdn.ckeditor.com/4.7.3/full/ckeditor.js'; 
       const script = document.createElement('script'); 
       script.type = 'text/javascript'; 
       script.src = url; 
       document.body.appendChild(script); 
   } 
   // must check if the script has loaded before using it 
   

Answer 2

最初のアプローチ：

はangular-cli.jsonファイル内のスクリプトを参照してください。

"scripts": [ 
    "../path" 
]; 

第二のアプローチ

あなたは以下のようにスクリプトをロードするために、独自のディレクティブを作成することができます

import { Directive, OnInit, Input } from '@angular/core'; 

@Directive({ 
    selector: '[appLoadScript]' 
}) 
export class LoadScriptDirective implements OnInit{ 

    @Input('script') param: any; 

    ngOnInit() { 
     let node = document.createElement('script'); 
     node.src = this.param; 
     node.type = 'text/javascript'; 
     node.async = false; 
     node.charset = 'utf-8'; 
     document.getElementsByTagName('head')[0].appendChild(node); 
    } 

} 

HOW TO USE

<i appLoadScript [script]="'https://js.squareup.com/v2/paymentform'"></i> 

DEMO