Why Angular 2 doesn't load default app-root component?

Question

I'm trying to start Angular app generated via angular CLI, but it seems like the default app-root component doesn't load. Need to say, that I'm using proxy for connection between angular app and express server, and I'm running two scripts at the same time: node bin/www for express/node.js start and ng serve --proxy-config proxy.config.json for starting Angular and creating proxy connection, it looks like this (the part of package.json):

"scripts": {
  "start": "concurrently --kill-others \"node bin/www\" \"ng serve --proxy-config proxy.config.json\""
}

The index page loads fine, but it seems that app-root component (the default component, which was created from angular CLI ng new) doesn't loading: Here is my node.js/express uses and a route:

var express = require('express');
var router = express.Router();
var app = express();
var path = require('path');

app.use(express.static('./src/client/'));
app.use(express.static('./'));
app.use(express.static('./tmp'));
app.use('/*', express.static(path.resolve('src/client/index.html')));

router.get('*', function(req, res) {
    res.sendFile(path.resolve('src/client/index.html'));
});

module.exports = router;

And the structure of my project (if needed):

What did I miss? Why the default app-root component doesn't loading? (need to say, when I run ng serve, it starts the angular homepage as needed and the component is OK, so I think the problem is somewhere in express).

Thanks in advance

Answer 1

You should serve the contents of the dist/ folder after calling ng build --prod (the --prod is important, as the default is --dev). So, it would be something like this:

"scripts": {
  "start": "ng build --prod && node bin/www"
}

And, more or less adapting your express script:

app.use(express.static('./dist'));
app.use('/*', express.static(path.resolve('dist/index.html')));

router.get('*', function(req, res) {
    res.sendFile(path.resolve('dist/index.html'));
});