Laden von Modulen in TypeScript mit System.js

Question

Ich habe eine Node.js & AngularJS App geschrieben in TypeScript, in dem ich versuche, Module mit System.js zu laden.

Es funktioniert gut, wenn ich nur eine Klasse importieren, um einen Typ anzugeben. z:

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

Allerdings, wenn ich versuche, eine Variable mit einer importierten Klasse zu instanziiert, ich eine Ausnahme zur Laufzeit zu bekommen. z:

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

Uncaught ReferenceError: require is not defined

I Commonjs verwenden. Ich kann AMD nicht verwenden, weil ich ein Projekt sowohl für die Serverseite als auch für die Clientseite habe. Aus diesem Grund verwende ich System.js, um Module im Client zu laden.

Dies ist meine System.js Definition:

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

Dies ist der Inhalt der Datei 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; 
    } 
} 

Und das ist die JS Linie, die die Ausnahme erzeugt:

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

Uncaught ReferenceError: require is not defined

Jede Hilfe wird sein zutiefst geschätzt!

Answer 1

Lets versuchen, die Dinge ein wenig zu vereinfachen:

1) Konfigurieren Sie Ihren systemjs, wie folgend:

System.defaultJSExtensions = true; 

2) Vergewissern Sie sich, dass sowohl Ihre classes.ts und und bootstrap.ts (diese neue Datei ist, sollten Sie create, die Ihre App bootstrappt) Dateien werden transpiliert und befinden sich im selben Verzeichnis wie index.html (index.html sollte Skript enthalten, um systemjs wie oben angegeben zu konfigurieren)

3) In bootstrap.ts:

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

3) Bootstrap Ihre Anwendung mit einzelnen Anruf zu System.import:

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

diese Schritte versuchen, und ich denke, Ihr Problem zu lösen.