Lazy Load External JavaScript Library in Angular #tags: Angular

quill-editor.component.ts

declare var Quill: any;

@Component({
  //...
})
export class QuillEditorComponent implements OnInit {

  constructor(
    // ...
    private readonly svc: QuillEditorService,
    @Inject(DOCUMENT) private readonly document: any
  ) {}

  ngOnInit() {
    this.svc.lazyLoadQuill().subscribe(_ => {
      if (!Quill) {
        Quill = this.document.defaultView.Quill;
      }
      this.setupQuill();
    });
  }

  setupQuill() {
    if (!Quill) {
      return;
    }
    // set up External JS library
  }
}

quill-editor.service.ts

import { Injectable, Inject } from '@angular/core';
import { ReplaySubject, Observable, forkJoin } from 'rxjs';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class QuillEditorService {
  private _loadedLibraries: { [url: string]: ReplaySubject<any> } = {};

  constructor(@Inject(DOCUMENT) private readonly document: any) {}

  lazyLoadQuill(): Observable<any> {
    return forkJoin([
      this.loadScript('assets/quill/quill.min.js'),
      this.loadStyle('assets/quill/quill.snow.css')
    ]);
  }

  private loadScript(url: string): Observable<any> {
    if (this._loadedLibraries[url]) {
      return this._loadedLibraries[url].asObservable();
    }

    this._loadedLibraries[url] = new ReplaySubject();

    const script = this.document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = url;
    script.onload = () => {
      this._loadedLibraries[url].next();
      this._loadedLibraries[url].complete();
    };

    this.document.body.appendChild(script);

    return this._loadedLibraries[url].asObservable();
  }

  private loadStyle(url: string): Observable<any> {
    if (this._loadedLibraries[url]) {
      return this._loadedLibraries[url].asObservable();
    }

    this._loadedLibraries[url] = new ReplaySubject();

    const style = this.document.createElement('link');
    style.type = 'text/css';
    style.href = url;
    style.rel = 'stylesheet';
    style.onload = () => {
      this._loadedLibraries[url].next();
      this._loadedLibraries[url].complete();
    };

    const head = document.getElementsByTagName('head')[0];
    head.appendChild(style);

    return this._loadedLibraries[url].asObservable();
  }
}