TS2339 error occurs when the property 'takeUntil' is not found on the type 'Observable<Foo>' along with various other rxjs version 6 errors

Question

TS2339 error occurs when the property 'takeUntil' is not found on the type 'Observable<Foo>' along with various other rxjs version 6 errors

After recently updating numerous packages in my Angular project, I encountered several compilation errors.

Previous package.json:

{
  "name": "data-jitsu",
  "version": "0.0.0",
  ... (old dependencies listed here)
}

New package.json:

{
  "name": "data-jitsu",
  "version": "0.0.0",
  ... (new dependencies listed here)
}

Upon running npm install using the updated package.json file followed by ng serve, multiple TS compilation errors were thrown:

ERROR in src/app/all-matches/all-matches.component.ts(35,39): error TS2339: Property 'takeUntil' does not exist on type 'Observable'. ... (more errors listed)

Much of these errors appeared to be related to rxjs, given that I upgraded from v5 to v6 which caused compatibility issues.

In an attempt to resolve the errors, I installed rxjs-compat with

npm install rxjs@6 rxjs-compat@6 --save

. However, this solution did not eliminate any of the existing errors.

Following recommendations, I ran ts-lint using the commands below for automation:

npm i -g rxjs-tslint
rxjs-5-to-6-migrate -p [path/to/tsconfig.json]

The output indicated no valid rules specified for JavaScript files, suggesting potential misuse of TypeScript conventions when working with rxjs.

Starting troubleshooting from the first error about 'takeUntil' method not existing on 'Observable', it became clear that module import errors like 'cannot find module foo' were prevalent throughout .ts files.

For instance, some import errors included: "@angular/core", "firebase/app", and "@angular/router". These problems are noticeable within app.module.ts as well.

If anyone has insights or solutions to address these importing issues, your assistance would be greatly appreciated!

angular typescript rxjs rxjs5 rxjs6

Answer 1

Answer №1

You might still be using operators in the old rxjs 5.x style.

Here is a summary of the changes in rxjs6:

The imports have changed. You now need to import Observable, Subject, BehaviorSubject, etc., and methods that used to be in 'rxjs/add/observable' differently. Now everything must be imported from 'rxjs'. For example:
```
import {Observable, Subject, of, from} from 'rxjs'
```
;

Additionally, all operators like map, concat, do (now called tap), etc., should be imported from rxjs/operators. So something like:
```
import { map, tap, takeUntil} from 'rxjs/operators';
```
Your imports seem correct.
You should use pipes instead of chaining your operators. For example, in your all-matches.components.ts file, line 33, if you replace:
```
this.authService.getCurrentUser().takeUntil(this.ngUnsubscribe).subscribe(user=>{
```
with
```
this.authService.getCurrentUser().pipe(takeUntil(this.ngUnsubscribe)).subscribe(user=>{
```
the takeUntil error will disappear.

Similarly, instead of Observable.of(true), you should import the of operator and use of(true).

You can try this in your authorization.service.ts file. It will resolve all the "of errors."

You may want to investigate this further.
If you are encountering import errors with custom files, double-check whether the files actually exist. For instance:
```
ERROR in src/app/app.module.ts(6,38): error TS2307: Cannot find module './api-keys'
```
related to
```
import { masterFirebaseConfig } from './api-keys'
```
this error is normal if the file './api-keys' does not exist. PS: if keys are not stored in git, you may not encounter these errors.
Regarding AngularFire5.0, make sure to use one of the operators :
```
Db.list('items').subscribe(console.log)
```
should be updated to (using the valueChanges method) :
```
Db.list<Item>('items').valueChanges().subscribe(console.log)
```
For more information, visit: https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

Best of luck!

Answer 2

You might still be using operators in the old rxjs 5.x style.

Here is a summary of the changes in rxjs6:

The imports have changed. You now need to import Observable, Subject, BehaviorSubject, etc., and methods that used to be in 'rxjs/add/observable' differently. Now everything must be imported from 'rxjs'. For example:
```
import {Observable, Subject, of, from} from 'rxjs'
```
;

Additionally, all operators like map, concat, do (now called tap), etc., should be imported from rxjs/operators. So something like:
```
import { map, tap, takeUntil} from 'rxjs/operators';
```
Your imports seem correct.
You should use pipes instead of chaining your operators. For example, in your all-matches.components.ts file, line 33, if you replace:
```
this.authService.getCurrentUser().takeUntil(this.ngUnsubscribe).subscribe(user=>{
```
with
```
this.authService.getCurrentUser().pipe(takeUntil(this.ngUnsubscribe)).subscribe(user=>{
```
the takeUntil error will disappear.

Similarly, instead of Observable.of(true), you should import the of operator and use of(true).

You can try this in your authorization.service.ts file. It will resolve all the "of errors."

You may want to investigate this further.
If you are encountering import errors with custom files, double-check whether the files actually exist. For instance:
```
ERROR in src/app/app.module.ts(6,38): error TS2307: Cannot find module './api-keys'
```
related to
```
import { masterFirebaseConfig } from './api-keys'
```
this error is normal if the file './api-keys' does not exist. PS: if keys are not stored in git, you may not encounter these errors.
Regarding AngularFire5.0, make sure to use one of the operators :
```
Db.list('items').subscribe(console.log)
```
should be updated to (using the valueChanges method) :
```
Db.list<Item>('items').valueChanges().subscribe(console.log)
```
For more information, visit: https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

Best of luck!

TS2339 error occurs when the property 'takeUntil' is not found on the type 'Observable<Foo>' along with various other rxjs version 6 errors

Answer №1

Similar questions

Tips for implementing a search filter in a select dropdown menu using Angular

Angular 2 encountered a fatal error: Issues with parsing the template:

Implement Angular in a non-conventional Angular-based venture

Troubleshooting a CSS problem within mat-autocomplete component in Angular 7

Create a versatile multi-autocomplete-chips input in Angular 9 using FormArray and encounter the issue: ERROR TypeError: control.registerOnChange is not a

Devextreme experiences the submission of multiple forms simultaneously

What steps are needed for an Angular application to connect to a database using a local server?

Retrieve the specified data stored within the ngValue attribute of an Angular 4 component

Tips for converting an online HTML document into a string within an Angular framework

Utilizing the menu in Angular7 to trigger a route switch is successful; however, attempting to copy and paste a route always redirects to

What is the best way to deliver a downloaded document to a client using NodeJS Express?

Any ideas for handling ProtractorJS timeouts while clicking an element?

Limiting the number of characters in a PrimeNG Quill editor

Troubleshooting the issue with mocking the useTranslation function for i18n in JEST

How the addition of a type union allows it to be assigned to AnyAction

"Discover a new approach to incorporating the ChangeDetectorRef service into your pipe functions

Oh no! It seems like the build script is missing in the NPM

Exploring the functionality of Angular Material Paginator in conjunction with Observables, esch

Issue with Next.js: Callback function not being executed upon form submission

How can I apply concatMap in Angular?