Угловая 6 обработка ответа 403 с новым RxJS

Question

ЭТА ПРОБЛЕМА:

У меня есть перехватчик:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private router: Router) {
  }


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const auth = this.injector.get(AuthenticationService);
    const authHeaders = auth.getAuthHeader();
    const authReq = request.clone({headers: authHeaders});

     return next.handle(authReq).do((event: HttpEvent<any>) => {
       if (event instanceof HttpResponse) {

       }
     }, (err: any) => {
       if (err instanceof HttpErrorResponse) {
         if (err.status === 403) {
           this.router.navigate(['login']);
         }
       }
     });
  }
}

это было в Angular 5, но теперь я перешел на 6, и это больше не работает.

Он говорит, что свойство 'do' не существует для типа Observable.

Также я попытался реализовать решение из этой темы: LINK не сработал.

В этой теме говорится, что это является следствием изменений в rxjs. После внесения предложенных изменений проблема остается (теперь с "нажмите" вместо "сделать")

вот раздел импорта:

// import {Observable} from "rxjs/Observable";
import {Observable} from "rxjs/Rx";
import { tap } from 'rxjs/operators';

Примечание: закомментированная строка также была опробована.

Answer 1

РЕШЕНИЕ:

1. запустите 'npm install rxjs-compat@6 --save';
2. импорт должен выглядеть так:

import {Observable} from 'rxjs';

import 'rxjs/add/operator/do';

3. в моем случае не было необходимости менять "do" -> "tap";

4. Если используется угловой материал, может потребоваться переустановка после выполнения первой команды.

Answer 2

Чтобы это работало для моего проекта (Angular 6, RxJS 6), мне пришлось внести следующие изменения:

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

И измените фрагмент сверху, чтобы он был:

(цепочка изменена на трубопровод, а "do" на "tap")

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private router: Router) {
  }


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const auth = this.injector.get(AuthenticationService);
    const authHeaders = auth.getAuthHeader();
    const authReq = request.clone({headers: authHeaders});

     return next.handle(authReq).pipe(
       tap((event: HttpEvent<any>) => {
         if (event instanceof HttpResponse) {

         }
       }, (err: any) => {
         if (err instanceof HttpErrorResponse) {
           if (err.status === 403) {
             this.router.navigate(['login']);
           }
         }
       })
   );
  }
}

Причиной этого являются некоторые недавние изменения в RxJS 6.

Используйте конвейер вместо цепочки в качестве нового синтаксиса оператора. Результат одного оператора передается другому оператору.

А также

Примечание. Некоторые операторы меняют имя из-за конфликта имен с зарезервированными словами JavaScript! К ним относятся: do -> tap, catch -> catchError, switch -> switchAll, наконец -> finalize.

Answer 3

Если ваша ошибка property 'do' doesn't exist on type Observableпопробуйте импортировать оператора. Поместите это поверх вашего файла:

import 'rxjs/add/operator/do';

Answer 4

Столкнулся с той же проблемой, вот как я решил

1. ng update (чтобы обновить все пакеты и сделать их совместимыми с angular 6)
2. npm install rxjs-compat @ 6 --save (установить обновленную версию rxjs)

3. замените следующие функции по всему коду, потому что они обновлены в rxjs

   do => tap, catch => catchError, switch => switchAll, finally => финализировать

для получения дополнительной информации проверьте журнал изменений rxjs.