$ ng new meanapp --routing=true

$ mongo

> use testdb;
> for (let i = 0; i < 20; i++) {
>  db.users.save({id:i, address: "address" + i});
> }

> db.users.find();
{ "_id" : ObjectId("59535f311db9be1c9ed3be14"), "id" : 0, "address" : "address_0@example.com" }
{ "_id" : ObjectId("59535f311db9be1c9ed3be15"), "id" : 1, "address" : "address_1@example.com" }
{ "_id" : ObjectId("59535f311db9be1c9ed3be16"), "id" : 2, "address" : "address_2@example.com" }
{ "_id" : ObjectId("59535f311db9be1c9ed3be17"), "id" : 3, "address" : "address_3@example.com" }
{ "_id" : ObjectId("59535f311db9be1c9ed3be18"), "id" : 4, "address" : "address_4@example.com" }
# ... 省略

$ npm install typescript --save-dev

$ npm install express body-parser --save

$ npm install --save mongoose

meanapp
└── server
    ├── bin
    ├── models
    └── routes

export const serverPort: number = 4300; // サーバのポート
export const mongoUri: string = "mongodb://localhost/testdb"; // DBの接続先

import * as http from 'http';
import { app } from '../app';
import { serverPort, mongoUri } from '../config';
import * as mongoose from 'mongoose';

const port = process.env.PORT || serverPort;
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => {
  mongoose.connect(mongoUri);
});

import * as express from 'express';
import * as path from 'path';
import { json, urlencoded } from 'body-parser';
import * as compression from 'compression';

import { usersRouter } from './routes/users';

const app: express.Application = express();
app.disable('x-powered-by');

app.use(json());
app.use(compression());
app.use(urlencoded({ extended: true }));

app.use(express.static(path.join(__dirname, '../client')));

app.use('/api/users', usersRouter);

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/index.html'));
});

export { app };

import { Request, Response, Router } from 'express';
import { usersModel } from '../models/users.model';

const usersRouter: Router = Router();

usersRouter.get('/', (request: Request, response: Response) => {
  usersModel.find({}, (err, users) => {
    if (err) throw err;
    response.json({users: users});
  });
});

export { usersRouter };

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist/server",
    "target": "es6",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

$ tsc -p ./server

$ node dist/server/bin/www.js

meanapp
└── src
    └── app
        ├── components
        └── services

$ cd src/app/services
$ ng g service CallExpressApi

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class CallExpressApiService {

  constructor(
    private http: Http
  ) { }

  getUsers() {
    return this.http.get("api/users").map(response => response.json());
  }
}

$ cd src/app/components
$ ng g component CallExpressApi

import { Component, OnInit } from '@angular/core';
import { CallExpressApiService } from '../../services/call-express-api.service';

@Component({
  selector: 'app-call-express-api',
  templateUrl: './call-express-api.component.html',
  styleUrls: ['./call-express-api.component.css'],
  providers: [CallExpressApiService]
})
export class CallExpressApiComponent implements OnInit {

  users: any;

  constructor(
    private callExpressApiService: CallExpressApiService
  ) { }

  ngOnInit() {
    this.callExpressApiService.getUsers().subscribe(u => {
      this.users = u.users;
    })
  }

}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CallExpressApiComponent } from './components/call-express-api/call-express-api.component';

const routes: Routes = [
  {path: 'users', component: CallExpressApiComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

{
  "/api": {
    "target": "http://localhost:4300",
    "secure": false
  }
}

$ ng serve --proxy-config proxy.conf.json

$ npm install --save-dev npm-run-all
$ npm install --save-dev nodemon

"scripts": {
    "start": "run-s tsc start:p",
    "tsc": "tsc -p ./server",
    "start:p": "run-p start:mongo watch:*",
    "start:mongo": "mongod --dbpath mongo/data",
    "watch:ng": "ng serve --proxy-config proxy.conf.json",
    "watch:tsc": "tsc -w -p ./server",
    "watch:nodemon": "nodemon dist/server/bin/www.js"
}

$ npm run start

"scripts": {
    "build": "run-p tsc build:ng",
    "build:ng": "ng build --prod"
}

$ npm run build

$ node dist/server/bin/www.js

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    CallExpressApiComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
+   HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

const server = http.createServer(app);
server.listen(port, () => {
  mongoose.connect(mongoUri);
});

(node:18302) DeprecationWarning: `open()` is deprecated in mongoose >= 4.11.0, use `openUri()` instead, or set the `useMongoClient` option if using `connect()` or `createConnection()`

$ ng eject
Your package.json scripts must not contain a start script as it will be overwritten.

  "scripts": {
    "ng": "ng",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
-   "start": "run-s tsc start:p"
    "tsc": "tsc -p ./server",
    "start:p": "run-p start:mongo watch:*",
    "start:mongo": "mongod --dbpath mongo/data",
    "watch:ng": "ng serve --proxy-config proxy.conf.json",
    "watch:tsc": "tsc -w -p ./server",
    "watch:nodemon": "nodemon dist/server/bin/www.js"
  },

  "scripts": {
    "ng": "ng",
    "build": "webpack",
    "test": "karma start ./karma.conf.js",
    "lint": "ng lint",
    "e2e": "protractor ./protractor.conf.js",
    "tsc": "tsc -p ./server",
    "start:p": "run-p start:mongo watch:*",
    "start:mongo": "mongod --dbpath mongo/data",
-   "watch:ng": "ng serve --proxy-config proxy.conf.json",
    "watch:tsc": "tsc -w -p ./server",
    "watch:nodemon": "nodemon dist/server/bin/www.js",
-   "start": "webpack-dev-server --port=4200",
+   "start": "run-s tsc start:p"
+   "watch:wp": "webpack-dev-server --port=4200",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
  },

"devServer": {
  "historyApiFallback": true,
+ "proxy": {
+   "/api": {
+     "target": "http://localhost:4300",
+     "secure": false
+   }
+ }
}