frappe-gantt not working in my angular 10 application

Question

I'm working on a project where the need is to show the tasks in gantt chart, I came across an open source library frappe-gantt and this fits for my use-case.

I tried implementing this in my angular application, I have installed this and added the js and css in angular.json

Then I followed the example given in official website, added <svg> to html file and js script to ts file of components.

var tasks = [
  {
    id: 'Task 1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20,
    dependencies: 'Task 2, Task 3'
  },
]
var gantt = new Gantt("#gantt", tasks);

<svg id="gantt"></svg>

This didn't work and showing blank only, then I added below to index.html in root

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.css" integrity="sha512-qxE5FnEACGZSuLsbaDLCYuMRrxuLhQz1HtOJ2+3dHXSnFlckToa1rXHajkgLciNSdq+FCE4ey8R8fqjrD3HO0g==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.5.0/frappe-gantt.min.js" integrity="sha512-5M8ejeX3DuiV4VGIFjHP5gpryPQb1dWYjzTUhBUKj81aT6ZZz6+wIG8k89nbjsiHFJHQbi/CByHQTe4mJOi3hw==" crossorigin="anonymous"></script>

and this to my component's html file

<svg id="gantt"></svg>
<script>
var tasks = [
  {
    id: 'Task 1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20,
    dependencies: 'Task 2, Task 3'
  },
]
var gantt = new Gantt("#gantt", tasks);
</script>

but again not luck, however when I'm adding this to my root index.html it's working there. What is right way to use frappe-gantt in angular 10 application? So I can use in my components wherever I want.