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: typescriptlang.org/docs/handbook/declaration-files/…, github.com/angular/angular-cli/wiki/…. But the main question is: why do you have that JS script and this global function in the first place? — JB Nizet
– JB Nizet, Commented Aug 14, 2018 at 6:34

Boobalan · Accepted Answer · 2019-03-22 06:43:59Z

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, 2019 at 6:43

Boobalan

8651 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

erdemgunenc · Accepted Answer · 2018-08-14 06:32:28Z

2

What about exporting your function like

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

Then

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

answered Aug 14, 2018 at 6:32

erdemgunenc

1,0073 gold badges15 silver badges26 bronze badges

Comments

Damir Beylkhanov · Accepted Answer · 2018-08-14 09:02:00Z

1

@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

answered Aug 14, 2018 at 9:02

Damir Beylkhanov

5553 silver badges13 bronze badges

Comments

Community · Accepted Answer · 2019-03-22 06:33:00Z

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.

Collectives™ on Stack Overflow

Unable to call javascript function from Typescript in Angular 6

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related