使用System.js在TypeScript中加载模块
我有一个Node.js &用TypeScript编写的AngularJS应用程序,我尝试使用System.js加载模块。使用System.js在TypeScript中加载模块
它工作正常,如果我只导入类来指定类型。 e.g:
import {BlogModel} from "./model"
var model: BlogModel;
然而,当我尝试实例变量与导入的类,我会在运行时异常。 e.g:
import {BlogModel} from "./model"
var model: BlogModel = new BlogModel();
Uncaught ReferenceError: require is not defined
我使用CommonJS的。我无法使用AMD,因为我有一个针对服务器端和客户端的项目。这就是我使用System.js在客户端加载模块的原因。
这是我System.js定义:
<script src="/assets/libs/systemjs-master/dist/system-polyfills.js"></script>
<script src="/assets/libs/systemjs-master/dist/system.src.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('classes.ts')
.then(null, console.error.bind(console));
System.import('model.ts')
.then(null, console.error.bind(console));
</script>
这是model.ts文件的内容:
import {User} from "./classes";
import {Post} from "./classes";
export class BlogModel{
private _currentUser: User;
private _posts: Post[];
get currentUser(){
return this._currentUser;
}
set currentUser(value: User){
this._currentUser = value;
}
get posts(){
return this._posts;
}
set posts(value: Post[]){
this._posts = value;
}
}
这是JS线产生异常:
var model_1 = require("./model");
Uncaught ReferenceError: require is not defined
任何帮助将深表感谢!
让我们试着简化事情有点:
1)配置您的systemjs如下:
System.defaultJSExtensions = true;
2)确保两个你classes.ts
和和bootstrap.ts
(这是新的文件,应创建,这将引导您的应用程序)文件被转发位于与index.html相同的目录中(index.html应该包含脚本来配置上述的systemjs)
3)In bootstrap.ts:
import {BlogModel} from "./model"
let model = new BlogModel();
console.log(model);
3)自引导与单一调用您的应用程序System.import:
System.import('bootstrap').then(null, console.error.bind(console));
尝试这些步骤,我想你会解决你的问题。
好吧,我做到了,但现在有另一个问题:我使用很多ts文件。我使用脚本元素加载它们,所以它们在bootstrap.ts完成加载模块之前加载,因此它们都会引发引用异常。我试图通过将所有文件内容复制到bootstrap.ts并删除脚本元素来临时解决它。但是,我仍然得到一个例外,因为我使用角。js,它试图找到在html元素的ng-app属性中声明的模块。顺便说一句,如果我把脚本元素放在我配置System.js的脚本元素下面,这没有帮助。 – Alon
删除除systemjs之外的所有脚本元素。所有的加载都将由模块加载器(systemjs)根据从引导模块开始的import语句来完成(在你的情况下它是bootstrap.ts)。这就是TS/JS中的所有模块。 – Amid
但是我该怎么处理像angular.js这样的第三方库? TypeScript编译器说:“TS2306:'angular-1.4.7'不是一个模块”。 – Alon
我假设model.ts包含'BlogModel'的定义,你可以分享代码,你也必须在主html页面导入systemjs,你能分享代码吗?理想情况下,你不必导入所有的模块,它会在需要的时候加载,所以System.import('classes.ts') .then(null,console.error.bind(console));应该就足够了,你也不需要ts扩展, –
@Madhu Ranjan我编辑了原始问题,并添加了model.ts的内容和System.js的脚本标记 – Alon