Angular v6, rxjs v6 error TS2339: Property 'pipe' does not exist on type 'OperatorFunction

Question

I have updated code that worked fine with Angular 5.5/rxJS5.5 using the new pipe method to Angular 6/rxJS6 using the rxjs-lint package and the following commands

npm i -g rxjs-tslint
rxjs-5-to-6-migrate -p tsconfig.json

Imports etc have been amended as expected but now the code that worked fine with v5 of Angular/5.5 of RxJS is erroring with the error:

 error TS2339: Property 'pipe' does not exist on type 'OperatorFunction<{}, {} | RouterEvent | RouteConfigLoadStart | RouteConfigLoadEnd | ChildActivati...'.

I have removed the rxjs6-compat package but it makes no difference. It's almost as if the build thinks it's got an earlier version of rxJS than v5.5. package.json used with npm install looks like this...

"dependencies": {
    "@angular/animations": "^6.0.2",
    "@angular/cdk": "^6.0.2",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/core": "^6.0.2",
    "@angular/flex-layout": "^6.0.0-beta.15",
    "@angular/forms": "^6.0.2",
    "@angular/http": "^6.0.2",
    "@angular/material": "^6.0.2",
    "@angular/platform-browser": "^6.0.2",
    "@angular/platform-browser-dynamic": "^6.0.2",
    "@angular/router": "^6.0.2",
    "@ngrx/effects": "^6.0.0-beta.3",
    "@ngrx/entity": "^6.0.0-beta.3",
    "@ngrx/router-store": "^6.0.0-beta.3",
    "@ngrx/store": "^6.0.0-beta.3",
    "@ngrx/store-devtools": "^6.0.0-beta.3",
    "@ngx-translate/core": "^9.0.1",
    "core-js": "^2.5.2",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.4",
    "material-design-icons-iconfont": "^3.0.3",
    "nsp": "^3.2.1",
    "passport": "^0.4.0",
    "passport-azure-ad": "^3.0.12",
    "rxjs": "^6.1.0",
    "zone.js": "^0.8.26"
  },

The import for rxjs operators are in rxjs6 format:

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

The statement that worked but now gives this error is:

// Change page title on navigation or language change, based on route data
merge(this.translateService.onLangChange, onNavigationEnd)
  .pipe(
    map(() => {
      let route = this.activatedRoute;
      while (route.firstChild) {
        route = route.firstChild;
      }
      return route;
    }),
    filter(route => route.outlet === 'primary'),
    mergeMap(route => route.data)
  )
  .subscribe(event => {
    const title = event['title'];
    if (title) {
      this.titleService.setTitle(this.translateService.instant(title));
    }
  });

What have I missed? Why is the pipe causing this error now where it was fine with rxJS 5.5?

Answer 1

Replace

merge(this.translateService.onLangChange, onNavigationEnd).pipe(

with this

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