Wie externe Javascript-Bibliotheken in Angular 4-Komponenten geladen werden

Question

Ich habe ein Problem, wo ich eine bestimmte 3rd-Party-Bibliothek verwenden muss, um eine Nonce zu generieren, um die Square Connect API zu verwenden. Ich habe Probleme zu finden, wie man die externe Javascript-Bibliothek lädt, da sie kein Knotenmodul haben, das ich laden kann, wie ich normalerweise tue. Mit externer Bibliothek meine ich so etwas wie <script src="https://js.squareup.com/v2/paymentform " type="text/javascript"> Ich habe keinen guten Weg gefunden, dies in meine Anwendung zu laden, damit ich es benutzen kann. Irgendwelche Ideen, wie ich dieses Problem lösen kann?

Answer 1

Einige Optionen, die ich verwendet habe:

1. Globale Skript angular-cli

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

2. in einem bestimmten Modul Erfordern mit

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

3. ein globales Skript zur Laufzeit hinzufügen basierend auf einer Bedingung

   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

Erster Ansatz:

Siehe die Skripte in der angular-cli.json Datei.

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

Zweiter Ansatz

Sie können Ihre eigene Richtlinie laden Skript wie unten

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

erstellen