Загрузка модулей в TypeScript с использованием System.js

Question

У меня есть приложение Node.js & AngularJS, написанное на языке TypeScript, в котором я пытаюсь загрузить модули с помощью System.js.

Он отлично работает, если я импортирую только класс, чтобы указать тип. например:

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

Однако, когда я пытаюсь создать экземпляр переменной с импортированным классом, я получаю исключение во время выполнения. например:

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

Любая помощь w плохо быть глубоко оцененным!

Answer 1

Позволяет попытаться упростить вещи немного:

1) Настройте systemjs следующим образом:

System.defaultJSExtensions = true; 

2) Убедитесь, что оба ваши classes.ts и model.ts и bootstrap.ts (это новый файл, который вы должны create, который будет загружать ваше приложение), файлы передаются в том же каталоге, что и index.html (index.html должен содержать скрипт для настройки systemjs, как указано выше)

3) В bootstr ap.ts:

import {BlogModel} from "./model" 
let model = new BlogModel(); 
console.log(model); 

3) Bootstrap приложение с одним вызовом System.import:

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

Попробуйте эти шаги, и я думаю, что вы будете решать вашу проблему.