How does Angular bind an external javascript library to a declared var?

Question

I'm looking to understand the mechanics of how Angular resolves a declared var to a specific javascript library. For example I reference a 3rd party javascript library and load it through index.html:

<html>
  <head>
    <script src="/assets/js/external.js"></script>
  ...
</html>

SomeComponent.ts

import ...

declare var functionA: any;

@Component({
  selector: 'some-component',
  templateUrl: 'some-component.html',
  styleUrls: ['some-component.css']
})
export class SomeComponent { ... }

does external.js have to have a function declared as functionA , to be resolved correctly? Or does Angular resolve it by matching the signature of functionA when I define the initial call to functionA in SomeComponent? And where can I find this documented - I'm probably not searching correctly.

Answer 1

external.js library can expose some of its objects or functions globally. It means that after the library is loaded you can access the exports from wherever you like on that page with window.exportedFn() or just exportedFn() . it is not usual way to pollute global with your functions, so typescript needs to be told that the exported thing exists and probably provide its signature. if the signature is wrong you won't get any compile time errors, because it is not linked anyhow. TS just believes that the signature is right. You will just get a runtime error if you are using your function in a wrong way

How does Angular bind an external javascript library to a declared var?

Question

1 answers

solution1
2 ACCPTED 2020-09-02 22:54:55

How does Angular bind an external javascript library to a declared var?

Question

1 answers

solution1 2 ACCPTED 2020-09-02 22:54:55

solution1
2 ACCPTED 2020-09-02 22:54:55