Import JS library dynamically at runtime in Angular 6

Question

I'm using Angular 6 .

I'm writing an application using canvas and there are plenty of prebuilt templates to use with the canvas.

The source file is saved in a .js file on the server which is retrieved when the user selects a particular template and canvas is to be rendered again with the new template.

Not much has been done in the component file, still, my component file contains

import {Component, Input, OnInit} from '@angular/core';
import 'fabric';

declare const fabric: any;

@Component({
  selector: 'app-create-fb-ad-modal',
  templateUrl: './create-fb-ad-modal.component.html',
  styleUrls: ['./create-fb-ad-modal.component.css']
})
export class CreateFbAdModalComponent implements OnInit {

  @Input() product;

  canvasTemplatePath = 'https://example.com/template01.js';

  canvas: any;

  textString: string;
  backgroundImagePath = 'https://example.com/assets/bg/3.png';
  productImagePath: string;

  constructor(
  ) {
  }

  ngOnInit() {

    /**
     * Set variables
     */
    this.textString = this.product.info.title;
    this.productImagePath = this.product.info.images.main;

  }

  private _initializeCanvasTemplate()
  {
    // load canvasTemplatePath here and call the function inside the loaded
    // file with parameters
    // For example:
    // importedTemplate.renderCanvas(this.canvas, this.backgroundImagePath, this.productImagePath, this.textString);
    // this will render the canvas according to the content of template01.js
  }
}

component.html contains

<canvas id="canvas" width="1200" height="628"></canvas>

and the template01.js file contains

function renderCanvas(canvas, bgImage, pImage, text)
{
    const cvBgImage = new fabric.Image.fromURL(bgImage, imgInstance => {
      imgInstance.set({
        width: canvas.width,
        height: canvas.height,
        originX: 'left',
        originY: 'top'
      });
    canvas.setBackgroundImage(imgInstance, canvas.renderAll.bind(canvas));
   });

   canvas.on('mouse:down', options => {
     canvas.setActiveObject(this.cvTextString);
     cvTextString.bringToFront();
   });

   const cvTextString = new fabric.IText(text, {
     left: 100,
     top: 220,
     fontSize: 32,
   });
   canvas.add(cvTextString);
   canvas.setActiveObject(cvTextString);

   const cvProductImage = new fabric.Image.fromURL(pImage, imgInstance => {
     imgInstance.set({
       left: 800,
       top: 120
     });

     canvas.add(imgInstance);
   });

}

Now I want to load the template01.js file and call the function inside it renderCanvas() by passing values from the component which will render the canvas accordingly.

But, How to import/load the external js from URL at runtime as there will be more than 400 template files.

I'm not sure whether I'm doing it correctly or not as I'm learning Angular and this is my first Angular project.

Answer 1

Your template01.js script file change to exporting type. for ex:

export class renderClass {
   function renderCanvas(canvas, bgImage, pImage, text) {
       //.. Your script file renderCanvas method codes.
   }
}

Next your component file top import that script file method. for ex:

import { renderClass } from './template01.js'; // (correct location of your script file)

Next add that method in constructor. for ex:

constructor(private renderClass: renderClass) {}

next call that method

private _initializeCanvasTemplate() {
   this.renderClass.renderCanvas(canvas, bgImage, pImage, text);
}