简体   繁体   English

找不到导入的模块TypeScript

[英]Cannot find imported Module TypeScript

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 我正在尝试在VS 2015中设置新的TypeScript HTML项目。我已将Typescript构建设置设置为commonJses5,并且还具有tsconfig.json ,即

   {
 "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 这是我导入的模块test.ts

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

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

Here is the html. 这是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. 该项目构建良好,但是当我在浏览器chrome或IE中打开该项目时,它将在控制台中引发错误,即找不到测试 ,并且文件从未下载到浏览器中。 Can any one suggest what I am missing here. 谁能建议我在这里所缺少的。

Here is my recommended fix... 这是我推荐的解决方案...

Step One - compile for AMD (or UMD) instead of CommonJS: 第一步 -为AMD(或UMD)而不是CommonJS进行编译:

"module": "amd",

Step Two - ditch the internal module here: 第二步 -在此处抛弃内部模块:

  export module sample {

Step Three - Add RequireJS (Available as a NuGet package) 第三步 -添加RequireJS(作为NuGet包提供)

Step Four - Use Require JS 第四步 -使用Require JS

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM