Angular2重定向到自定义错误页面

我已经实现了我的自定义错误处理程序，因此我想重新定向到我的自定义错误页面，该页面只会说“对不起，发生了错误……”

我在app-routing.module.ts文件下声明了如下路由：

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

在我的全局异常处理程序中，我实现了：

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

在这个文件中，当我将正斜杠放在

error

前面时，它会重新指向/error url，但表示缺少404页。（它显然没有进入我的CustomErrorComponent页面）

如果我从

this.router.navigate（['error']）

中删除前斜杠，那么它什么也不做

如何让它调用我在app-routing.module.ts文件中定义的

CustomErrorComponent

编辑：

以下是CustomErrorComponent：

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

export class CustomErrorComponent implements OnInit {
    constructor() { }

    ngOnInit() {
    }
}

以及该页面的html：

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

现在，我只需加载应用程序即可获得以下信息：

组件CustomErrorComponent不是任何NgModule或 模块尚未导入到您的模块中

---

我尝试添加CustomErrorComponent的每个地方都失败了。我应该在哪里注册我的组件？

主要问题是

路由
应用程序路由.module.ts
的
路由
变量在
错误
条目之前有
**
条目，路由器将始终转到
**

将条目
**
移动到
路线中的最后一个位置
将使
错误
条目可到达

我们还发现在更新之后，
CustomErrorComponent
的
@组件（{}）
装饰器被删除

让我们再次回滚，并将
CustomErrorComponent
文件与以下代码一起保留：

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

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

export class CustomErrorComponent implements OnInit {
    constructor() { }

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

我们还必须将
CustomErrorComponent
添加到主模块的
entryComponents

只需将entryComponents:[CustomErrorComponent]
添加到主模块

这就成功了，未来读者可以查看该问题的聊天线程以了解更多信息。
您可以添加所有相关代码吗？为什么要使用setTimeout和injector获取路由器？当您从浏览器的导航栏直接转到应用程序的某个页面时会发生什么情况？@ThinkingMedia尝试注入路由器时存在循环依赖关系通过构造函数。这是在实现CustomErrorHandler时发现的一个“常见”问题。因此有很多问题…@ganders，将路由
**
移动到
路由
变量的最后一个位置，然后再次检查错误页面。
import { OnInit, Component } from '@angular/core';

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

export class CustomErrorComponent implements OnInit {
    constructor() { }

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