title: angular universal not reaching api
body: <p>I'm currently trying to build an angular universal app (whith <a href="https://github.com/angular/universal-starter" rel="nofollow noreferrer">https://github.com/angular/universal-starter</a>), but I'm facing a problem.
  When I try to reach my API my application doesn't seem to find it.</p>
  
  <p>This is the basic code I started to wrote:</p>
  
  <p>server.ts</p>
  
  <pre><code>import 'zone.js/dist/zone-node';
  import 'reflect-metadata';
  import { enableProdMode } from '@angular/core';
  
  import * as express from 'express';
  import { join } from 'path';
  import { readFileSync } from 'fs';
  
  var apiRoute = require("./routes/api");
  
  // Faster server renders w/ Prod mode (dev mode never needed)
  enableProdMode();
  
  // Express server
  const app = express();
  
  const PORT = process.env.PORT || 4000;
  const DIST_FOLDER = join(process.cwd(), 'dist');
  
  // Our index.html we'll use as our template
  const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
  
  // * NOTE :: leave this as require() since this file is built Dynamically from webpack
  const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
  
  // Express Engine
  import { ngExpressEngine } from '@nguniversal/express-engine';
  // Import module map for lazy loading
  import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
  
  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  app.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }));
  
  app.set('view engine', 'html');
  app.set('views', join(DIST_FOLDER, 'browser'));
  
  /* - Example Express Rest API endpoints -
    app.get('/api/**', (req, res) =&gt; { });
  */
  
  app.use("/api/", apiRoute);
  
  
  
  
  // Server static files from /browser
  app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
    maxAge: '1y'
  }));
  
  // ALl regular routes use the Universal engine
  app.get('*', (req, res) =&gt; {
    res.render('index', { req });
  });
  
  // Start up the Node server
  app.listen(PORT, () =&gt; {
    console.log(`Node Express server listening on http://localhost:${PORT}`);
  });
  </code></pre>
  
  <p>api.js</p>
  
  <pre><code>var express = require('express');
  var router = express.Router();
  
  router.get("/", function (req, res, next) {
      console.log("ok test");
      res.status(200).json({
          title: "Success",
          obj: "okSuccess"
      });
  });
  
  module.exports = router;
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import {BrowserModule} from '@angular/platform-browser';
  import {NgModule} from '@angular/core';
  import {RouterModule} from '@angular/router';
  
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import {TransferHttpCacheModule} from '@nguniversal/common';
  import { HttpClientModule } from '@angular/common/http';
  import { HomeService } from './home/home.service';
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
    ],
    imports: [
      HttpClientModule,
      BrowserModule.withServerTransition({appId: 'my-app'}),
      RouterModule.forRoot([
        { path: '', component: HomeComponent, pathMatch: 'full'},
        { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
        { path: 'lazy/nested', loadChildren: './lazy/lazy.module#LazyModule'}
      ]),
      TransferHttpCacheModule,
    ],
    providers: [
      HomeService
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>home.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HomeService } from './home.service';
  
  @Component({
    selector: 'app-home',
    template: `&lt;h3&gt;{{ message }}&lt;/h3&gt;`
  })
  export class HomeComponent implements OnInit {
    public message: string;
  
    constructor(private homeService: HomeService) { }
  
    ngOnInit() {
      this.message = 'Hello';
      console.log(this.homeService.apiCall());
     }
  }
  </code></pre>
  
  <p>home.service.ts</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { Headers, Http, Response } from "@angular/http";
  import { HttpClient, HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http';
  import 'rxjs/Rx';
  import { Observable } from "rxjs/Observable";
  
  
  @Injectable()
  export class HomeService {
  
      constructor(private httpClient: HttpClient) { }
  
      apiCall() {
          return this.httpClient.get&lt;any&gt;("/api")
          .map((response) =&gt; {
                  console.log(response);
                  return response;
              })
              .subscribe((response) =&gt; {
                  console.log(response);
                  return response;
              });
      }
  }
  </code></pre>
  
  <p>I start to build in development mode by typing <code>npm run start</code> but I then got the following error</p>
  
  <p><a href="https://i.stack.imgur.com/oBF39.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oBF39.png" alt="enter image description here"></a>
  I don't really understand why I got this error, it seems like express does not add my route.</p>