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

Question

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

But when I've upgraded to:

Angular: 5.0.3
RxJS: 5.5.2

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

Note: I've imported the 'mergeMap' function as you can see. And also I'm not getting errors for the "bla" variable of type Observable, only for the Router.events, which itself is an 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

I'm having exactly the same issue after upgrading to Angular 5 and RxJS 5.5.2. Could you figure out what's causing it? — Daniel Francisco Sabugal
I am facing the same issue. What is the solution for this? please help. I am quite new to Angular. — amidstCloud
I have resolved this using "import 'rxjs/Rx';" it might bring over some libraries that resolves this but not good for performance... but for now, I am happy that it resolved. — amidstCloud

Bhail Bhail · Accepted Answer · 2018-02-20T08:12:31

11

votes

add this :

import 'rxjs/add/operator/mergeMap';

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

1 Answers