Как показать ошибку компонента, когда любая ошибка входит в угловой 6?

Question

Я пытаюсь показать компонент ошибки, когда есть ошибка в приложении. Я делаю interceptor, проверка, есть ли какая-либо ошибка, является ответом службы.Если да, он будет перенаправлен на error компонент, но в настоящее время он не перенаправляет, почему вот мой код https://stackblitz.com/edit/angular-ctwnid?file=src%2Fapp%2Ferror.intercepter.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpErrorResponse, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

import {catchError, map} from 'rxjs/operators';


@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private router: Router) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).catchError(
      (err: HttpErrorResponse) => {
        if (err.status === 401) {
          this.router.navigate(['/error']);
        }
        return Observable.throw(err);
      }
    );
  }
}

@NgModule({
  imports:      [ BrowserModule, 
  RouterModule.forRoot(routes),
  HttpClientModule,FormsModule ],
  declarations: [ AppComponent, 
  HelloComponent ,ErrorComponent],
  bootstrap:    [ AppComponent ],
  providers: [TestService,TestResolver,
  {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true
    }

  ]
})

Answer 1

Ваш ответ по ошибке 404 не 401 проверьте err в консоли.

return next.handle(req).catchError(
  (err: HttpErrorResponse) => {
    console.log(err, err.status);  //<==== check here it gives err.status is 404 not 401 as you posted
    if (err.status === 404) {
      this.router.navigate(['/error']);
    }
    return Observable.throw(err);
  }
);

Используйте pipe для обработки ошибки на catchError.

Свойство 'catchError' не существует для типа 'Observable>'.

, поэтому измените код на этот

return next.handle(req).pipe(catchError(  //<==== add pipe here
  (err: HttpErrorResponse) => {
    console.log(err, err.status);  //<==== check here it gives err.status is 404 not 401 as you posted
    if (err.status === 404) {
      this.router.navigate(['/error']);
    }
    return Observable.throw(err);
  })