Why am I getting error TS2339: Property 'scan' does not exist on type 'Subject'?

Question

EDIT: Actually, now I'm wondering. Did Rxjs move from chaining to piping in 6.x? See: https://stackoverflow.com/a/49811404/8207637

This is my first time using rxjs streams. I'm trying to create some fairly simple ones, but keep getting this error both from tslint and when building.

I've spent several hours googling and trying to figure it out. Seen several people recommend importing the operators directly. But this requires wrapping them in a pipe() in order to use them. I'd prefer to be able to chain them together.

I had already started putting together a StackBlitz example to play around with when I found that I may need to add rxjs-compat to resolve the issue. So I added rxjs-compat to the StackBlitz example e voila! The error went away.

So I figured if I added the package to my project, I could expect similar results. Nope!

Not sure how to resolve the issue. I've linked to the stackblitz, which shows the import working and the build working (the service file does nothing).

Stackblitz https://stackblitz.com/edit/angular-rxjs-init

Here's my project files (not from stackblitz)

package.json

{
  "name": "ng7-zprod",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.4",
    "@angular/cdk": "^7.2.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.2.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@ncstate/sat-popover": "^3.1.0",
    "core-js": "^2.5.4",
    "jquery": "^1.9.1",
    "popper.js": "^1.14.6",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.11.4",
    "@angular/cli": "~7.1.3",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@fortawesome/fontawesome-free": "^5.6.3",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "bootstrap": "^4.2.1",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

Service.ts

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { ZTask } from '../models/ztask';



const initialZTasks: ZTask[] = [];

interface IZTaskOperation extends Function {
  // tslint:disable-next-line:callable-types
  (ztasks: ZTask[]): ZTask[];
}

@Injectable({
  providedIn: 'root'
})
export class ZTasksService {
  newTasks: Subject<ZTask> = new Subject<ZTask>();

  ztasksList: Observable<ZTask[]>;

  ztasksListUpdates: Subject<any> = new Subject<any>();

  ztaskcreate: Subject<ZTask> = new Subject<ZTask>();

  constructor() {
    this.ztasksList = this.ztasksListUpdates
    .scan((ztasks: ZTask[],                     // this line is where I get the error
           operation: IZTaskOperation) => {
             return operation(ztasks);
           },
           initialZTasks)
    .publishReplay(1)
    .refCount();
  }
}

Your edit is correct. ‘scan’ is now an operator called within ‘.pipe()’ — dmcgrandle, Jan 12 '19 at 01:11
Thanks @dmcgrandle! Any idea why they decided to make that change? Is the functionality still the same? — Trevor, Jan 12 '19 at 01:12
The change was primarily for tree shaking. Lots of differences, I suggest reading the official docs, but this isn’t bad: https://www.academind.com/learn/javascript/rxjs-6-what-changed/ — dmcgrandle, Jan 12 '19 at 01:37

score 1 · Accepted Answer · answered Jan 12 '19 at 02:21

As @dmcgrandle said in his comment, Rxjs has moved away from chaining in the interest of changing their directory statement.

This actually cleans up the import statements quite a bit.

Supposedly it should have been fixed when I installed rxjs-compat, but it wasn't. Not sure why.

But using pipes is now the proper way. Like so:

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { ZTask } from '../models/ztask';
import { scan, publishReplay, refCount } from 'rxjs/operators';



const initialZTasks: ZTask[] = [];

interface IZTaskOperation extends Function {
  // tslint:disable-next-line:callable-types
  (ztasks: ZTask[]): ZTask[];
}

@Injectable({
  providedIn: 'root'
})
export class ZTasksService {
  newTasks: Subject<ZTask> = new Subject<ZTask>();

  ztasksList: Observable<ZTask[]>;

  ztasksListUpdates: Subject<any> = new Subject<any>();

  ztaskcreate: Subject<ZTask> = new Subject<ZTask>();

  constructor() {
    this.ztasksList = this.ztasksListUpdates.pipe(
    scan((ztasks: ZTask[],                     
           operation: IZTaskOperation) => {
             return operation(ztasks);
           },
           initialZTasks),
    publishReplay(1),
    refCount()
   )
  }
}

Why am I getting error TS2339: Property 'scan' does not exist on type 'Subject'?

1 Answers1