从js文件导入的函数，不在TS文件中运行

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

Answer 1

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

Answer 2

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;