Ошибка в Angular 6: 'filter' не существует в типе 'Observable<Event>' при использовании router.events

Чтобы отфильтровать события роутера в Angular 6+ с использованием последней версии RxJS, вы можете использовать следующий код:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

export class MyComponent implements OnInit {
    constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

    ngOnInit() {
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe(() => {
            console.log(this.activatedRoute.root);
        });
    }
}

В этом примере используется оператор pipe, что является правильным способом применения операторов к Observable. Не стоит пытаться осуществлять цепочку вызовов фильтра напрямую на самих событиях.

В вашем коде я не вижу, чтобы вы импортировали filter.

Для RxJS 6 вам нужно добавить импорт следующим образом:

import { filter } from 'rxjs/operators';

Затем вы можете использовать оператор filter в вашем коде так:

this.router.events.pipe(
  filter((event: Event) => event instanceof NavigationEnd)
).subscribe(res => console.log(res));

Убедитесь, что вы правильно импортировали оператор, иначе ваш код не будет работать.

Проблема с тем, что Activated Route не предоставлял мне URL, заставила меня попробовать следующее решение. Обратите внимание, что я использовал event['url'] вместо event.url.

import { filter } from 'rxjs/operators';
import { Router, NavigationEnd } from '@angular/router';

router.events.pipe(filter(event => event instanceof NavigationEnd))
    .subscribe(event => 
    {
        this.currentRoute = event['url'];          
        console.log(this.currentRoute);
    });

Таким образом, при обработке события NavigationEnd я смог получить текущий URL из события, используя синтаксис с квадратными скобками. Надеюсь, это поможет тем, кто столкнулся с аналогичной проблемой!