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

Question

我已经实现了我的自定义错误处理程序，并且我想重定向到我的自定义错误页面，该页面只是说“对不起，发生了错误......”。

我在 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'])，那么它什么也不做。

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

编辑：

这是自定义错误组件：

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>

Edit2：是否有可能没有在正确的位置配置路由？我认为该路线需要“在根部”进行定义，但它的行为就像它不存在一样（因此不会重定向）。

Edit3：当我在评论中提到它击中我的handleError函数 20 次时，我没有吐出错误......好吧，我打开它并查看现在显示的内容（当我this.router.navigate(['/error'])包含前斜杠时会发生这种情况） ：

找不到 CustomErrorComponent 的组件工厂。您是否将其添加到 @NgModule.entryComponents

所以接下来，我将它添加到我的 CustomErrorComponent 文件中：

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

@Component({
    entryComponents: [CustomErrorComponent]
})

export class CustomErrorComponent implements OnInit {
    constructor() { }

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

现在我得到这个只是加载应用程序：

组件 CustomErrorComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中

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

Answer 1

主要问题是routes来自 的 var 的条目在 to 之前app-routing.module.ts有 to 的条目，并且路由器将始终转到。**error**

将条目移动**到内部的最后一个位置routes将使该error条目可访问。

我们还发现更新后@Component({})装饰器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]到您的主模块即可。

这样就完成了工作，未来的读者可以查看问题的聊天线程以获取更多信息。