Setting up TypeScript for node by using module=system is not working

Question

I tried to setup a restify project using typescript. After various tries I was able to create a working version by using "module: commonjs" in the tsconfig.json

I'd prefer to use system - but I wasn't able to set it up with systemjs

boot.ts

import {AppServer} from './app';

var _appServer = new AppServer();

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

app.ts

/// <reference path="typings/restify/restify.d.ts" />
import {Server, Response, Request, createServer} from 'restify';

export class AppServer {

  private server: Server;

  constructor() {
    this.init();
  }

  init() {
    this.server = createServer();
    this.server.get('/hello/:name', this.respond);

    this.server.listen(8080, () => {
      console.log('%s listening at %s', this.server.name, this.server.url);
    });
  }

  respond(req: Request, res: Response, next: Function) {
    res.send('hello ' + req.params.name);
    next();
  }

}

using "module": "system" in the tsconfig.json, I get the following output (even with import System = require('systemjs')in the boot.ts):

➜  server git:(master) ✗ npm run server                                                        

> [email protected] server /Users/maquh/Development/02_Backgular/server
> node boot.js

/Users/maquh/Development/02_Backgular/server/boot.js:1
(function (exports, require, module, __filename, __dirname) { System.register(['./app'], function(exports_1) {
                                                              ^

ReferenceError: System is not defined
    at Object.<anonymous> (/Users/maquh/Development/02_Backgular/server/boot.js:1:63)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Function.Module.runMain (module.js:457:10)
    at startup (node.js:138:18)
    at node.js:974:3

Transpiled boot.js

System.register(['./app'], function(exports_1) {
    var app_1;
    var _appServer;
    return {
        setters:[
            function (app_1_1) {
                app_1 = app_1_1;
            }],
        execute: function() {
            //System.import('./app.ts').
            _appServer = new app_1.AppServer();
        }
    }
});
//# sourceMappingURL=boot.js.map

UPDATE: I also tried another alternative version of boot.ts

var System = require('systemjs');

System.transpiler = 'ts';


System.import('./app.js').then(function(m) {
  console.log(m);
}, function(err) {
  console.error(err);
});

those leads to the following error:

[Error: ENOENT: no such file or directory, open '/Users/markusbellgardt/Development/02_Backgular/server/restify']

Answer 1

System uses ES6 module loaders which nodejs (to my knowledge) does not currently support, your initial use case was right where you were outputting to commonjs. If you want to use the ES6 style module resolution within node you will need to tell node how to load it such as:

https://www.npmjs.com/package/es6-module-loader

I use typescript in node fine but I use commonjs, I have used system in the browser before and it works fine when you have ES6 module loaders available such as SystemJs (JSPM).