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

我有一个Node.js和AngularJS应用程序，它是用TypeScript编写的，我正在尝试使用System.js加载模块

如果我只导入一个类来指定一个类型，它就可以正常工作。e、 g:

import {BlogModel} from  "./model"
var model: BlogModel;

但是，当我尝试用导入的类实例化变量时，在运行时会出现异常。e、 g:

import {BlogModel} from  "./model"
var model: BlogModel = new BlogModel();

未捕获引用错误：未定义require

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

这是产生异常的JS行：

var model_1 = require("./model");

未捕获引用错误：未定义require

---

我们将非常感谢您的帮助

让我们试着简化一下：

1） 按以下方式配置systemjs：

System.defaultJSExtensions = true;

2） 确保您的

classes.ts

和

model.ts

和

bootstrap.ts

（这是您应该创建的新文件，它将引导您的应用程序）文件都传输到index.html所在的同一目录中（index.html应该包含配置systemjs的脚本，如上所述）

3） 在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));

---

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

我假设model.ts包含

BlogModel

的定义，你能分享这方面的代码吗？你必须在主html页面中导入systemjs，你也能分享这方面的代码吗？理想情况下，您不必导入所有模块，它将在需要时加载，因此System.import（'classes.ts'）。然后（null，console.error.bind（console））；应该足够了，你也不需要ts扩展名，@Madhu Ranjan我已经编辑了原始问题，并添加了model.ts的内容和System.jsOK的脚本标记。我这样做了，但现在还有另一个问题：我使用了许多ts文件。我用脚本元素加载它们，因此它们是在bootstrap.ts加载完模块之前加载的，因此它们都会抛出引用异常。我试图通过将所有文件内容复制到bootstrap.ts并删除脚本元素来暂时解决这个问题。但是，我仍然遇到了一个异常，因为我使用angular.js试图查找在html元素的ng app属性中声明的模块。顺便说一句，如果我将脚本元素放在配置System.js的脚本元素下面，则没有任何帮助。请删除除systemjs之外的所有脚本元素。所有加载都将由模块加载器（systemjs）根据从引导模块开始的

import

语句完成（在您的情况下，它是bootstrap.ts）。这就是TS/JS中模块的全部内容。但是我应该如何处理angular.JS这样的第三方库呢？TypeScript编译器说：“TS2306:‘angular-1.4.7’不是模块”。它们也将由加载程序自动加载。唯一需要做的就是在配置中告诉systemjs在哪里查找他们的文件。查看此代表，例如：我发布了一个关于System.js的新问题，但没有得到答案。如果您也能看看这个问题，我将不胜感激：

System.import('bootstrap').then(null, console.error.bind(console));