Unable to call javascript function from Typescript in Angular 6

Question

The javascript function (help) below is not being called from ngOnInit()?

In web console: ERROR ReferenceError: "help is not defined"

Would you know how this can be done?

src/assets/myjs.js:

function help() {
    console.log("hilfe");   
}

src/app/highlight.directive.ts:

import { Directive, ElementRef, OnInit } from '@angular/core';

declare function help() : any;

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {

  constructor(el: ElementRef) { 
    el.nativeElement.style.backgroundColor = 'yellow';
  }

  ngOnInit() {
    help();
  }

}

angular.json:

...

    "styles": [
         "src/styles.css"
    ],
    "scripts": [
        "src/assets/myjs.js"
    ],
},
...

You need to declare that this function exists in the global scope: https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html#global-functions, https://github.com/angular/angular-cli/wiki/stories-global-scripts#using-global-libraries-inside-your-app. But the main question is: why do you have that JS script and this global function in the first place? — JB Nizet, Aug 14 '18 at 06:34

score 2 · Answer 1 · answered Aug 14 '18 at 06:32

2

What about exporting your function like

module.exports.help = () => {
      console.log("hilfe");   
}

Then

const helper = require("./pathofyourfile");

answered Aug 14 '18 at 06:32

erdemgunenc

969
3
14
25

score 2 · Accepted Answer · answered Mar 22 '19 at 06:43

2

ES6/TS

Simply export your function Help in help.ts

export default function Help(){}

Import anywhere by

import Help from 'help'

answered Mar 22 '19 at 06:43

Boobalan

795
1
5
14

score 1 · Answer 3 · answered Aug 14 '18 at 09:02

@simon-reeves

"scripts": [ "src/assets/myjs.js" ],

I had to put testjs.js file into assets folder and applied path like below

moreover, make sure that assets section is defined an above and that file is exists by this path in sources

In addition, check content of the generated scripts.js file , cuz, it should contains your help function, e.g. in my case it's myalert function

hope it should help you

score 1 · Answer 4 · edited Mar 22 '19 at 06:33

There are two sections in the angular.json file for scripts. One is "architect:" the other is "test:". Is your scripts definition in both places?

    "scripts": [ "src/assets/myjs.js" ],

And I doubt this second point would make a difference, but I was guided by one post to create a sub-directory under assets called "js". Like this...

    "scripts": [ "src/assets/js/myjs.js" ],

You also might try an alert('hilfe') in your js function rather than a console.log()... although either should work.

Your setup seems pretty correct otherwise.

In additional to that you need to declare the same function in your component file. For example the function name is JavaScript file is help(), you need to declare it just above the component like: declare function help(): any; and then call the help function where you want to call in that file.

Unable to call javascript function from Typescript in Angular 6

4 Answers4

Linked