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';
