Why is my custom .d.ts not working? LeaderLine is not a constructor

Question

I want to add typings to the leader-line library, but I keep getting the error TypeError: leader_line_1.LeaderLine is not a constructor

I am sure it's just one small thing / concept I am overlooking or not understanding and I am going nuts over it.

Here is a stackblitz of my approach: https://stackblitz.com/edit/angular-leader-line-ovnz2v?file=src%2Fapp%2Fapp.component.ts

Here is the original stackblitz with the untyped LeaderLine:https://stackblitz.com/edit/angular-leader-line?file=src%2Fapp%2Fapp.component.ts

Answer 1

Note: stackblitz has problems running scripts from angular.json sometimes, so I am including the script tag in the index.html to make the stackblitz work!

I checked your code, ignoring the part where you want to import the types the difference between the two stackblitz is that you are missing the entry in scripts array for leader-line, that might be the issue!

angular.json

        ...
        "scripts": [
          "./node_modules/leader-line/leader-line.min.js"
        ]
        ...

or

<!-- <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/93690/leader-line.min.js"></script> -->
<my-app>loading</my-app>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.3/leader-line.min.js"
  integrity="sha512-aFBNsI3+D6ObLLtyKwdZPZzDbcCC6+Bh+2UNV8HC0R95BpcBT+dmmZ5NMpJi/Ic8uO0W7FGcg33IfuHg+7Ryew=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>

After that change the import like

why we do this is because you are declaring a variable and a type with the same name LeaderLine so to differentiate between the two I am renaming the type using as LeaderLineType and then setting the type to the property LeaderLine!

import { Component } from '@angular/core';
import { LeaderLine as LeaderLineType } from 'leader-line';
import { fromEvent } from 'rxjs';

declare var LeaderLine: typeof LeaderLineType;

Working stackblitz