RXJS with angular router - 'mergeMap' is not a function

Question

I have a problem with angular router and RxJS. Everything worked fine with angular 4.3.6 and RxJS 5.2.0.

But when I upgraded to:

Angular: 5.0.3
RxJS: 5.5.2

I am starting to get weird errors in different places of my application. For example, take a look at this piece of code.

Note. I have imported the mergeMap function, as you can see. And also I get no errors for the "bla" variable of type Observable, only for Router.events, which itself is observable.

Any ideas how to solve the problem?

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap';
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';

@Component({
  selector: 'pv-app',
  encapsulation: ViewEncapsulation.None,
  template: `
        ....
  `
})

export class PvComponent implements OnInit {

  constructor(private router: Router,
              private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
   let bla = Observable.of('hello');
   bla.mergeMap(x=>x); // Works without problems.

   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) => {
          // not relevant
        });
      };
}

I get the following error on the console.

PvComponent_Host.ngfactory.js:5 ERROR TypeError: 

this.router.events.filter(...).map(...).map(...).filter(...).mergeMap is not a function
    at PvComponent.ngOnInit (pv.component.ts:41)
    at checkAndUpdateDirectiveInline (core.js:12291)
    at checkAndUpdateNodeInline (core.js:13794)
    at checkAndUpdateNode (core.js:13737)
    at debugCheckAndUpdateNode (core.js:14609)
    at debugCheckDirectivesFn (core.js:14550)
    at Object.eval [as updateDirectives] (PvComponent_Host.ngfactory.js:9)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14535)
    at checkAndUpdateView (core.js:13704)
    at callWithDebugContext (core.js:14936)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14473)
    at ViewRef_.detectChanges (core.js:11496)
    at eval (core.js:5982)
    at Array.forEach (<anonymous>)
    at ApplicationRef.tick (core.js:5982)

Thanks Daniel

Answer 1

add this: import 'rxjs / add / operator / mergeMap';