Example Angular component that loads external libraries

gistfile1.txt

import { RemoteLibraryService } from './../services/remote-library.service';
import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';

declare global {
  var externalLibrary: any;
  var otherExternalLibrary: any;
}

@Component({
  selector: 'app-wrapper',
  templateUrl: './wrapper.component.html',
  styleUrls: ['./wrapper.component.scss']
})
export class WrapperComponent implements OnInit, AfterViewInit, OnDestroy {

  constructor(
    // ...
    // IMPORTANT: remoteLibraryService MUST BE public
    public remoteLibraryService: RemoteLibraryService) {}

  ngOnInit() {
    // ...
  }

  ngAfterViewInit(): void {
    // ...
    const scriptArray: Promise<any>[] = [
      this.remoteLibraryService.loadScript('/assets/external-library.js').toPromise(),
      this.remoteLibraryService.loadScript('https://external-site/scripts/other-external-library.js').toPromise(),
      // you can use the remoteLibraryService to load any other script required or even css files
    ];
    Promise.all(scriptArray).then(_ => {
      console.log('All scripts loaded');
      //...
      // Use the loaded scripts
      // ...
    )};
  }

  ngOnDestroy() {
    // ...
  }

}