Переход к пользовательской странице ошибок - оригинальная страница по-прежнему отображается

Question

Я пытаюсь реализовать очень простой обработчик ошибок в моем приложении Angular 5. Всякий раз, когда возникает ошибка, я просто хочу, чтобы она показывала пользовательскую страницу ошибки. Я создал свой собственный обработчик ошибок со ссылкой на эту статью .

import { ErrorHandler, Injectable, Injector} from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {

    constructor(private injector: Injector) {
     super();
    }
    handleError(error) {
      console.log("Custom error handler.");
      const router = this.injector.get(Router);
    router.navigate(["/error"]);
    throw(error);
    }
  }

Приложение вводит CustomErrorHandler. Однако он не полностью перенаправляет на старую страницу. Вместо этого появляется сообщение об ошибке «страница» (на данный момент просто «ошибка работает») над исходной страницей, которая вызвала ошибку. URL в адресной строке меняет с / ticket на / error, но отображаются как ошибки, так и представления / шаблоны заявок.

Я ссылался на этот вопрос и добавил свой ErrorComponent в массив entryComponents.

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PageNotFoundComponent
  ],
  entryComponents: [
    ErrorComponent
  ],
  imports: [
    HttpClientModule,
    FlexLayoutModule,
    FormsModule,
    BrowserModule,
    LoadingModule.forRoot({
      animationType: ANIMATION_TYPES.circleSwish,
      backdropBackgroundColour: 'rgba(0,0,0,0.1)',
      backdropBorderRadius: '4px',
      primaryColour: '#ffffff',
      secondaryColour: '#ffffff',
      tertiaryColour: '#ffffff'
    }),
    ReportingModule,
    SharedModule,
    MaterialModule,
    MatNativeDateModule,
    TicketModule,
    NgxResponsiveStackTableModule,
    AppRoutingModule
  ],

  providers: [TicketService, ReportService, UserService,
    httpInterceptorProviders, UploadService, {
      provide: ErrorHandler,
      useClass: CustomErrorHandler
    }],

  bootstrap: [AppComponent]
})
export class AppModule {

  constructor(router: Router) {

  }
}

Это не решило проблему. Шаблон, который я использую для вызова ошибки (для тестирования)

    <h2>Open Tickets</h2>
<div fxLayout="row">
        <mat-form-field>
                <mat-select #sort (change)="sortTickets(sort.value)" placeholder="Sort By.." >
                        <mat-option value="Property">Property</mat-option>
                        <mat-option value="Open">Open Date</mat-option>    
                </mat-select>
        </mat-form-field>
</div>
<div>
        <ngx-loading [show]="isLoading"></ngx-loading>
        <app-ticket-table *ngIf="!isLoading" [tickets]=tickets></app-ticket-table>
</div>

и соответствующий ему TypeScript.

  @Component({
  selector: 'app-ticket',
  templateUrl: './ticket.component.html',
  styleUrls: ['./ticket.component.scss']
})
export class TicketComponent implements OnInit {

  tickets : TicketModel[];
  isLoading :boolean;

  constructor(private ticketService : TicketService) { }

  ngOnInit() {
    this.isLoading = true;
  this.ticketService.getUserTickets().subscribe((res)=> {
    this.tickets = res;
    this.isLoading = false;
  });
  }

У меня есть перехватчик, который отвечает на ошибки Http. Я попытался временно отключить его, если это вызывало проблему, но это не помогло.

export class LoggingInterceptor implements HttpInterceptor {

constructor(private authService: AuthService) {    }

intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    return next.handle(req)
        .catch((err: HttpErrorResponse) => {             
            console.log(err);
            return _throw(err.message);
        });

};
}

Маршрутизация для моего приложения проста:

const routes: Routes = [
  {path: "error", component: ErrorComponent},
{  path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
exports: [RouterModule]
})
export class AppRoutingModule { }

и для модуля TicketModule:

const routes: Routes = [{
  path: "ticket",

  canActivate: [UserGuard],
  children: [
    { path: "new", component: TicketAddComponent },
    { path: ":id", component: TicketDetailComponent },
    { path: "", component: TicketComponent }

  ]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TicketRoutingModule { }

У меня есть только одна розетка маршрутизатора (в моем корневом компоненте приложения)

  <mat-toolbar>    
            <a class="navbar-brand" href="">
                <img src="../assets/logo.png" />
            </a>
            <span class="fill-space"></span>
            <div  fxHide.lt-md=true  *ngIf="authService.isLoggedIn" >
                    <a mat-button routerLink="/">Home</a>
                    <a mat-button routerLink="/ticket">View Tickets</a>
                    <a mat-button routerLink="/ticket/new">New Ticket</a>
                    <a mat-button routerLink="/report">Reports</a>           
            </div>
    <div fxHide.gt-sm=true  *ngIf="authService.isLoggedIn">

                <mat-menu   #appMenu="matMenu">
                        <a mat-button routerLink="/">Home</a>
                        <a mat-button routerLink="/ticket">View Tickets</a>
                        <a mat-button routerLink="/ticket/new">New Ticket</a>
                        <a mat-button routerLink="/report">Reports</a>     
                      </mat-menu>
                      <button mat-icon-button [matMenuTriggerFor]="appMenu">
                            <mat-icon>more_vert</mat-icon>
                          </button>
    </div>

    </mat-toolbar>
<div id="content" class="container  mat-typography ">
<router-outlet></router-outlet>
</div>

Любой совет будет оценен. Спасибо.