Integrating Canvg 3.0 with Angular project

In the application I currently develop, I am using the canvg library to make some canvas renderings in the page, and until now I used canvg 2.0 library to achieve this in the following manner:

import Canvg from 'canvg/dist/browser/canvg.min.js';

// convert SVG into a XML string
xml = new XMLSerializer().serializeToString(obj);
// Removing the name space as IE throws an error
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
// draw the SVG onto a canvas
Canvg(canvas, xml);

Some days ago Canvg version 3 was released which changed everything to Typescript and the canvg.min.js does not exist anymore, and I cannot find a way to integrate the npm installed canvg library in my Angular 8 project so I can use it as before, having no suggestions for importing any module for the "Canvg" function, and the documentation is also not helpful on how to integrate this with Angular.

Has anyone encountered this issue and knows how to fix?

Solution

It's actually easier if they've migrated to TypeScript. There's some doc that they've given in here.

Here's an example to get you started:

import { Component, ViewChild, AfterViewInit, OnDestroy } from "@angular/core";
import Canvg from "canvg";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild("canvas", { static: false }) canvas;
  context: CanvasRenderingContext2D;
  renderedCanvas;

  async ngAfterViewInit() {
    this.context = this.canvas.nativeElement.getContext("2d");
    this.renderedCanvas = await Canvg.from(
      this.context,
      '<svg width="600" height="600"><text x="50" y="50">Hello World!</text></svg>'
    );
    this.renderedCanvas.start();
  }

  ngOnDestroy() {
    this.renderedCanvas && this.renderedCanvas.stop();
  }
}

And here's the Template:

<canvas #canvas></canvas>

Here's the Sample Code Example for your ref.