Question

我有一个Node.js＆amp;用TypeScript编写的AngularJS应用程序，我正在尝试使用System.js加载模块。

如果我只导入一个类来指定一个类型，它工作正常。 e.g：

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

但是，当我尝试使用导入的类实例化变量时，我在运行时遇到异常。 e.g：

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

未捕获的ReferenceError：未定义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>

这是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");

未捕获的ReferenceError：未定义require

任何帮助都将深表感谢！

Answer 1

让我们尝试简化一下：

1）按如下方式配置systemjs：

System.defaultJSExtensions = true;

2）确保您的classes.ts和model.ts以及bootstrap.ts（这是您应该创建的新文件，将引导您的应用）文件转换为位于同一文件中directory as 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));

尝试以下步骤，我认为您将解决您的问题。

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

1 个答案: