Cannot find imported Module TypeScript

Question

I am trying to setup new TypeScript HTML project in VS 2015. I have set the typescript build settings to commonJs , es5 and also had the tsconfig.json , which is

   {
 "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
   }
}

Here is my main app.ts

  import t = require('./test');

class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
t: any;

constructor(element: HTMLElement) {
    this.element = element;
    this.element.innerHTML += "The time is: ";
    this.span = document.createElement('span');
    this.element.appendChild(this.span);
    this.span.innerText = new Date().toUTCString();
    this.t = new t.sample.test();
}

start() {
    this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
    this.t.hello();
}

stop() {
    clearTimeout(this.timerToken);
  }

 }

 window.onload = () => {
  var el = document.getElementById('content');
   var greeter = new Greeter(el);
   greeter.start();
};

Here is my imported module test.ts

   export module sample {
export class test {
    constructor() { }
    hello = () => {

        console.log("Test");
    }
  }
 }

Here is the html.

    <!DOCTYPE html>

    <html lang="en">
    <head>
     <meta charset="utf-8" />
      <title>TypeScript HTML App</title>
   <link rel="stylesheet" href="app.css" type="text/css" />
  <script src="test.js"></script>
  <script src="app.js"></script>


    </head>
   <body>
    <h1>TypeScript HTML App</h1>
   <div id="content"></div>
   </body>
   </html>

The project builds fine, but when i open that in browser chrome or IE, it throws error in console that it cannot find test and the file is never downloaded in to browser. Can any one suggest what I am missing here.

Answer 1

Here is my recommended fix...

Step One - compile for AMD (or UMD) instead of CommonJS:

"module": "amd",

Step Two - ditch the internal module here:

  export module sample {

Step Three - Add RequireJS (Available as a NuGet package)

Step Four - Use Require JS

<script src="require.js" data-main"app"></script>

Cannot find imported Module TypeScript

Question

1 answers

solution1
0 2015-10-21 19:26:33

Cannot find imported Module TypeScript

Question

1 answers

solution1 0 2015-10-21 19:26:33

solution1
0 2015-10-21 19:26:33