Не могу связать node.js и angular 4. Как это решить?

Question

whiteleaf @whiteleaf

Не могу связать node.js и angular 4. Как это решить?

Мне нужно сделать MEAN Stack аппликацию, но не получается связать Node(express) и angular cli.

Я взял за основу слудеющее видео, но слегка его изменил. Вместо mongojs - mongoose, и пробую использовать angular cli, но что-то не получается.

выдает после ng build следующее:

GET http://localhost:3000/inline.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/polyfills.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/styles.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/vendor.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/main.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/inline.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/polyfills.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/styles.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/vendor.bundle.js net::ERR_ABORTED
localhost/:13 GET http://localhost:3000/main.bundle.js 404 (Not Found)

Вроде должно работать.

server.js

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');

var index = require('./server/routes/index');
var tasks = require('./server/routes/tasks');

var port = 3000;

var app = express();


// View engine
app.set('views',path.join(__dirname,'dist'));
app.set('view engine','ejs');
app.engine('html', require('ejs').renderFile);

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

// Body Parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

app.use('/', index);
app.use('/api', tasks);

app.listen(port, function(){
  console.log('Server is running on port: '+ port);
});

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "todo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Очень прошу помочь разобраться в этом.

Зарание спасибо!