how to make angular2 routes work with express in production mode - express

Question

I have 2 folder: server and src. Following: angular2-express-starter
Here is my REPO
server/app.ts:
import { routerUser } from "./routes/user";
const app: express.Application = express();
/* some stuff */
// api routes
// Set our api routes
app.use("/api/user", routerUser);
if (app.get("env") === "production") {
// in production mode run application from dist folder
console.log("PRODUCTION MODE");
app.use(express.static(path.join(__dirname, "/../client")));
}
/* some stuff */
src/app/app.router.ts
import { Routes } from '#angular/router';
import { PostsComponent } from './posts/posts.component';
export const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'user/profile'},
{ path: 'user/profile', component: PostsComponent }
];
And following here
I able to run server and client in separated process with proxy config:
{
"/api/*": {
"target": "http://localhost:4300",
"secure": false
}
}
Like this:
tsc -p ./server/debug
node dist-debug/server/bin/www.js
ng server --host 0.0.0.0 --proxy-config proxy.conf.json
But issue come in production mode: build both server and client into dist folder.
When I access localhost:4300, it redirect to localhost:4300/user/profile automatically, it's fine.
But if I access direct to localhost:4300/user/profile
The page response: {"error":{},"message":"Not Found"}