从js文件访问变量到ts

Question

Hi I'm trying to update an existing angular app from version 2 to 9, I'm starting by updating it to angular 4 then continuing later, I was able to update the packages that require updating, but now I'm getting an error that a variable is not defined here is the app structure

I have legend.component.js

var LegendSingleton=function(() {
               ...
               createInstance
               ...
               getInstance
               ...

main.component.js

var myExtObject = {
               ...
               legend : LegendSingleton.getInstance()
               ...

then in layoutindicateur.component.ts

              ...
var myExtObject = require('../../../assets/geoFunction/main.component.js');
some use of myExtObject 
              ...

also in angular-cli.json i declared those js files in scripts :

...
"assets/geoFunction/component/legend.component.js",
...
"assets/geoFunction/main.component.js"

I'm getting error Uncaught (in promise): ReferenceError: LegendSingleton is not defined I tried to import the legend js file in main js file using var LegendSingleton = require('../geoFunction/component/legend.component.js'); but got error of getInstance not a function

Answer 1

You normally just need to add the files to your angular-cli.json files, in the scripts section.

Then, in your layoutindicateur.component.ts file, declare myExtObject below the angular imports

//import ....
declare let myExtObject: any;

Then use it in your component file

myExtObject.legend.legendFunction()