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

Question

我已经实现了我的自定义错误处理程序，并且我想重定向到我的自定义错误页面，上面写着 "sorry, an error occurred......".

我在我的 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>

Edit2：有没有可能路由没有配置在正确的地方？我认为需要定义路线 "at the root"，但它的行为就像它不存在一样（因此不会重新定向）。

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

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

接下来，我将其添加到我的 CustomErrorComponent 文件中：

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

@Component({
    entryComponents: [CustomErrorComponent]
})

export class CustomErrorComponent implements OnInit {
    constructor() { }

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

现在我在加载应用程序时得到了这个：

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

我尝试添加 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] 添加到您的主模块。

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

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

Angular2 redirect to custom error page

typescript

angular2-routing

angular