使用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

任何帮助将深表感谢！

来源

2016-05-16 Alon

我假设model.ts包含'BlogModel'的定义，你可以分享代码，你也必须在主html页面导入systemjs，你能分享代码吗？理想情况下，你不必导入所有的模块，它会在需要的时候加载，所以System.import（'classes.ts'） .then（null，console.error.bind（console））;应该就足够了，你也不需要ts扩展， –

@Madhu Ranjan我编辑了原始问题，并添加了model.ts的内容和System.js的脚本标记 – Alon

让我们试着简化事情有点：

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));

尝试这些步骤，我想你会解决你的问题。

来源

2016-06-02 10:58:48 Amid

好吧，我做到了，但现在有另一个问题：我使用很多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

使用System.js在TypeScript中加载模块

回答

相关问题