Error de rxjs / Subject.d.ts: la clase 'Subject <T>' extiende incorrectamente la clase base 'Observable <T>'

Extraje un código de plantilla de muestra de este tutorial e hice los siguientes dos pasos para comenzar:

1. npm install // worked fine and created node_modules folder with all dependencies

2. npm start // falló con el siguiente error-

   node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class 'Subject<T>' 
     incorrectly extends base class 'Observable<T>'.
     Types of property 'lift' are incompatible.
     Type '<T, 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'.
     npm ERR! code ELIFECYCLE
     npm ERR! errno 2
   

Veo que en el asunto. Su declaración de elevación es la siguiente:

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

Y en Observable.ts se define a continuación:

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

Nota: - 1. Soy nuevo en Angular2 y estoy tratando de conseguir cosas.

2. El error puede deberse a definiciones incompatibles del método de elevación.

3. Leí este hilo de github

4. Si necesito instalar alguna versión diferente de rxjs, indíquenos cómo desinstalar e instalar los rxjs correctos.

Edit1: Puede que tarde un poco en responder aquí, pero sigo recibiendo el mismo error incluso después de usar mecanografiado 2.3.4 o rxjs 6 alpha . A continuación se muestra mi package.json,

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "6.0.0-alpha.0",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "2.3.4",
    "typings": "^1.3.2"
  }
}

Según esto , necesita actualizar mecanografiado 2.3.4 o rxjs 6 alpha

vaya al archivo package.json en la versión de mecanografiado o rxjs de actualización de su proyecto. Ejemplo

"typescript": "2.3.4"

hacer npm install

actualización (29/06/2017): -

Según los comentarios de "2.4.0"trabajo mecanografiado .

Como otros han señalado, este problema surgió como consecuencia de la comprobación de tipo más estricta de los genéricos introducida en TypeScript 2.4. Esto expuso una inconsistencia en una definición de tipo RxJS y, en consecuencia, se corrigió en la versión 5.4.2 de RxJS . Entonces, la solución ideal es simplemente actualizar a 5.4.2.

Si por alguna razón no puede actualizar a 5.4.2, debería usar la solución de Alan Haddad de aumentar la declaración de tipo para arreglarlo para su propio proyecto. Es decir, agregue este fragmento a su aplicación:

// TODO: Remove this when RxJS releases a stable version with a correct declaration of `Subject`.
import { Operator } from 'rxjs/Operator';
import { Observable } from 'rxjs/Observable';

declare module 'rxjs/Subject' {
  interface Subject<T> {
    lift<R>(operator: Operator<T, R>): Observable<R>;
  }
}

Su solución no dejará otros efectos secundarios y, por lo tanto, es excelente. Alternativamente, las soluciones propuestas tienen más efectos secundarios para la configuración de su proyecto y, por lo tanto, son menos ideales:

• desactive las comprobaciones genéricas más estrictas con la bandera del compilador --noStrictGenericChecks. Sin embargo, esto hará que sea menos estricto para su propia aplicación, lo que puede hacer, pero podría introducir definiciones de tipo inconsistentes como lo hizo en esta instancia de RxJS, lo que a su vez podría introducir más errores en su aplicación.
• No verificando los tipos en bibliotecas con el indicador --skipLibCheck establecido en verdadero. Esto tampoco es ideal, ya que es posible que no se informen algunos errores de tipo.
• Actualización a RxJS 6 Alpha: dado que hay cambios importantes, esto podría dañar su aplicación de formas mal documentadas, ya que todavía está en alfa. Además, si tiene otras dependencias como Angular 2+, esta podría no ser una opción compatible, rompiendo el marco en sí ahora o en el futuro. Lo que creo que es un problema aún más difícil de resolver.

Un enfoque de curita admitido es agregar lo siguiente a su archivo tsconfig.json hasta que la gente de RxJS decida qué quieren hacer con el error al usar TypeScript 2.4.1:

"compilerOptions": {

    "skipLibCheck": true,

 }

Puede solucionar temporalmente el problema mediante el aumento de módulos

El siguiente código resolvió el problema por mí. Una vez que RxJS tenga una versión estable que no presente este problema, debería eliminarse.

// augmentations.ts
import {Operator} from 'rxjs/Operator';
import {Observable} from 'rxjs/Observable';

// TODO: Remove this when a stable release of RxJS without the bug is available.
declare module 'rxjs/Subject' {
  interface Subject<T> {
    lift<R>(operator: Operator<T, R>): Observable<R>;
  }
}

Si bien es quizás irónico que el propio RxJS haga un uso tan intensivo de esta técnica para describir su propia forma, en realidad es generalmente aplicable a una serie de problemas.

Si bien ciertamente existen límites y asperezas, parte de lo que hace que esta técnica sea poderosa es que podemos usarla para mejorar las declaraciones existentes, haciéndolas más seguras sin bifurcar y mantener todo el archivo.

"dependencies": {
"@angular/animations": "^4.3.1",
"@angular/common": "^4.3.1",
"@angular/compiler": "^4.3.1",
"@angular/compiler-cli": "^4.3.1",
"@angular/core": "^4.3.1",
"@angular/forms": "^4.3.1",
"@angular/http": "^4.3.1",
"@angular/platform-browser": "^4.3.1",
"@angular/platform-browser-dynamic": "^4.3.1",
"@angular/platform-server": "^4.3.1",
"@angular/router": "^4.3.1",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "^2.3.4",
"typings": "^1.3.2"
}

en package.json "rxjs": "^5.4.2", y "typescript": "^ 2.3.4", luego npm install y ng sirven para que funcione.

Solo un poco de detalle, en un intento de poner mi granito de arena.

El problema surge cuando actualizamos TypeScript a la última versión, que ahora era TypeScript 2.4.1 , ["ya que nos encantan las actualizaciones :) "], y como lo menciona @ Jonnysai en su respuesta y el enlace que se proporciona allí, hay una discusión detallada sobre el problema y sus soluciones.

Por lo tanto, lo que trabajó para mí era:
1. Tenía que Un instale mecanografiado 2.4.1 En primer lugar, al ir a Panel de control > Programas y características ...
2. Instalar, de nuevo, mecanografiado 2.4.0 , y luego asegurarse, en package.jsonarchivo, tiene esta configuración, como se menciona aquí en un detalle más breve. Puede descargar TypeScript 2.4.0 desde aquí , para Visual Studio 2015

Puede usar temporalmente la --noStrictGenericChecksbandera para evitar esto en TypeScript 2.4.

Esto está --noStrictGenericChecksen la línea de comando o simplemente "noStrictGenericChecks": trueen el "compilerOptions"campo de tsconfig.json.

Tenga en cuenta que RxJS 6 tendrá esto corregido.

Vea esta pregunta similar: ¿Cómo puedo solucionar este error en RxJS 5.x en TypeScript 2.4?

Cambie la siguiente línea de Subject.d.tsarchivo:

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

a:

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

El tipo de retorno probablemente debería ser en Observable<R>lugar deObservable<T>

Mantenga la opción noStrictGeneric verdadera en el archivo tsconfig.config

{
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}

Agregue "noStrictGenericChecks": verdadero en el archivo tsconfig.json en el nodo "compilerOptions" como se muestra en la imagen de abajo y compile la aplicación. Me he enfrentado al mismo error después de agregar este error resuelto.

Encontré el mismo problema y lo resolví usando "rxjs": "5.4.1" , "mecanografiado": "~ 2.4.0" y agregando "noStrictGenericChecks": true en tsconfig.json.

RxJS 6 tendrá esto fijo, pero como solución temporal, puede usar la noStrictGenericChecksopción del compilador.

En tsconfig.json, compilerOptionscolóquelo y configúrelo en verdadero.

{
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}

En la línea de comando está --noStrictGenericChecks.

Por qué está sucediendo:

TypeScript 2.4 tiene un cambio de rigor y el sujeto no se eleva al Observable correcto. La firma realmente debería haber sido

(operador: Operador) => Observable

Esto se solucionará en RxJS 6.

Vaya al archivo Package.json y modifique la siguiente configuración

...
  "rxjs": "5.4.1",
  "typescript": "~2.4.0"
...

Funcionará

Sin embargo, usar lo anterior solo no ayudó, usar el siguiente enfoque: ¿Cómo puedo evitar este error de "El sujeto extiende incorrectamente observable" en TypeScript 2.4 y RxJs 5

resuelto los problemas. También se menciona allí que el problema se ha solucionado en RxJs 6, por lo que esta es más una solución temporal, que me ayudó a ejecutar con éxito este gran ejemplo (que se compiló antes pero dio el error durante el tiempo de carga): Desarrollo de la aplicación Angular 4 con Bootstrap 4 y TypeScript

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

Ahora no necesitamos el módulo iónico-nativo, solo necesitamos @ ionic-native / core. correr

npm uninstall ionic-native --save

Resolverá su problema ...

solo agrega

"noStrictGenericChecks": true

a su tsconfig.json

gracias la respuesta de zmag y Rahul Sharma, ¡funciona! @zmag @Rahul Sharma

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"

mi problema es el siguiente:

typings/globals/core-js/index.d.ts:3:14 - error TS2300: Duplicate identifier

Realice cambios como.

Vaya al archivo Package.json y modifique la siguiente configuración

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"

Sí, el problema fue con TypeScript 2.4.1. Acabo de desinstalar esto del Panel de control y funciona para mí, ya que Visual Studio 2017 ya lo tiene.