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']) 中删除前斜线，那么它什么也不做。

如何让它调用我在 app-routing.module.ts 文件中定义的 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>

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

Edit3：当我在 cmets 中提到它击中了我的 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

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

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

我们还发现，更新后CustomErrorComponent 的@Component({}) 装饰器被移除了。

让我们再次回滚并使用以下代码保留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] 添加到您的主模块即可。

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