Using A Script Tag File And calling Function From The Script In Angular Component

I am trying to integrate clover ecommerce iframe into my angular application but am running into an issues. I am trying to get This example to work the same in my angular projects component but it fails to find the name clover. I looked for a typescript package but could not find one.

The example above is not my code but a sample example code which i want to replicate in one of my angular components.

I put this tag in the index.html file:

<script src="">

But when creating the clover and elements globally in my component:

clover = new Clover('a2c04bd36719c1ae6867d9f978f7cefa');
elements = clover.elements();

I get the following error:

TS2304: Cannot find name 'Clover'.

Is there something I am missing? I tried adding the link to the index.html and in the angular.json but that was no luck either. How can I add this script file successfully to my angular project and call its functions?


  • When you have an external .js file you could use like this:

    At your index.html:

          <script src=""></script>

    At your app.component.ts or any component (.ts):

         import { Component,OnInit } from '@angular/core';
    //this is the important line:
        declare const Clover: any;

    //Example it works:

      selector: 'my-app-selector-x',
      standalone: true,
    export class AppComponent implements OnInit {
      ngOnInit() {
        let clover = new Clover('a2c04bd36719c1ae6867d9f978f7cefa');
        let elements = clover.elements();

    enter image description here