Running Angular2 app with Node Js server
<p>I'm starting a new project with Angular2 (client-side) and Node JS (server-side) technologies.</p>

<p>I've managed to create a RESTful API using <code>node</code> and <code>express</code>. When specific URL is entered, the matching Json response is displayed. So far so good.</p>

<p>Now I'm trying to integrate Angular 2 in the process. I've created the app.component. When the page is displayed, <strong>the component is not loaded</strong> and I got some 404 codes:</p>

<pre><code>Failed to load resource: 404 (not found) http://localhost:3000/node_modules/core-js/client/shim.min.js
...
Failed to load resource: 404 (not found) http://localhost:3000/systemjs.config.js
</code></pre>

<p>Here is my project structure:</p>

<pre><code>├── App
|    └── app.component.ts                //copied from Angular2/get-started
|    └── main.ts                         // copied from Angular2/get-started
├── dist                                 //contains generated JS files
├── node_modules
├── server                               // contains Server Typescript files
├── index.html                           // copied from Angular2/get-started
├── index.ts                             // server entry point
├── package.json
├── systemjs.config.js
├── tsconfig.json
├── typings.json
</code></pre>

<p>My package.json:</p>

<pre><code>{
  "main": "index.js",
  "scripts": {
    "start": "tsc &amp;&amp; concurrently \"npm run tsc:w\" \"node dist/js/index.js\" ",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "dependencies": {

    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "^3.3.6",

    "express": "^4.13.4",
    "mysql": "^2.5.4"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}
</code></pre>

<p>And my index.ts (server):</p>

<pre><code>var express = require('express');
var app = express();
var path = require('path');

var __projectRoot = __dirname + '/../../';

app.get('/', function (req, res) {
    res.sendFile(path.join(__projectRoot + '/index.html'));
});

console.log('Server up and running on http://localhost:3000/');
app.listen(server_port);
</code></pre>

<p>To conclude, index.html:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
    &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;!-- 1. Load libraries --&gt;
    &lt;!-- Polyfill(s) for older browsers --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        System.import('app').catch(function (err) {
            console.error(err);
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;!-- 3. Display the application --&gt;
&lt;body&gt;
&lt;h1&gt;index.html&lt;/h1&gt;
&lt;my-app&gt;Loading...&lt;/my-app&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>When loading <a href="http://localhost:3000/" rel="nofollow noreferrer">http://localhost:3000/</a>, I see "Index.html Loading..." but the component is not displayed. </p>

<p>On the official Angular2 website, they use <code>lite-server</code> dependency. I guess my server has something wrong, but I can't figure out how to make it work. Or is there a way to implement RESTful API using <code>Express</code> and <code>lite-server</code>?</p>