Caricamento dei moduli in TypeScript utilizzando System.js

Question

I have a Node.js & App AngularJS scritta in TypeScript, in cui sto provando a caricare i moduli utilizzando System.js.

Funziona correttamente se si importa solo una classe per specificare un tipo. per esempio:

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

Tuttavia, quando cerco di istanziare una variabile con una classe importata, ottengo un'eccezione a run-time. per esempio:

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

Uncaught ReferenceError: require is not defined

io uso CommonJS. Non posso usare AMD perché ho un progetto per lato server e lato client. Questo è il motivo per cui utilizzo System.js per caricare i moduli nel client.

Questa è la mia definizione 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> 

Questo è il contenuto del file di 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; 
    } 
} 

E questa è la linea di JS che produce l'eccezione:

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

Uncaught ReferenceError: require is not defined

Qualsiasi aiuto sarà profondamente apprezzato!

Answer 1

Proviamo a semplificare le cose un po ':

1) Configurare i systemjs come segue:

System.defaultJSExtensions = true; 

2) Assicurarsi che sia il classes.ts e e bootstrap.ts (questo è nuovo file si dovrebbe create, che eseguirà il bootstrap della vostra app) i file sono transpiled e si trovano nella stessa directory index.html (index.html dovrebbe contenere script per configurare systemjs come specificato sopra)

3) In bootstrap.ts:

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

3) bootstrap l'applicazione con singola chiamata a System.import:

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

provare questi passi e penso che sarà risolvere il tuo problema.