Can't import operators using import 'rxjs/add/operator/switchMap';

RxJS version: version 5.5.2:

package.json

 "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/cdk": "^5.0.0-rc0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.2",
    "@swimlane/ngx-datatable": "^11.0.0",
    "angular2-moment": "^1.7.0",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.5.0",
    "font-awesome": "^4.7.0",
    "fuse.js": "^3.0.5",
    "ngx-infinite-scroll": "^0.6.1",
    "primeng": "^5.0.0-rc.0",
    "rxjs": "^5.4.3",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "^2.5.54",
    "@types/node": "~8.0.25",
    "codelyzer": "~4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.2.0",
    "ts-node": "~3.3.0",
    "tslint": "~5.8.0",
    "typescript": "=2.6.1"
  }

Code to reproduce: this is what my code looks like

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DeploymentsService } from './deployments.service';
import 'rxjs/add/operator/switchMap';

@Component({
    selector: 'app-deployment-details',
    templateUrl: 'deployment-details.component.html'
})

export class DeploymentDetailsComponent implements OnInit {
    private id: number;
    private sub: Observable<string>;
    constructor(private route: ActivatedRoute, private deploymentsService: DeploymentsService) { }

    ngOnInit() {
        this.route.params
            .switchMap(params => {
                const id = +params['id'];
                return this.deploymentsService.getDeploymentDetails(id);
            }).subscribe((response) => {
                console.log('response', response);
            });
    }
}

Expected behavior: I should be able to use switchMap operator

Actual behavior: An error gets thrown

DeploymentDetailsComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: this.route.params.switchMap is not a function at DeploymentDetailsComponent.ngOnInit (deployment-details.component.ts:21) at checkAndUpdateDirectiveInline (core.js:12095) at checkAndUpdateNodeInline (core.js:13598) at checkAndUpdateNode (core.js:13541) at debugCheckAndUpdateNode (core.js:14413) at debugCheckDirectivesFn (core.js:14354) at Object.eval [as updateDirectives] (DeploymentDetailsComponent_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339) at checkAndUpdateView (core.js:13508) at callViewAction (core.js:13858)

EDIT: just looked at my lockfile looks like it was installing version rxjs 5.5.2, fixing the version to 5.4.3 makes it work again

[paulpdaniels]

@khaledosman It’s not a breaking change AFAIK, the add operators weren’t removed…

My guess is that the Observable returned by params is not the one getting patched. You can do a quick test by wrapping it with Observable.from and see if it works then.

Observable.from(this.route.params).switchMap()

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.