ngx-status-pages v0.0.20
ngx-status-pages
Easily create http error pages for angular applications.
Get Started
Installation
You can install this package locally with npm.
# To get the latest stable version and update package.json file:
npm i ngx-status-pages
Usage
StatusPagesModule
should be imported into your root module like so:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StatusPagesModule } from 'ngx-status-pages';
@NgModule({
declarations: [
AppComponent,
],
imports: [
StatusPagesModule.forRoot({interceptHttp:true}),
BrowserModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
After importing the StatusPageModule
in your root module, a default 404 page should be created. You can test this by visiting a route that does not exist and a 404 page should greet you. If you want to use a custom component for your 404 page, you can configure it in the forRoot
method:
StatusPagesModule.forRoot({interceptHttp:true,custom404:My404Component})
You can equally do this for other http status codes to configure custom pages.
Manually show a status page
If you want to display a status page at anytime in your application, you can do this with the StatusPagesService
service. In your component or service:
import { StatusPagesService } from 'ngx-status-pages';
constructor(public statusPage:StatusPagesService){
}
showStatusPage()
{
//show 404
this.statusPage.showStatusPage(404);
//show 500
this.statusPage.showStatusPage(500);
//show 401
this.statusPage.showStatusPage(401);
}
Http Interception
If you wish, you may configure the module to automatically intercept http requests and show the appropriate status page bases on the status code returned in an HttpRequest that failed:
StatusPagesModule.forRoot({interceptHttp:true})
If you'd rather implement the HttpInterceptor yourself, you can set the interceptHttp
attribute to false(or remove it from forRoot
as it is false by default), and then create a HttpInterceptor like so:
export class MyHttpInterceptor implements HttpInterceptor {
constructor(public statusPages:StatusPagesService){
}
intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
//handle http errors with appropriate status page,if set in forRoot
return next.handle(httpRequest).pipe(
tap({
next: (event)=>{
},
error:(error)=>{
if(error.status != 200){
this.statusPages.showStatusPage(error.status)
}
}
})
)
}
}