如何将外部Javascript库加载到Angular 4组件中

我有一个问题，我需要使用一个特定的第三方库来生成一个nonce来使用square-connect api。我很难找到如何加载外部javascript库，因为它们没有一个我通常可以加载的node_模块。我所说的外部库是指这样的

，我还没有找到一个好方法将它加载到我的应用程序中以便使用它。关于如何解决这个问题，有什么想法吗？

我使用了一些选项：

全局脚本使用

在特定模块中需要

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

根据某些条件在运行时添加全局脚本

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

---

第一种方法：

请参阅

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);
    }

}

如何使用

---

如果您使用angular cli，您应该将其放在.angular-cli.json的脚本部分使用此选项1，您必须先下载脚本还是我可以放置链接url？@JonathanJensen仅供参考，您不允许（按正方形）下载脚本并包含它，所以像数字3这样的选项对你来说会更好。@JonathanJensen你可以把url放在选项1中also@tristansokol谢谢你的更新。我知道他们不允许下载他们的脚本，这就是我问这个问题的原因。但如果我不知道的话，那就很有帮助了。所以谢谢你们。@SumamaWaheed当我尝试第一个选项时，我得到了这个错误：多脚本加载程序中的错误/找不到src/https:/js.squareup.com/v2/paymentform模块：错误：无法解析“/Users/jpjensen/Projects/build-a-carket/front-end/src/https:/js.squareup.com/v2/paymentform”in'/Users/jpjensen/Projects/build-a-carket/front-end/node_modules/@angular/cli/models/webpack configs'@multi-script loader/src/https:/js.squareup.com/v2/paymentform代码第二种方法效果很好，但我更喜欢第一种。在第一种方法中有没有一种方法可以利用环境变量？我需要注入一个API密钥。

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);
    }

}

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