Angular routing in a sub-folder not working

Question

I am deploying an Angular App in a sub-folder. Landing page works fine. But other routers are not working. Showing 404 error.

For Ex:

www.xxx.com/demo -> Loads landing page.

www.xxx.com/demo/about -> Showing 404 error.

I have tried below commands to build application.

ng build --prod --base-href /demo/

ng build --prod --base-href /demo/ --deploy-url /demo/ 

I have hosted my application here.

Am I missing something?

Answer 1

Seems that your server is not serving index.html for every call beyond the angular route, so it doesn't "allow angular to handle" the route change.

I guess, adding useHash: true to the routes import, would solve it.

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

This will add a hash (#) to your urls, making sure the routing stays client-side.