Angular 8 - build production routes doesn't work

Question

Hello i'm deploying an app in Angular 8, when i work in dev , all works well even the routes but when i run "ng build --prod", it generates the build in /dist and i upload the aplication to the server, the index work fine but when i execute an href to a page (example: /login) i get not found page.

here are my routes

const routes: Routes = [
  { path: '', component: FullIndexComponent },
  { path: 'login', component: FullLoginComponent }
];

this only happens in production build, and i need to upload the build because i am working with cpanel.

thank you

Which technology are you using in the backend? how are you bundling your frontend and backend? I am pretty sure the issue is that the route is interpreted by the backend and not angular, you can solve that in your backend by redirecting all unmapped API calls to index.html — h0ss, Aug 06 '20 at 14:14
In the backend i'm using express.js and they dont have relation at all , the frontend is in Agular 8, the api works well, the problem is the routes , as you can see in the question i declare the routes in the file app-routing.module.ts and they work fine in dev but no in production. if you have any idea can you show me how? — YeisonM, Aug 06 '20 at 14:28
@YeisonM the problem is not the routes, as h0ss said, the issue is your backend server configuration, which needs to redirect to `index.html` — Poul Kruijt, Aug 06 '20 at 14:29
@YeisonM try this in your backend, it will solve your problem https://stackoverflow.com/questions/26349497/node-express-with-static-html-how-to-route-all-requests-to-index-html — h0ss, Aug 06 '20 at 14:36
thank you , but the backend is in a different server to frontend and even in different port. i can't use the API way, and i think that Angular can work by his own — YeisonM, Aug 06 '20 at 21:10

score 0 · Answer 1 · answered Aug 06 '20 at 21:18

I solved the problem of the routes using

<li><a class="btn button_menu" routerLink="/login">Acceder</a></li>

instead of

<li><a class="btn button_menu" href="/login">Acceder</a></li>

and the problem of th refresh configuring useHash in the app-routing.module.ts , like this :

imports: [RouterModule.forRoot(routes, {useHash: true})],imports: [RouterModule.forRoot(routes, {useHash: true})],

Angular 8 - build production routes doesn't work

1 Answers1