I have set up a custom error handler and in that, I want to redirect to a custom error page displaying the message "sorry, an error occurred......".
To achieve this, I added a route in my app-routing.module.ts file as follows:
import { NgModule } from '@angular/core';
import { PreloadAllModules, Routes, RouterModule } from '@angular/router';
import { NoContentComponent } from './no-content/no-content.component'
import { CustomErrorComponent } from './customerror/customerror.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'resources', loadChildren: 'app/educational-materials/educational-materials.module#EducationalMaterialsModule' },
{ path: 'administrative', loadChildren: 'app/dsc/dsc.module#DSCModule' },
{ path: 'ask-a-question', loadChildren: 'app/aaq/aaq.module#AAQModule' },
{ path: '**', pathMatch: 'full', component: NoContentComponent },
{ path: 'error', component: CustomErrorComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
In my global exception handler implementation, I have included the following code:
import { Router } from '@angular/router';
import { ErrorHandler, Injectable, Injector } from '@angular/core';
@Injectable()
export class GlobalExceptionErrorHandler implements ErrorHandler {
private router: Router;
constructor(injector: Injector) {
setTimeout(() => this.router = injector.get(Router));
}
handleError(error) {
console.log('globalExceptionHandler | handleError...');
this.router.navigate(['/error']);
}
}
However, when I try to navigate to the error page using this.router.navigate(['/error']), it redirects to a 404 error page instead of my CustomErrorComponent page.
If I remove the front slash from the navigation command, nothing happens. How can I ensure that the CustomErrorComponent is called correctly?
Edit:
This is the CustomErrorComponent code:
import { OnInit } from '@angular/core';
export class CustomErrorComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
And here is the HTML for the error page:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Sorry, an error occurred processing your request. The error has been logged.</h3>
</div>
</div>
</div>
Is it possible that the route is not configured in the correct place, causing the navigation issue?
Edit2: After noticing that the handleError function was being triggered multiple times, I enabled error logging and found an error stating "No component factory found for CustomErrorComponent." This led me to add entryComponents property to my CustomErrorComponent file:
import { OnInit, Component } from '@angular/core';
@Component({
entryComponents: [CustomErrorComponent]
})
export class CustomErrorComponent implements OnInit {
constructor() { }
ngOnInit() {
console.log('customErrorComponent | ngOnInit...');
}
}
But now, I am encountering the error "Component CustomErrorComponent is not part of any NgModule or the module has not been imported into your module" whenever I try to load the app. Where should I register my component to resolve this issue?