title: Importing a JavaScript function in TypeScript and AngularJS 2
body: <p>I have a plugin that works with JavaScript. I want to use the function inside of my TypeScript component in AngularJS2. I have used different kinds of ways with no success. </p>
  
  <pre><code>@angular/cli: 1.0.0-rc.0, node: 7.7.2, @angular/core: 2.4.9
  </code></pre>
  
  <p>Let's assume I want to use the following function cube.js: </p>
  
  <pre><code>function cube(x) {
     return x * x * x;
  }
  const foo = Math.PI + Math.SQRT2;
  export default { cube, foo };
  </code></pre>
  
  <p>Using Type Definition approach, I create cube.d.ts as follows:</p>
  
  <pre><code>interface Cube {
     cube(x:number):number;
  } 
  export default Cube;
  </code></pre>
  
  <p>In my component, I have imported the function as follows:</p>
  
  <pre><code>import Cube from './cube';
  ...
  public myCube:Cube;
  console.log(myCube.cube(3));
  </code></pre>
  
  <p>But it gives me the following error:</p>
  
  <blockquote>
    <p>Error in :0:0 caused by: Cannot read property 'cube' of undefined
    TypeError: Cannot read property 'cube' of undefined
        at HComponent.webpackJsonp</p>
  </blockquote>
  
  <p>in tsconfig.json, allowJS is true (edited: "allowJs": true). @type module has already been installed. Still Can not read a simple JS function. </p>
  
  <p>Any idea?</p>