angular: RXJS with Angular error

I set my typescript version to “typescript”: “2.3.4” instead of letting it upgrade to 2.4 and it built successfully. Might work for you guys.

Found a way to keep typescript 2.4.x in my application while still including rxjs

The rxjs issue mentioned above also mentioned the skipLibCheck compiler option, just tested with latest typescript and it works:

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "skipLibCheck": true
  }
}

This is much more amenable to me, as I get the better/stricter type checking in my app code, but I can just file an issue in my project to wait on rxjs’ issue to be resolved before removing this option. Seems like the best way imo.

YMMV: I don’t directly use observables in my app code (yet), so my app does not have the compiler error (just the rxjs library does). But, if in your project your own code uses that same type and the compiler errors out from your own application code, and not just rxjs’ code, then this fix will not work as you can’t skip over your own code’s type checking. The only solution for your kind of project is to go to typescript 2.4.1 or 2.3.4

my bad. My typescript version was set to ^2.3.4. Changed it to straight up 2.3.4 and now it works.

I think we’ve confirmed 2.3.4 / 2.4.0 to death.

We have four different workarounds (downgrade typescript, try skipLibCheck (YMMV), or noStrictGenericChecks, manually edit rxjs Subject.d.ts). Googling the problem brings people here, so they can see all the workarounds.

I vote to close this issue, as it’s a problem with rxjs and the issue has already been filed with them.

Staying at 2.3 is only an interim measure. You can’t stay there forever. When you use a Subject in a call that asks for an Observable, 2.4 throws this error. To solve this, you need to convert explicitly. Change from:

let s = new Subject<any>;
...
fx(s);

to

let s = new Subject<any>;
...
fx(s.asObservable());

or we can wait for rxjs to fix this, or rxjs to add a typescript dependency. Anyway I think it has nothing to do with angular.

+1

FYI: Typescript does not follow semver and has breaking changes in almost every release: https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes

If you’re using yarn or npm@5, make sure your lock file doesn’t have an entry for Typescript 2.4.x! We can override it by manually installing the older version – npm i typescript@2.3.4.

Make your typescript version to 2.3.4, it will fixed all the errors.

I just want to put that out there: the real solution should not be to skipLibCheck. If you’re doing that, you’re potentially glazing over other problems.

A better solution is noStrictGenericChecks until RxJS gets updated.

@kgentes https://github.com/ReactiveX/rxjs/issues/2539 I am also voting to close this issue as it is RxJS related and tracked in above issue.

Stolen from https://github.com/ReactiveX/rxjs/issues/2539 : the TSC option --noStrictGenericChecks works for now. I think that will be more targeted than the --skipLibCheck will. You can add it to your tsconfig compile options as "noStrictGenericChecks": true

Thanks a lot, typescript set to 2.3.4 worked!

fyi the fix already landed on RxJS 5.4.2 (changelog), you can close this issue.

It doesn’t need to be closed but posting can be disabled, to prevent further posting. Cuz rxjs bugfix haven’t been checked into production npm yet.

Setting the version to “2.3.4” works. Make sure that the typescript module’s package.json confirms that the version is 2.3.4.

same issue. My typescript version is already set to 2.3.4.

I too still have this problem. I’m on Angular 5.0.0-beta.1, rxjs 5.4.2

5.4.2 fixed it in my case 😄

@snewell92 Yes, I prefer to push to 2.4.1 instead of sitting on 2.3.4 too.

And if you prefer an even smaller change, directly edit the rxjs/Subject.d.ts to align the lift signature to Object.d.ts, which is what they should have done.

lift<R>(operator: Operator<T, R>): Observable<T>;

to

lift<R>(operator: Operator<T, R>): Observable<R>;

@rfuhrer

the TSC option --noStrictGenericChecks works for now. I think that will be more targeted than the --skipLibCheck

Not necessarily, you may be more focused/targeted in terms of checking all code instead of ignoring your libs, but now you are losing the new strict generic checks in all of your own application code.

Either way, skipping lib check or dropping strict generic check is going to lose some value of the compiler. I much prefer to drop the value in my libraries, as I care more about the correctness of my own code within the domain of my application. Library author’s can deal with their own type errors.

I compiled AoT successfully 1 hour ago with Angular 4.1.0, then tried to upgrade to 4.2.4, this error happened, then reverted back to 4.1.0 and since then nothing seems to be working. Tried reinstalling npm, node, typescript, webpack, cleaning npm cache, reinstalling global npm modules - nothing.

For me it worked if I either downgraded tsc to 2.3.4, or upgraded txjs from v5-alpha to latest (5.5.6).

The Problem exists even with all the latest versions. Solution is : delete node_modules directory inside node_modules\ng2-opd-popup folder, it will work.

I know this will be out of date like… tomorrow but I wanted to post my experiment/findings with absolute latest deps:

Typescript nightly: 2.6.0-dev.20170818 || 2.5.0-rc Angular 5.0.0-beta.4 RxJS: 6.0.0-alpha.0

ERROR in /node_modules/rxjs/Subject.d.ts (16,22): Class 'Subject<T>' incorrectly extends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
      Type 'Observable<T>' is not assignable to type 'Observable<R>'.
        Type 'T' is not assignable to type 'R'.
ERROR in node_modules/@angular/cdk/typings/table/table.d.ts (44,22): Class 'CdkTable<T>' incorrectly implements interface 'CollectionViewer'.
  Types of property 'viewChange' are incompatible.
    Type 'BehaviorSubject<{ start: number; end: number; }>' is not assignable to type 'Observable<{ start: number; end: number; }>'.
      Types of property 'lift' are incompatible.
        Type '<R>(operator: Operator<{ start: number; end: number; }, R>) => Observable<{ start: number; end: n...' is not assignable to type '<R>(operator: Operator<{ start: number; end: number; }, R>) => Observable<R>'.
          Type 'Observable<{ start: number; end: number; }>' is not assignable to type 'Observable<R>'.
            Type '{ start: number; end: number; }' is not assignable to type 'R'.

"rxjs": "^5.4.2" builds!

I added "noStrictGenericChecks": true to my tsconfig.json file and upgraded typescript from 2.2.0 to 2.3.4 and it fixed for me.

@snewell92 Very true. Currently I don’t have any generics in my project other than what’s in libraries. So this works well for me until a fix is in. 👍 for pointing out that it might effect people using generics in their own code

In package.json->devDependencies I changed the typscript from ^2.3.4 to 2.3.4 and now it works. I got the error when building with Atlassian Bamboo, on my development environment I got no error.

I use lift<T>(operator: any): Observable<T>; It solved the problem. There is <T> follows lift, and <T> follows Observable. Don’ know why <T> disappear after submission.

Open source projects normally have quite a bit bugs if you use different releases of the modules. That’s what I encountered. Best way to do this is to do what I did. So far, I haven’t encountered any problem because of this lift issue.

Dependencies:

{
 "typescript": "2.5.2",
 "rxjs": "^5.4.3"
}

tsconfig.json

{
  "noStrictGenericChecks": true,
    "skipLibCheck": true
}

Happening again!

5.4.2 fixed it too in my case.

5.4.2 fixed it for me too! 😃

Hi,

as a temporary workaround, you can use “noStrictGenericChecks”: true in your tsconfig. Hope that helps. See stackoverflow.

I think this problem related to version 2.4.1 because I downgraded to version 2.4.0 and didn’t see any error during building an application. In project used angular 4.2.4, angular/cli 1.1.3, rxjs 5.4.1, typescript 2.4.0.

I wasn’t able to use 2.4.1 like @selem1 mentioned but +1 for locking at 2.3.4

Will watch this space for further developments, rxjs patches, etc.

I think it would be better to have an up-to-date typescript version , almost all of the above comments suggest removing the ^ quote from "typescript": "^2.3.4", however fixing the version to : "typescript": "2.4.1", worked for me smoothly. Or merely change "typescript": "^2.3.4" to "typescript": "^2.4.1", no quote workarounds, no headaches. Cheers ! 😃

@snewell92 much better solution than rolling back. Works perfectly fine

After I changed the package.json to version 2.3.4 I had to re-run npm install and it worked for me. Thanks for the info!

manually adjusting the typescript to 2.3.4 “typescript”: “2.3.4” worked for me…

@jugg1es works!

fyi : RxJS has issue filed at https://github.com/ReactiveX/rxjs/issues/2539 and tracking it now.