0

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"}

LongLT
  • 411
  • 6
  • 19
  • You simply have to redirect any url to your entry point which would be `/`. – Loïc Faure-Lacroix Dec 15 '17 at 17:38
  • @LoïcFaure-Lacroix did you mean add redirection inside express ? so, does it work with other url, /login for example ? – LongLT Dec 15 '17 at 17:43
  • It depends, if all of the interaction with the server is done using APIs, then yes. If some url match existing express handlers then those shouldn't be redirected. The easy way to handle this is to have anything dynamic have an API. Anything that should be handled by Angular should have the angular entry point returned. – Loïc Faure-Lacroix Dec 18 '17 at 16:59
  • @LoïcFaure-Lacroix, as I see, maybe separate server API and angular client is the best model for various purpose. But I still wonder how to combine them into 1 dist folder. If you could give an answer with your idea, please, I will mark your answer as the result of this question. It could help other newbie like me. – LongLT Dec 19 '17 at 15:05

0 Answers0