Only homepage works on angular site after ng build

Question

I'm working on an Angular 8 website. The site has multiple pages, www.site.com, www.site.com/foo and www.site.com/bar. When I use ng serve everything works perfectly. However when I run ng build, ng build --prod or ng build --aot the only page that works is the root page. www.mywebsite.com will work but www.mywebsite.com/foo and www.mywebsite.com/bar are a white screen with "File not found."

I have tried building with ng build, ng build --prod and ng build --aot.

I've also tried following directions from this When running ng build, the index.html does nothing?

Here are some routes that are in my app-routing.module.ts

const routes: Routes = [
  { path: '', component: HomepageComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'editorial', component:  EditorialArticleComponent},
  { path: 'article/:id', component: ArticleComponent },
];

Update: I am using nginx on an Ubuntu server

Answer 1

this can be done be set the HashLocationStrategy, in the root module you need to set LocationStrategy to HashLocationStrategy in the provider list after this change the url will look like this www.mywebsite.com/#/

{
 providers : [
      { provide: LocationStrategy, useClass: HashLocationStrategy },
 ]
} 

demo 🔥🔥

also check this 👉 server url rewrite