title: Running Angular2 app with Node Js server
body: <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>