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

Question

我有一个问题，我需要使用特定的第 3 方库来生成随机数以使用 square connect api。我很难找到如何加载外部 javascript 库，因为它们没有我可以像往常一样加载的 node_module。我所说的外部图书馆是这样的 <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