Angular 4 with MVC Routing refreshes page - asp.net-mvc

Question

I have an angular 4 app with dotnet core 2 and MVC. My home page loads fine, but when I click on a link that should cause client-side routing, I get routed to the page and then it refreshes. After the refresh I am on the right page but I am trying to figure out how to stop the server from refreshing the page (presumably returning a 404) and then the client side showing the site correctly.
Here is my routing config in startup.cs:
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });
});
and here is a sample of 2 routing configs in my angular app:
app module:
#NgModule({
declarations: [
AppComponent,
ExperienceComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AngularFontAwesomeModule,
PaymentsModule,
RouterModule.forRoot([
{ path: "home", component: ExperienceComponent },
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "**", redirectTo: "/home" }
]),
],
providers: [],
bootstrap: [AppComponent]
})
and Payments module:
#NgModule({
providers: [],
imports: [
RouterModule.forChild([
{ path: "payments", component: LandingComponent }
])
],
declarations: [
LandingComponent
]
})
export class PaymentsModule {
}
When I click on a link that takes me to /payments, I see "loading...." show up for a second and then LandingComponent's HTML is shown.

Answer 1

Try adding this to the request pipeline in Startup.cs under the Configure method:
app.Use(async (context, next) =>
{
await next();
if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
{
context.Request.Path = "/home/index";
await next();
}
});
Basically you're telling ASP.NET that any 404 error should be treated as though the request is staying on /home/index (or wherever your SPA code is - in my case it's usually just in /index.html)