אנגולר - 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, אבל אומר שהדף 404 חסר. (ברור שזה לא הלך לדף CustomErrorComponent שלי).

אם אני מסיר את הסלש הקדמי מ-this.router.navigate(['error']), אז זה לא עושה כלום.

איך אני גורם לזה לקרוא ל-CustomErrorComponent שהגדרתי בקובץ 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>

עריכה 2: האם ייתכן שהנתיב לא מוגדר במקום הנכון? אני מניח שהנתיב צריך להיות מוגדר "בשורש", אבל הוא מתנהג כאילו אינו קיים (ולכן לא מבצע הפנייה).

עריכה 3: כשציינתי בתגובות שזה פוגע בפונקציה שלי 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 נכשל. איפה אני צריך לרשום את הקומפוננט שלי?

תשובה #1

הבעיה העיקרית היא שהמשתנה routes מ-app-routing.module.ts מכיל את הקלט ל-** לפני הקלט ל-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] למודול הראשי שלך.

זה עשה את העבודה, הקוראים העתידיים יכולים לבדוק את שרשור השיחה של השאלה למידע נוסף.