Imported function from js file, doesn't run in TS file

Question

I'm trying to call a JS function inside a component in my TS file, but I'm getting an exception.

Component

import '../../../assets/js/gantt/ganttMaster.js';
export class TaskComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    var r = new GanttMaster();
  }
}

Error:

Error referecences error: GanttMaster is not defined

I imported already: import '../../../assets/js/gantt/ganttMaster.js'; — Jindo vu, Sep 04 '19 at 06:23
the import syntax seems to be incorrect. https://developer.mozilla.org/en-US/docs/Web/JvaScript/Reference/Statements/import — indolentdeveloper, Sep 04 '19 at 06:29

Harun Yilmaz · Answer 1 · 2019-09-04T08:35:48.003

3

You need to change the way you import the .js file:

import * as gantt from '../../../assets/js/gantt/ganttMaster.js';
export class TaskComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    var r = new gantt.GanttMaster();
  }
}

If you want to use GanttMaster among several components, you can import the .js file in angular.json and declare a constant in app.module.ts like declare const GanttMaster: any. Then you can use it in your application.

Hope this helps.

UPDATE

Alternatively, you can import it the way you've already done, but declare the function manually before the import:

declare const GanttMaster: any;
import from '../../../assets/js/gantt/ganttMaster.js';
export class TaskComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    var r = new GanttMaster();
  }
}

Ref: https://stackoverflow.com/a/37084553/1331040

edited Sep 04 '19 at 08:35

answered Sep 04 '19 at 06:28

Harun Yilmaz

8,281
3
24
35

actually, I try alreay but it not working, through error on webpackage like this: "TaskComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: _assets_js_gantt_ganttMaster_js__WEBPACK_IMPORTED_MODULE_18__.GanttMaster is not a constructor" – Jindo vu Sep 04 '19 at 08:30
Updated the answer. Can you try this one? – Harun Yilmaz Sep 04 '19 at 08:36
I'm try for your Update already, but it still got "ERROR ReferenceError: GanttMaster is not defined" – Jindo vu Sep 04 '19 at 08:48

score 0 · Answer 2 · answered Sep 04 '19 at 08:54

0

In my project i load a js file from assets, something like this:

add this JavaScript file in scripts array in angular.json file like as above you have added jquery library.

"scripts": [
  .....
  "src/assets/js/custom.js"
]

custom.js:

function myTest() {
    alert('Welcome to custom js');
}

You need declare in your component

declare const myTest: any;

answered Sep 04 '19 at 08:54

Miguel Pinto

523
2
8

I try it already, it same error above "ERROR ReferenceError: GanttMaster is not defined" – Jindo vu Sep 04 '19 at 09:10

Imported function from js file, doesn't run in TS file

2 Answers2