Hangfire Integration

1

Hi,

I integrated hangfire (http://hangfire.io) in a Radzen project. Goal is invoke some long running store procs in background and is working fine. Hangfire has a dashboard to see jobs executed and can be accessed using an address (usually /hangfire), Can you give me some directions about bypass application routes when address is root/hangfire or root/app/hangfire?

Thanks in advance,

2

Hi,

What happens now when you enter the /hangfire URL? Angular shouldn't process URLs that are not declared as routes. We are using something similar with the SSRS report viewer component when a proxy is enabled - a request is made to the server-side which bypasses the Angular router.

3

In my development box work fine, but when I publish in production box I get this error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'hangfire'
Error: Cannot match any routes. URL Segment: 'hangfire'

In production the site is in a subfolder (http://webadmin/myApp)

4

Are you using a link to the /hangfire API? Can you paste here the actual URL path that you use?

Typically when the path starts with / Angular doesn't check the route.

5

I'm using a page with a HTML5 component with this content:

<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" [src]="dbURL"></iframe>
</div>

In typescript code of page:

import { Component, Injector } from '@angular/core';
import { MonitorGenerated } from './monitor-generated.component';

// Import HttpClient and HttpParams which are needed to make HTTP calls.
import {HttpClient, HttpParams} from '@angular/common/http';
// Import the environment to get the server URL
import {environment} from '../../environments/environment';

import {DomSanitizer} from '@angular/platform-browser';

@Component({
selector: 'page-monitor',
templateUrl: './monitor.component.html'
})
export class MonitorComponent extends MonitorGenerated {
constructor(injector: Injector, private http: HttpClient, private sanitizer: DomSanitizer) {
super(injector);
}

dbURL;

getDashboard() {
const url = environment.geoMDiario.replace(/odata.*/, '');
return this.http
.get(${url}hangfire, {

  })
  .toPromise();

}

getDashboardURL() {
const url = environment.geoMDiario.replace(/odata.*/, '');
console.log("getDashboardURL ruta: " + url + "hangfire");
this.dbURL = this.sanitizer.bypassSecurityTrustResourceUrl(url + "hangfire");
return url + "hangfire";
}
}

This work fine in development box but, when I deploy in server I receive the router error message.

In the server I use an application in a subfolder and port is 8000 in pages and services,however in development box port is 8000 in pages and 5000 in services. In development if I use http://localhost:5000/hangfire I get the dashboard.

6

What is the dashboard URL that is logged in production? You can try constructing the full URL with domain name and port.

7

I tried, however angular router catch the address.

App is running in http://server:8000/basepath/ and hangfire dashboard url is http://server:8000/basepath/hangfire

Can I bypass router with something like an app.custom.routing.ts file? I found an article with a generic solution to external links that could be apply to this case:

Using the Angular Router to navigate to external links

Another way could by similar to solution applied to ssrsviewer. How I must modify code to use this?

Thanks for your great support !

8

We are using the same approach with the report viewer - when the URL starts with / the router doesn't get it. What happens if you try with /basepath/hangfire as URL?

That blog post shows how to use the router to navigate to external URL. To the best of my knowledge there isn't a way to the the angular router to ignore a url.

9

Also what happens if you enter the full hangfire production URL in a new browser window? Does it load as expected?

10

No, is redirected to http://server:8000/basepath/

11

This is probably the issue. In a new browser window there isn't any Angular router that could prevent the navigation to /basepath/hangfire. I suggest you check the hangfire configuration - it should work in a new browser window in production.

12

Looking other people comments with same problem. A solution is to make another app with hangfire dashboard only and no angular routing.

13

There are two things that make me think Angular isn't the problem in this case:

  1. It works in development
  2. In production it doesn't work even in a new browser window (where there isn't any Angular).

Also this issue seems to confirm that there isn't a problem between Hangfire and Angular.

So it is probably something in the production setup which prevents the hangfire dashboard from working. You can try adding the Startup.cs file to Radzen's ignore list and comment the code which checks for unknown URLS and redirects them to index.html (needed to support browser refresh of Angular routes).