rxjs: Observble.pipe is not function

Question

I created a project using VS2017 angular2 template. I am trying to use angular/material in my angular2 App. There is an error

this._control.stateChanges.pipe is not a function

at MatFormField.ngAfterContentInit (form-field.es5.js:327)

Seems that the pipe function of Observable is missing. Is this my config problem or rxjs updated? Here is my Config:

 "dependencies": {
"@angular/animations": "5.0.0",
"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "5.0.0",
"@angular/compiler": "5.0.0",
"@angular/compiler-cli": "5.0.0",
"@angular/core": "5.0.0",
"@angular/forms": "5.0.0",
"@angular/http": "5.0.0",
"@angular/material": "^5.0.0-rc0",
"@angular/platform-browser": "5.0.0",
"@angular/platform-browser-dynamic": "5.0.0",
"@angular/platform-server": "5.0.0",
"@angular/router": "5.0.0",
"@ngtools/webpack": "1.8.0",
"@types/webpack-env": "1.13.0",
"angular-router-loader": "^0.7.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"devextreme": "^17.1.8",
"devextreme-angular": "^17.1.8",
"jquery": "3.2.1",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.2",
"typescript": "2.6.1",
"webpack": "https://registry.npmjs.org/webpack/-/webpack-2.5.1.tgz",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
}

Update I found that this problem is not only happen in the material, but all the Observable.

import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

loggedIn = new BehaviorSubject<boolean>(false);

ngOnInit() {
    this.loggedIn.pipe((p) => p);
}

run time error:

ERROR TypeError: this.loggedIn.pipe is not a function at AppComponent.webpackHotUpdate.362.AppComponent.ngOnInit (app.component.ts?a73a:23) at checkAndUpdateDirectiveInline (core.js:12094) at checkAndUpdateNodeInline (core.js:13597) at checkAndUpdateNode (core.js:13540) at debugCheckAndUpdateNode (core.js:14412) at debugCheckDirectivesFn (core.js:14353) at Object.eval [as updateDirectives] (AppComponent_Host.ngfactory.js:9) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14338) at checkAndUpdateView (core.js:13507) at callWithDebugContext (core.js:14739)

It all depends upon how you've installed the dependencies and upon the order of any changes to the dependencies in the package.json and re-installs/upgrades, etc. Run either yarn list rxjs or npm list rxjs to see what version(s) of RxJS are in your node_modules. — cartant
did you import pipe? Or imported complete rxjs into the file? — sabithpocker
@cartant I checked my rxjs version is 5.5.2 and material is 5.0.0-rc0 — LittleNewb
@sabithpocker Do I really need to do anything on the material js file? — LittleNewb

Richard Matsen Richard Matsen · Accepted Answer · 2017-11-18T08:31:42

The error message is coming from this block of code, at line 180 of material2/src/lib/form-field/form-field.ts

// Subscribe to changes in the child control state in order to update the form field UI.
this._control.stateChanges.pipe(startWith(null!)).subscribe(() => {
  this._validatePlaceholders();
  this._syncDescribedByIds();
  this._changeDetectorRef.markForCheck();
});

and this._control is set from the template at line 157

@ContentChild(MatFormFieldControl) _control: MatFormFieldControl<any>;

The first thing to check, did you import MatInputModule in app.module.ts?

import {MatInputModule} from '@angular/material';
@NgModule({
  imports: [
  ...
    MatInputModule
  ...
]

2nd thing to check, did you add the matInput directive,

<mat-form-field>
  <input matInput placeholder="Input">
</mat-form-field>

If that's ok, could you please add your template code to the question.

rxjs: Observble.pipe is not function

2 Answers