Failed connection handshake and 500 error when refreshing page - Abp Zero with Angular and .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