Search code examples
angularroutesproduction

Angular project problem with routing in production


I have developed an angular website: everything works fine in test running in my localhost:4200 but when I upload the website to my server I have a big problem with navigation:

this is my routing

const routes: Routes = [
  { path: ':id/main', component: MainComponent }
];

and as you can see I can access "MainComponent" with a param :/id in fact in localhost:4200 if I run https://localhost:4200/test/main I access the main component but when I enter http://mywebsite/test/main I get a 404 page not found. How can I solve?


Solution

  • If the app uses the Angular router, you must configure the server to return the application's host page (index.html) when asked for a file that it does not have.

    Clicking a link in an email, entering it in the browser address bar, or merely refreshing the browser while on the hero detail page — all of these actions are handled by the browser itself, outside the running application. The browser makes a direct request to the server for that URL, bypassing the router.

    A static server routinely returns index.html when it receives a request for http://www.sample.org/. But it rejects http://www.sample.org/heroes/42 and returns a 404 - Not Found error unless it is configured to return index.html instead.

    For more information about configuring serverm, Please visit the angular documentation site