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.

it's pretty easy to load additional js files into your document, see here: https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js — Hoff, Sep 28 '18 at 08:51
Those examples are for normal javascript. How can I do this in Angular? Angular build the scripts before loading in the browser and served from `dist` directory. — Anuj TBE, Sep 28 '18 at 08:59
you can do this from inside a component of your, 'document' is available there. You can move your .js file to your assets folder and load them from there... after a script has loaded, the "renderCanvas" function will be available in the global namespace, so you can call this method also from anywhere in your angular code... — Hoff, Sep 28 '18 at 09:24

score 0 · Answer 1 · answered Sep 28 '18 at 09:34

0

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

answered Sep 28 '18 at 09:34

Jai Kumaresh

499
4
23

But the `template01.js` file will change dynamically. There will be multiple `template files` like `template01.js`, `template02.js`, so on. And I have to import only one at a time. – Anuj TBE Sep 28 '18 at 09:44
use multiple function in renderClass class – Jai Kumaresh Sep 28 '18 at 09:47
can't use multiple functions inside `renderClass` because I have been given files in a zip. Now I will have to write 400 functions one by one for 400 files to do as your suggestion. – Anuj TBE Sep 28 '18 at 09:49

Import JS library dynamically at runtime in Angular 6

1 Answers1