1 votes

Export JS function to Angular6

I want to run a JS function in Angular6 to do this I am doing the add a windows interface.d.ts with their corresponding js but it gives me error in the Angle.

In the index.html I import the js:

 <script type="text/javascript" src="moduleActive.js"></script>

The file .js has:

export function calc () {
    var prog = new ActiveXObject("WScript.Shell");
    prog.run('Calc', 0, true);
}

And it is at the level of the index.html.

After in the path assets/ActiveX

I have created a file called moduleActive.d.ts

interface Window {
    calc: () => any;
  }

Finally in my component:

import { calc } from '../../../../assets/activeX/moduleActive';

.
.
.

 private ejecutar = function () {
     calc();
 }

The error is:

{
    "resource": "/d:/proyecto/src/app/core/components/main/main.component.ts",
    "owner": "typescript",
    "code": "2306",
    "severity": 8,
    "message": "El archivo 'd:/proyecto/src/assets/activeX/moduleActive.d.ts' no es un módulo.",
    "source": "ts",
    "startLineNumber": 4,
    "startColumn": 22,
    "endLineNumber": 4,
    "endColumn": 63
}

The error is in the line of the import of the component.ts ...

4voto

Pablo Lozano Points 23403

You've mixed two things:

  • Files .d.ts are statements which are "assumed" during compilation, are not modules. The only thing you do in your case is to say that there will be a global function calc that takes no parameters and can return anything (it is in the window object).

  • You tried to add a file js to the application by putting it directly in the index with a label , but will not be considered a module, and also the compiler of typescript does not know that it exists and can not be imported in the rest of the code.

I see two possible solutions:

  1. Copy that code to a file TS and use it importing it like any other file TS (it's easiest in this case).
  2. Keep it as JS, which will force you to...

    • To modify the file .js to make sure that the function is in a window, forget modules:

      window.calc = function () {
        var prog = new ActiveXObject("WScript.Shell");
        prog.run('Calc', 0, true);
      }
      
    • Make sure that the file is accessible in your application, adding it to the folder assets (the builder of Angular will not recognize it as part of the code, so that it is not added automatically).

    • Import it with the correct URL:

      <script type="text/javascript" src="/assets/moduleActive.js"></script>
      

0voto

Vicente Torres Points 76

I think it may be telling you that the file is not a module because in the name it has the word "module". But instead of putting it in the index.html, which is less clean in Angular, I would create a .ts file with the function you export and it would matter where I wanted to use it. That way I shouldn't give you trouble at first.

For example, you create a config folder and inside the "moduleActive.ts" file with the function to be exported.

0voto

Narshe Points 3

I think the problem is that your file has the extension .d.ts so TypeScript considers it a "definition" file and should not contain implementation.

Rename the file to `` and I shouldn't give you the error anymore.

Equally if you are using Angular 6 you don't need to import the file into HTML. When importing into your class file you should find the path and use the exported functions.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X