typescript - RXJS med Angular-router - 'mergeMap' är inte en funktion


Jag har ett problem med att använda angular router och RxJS. Allt fungerade bra med angular 4.3.6 och RxJS 5.2.0.

Men när jag har uppgraderat till:

Angular: 5.0.3
RxJS: 5.5.2

Jag börjar få konstiga fel på olika ställen i min applikation. Till exempel, ta en titt på den här kodsnutten.

Notera: Jag har importerat funktionen 'mergeMap' som du kan se. Och jag får inte fel för variabeln 'bla' av typen Observable, endast för Router.events, som i sig är en Observable.

Några idéer om hur man löser problemet?

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
        });
      };
}

Jag får följande fel på konsolen.

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)

Tack, Daniel

Svar #1

lägg till detta :

import 'rxjs/add/operator/mergeMap';

Relaterade artiklar