I have recently upgraded to Angular 6 and rxjs 6, since the upgrade, the following code to set the page title dynamically is no longer working

    ngOnInit(): void {
      this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map((route) => {
         while (route.firstChild) {
           route = route.firstChild;
         };

         return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => this.titleService.setTitle(event['title']));
};

This gives me an error

this.router.events.filter is not a function

I tried wrapping the filter in a pipe like

this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))

But I get the error

this.router.events.pipe(...).map is not a function

I have imported the filter like

import { filter, mergeMap } from 'rxjs/operators';

What am I missing here?

I have recently upgraded to Angular 6 and rxjs 6, since the upgrade, the following code to set the page title dynamically is no longer working

    ngOnInit(): void {
      this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map((route) => {
         while (route.firstChild) {
           route = route.firstChild;
         };

         return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => this.titleService.setTitle(event['title']));
};

This gives me an error

this.router.events.filter is not a function

I tried wrapping the filter in a pipe like

this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))

But I get the error

this.router.events.pipe(...).map is not a function

I have imported the filter like

import { filter, mergeMap } from 'rxjs/operators';

What am I missing here?

• javascript
• angular
• rxjs6

Share Improve this question Follow edited Nov 19, 2018 at 18:42 Thabo asked May 19, 2018 at 14:17 ThaboThabo 1,42722 gold badges2222 silver badges4747 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This is the correct way to use pipeable/lettables.

this.router.events.pipe(
  filter(event => event instanceof NavigationEnd),
  map(() => this.activatedRoute),
  map((route) => {
    while (route.firstChild) {
      route = route.firstChild;
    };

    return route;
  }),
  filter((route) => route.outlet === 'primary'),
  mergeMap((route) => route.data),
).subscribe((event) => this.titleService.setTitle(event['title']));

In RxJs 6 all the operators are pipeable, which means they should be used inside pipe method call. More info about that here.

So the code that you have should bee something like:

   this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map((route) => {
         while (route.firstChild) {
           route = route.firstChild;
         };

         return route;
      }),
      filter((route) => route.outlet === 'primary'),
      mergeMap((route) => route.data)
).subscribe((event) => this.titleService.setTitle(event['title']));

If you have a larger app I suggest you have a look at the rxjs-tslint project as it will allow you to update automatically the code.