I have a plugin that works with JavaScript. I want to use the function inside of my TypeScript ponent in AngularJS2. I have used different kinds of ways with no success.

@angular/cli: 1.0.0-rc.0, node: 7.7.2, @angular/core: 2.4.9

Let's assume I want to use the following function cube.js:

function cube(x) {
   return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export default { cube, foo };

Using Type Definition approach, I create cube.d.ts as follows:

interface Cube {
   cube(x:number):number;
} 
export default Cube;

In my ponent, I have imported the function as follows:

import Cube from './cube';
...
public myCube:Cube;
console.log(myCube.cube(3));

But it gives me the following error:

Error in :0:0 caused by: Cannot read property 'cube' of undefined TypeError: Cannot read property 'cube' of undefined at HComponent.webpackJsonp

in tsconfig.json, allowJS is true (edited: "allowJs": true). @type module has already been installed. Still Can not read a simple JS function.

Any idea?

I have a plugin that works with JavaScript. I want to use the function inside of my TypeScript ponent in AngularJS2. I have used different kinds of ways with no success.

@angular/cli: 1.0.0-rc.0, node: 7.7.2, @angular/core: 2.4.9

Let's assume I want to use the following function cube.js:

function cube(x) {
   return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export default { cube, foo };

Using Type Definition approach, I create cube.d.ts as follows:

interface Cube {
   cube(x:number):number;
} 
export default Cube;

In my ponent, I have imported the function as follows:

import Cube from './cube';
...
public myCube:Cube;
console.log(myCube.cube(3));

But it gives me the following error:

Error in :0:0 caused by: Cannot read property 'cube' of undefined TypeError: Cannot read property 'cube' of undefined at HComponent.webpackJsonp

in tsconfig.json, allowJS is true (edited: "allowJs": true). @type module has already been installed. Still Can not read a simple JS function.

Any idea?

• javascript
• angular
• typescript

• Try instancing it constructor(private myCube: Cube) {} in the constructor – SrAxi Commented Mar 20, 2017 at 15:02
• Incuding in constructor did not work either – Enayat Commented Mar 20, 2017 at 15:27

2 Answers 2

I found the answer.

My cube.js file:

"use strict"; 
class Cube {
    cube(x) {
     return x * x * x;
   }
}
export default Cube;

My cube.d.ts file

export default class Cube {
  cube(x: number): number;
}

In the ts ponent, I have:

/// <reference path="./cube.d.ts" />
import Cube from './cube';
...
        const my = new Cube();
        console.log(my.cube(10));

This works for me

import model = require('../../model');

And in my ponent

model.functionName();