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

Question

I have a problem where I need to use a specific 3rd party library to generate a nonce to use the square connect api. I am having troubles finding how to load the external javascript library since they don't have a node_module that I can load like I usually do. By external library I mean something like this <script src="https://js.squareup.com/v2/paymentform " type="text/javascript"> I have not found a good way to to load this into my application so that I can use it. Any ideas on how I can solve this problem?

Answer 1

A few options that I have used:

1. Global script using angular-cli

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

2. Require in a specific module

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

3. Add a global script at runtime based on some condition

   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

First Approach:

Refer the scripts inside the angular-cli.json file.

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

Second Approach

You can create your own directive to load script as below

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