title: Node/Express with Angular 2
body: <p>I am trying to build the ToDo app with the MEAN stack and I can't get the Express server to connect to Angular 2. I believe it has something to do with where I have my index.html view relative to the Angular installation, but I can't figure it out. </p>
  
  <p>The error I am getting is the HTML on index.html is rendering but not picking up the logic behind the  selector so my assumption is my  tags are wrong or something. I have tried every which way to adjust the tags, but I can't get it to work when running server.js. I know it is something silly but been working on this for a while.</p>
  
  <h2>Server.js</h2>
  
  <pre><code>    var express = require('express');
      var path = require('path');
      var bodyParser = require('body-parser');
  
      var index = require('./routes/index');
      var todos = require('./routes/todos');
  
      var app = express();
  
      // View Engine
      app.set('views', path.join(__dirname, 'views'));
      app.set('view engine', 'ejs');
      app.engine('html', require('ejs').renderFile);
  
      app.use(express.static(path.join(__dirname,'client'))); //folder where angular will be
  
      app.use(bodyParser.json());
      app.use(bodyParser.urlencoded({extended: false}));
  
      app.use('/', index);
      app.use('/api/v1/', todos);
  
      app.listen(3000, function(){
          console.log('Server started on port 3000...');
      });
  </code></pre>
  
  <h2>Index.html (in Views folder)</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Angular QuickStart&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="src/styles.css"&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/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  
      &lt;script src="src/systemjs.config.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.import('src/main.js').catch(function(err){ console.error(err); });
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;my-app&gt;Loading AppComponent FROM SERVER SIDE content here ...&lt;/my-app&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>app.module.ts</h2>
  
  <pre><code>    import { NgModule }      from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
  
      import { AppComponent }  from './app.component';
  
      @NgModule({
        imports:      [ BrowserModule ],
        declarations: [ AppComponent ],
        bootstrap:    [ AppComponent ]
      })
      export class AppModule { }
  
  app.component.ts
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `&lt;h1&gt;Hello {{name}}&lt;/h1&gt;`,
  })
  export class AppComponent  { name = 'Angular'; }
  </code></pre>
  
  <p>Below are the two errors I am getting in the console:</p>
  
  <blockquote>
    <p>GET <a href="http://localhost:3000/src/app/app.module" rel="nofollow noreferrer">http://localhost:3000/src/app/app.module</a> 404 (Not Found)
    scheduleTask @ zone.js:1960 ZoneDelegate.scheduleTask @ zone.js:349</p>
    
    <p>(404 Not Found) loading http:…pp.module" from
    <a href="http://localhost:3000/src/main.js" rel="nofollow noreferrer">http://localhost:3000/src/main.js</a>", originalErr:</p>
    
    <blockquote>
      <p>ZoneAwareError}</p>
    </blockquote>
  </blockquote>
  
  <p>Any help would be much appreciated, I can't get past this.</p>
  
  <hr>
  
  <p>It is not liking something about the reference in this line and getting lost somewhere in zone.js, but I can't get it right. I am using the starter kit from angular.io and using their file layout.</p>
  
  <pre><code>System.import('src/main.js').catch(function(err){ console.error(err); });
  </code></pre>