외부 Javascript 라이브러리를 각도 4 구성 요소에로드하는 방법

Question

사각형 연결 API를 사용하려면 nonce를 생성하기 위해 특정 제 3 자 라이브러리를 사용해야하는 곳에 문제가 있습니다. 나는 그들이 일반적으로로드 할 수있는 node_module을 가지고 있지 않기 때문에 외부 자바 스크립트 라이브러리를로드하는 방법을 찾는 데 어려움을 겪고있다. 외부 라이브러리에 의해 나는 이와 같은 것을 의미합니다. <script src="https://js.squareup.com/v2/paymentform " type="text/javascript"> 이것을 사용할 수 있도록 내 응용 프로그램에로드하는 좋은 방법을 찾지 못했습니다. 이 문제를 어떻게 해결할 수 있을지에 대한 아이디어가 있습니까?

Answer 1

내가 사용했던 몇 가지 옵션 :

1. 글로벌 스크립트가

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

2. angular-cli을 사용하여이

   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