Loading modules in TypeScript using System.js

Question

I have a Node.js & AngularJS app written in TypeScript, in which I'm trying to load modules using System.js.

It works fine if I only import a class to specify a type. e.g:

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

However, when I try to instantiate a variable with an imported class, I get an exception at run-time. e.g:

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

Uncaught ReferenceError: require is not defined

I use CommonJS. I cannot use AMD because I have one project for both server side and client side. This is why I use System.js to load modules in the client.

This is my 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>

This is the content of model.ts file:

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

And this is the JS line that produces the exception:

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

Uncaught ReferenceError: require is not defined

Any help will be profoundly appreciated!

Solution

Lets try to simplify things a bit:

1) Configure your systemjs as following:

System.defaultJSExtensions = true;

2) Make sure that both your classes.ts and model.ts and bootstrap.ts (this is new file you should create, that will bootstrap your app) files are transpiled an located in the same directory as index.html (index.html should contain script to configure systemjs as specified above)

3) In bootstrap.ts:

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

3) Bootstrap your application with single call to System.import:

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

Try these steps and I think you will solve your problem.