Failed connection handshake and 500 error when refreshing page - Abp Zero with Angular and .Net Core - asp.net-core

Question

When I log into the application, angular changes the ulr to https://baseurl/app/home and the home page renders correctly. If I refresh the page I get a server (500) error. if I remove the /app/home part in the address bar and refresh, the page reloads without issues.
In the logs on the server side I find this:
Fail: Microsoft.AspNetCore.SignalR.HubConnectionContext[5]
Failed connection handshake.
I am running the angular client and the .net core application on two different servers, and CORS is set up correctly and the client app is able to connect to the api. The app works fine except when i refresh a page with an angular route.
The problem does not occur when I run the application locally on my development machine.
I have not changed any routing or signalr related code in the original Abp Zero template.
On server:
.NetCore 2.2
Abp Zero v 4.8
services.AddSignalR() is called in the startup.cs file and
app.UseSignalR(routes =>
{
routes.MapHub("/signalr");
});
is also called in the startup.cs file from the Configuration method. All this is standard tempate code.
In Angular client:
#aspnet/signalr v 1.1.4
The unchanged SignalRAspNetCoreHelper of which the initSignalR() is called in OnInit in the app.component.ts file:
import { AppConsts } from '#shared/AppConsts';
import { UtilsService } from '#abp/utils/utils.service';
export class SignalRAspNetCoreHelper {
static initSignalR(): void {
const encryptedAuthToken = new UtilsService().getCookieValue(AppConsts.authorization.encrptedAuthTokenName);
abp.signalr = {
autoConnect: true,
connect: undefined,
hubs: undefined,
qs: AppConsts.authorization.encrptedAuthTokenName + '=' + encodeURIComponent(encryptedAuthToken),
remoteServiceBaseUrl: AppConsts.remoteServiceBaseUrl,
startConnection: undefined,
url: '/signalr'
};
jQuery.getScript(AppConsts.appBaseUrl + '/assets/abp/abp.signalr-client.js');
}
}
The app-routing.module.ts is also unchanged:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { AppRouteGuard } from '#shared/auth/auth-route-guard';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UsersComponent } from './users/users.component';
import { TenantsComponent } from './tenants/tenants.component';
import { RolesComponent } from 'app/roles/roles.component';
import { ChangePasswordComponent } from './users/change-password/change-password.component';
#NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: AppComponent,
children: [
{ path: 'home', component: HomeComponent, canActivate: [AppRouteGuard] },
{ path: 'users', component: UsersComponent, data: { permission: 'Pages.Users' }, canActivate: [AppRouteGuard] },
{ path: 'roles', component: RolesComponent, data: { permission: 'Pages.Roles' }, canActivate: [AppRouteGuard] },
{ path: 'tenants', component: TenantsComponent, data: { permission: 'Pages.Tenants' }, canActivate: [AppRouteGuard] },
{ path: 'about', component: AboutComponent },
{ path: 'update-password', component: ChangePasswordComponent }
]
}
])
],
exports: [RouterModule]
})
export class AppRoutingModule { }
root-routing.module.ts (also unchanged):
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: '', redirectTo: '/app/home', pathMatch: 'full' },
{
path: 'account',
loadChildren: 'account/account.module#AccountModule', // Lazy load account module
data: { preload: true }
},
{
path: 'app',
loadChildren: 'app/app.module#AppModule', // Lazy load account module
data: { preload: true }
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class RootRoutingModule { }
Any ideas as to what is wrong? As I haven't changed anything, I wonder if the issue is with the environments/configurations?

Answer 1

in case anyone stumbled upon this question:
The problem does not occur when I run the application locally on my development machine.
The problem is related to the production server, the request is not being forwarded into your angular application properly
IIS
basically you need to install the url-rewrite and then configure a web.config file for the front-end site web.config configuration link 1 link 2
Apachi
link 1 link 2