using systemjs on node.js (& Angular 2)

Question

Say I have a foo.ts and app.ts as follows:

foo.ts:

 export interface Foo {
     id: number; 
     label: string;
 };

app.ts:

 import {Foo} from './foo'
 var myfoo: Foo = { "id": 1, "label": "One" };
 console.log(JSON.stringify(myfoo));

After compiling, executing 'node app.js' from the command line runs as expected if I use "module"="commonjs" in my tsconfig.json. Cutting to the chase, what I would like to do is is use my Foo interface client-side with Angular 2, and server-side with node. Inconveniently, the Angular 2 quickstart I am modeling on here wants "module"="system" in tsconfig.json. This configuration causes an error when trying to run 'node app.js':

System.register([], function(exports_1) {
^
ReferenceError: System is not defined`

I have tried following the instructions for using systemjs with node on github, but at this point I am just mashing keys and could use some help. How do I either (a) get my app.ts code running on the server-side using systemjs, or alternately, (b) get the Angular 2 quickstart running with commonjs?

Are you sure you included "system.js" in your html ? Check your dev tools to be sure that all javascript files are loaded. — Fabien Sa
– Fabien Sa, Commented Dec 21, 2015 at 16:36
This is node.js on the server side, run from the command line. The client runs fine with the system.js and the Angular 2 quickstart tutorial. Except instead using lite-server like in the tutorial, I am using Node (+Express) to serve up the pages (+web services). But I can't get "system" to work on the server typescript code that wants to share interface Foo. What I am looking for is a simple typescript server-side node example that uses "system" instead of "commonjs". — Ken
– Ken, Commented Dec 21, 2015 at 21:54
To be clear, everything works fine if I write the server side in ES5 and traditional javascript. But I am hitting a wall trying to share typescript code on both the client and the server, with tsc -p . on the whole client&server project. — Ken
– Ken, Commented Dec 21, 2015 at 22:02
What I do is using gulp with to convert ts to js (with CommonJS), tsd (tsd install node express) for the "typings" and then running node. It's hard to see your problem without all the code. — Fabien Sa
– Fabien Sa, Commented Dec 22, 2015 at 21:31
The problem is the two module loading targets (system vs commonjs). And yes the solution appears to be to use different targets for the server and the client, managed with Gulp. What I was hoping was for a way to use system on the server code launched from the command line, as well as for the client, as in the Angular 2 quickstart tutorial. That way I can just have tsc -p on the whole project. All the code is in the OP. But it appears either that isn't possible, or no one cares because everyone uses Gulp. — Ken
– Ken, Commented Dec 22, 2015 at 23:06

Ken · Accepted Answer · 2015-12-22 23:14:39Z

2

I am going to wrap this up with an answer, even if the question hasn't been up-voted. The solution appears to be to use Gulp to compile the common typescript code (like interface Foo) differently for the client ("module"="system") and the server ("module"="commonjs"). If there is a way to compile the typescript code in the OP with "module"="system" I'd still like to know. But it appears to be kind of academic since everyone manages their project with Gulp or something similar anyway.

answered Dec 22, 2015 at 23:14

Ken

9871 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andi Giga Over a year ago

I use the same approach currently. But the downside is, that editors like visual studio mark dozens of errors with this approach.

Collectives™ on Stack Overflow

using systemjs on node.js (& Angular 2)

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related