2016-12-14 26 views
1

当我试图运行在浏览器中我在调试控制台窗口中收到以下消息应用程序:TypeScript导出和导入模块名称尚未加载上下文:_。使用要求([])

Module name "Person" has not been loaded yet for context: _. Use require([]) 

当然如果合并的.ts的内容文件的所有工作完美。

我创建Person.ts文件:

export interface IPerson { 
    firstName: string; 
    lastName: string; 
} 

export class Person implements IPerson { 
    private _middleName: string; 
    public set middleName(value: string) { 
     if (value.length <= 0) 
      throw "Must supply person name"; 
     this._middleName = value; 
    } 
    public get middleName(): string { 
     return this._middleName; 
    } 

    constructor(public firstName: string, public lastName: string) { }; 
    Validate() { 
     alert('test'); 
    } 
} 

app.ts文件:

import {Person} from "./Person" 

class Employee extends Person { 
    Validate() { 
     alert('new test inside Employee'); 
    } 
} 

let p1 = new Person("Shahar", "Eldad"); 
p1.Validate(); 
try { 
    p1.middleName = ""; 
} 
catch (err) { 
    alert(err); 
} 

let p2 = new Employee("Shahar", "Eldad"); 
p2.Validate(); 

document.body.innerHTML = p1.firstName + " " + p2.lastName; 

和最后我的index.html文件:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="windows-1255"> 
     <title>Insert title here</title> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js" data-main="app.js"></script> 
    </head> 
    <body> 

    </body> 
</html> 

和最后我的tsconfig.json文件:

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "noImplicitAny": true, 
     "removeComments": true, 
     "preserveConstEnums": true, 
     "sourceMap": true, 
     "target": "es6" 
    }, 
    "files": [ 
     "app.ts", 
     "Person.ts" 
    ] 
} 

我最初试图与目标ES5到transpile,然后我搬到了ES6(也是最后一次移动到tsconfig.json文件)

更新

我不喜欢@Louis,似乎工作 - 从我的问题中复制所有文件,只编辑tsconfig.json来保存amd和es5。我看不出复制前后有什么区别。奇怪的。

回答

2

使用"module": "commonjs"当您希望TypeJS编译器的输出由RequireJS加载时,肯定是错误的。你应该使用"module": "amd"。 (您可能需要改变改变目标回es5了。)

你得到的错误是因为"module": "commonjs",编译器将输出代码与此类似您import {Person} from "./Person"

var _Person = require("./Person"); 
var Person = _Person.Person; 

的呼吁require将导致RequireJS执行,但会失败,因为RequireJS不直接支持这样的代码。

define(function (require) { 
    var _Person = require("./Person"); 
    var Person = _Person.Person; 

    // Rest of the module. 
}); 

当您使用"module": "amd",编译器生成类似的代码此代码段和它的工作原理:该代码,如果它是在一个define这样上面会工作。

+0

现在人们尖叫的定义是这样的:) 不匹配匿名定义(模块:功能(需,出口,PERSON_1) –

+0

看到浏览器尝试什么文件,当你在网络选项卡中查看调试器加载? – Louis

+0

我看到index.html,require.min.js和app.js –

相关问题