0
richard@tryl.ai created
I've written a custom error handler that uses the Content Projection Service to display an error message to the user, using the AppendComponentToBody projection strategy. However I would like these error messages to behave much like the 404, page not found error. In that they remove the theme, and is the only component displayed.
How can I go about doing this?
import { ContentProjectionService, PROJECTION_STRATEGY } from '@abp/ng.core';
import { HttpErrorResponse } from '@angular/common/http';
import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { ErrorHandlingComponent } from './error-handling.component';
@Injectable()
export class RouteErrorHandler implements ErrorHandler {
constructor(
private readonly injector: Injector
) { }
handleError(error: Error): void {
if (error instanceof HttpErrorResponse)
return;
const contentProjection = this.injector.get(ContentProjectionService);
var errorMessage: any;
errorMessage = error.message;
if (errorMessage && (typeof errorMessage === 'string' || errorMessage instanceof String)) {
errorMessage = errorMessage.replace(/<[^>]*>/g, '');
}
contentProjection.projectContent(PROJECTION_STRATEGY.AppendComponentToBody(ErrorHandlingComponent, { code: 403, error: errorMessage }));
return;
}
}
Current Result:
Desired Result
1 Answer(s)
-
0
Hi richard,
You can also customize HttpErrorComponent via HTTP_ERROR_CONFIG injection token, you can check example on document
In your case you need to create a container for your error content and adding some style
Example
Template
<div id="abp-http-error-container" class="error" [style.backgroundColor]="backgroundColor" > <div class="row centered"> <div class="col-md-12"> <div class="error-template"> <h1>{{ statusText }} {{ title | abpLocalization }}</h1> <div class="error-details"> {{ details | abpLocalization }} </div> <div class="error-actions"> <a routerLink="/" class="btn btn-primary btn-md mt-2" ><span class="glyphicon glyphicon-home"></span> {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }} </a> </div> </div> </div> </div> </div>Style
.error { position: fixed; top: 0; width: 100vw; height: 100vh; z-index: 999999; } .centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }It'll cover all screen and center your error content
