Angular2 redirect to custom error page

Question

I've implemented my custom error handler, and in that I want to re-direct to my custom error page that just says "sorry, an error occurred......".

I declared a route under my app-routing.module.ts file like this:

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 { }

And in my global exception handler, I've implemented this:

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']);
    }
}

In this file, when I place the forward slash in front of error, it re-directs to /error url, but says 404 page missing. (It obviously did NOT go to my CustomErrorComponent page).

If I remove the front slash from the this.router.navigate(['error']), then it does NOTHING.

How do I get this to call my CustomErrorComponent I have defined in my app-routing.module.ts file?

Edit:

Here's the CustomErrorComponent:

import { OnInit } from '@angular/core';

export class CustomErrorComponent implements OnInit {
    constructor() { }

    ngOnInit() {
    }
}

And the html for that 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>

Edit2: Is it possible that the route is not configured in the correct place? I would think the route would need to be defined "at the root", but it acts like it doesn't exist (hence not re-directing).

Edit3: When I mentioned in the comments that it was hitting my handleError function 20 times, I wasn't spitting out the error...well, I turned that on and look what shows up now (this occurs when my this.router.navigate(['/error']) contains the front slash):

No component factory found for CustomErrorComponent. Did you add it to @NgModule.entryComponents

So next, I added this to my CustomErrorComponent file:

import { OnInit, Component } from '@angular/core';

@Component({
    entryComponents: [CustomErrorComponent]
})

export class CustomErrorComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        console.log('customErrorComponent | ngOnInit...');
    }
}

Now I get this just loading the app:

Component CustomErrorComponent is not part of any NgModule or the module has not been imported into your module

Every place I've tried adding the CustomErrorComponent fails. Where should I be registering my component?

Answer 1

Main issue is that the routes var from the app-routing.module.ts has the entry to ** before the entry to error and the router will always go to **.

Moving the entry ** to the last place inside of routes will make the error entry reachable.

Also we found that after the updates the @Component({}) decorator of the CustomErrorComponent was removed.

Let's rollback that again and leave the CustomErrorComponent file with this code:

import { OnInit, Component } from '@angular/core';

@Component({
    selector: "customErrorComponent",
    templateUrl: './customerror.component.html'
})

export class CustomErrorComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        console.log('customErrorComponent | ngOnInit...');
    }
}

Also we must add the CustomErrorComponent to the entryComponents of your main module.

Just add entryComponents: [CustomErrorComponent] to your main Module.

That did the job, future readers can check the chat thread of the question for more information.