title: Serving Angular Build files from Express
body: <p>I currently have a barebones angular application, where I am trying to serve the bundled files from build of my angular client app through my express server. </p>
  
  <p>I am using ng-build to build the angular code and copy the contents of the dist folder into the dist folder of my server. It looks like the following </p>
  
  <p><a href="https://i.stack.imgur.com/TIAzB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TIAzB.png" alt="enter image description here"></a></p>
  
  <p>When I bootup the server, I can render the index.html but see the following in my console</p>
  
  <pre><code>GET /inline.bundle.js.map 404 8.875 ms - 159
  GET /polyfills.bundle.js.map 404 3.486 ms - 162
  GET /styles.bundle.js.map 404 2.860 ms - 159
  GET /vendor.bundle.js.map 404 2.695 ms - 159
  GET /main.bundle.js.map 404 2.956 ms - 157
  </code></pre>
  
  <p>To hook up the client to server, I have the following in <strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { APP_BASE_HREF } from '@angular/common';
  import { routing } from './app.routing';
  
  
  import { AppComponent } from './app.component';
  import {QueuedService} from "./queued.service";
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule
    ],
    providers: [{provide: APP_BASE_HREF, useValue:'/'}, QueuedService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>My <strong>queued.service.ts</strong> has the following </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  
  @Injectable()
  export class QueuedService {
    host:string = "http://localhost:8080";
  
    constructor(private http: Http){}
  
  }
  </code></pre>
  
  <p>At the moment, I am not sure if I am bridging the client and server properly.</p>
  
  <p><strong>EDITED</strong></p>
  
  <p>Here is my <strong>index.html</strong> </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Queued Application&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  
    &lt;style&gt;
      #signUp{
        margin-right: 30px;
      }
      #searchRestaurants{
        padding-left: 250px;
        padding-top: 50px;
      }
  
      #showRestaurantsList{
        display: none;
        margin-top: 20px;
      }
  
      #reservationPage{
        display: none;
        margin-top: 20px;
      }
  
      #navBar{
        min-height: 65px;
        background-color: #333;
      }
  
      body{
        background-color: aliceblue;
      }
  
      #appName{
        color: white;
        font-size: 20px;
        font-family: Helvetica;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;Loading...&lt;/app-root&gt;
    &lt;script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also here is my express server</p>
  
  <pre><code>export class Server {
  
      public app: express.Application;
      public RestaurantList: RestaurantListModel;
  
      /**
       * Bootstrap the application.
       *
       * @class Server
       * @method bootstrap
       * @static
       * @return {ng.auto.IInjectorService} Returns the newly created injector for this app.
       */
      public static bootstrap(): Server {
          return new Server();
      }
  
      /**
       * Constructor.
       *
       * @class Server
       * @constructor
       */
      constructor() {
          //create expressjs application
          this.app = express();
  
          //add routes
          this.routes();
  
          //configure application
          this.config();
  
          this.RestaurantList = new RestaurantListModel();
  
          //add api
          this.api();
  
      }
  
      /**
       * Create REST API routes
       *
       * @class Server
       * @method api
       */
      public api() {
          //empty for now
      }
  
      /**
       * Configure application
       *
       * @class Server
       * @method config
       */
      private config() : void {
          //add static paths
          // this.app.use('/', express.static(__dirname+'/dist/public'));
  
          //use logger middlware
          this.app.use(logger("dev"));
  
          //use json form parser middlware
          this.app.use(bodyParser.json());
  
          //use query string parser middlware
          this.app.use(bodyParser.urlencoded({
              extended: true
          }));
  
          //use cookie parker middleware middlware
          this.app.use(cookieParser("SECRET_GOES_HERE"));
  
          //use override middlware
          this.app.use(methodOverride());
  
  
          //catch 404 and forward to error handler
          this.app.use(function(err: any, req: express.Request, res: express.Response, next: express.NextFunction) {
              err.status = 404;
              next(err);
          });
  
          //error handling
          this.app.use(errorHandler());
      }
  
      /**
       * Create router
       *
       * @class Server
       * @method api
       */
      public routes() {
          let router: express.Router;
          router = express.Router();
  
          //IndexRoute
          /*
          router.post('/queued/restaurantList', (req, res) =&gt;{
              let jsonObj = req.body;
              console.log(jsonObj);
          });*/
  
          router.get('/queued/restaurantList',(req, res) =&gt; {
              console.log('List of the restaurants');
              this.RestaurantList.getAllItems(res);
          });
  
  
          //use router middleware
          this.app.use('/',router);
          this.app.use(express.static(__dirname));
  
      }
  }
  </code></pre>