I encountered a similar issue where I was importing multiple libraries at the end of my HTML file, each containing numerous methods, listeners, events, and more. In my case, I did not need to call a specific method.

Here is an example of what I had:

<!-- app.component.html -->

<div> 
 ...
</div>

<script src="http://www.some-library.com/library.js">
<script src="../assets/js/my-library.js"> <!-- a route in my angular project -->

Unfortunately, this approach did not work for me. However, I found a solution that proved to be helpful: Milad's response

1. Remove the script calls from the app.component.html and link these scripts in the app.component.ts file instead.

2. In ngOnInit(), utilize a method to append the libraries like so:

``

<!-- app.component.ts -->

export class AppComponent implements OnInit {
   title = 'app';
   ngOnInit() {
     this.loadScript('http://www.some-library.com/library.js');
     this.loadScript('../assets/js/my-library.js');
   }
  }

  public loadScript(url: string) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }
}

This solution worked for me with Angular 6. Hopefully, it proves helpful to others facing similar issues.

If you want to load a script dynamically in Angular, you can create your own custom directive like this:

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

}

You can then use this directive in any component template by adding the following code:

<i appLoadScript  [script]="'script_file_path'"></i>

For instance, if you need to load JQuery dynamically, include the below snippet in your component's template:

<i appLoadScript  [script]="'/assets/baker/js/jquery.min.js'"></i>

I successfully implemented this code snippet

 addJsToElement(src: string): HTMLScriptElement {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    this.elementRef.nativeElement.appendChild(script);
    return script;
  }

Following that, I executed it in the following manner

this.addJsToElement('https://widgets.skyscanner.net/widget-server/js/loader.js').onload = () => {
        console.log('SkyScanner Tag loaded');
}

UPDATE: Utilizing the new renderer Api, it can be modified as shown below

constructor(private renderer: Renderer2){}

 addJsToElement(src: string): HTMLScriptElement {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    this.renderer.appendChild(document.body, script);
    return script;
  }

Check out on StackBlitz

Firstly, make sure to include loader.js in your assets directory. Next, open your angular-cli.json file and add the following line under "scripts":

"scripts": ["./src/assets/loader.js",]

After that, you need to declare the variable skyscanner in your typings.d.ts file like this:

declare var skyscanner:any;

Once you've done that, you can start using it by calling the function:

skyscanner.load("snippets","2");

The provided solution is accurate, but it may not be effective due to the browser requiring extra time to parse the script after downloading it. In such cases, if a variable is being utilized from the loaded script, it should be accessed within the `onload` event of the newly created HTML script element. Below, you can find an enhanced version of the original answer:

loadAPI: Promise<any>;

constructor() {
    this.loadAPI = new Promise((resolve) => {
        let node = this.loadScript();
        if (node) {
            node.onload = () => {
                resolve(true);
            };
        } else {
            resolve(true);
        }
    });
}

ngOnInit() {
    this.loadAPI
        .then((flag) => {
        //Perform actions once the script has been loaded and parsed by the browser
    });
}

loadScript() {
    let node = undefined;
    let isFound = false;
    const scripts = document.getElementsByTagName('script')
    for (let i = 0; i < scripts.length; ++i) {
        // Check if the script already exists in the HTML
        if (scripts[i].getAttribute('src') != null && scripts[i].getAttribute('src').includes("loader")) {
          isFound = true;
        }
    }

    if (!isFound) {
        const dynamicScript = 'https://widgets.skyscanner.net/widget-server/js/loader.js';
        node = document.createElement('script');
        node.src = dynamicScript;
        node.type = 'text/javascript';
        node.async = false;
        node.charset = 'utf-8';
        document.getElementsByTagName('head')[0].appendChild(node);
        return node;
    }
    return node;
}

Although it's a little late, I personally prefer approaching it this way (the service way)...

import { Injectable } from '@angular/core';
import { Observable } from "rxjs";

interface Scripts {
  name: string;
  src: string;
}

export const ScriptStore: Scripts[] = [
  { name: 'script-a', src: 'assets/js/a.js' },
  { name: 'script-b', src: 'assets/js/b.js' },
  { name: 'script-c', src: 'assets/js/c.js' }
];

declare var document: any;

@Injectable()
export class FileInjectorService {

  private scripts: any = {};

  constructor() {
    ScriptStore.forEach((script: any) => {
      this.scripts[script.name] = {
        loaded: false,
        src: script.src
      };
    });
  }

  loadJS(...scripts: string[]) {
    const promises: any[] = [];
    scripts.forEach((script) => promises.push(this.loadJSFile(script)));
    return Promise.all(promises);
  }

  loadJSFile(name: string) {
    return new Promise((resolve, reject) => {
      if (!this.scripts[name].loaded) {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = this.scripts[name].src;
        if (script.readyState) {
            script.onreadystatechange = () => {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    this.scripts[name].loaded = true;
                    resolve({script: name, loaded: true, status: 'Loaded'});
                }
            };
        } else {
            script.onload = () => {
                this.scripts[name].loaded = true;
                resolve({script: name, loaded: true, status: 'Loaded'});
            };
        }
        script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
        document.getElementsByTagName('head')[0].appendChild(script);
      } else {
        resolve({ script: name, loaded: true, status: 'Already Loaded' });
      }
    });
  }

}

Then in my component, I can implement something like this:

ngOnInit() {
  this.fileInjectorService.loadJS('script-a', 'script-c').then(data => {
    // Script A and C have been successfully loaded....
  }).catch(error => console.log(error));
}

This code has been tested on Angular versions 6 and 7.

If you have the angular-cli.json file, there is a simple solution to declare a script. Add the following line to your angular-cli.json file:

"scripts": ["../src/assets/js/loader.js"]

Next, make sure you declare skyscanner in your component like this:

declare var skyscanner:any;

That's all you need to do! Hopefully, this explanation was helpful for you.

Note: The following instructions are specifically for external JavaScript links. Step 1. Insert your Angular script into the index.html file at the bottom of the body section is recommended. I have tried various methods without success.

<!-- File Name: index.html and its inside src dir-->

<body class="">
  <app-root></app-root>

    <!-- Icons -->
        <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>

</body>

There are two ways to achieve this: For Angular 5, within your component folder, add the following code at the top:

declare var feather:any;

Then, in your class, call the required method. For example:

//FileName: dashboard.component.ts
import { Component, OnInit } from '@angular/core';
declare var feather:any;
export class DashboardComponent implements OnInit{
    ngOnInit(){
        feather.replace();
    }
}

This should execute your code successfully! Alternatively, for older versions, you can try the following approach:

//FileName: dashboard.component.ts
import { Component, OnInit } from '@angular/core';

export class DashboardComponent implements OnInit{

     ngOnInit(){
    
    
        let node = document.createElement('script');
        node.innerText='feather.replace()';
        node.type = 'text/javascript';
        node.async = false;
        node.charset = 'utf-8';
        
        document.getElementsByTagName('body')[0].appendChild(node);
    
    }

}

If you're having trouble with my code, you can also refer to this link. Hope this information is beneficial!

Finally, after numerous attempts with different code variations, I got it to work!

ngOnInit() {
    this.loadFormAssets().then(() => {console.log("Script Loaded");}).catch(() => {console.log("Script Problem");});
  }

 public loadFormAssets() {
    return new Promise(resolve => {

      const scriptElement = document.createElement('script');
      scriptElement.src =this.urls.todojs;
      scriptElement.onload = resolve;
      document.body.appendChild(scriptElement);

      const scriptElement1 = document.createElement('script');
      scriptElement1.src =this.urls.vendorjs;
      scriptElement1.onload = resolve;
      document.body.appendChild(scriptElement1);

    });
  }

My situation required me to load multiple files that had dependencies on each other (such as a component using bootstrap which in turn relies on a jquery plugin that also depends on jquery). These files all initialized immediately upon loading, assuming they were loaded synchronously on a webpage. However, most solutions out there assume the files are unrelated or require manual initialization after everything is loaded, causing issues with missing variables in my specific setup.

To solve this issue, I implemented a Promise chain instead of a Promise list like @carlitoxenlaweb did (which would resolve everything in parallel). This way, each file is only loaded once the previous one has finished initializing:

private myScripts = [
    '/assets/js/jquery-2.2.4.min.js',
    '/assets/js/bootstrap.min.js',
    '/assets/js/jquery.bootstrap.js',
    '/assets/js/jquery.validate.min.js',
    '/assets/js/somescript.js',
];
private loadScripts() {
    let container:HTMLElement = this._el.nativeElement;
    let promise = Promise.resolve();
    for (let url of this.myScripts) {
        promise = promise.then(_ => new Promise((resolve, reject) => {
            let script = document.createElement('script');
            script.innerHTML = '';
            script.src = url;
            script.async = true;
            script.defer = false;
            script.onload = () => { resolve(); }
            script.onerror = (e) => { reject(e); }
            container.appendChild(script);
        }));
    }
}

If the source URL allows for invoking a global function, it is possible to set up a personalized event handler using that feature.

index.html

<script 
  type="text/javascript"
  src="http://www.bing.com/api/maps/mapcontrol?callback=onBingLoaded&branch=release"
  async defer
></script>
<script>
  function onBingLoaded() {
    const event = new CustomEvent("bingLoaded");
    window.dispatchEvent(event);
  }
</script>

After dispatching our custom event to the window object, we can proceed to listen for it by utilizing Angular's @HostListener decorator in our component.

app.component.ts

export class AppComponent {
  @ViewChild('mapCanvas')
  mapCanvas!: ElementRef;
  private map!: Microsoft.Maps.Map;

  @HostListener('window:bingLoaded', ['$event'])
  defineMapCanvas() {
    this.map = new Microsoft.Maps.Map(
      this.mapCanvas.nativeElement,
      {
        credentials: [YOUR API KEY HERE],
        ...other options
      }
    );
  }

Reference: https://angular.io/api/core/HostListener