Erro rxjs / Subject.d.ts: A classe 'Subject <T>' estende incorretamente a classe base 'Observable <T>'

Extraí um código de modelo de amostra deste tutorial e executei as duas etapas abaixo para começar -

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

2. npm start // falhou com o erro abaixo-

   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

Vejo que na declaração de levantamento subject.d.ts é como abaixo -

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

E em Observable.ts é definido como abaixo-

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

Nota: - 1. Eu sou novo no Angular2 e estou tentando controlar as coisas.

2. O erro pode ser devido a definições incompatíveis de método de elevação

3. Eu li este tópico do github

4. Se eu precisar instalar alguma versão diferente do rxjs, diga como desinstalar e instalar o rxjs correto.

Edit1: posso demorar um pouco para responder aqui, mas ainda recebo o mesmo erro mesmo depois de usar o typescript 2.3.4 ou rxjs 6 alpha . Abaixo está meu 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"
  }
}

De acordo com isso, você precisa atualizar o typescript 2.3.4 ou rxjs 6 alpha

Vá para o seu arquivo package.json no seu script de atualização do projeto ou versão rxjs. Exemplo

"typescript": "2.3.4"

Faz npm install

atualização (29/06/2017): -

De acordo com o "2.4.0"trabalho datilografado dos comentários .

Como outros apontaram, este problema surgiu como consequência da verificação de tipo mais rigorosa de genéricos introduzida no TypeScript 2.4. Isso expôs uma inconsistência em uma definição de tipo RxJS e, consequentemente, foi corrigido na versão RxJS 5.4.2 . Portanto, a solução ideal é apenas atualizar para 5.4.2.

Se você, por algum motivo, não puder atualizar para 5.4.2, deve usar a solução de Alan Haddad de aumentar a declaração de tipo para corrigi-la em seu próprio projeto. Ou seja, adicione este snippet ao seu aplicativo:

// 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>;
  }
}

Sua solução não deixará outros efeitos colaterais e, portanto, é excelente. Alternativamente, as soluções propostas têm mais efeitos colaterais para a configuração do seu projeto e, portanto, são menos ideais:

• desative as verificações genéricas mais rígidas com o sinalizador do compilador --noStrictGenericChecks. No entanto, isso o tornará menos estrito para seu próprio aplicativo, o que você pode fazer, mas pode introduzir definições de tipo inconsistentes como fez nesta instância RxJS que, por sua vez, pode introduzir mais bugs em seu aplicativo.
• Não verificar os tipos nas bibliotecas com o sinalizador --skipLibCheck definido como verdadeiro. Isso também não é ideal, pois você pode não obter alguns erros de tipo relatados.
• Atualizando para RxJS 6 Alpha - considerando que há mudanças significativas, isso pode corromper seu aplicativo de maneiras mal documentadas, visto que ainda está em alfa. Além disso, se você tiver outras dependências como Angular 2+, essa pode não ser uma opção com suporte, quebrando o próprio framework agora ou no futuro. Acho que é um problema ainda mais difícil de resolver.

Uma abordagem band-aid admitida é adicionar o seguinte ao seu arquivo tsconfig.json até que o pessoal do RxJS decida o que eles querem fazer sobre o erro ao usar o TypeScript 2.4.1:

"compilerOptions": {

    "skipLibCheck": true,

 }

Você pode contornar temporariamente o problema usando o Aumento de Módulo

O código a seguir resolveu o problema para mim. Uma vez que o RxJS possui uma versão estável que não apresenta esse problema, ele deve ser removido.

// 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>;
  }
}

Embora seja talvez irônico que o próprio RxJS faça uso tão intenso dessa técnica para descrever sua própria forma, ela é geralmente aplicável a uma série de problemas.

Embora certamente haja limites e arestas, parte do que torna essa técnica poderosa é que podemos usá-la para aprimorar as declarações existentes, tornando-as mais seguras para tipos, sem bifurcar e manter o arquivo inteiro.

"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"
}

em package.json "rxjs": "^5.4.2", e "typescript": "^ 2.3.4", então npm install e ng servem para seu funcionamento.

Apenas um pouco de detalhe, na tentativa de colocar meus dois centavos.

O problema surge quando atualizamos o Typescript para a versão mais recente, que agora era o TypeScript 2.4.1 , ["como amamos as atualizações :) "] e conforme mencionado por @ :) @Jonnysai em sua resposta e no link fornecido lá, há uma discussão detalhada sobre o problema e suas correções.

Então, o que funcionou para mim foi:
1. Eu tive que Un instalar typescript 2.4.1 primeiro, indo para Painel de Controle > Programas e Recursos ...
2. Instale, de novo, original datilografado 2.4.0 , e, em seguida, certifique-se, em package.jsonarquivo, você tem essa configuração, conforme mencionado aqui em um detalhe mais curto. Você pode baixar typescript 2.4.0 a partir daqui , para o Visual Studio 2015

Você pode usar temporariamente o --noStrictGenericCheckssinalizador para contornar isso no TypeScript 2.4.

Isso está --noStrictGenericChecksna linha de comando ou apenas "noStrictGenericChecks": trueno "compilerOptions"campo em tsconfig.json.

Lembre-se de que o RxJS 6 terá isso corrigido.

Veja esta pergunta semelhante: Como faço para contornar este erro no RxJS 5.x no TypeScript 2.4?

Altere a seguinte linha de Subject.d.tsarquivo:

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

para:

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

O tipo de retorno provavelmente deve ser em Observable<R>vez deObservable<T>

Mantenha a opção noStrictGeneric verdadeira no arquivo tsconfig.config

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

Adicione "noStrictGenericChecks": true no arquivo tsconfig.json no nó "compilerOptions" conforme mostrado na imagem abaixo e compilar o aplicativo. Eu enfrentei o mesmo erro depois de adicionar este erro resolvido.

Encontrei o mesmo problema e o resolvi usando "rxjs": "5.4.1" , "typescript": "~ 2.4.0" e adicionando "noStrictGenericChecks": true em tsconfig.json.

RxJS 6 terá isso corrigido, mas como uma solução temporária, você pode usar o noStrictGenericChecks opção compilador.

Em tsconfig.json, coloque-o compilerOptionse defina-o como verdadeiro.

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

Na linha de comando é --noStrictGenericChecks .

Por que está acontecendo:

O TypeScript 2.4 tem uma alteração de rigidez e o Assunto não está se elevando para o Observável correto. A assinatura realmente deveria ter sido

(operador: Operador) => Observável

Isso será corrigido no RxJS 6.

Vá para o arquivo Package.json e modifique a configuração abaixo

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

Vai funcionar

Usar o acima exposto sozinho não ajudou, no entanto, usar a seguinte abordagem: Como faço para contornar este erro “Assunto incorretamente estende observável” no TypeScript 2.4 e RxJs 5

resolveu os problemas. Também é mencionado lá que o problema foi corrigido no RxJs 6, então esta é mais uma correção temporária, que me ajudou a executar com sucesso este ótimo exemplo (que compilou antes, mas deu o erro durante o tempo de carregamento): Desenvolvimento de aplicativo Angular 4 com Bootstrap 4 e TypeScript

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

Agora não precisamos do módulo nativo iônico - precisamos apenas @ nativo iônico / core. Corre

npm uninstall ionic-native --save

Isso vai resolver o seu problema ..

apenas adicione

"noStrictGenericChecks": true

para o seu tsconfig.json

obrigado a resposta do zmag e Rahul Sharma, funciona! @zmag @Rahul Sharma

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

meu problema é o seguinte:

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

Faça alterações como.

Vá para o arquivo Package.json e modifique a configuração abaixo

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

sim, o problema era com o TypeScript 2.4.1 Acabei de desinstalar isso do painel de controle e funciona para mim como Visual Studio 2017 já tem isso.