' no es una clase derivada de 'Observable ''/> ' no es una clase derivada de 'Observable ''/> ' no es una clase derivada de 'Observable ''/> 'Observable <T>' no es una clase derivada de 'Observable <T>' | programandonet.com

Pregunta 'Observable ' no es una clase derivada de 'Observable '


Al tratar de extender una clase de una clase en un node_modules el compilador mecanografiado arroja un error que dice:

Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'. 

Esto solo ocurre cuando la clase base es de un node_module.

La clase base se ve así:

import {Observable} from "rxjs/Observable";
export abstract class TestBase<T> {

    request(options: any):Observable<T> {
        return Observable.throw(new Error('TestBase is abstract class. Extend it and implement own request method'));
    }
}

Subclasificarlo en un proyecto:

import {Observable} from "rxjs/Observable";
import {TestBase} from "@org/core";

class SocketResponse {

}

class Socket {
    request(): Observable<SocketResponse> {
        return new Observable.of(new SocketResponse());
    }
}

export class Sub extends TestBase<SocketResponse> {
    request(options:any):Observable<SocketResponse> {
        return new Socket().request();
    }
}

Si la clase base (TestBase) se mueve desde el node_module al proyecto en sí mismo y cambiar la importación para que se vea como import {TestBase} from "./base"; El error desaparece

¿Esto se debe a que las compilaciones crean los tipos en diferentes ámbitos para cada módulo? Estoy completamente perdido aquí.

Actualizar:

Esto parece suceder solo cuando se vincula el node_modules con npm link. Parece que una solución posible para el momento es devolver un tipo en la clase base para devolver una interfaz.

Más información se puede encontrar aquí:

https://github.com/Microsoft/TypeScript/issues/6496

https://github.com/ReactiveX/rxjs/issues/1744


32
2017-07-03 09:30


origen


Respuestas:


Me encontré con un problema muy similar al desarrollar un módulo personalizado para un proyecto. No estoy 100% seguro de que tuviéramos el mismo problema, pero parece bastante cercano.

Cómo resolví mi problema

Sugeriría eliminar tu node_modules carpeta y reinstalar todas sus dependencias.

rm -rf node_modules/
npm cache clean
npm install

Eso lo resolvió para mí.

Cuál fue el problema (creo)

El módulo que estaba desarrollando tenía una clase abstracta que el proyecto principal intentaba extender. Sin embargo, al intentar compilar el proyecto principal, el compilador arrojaría el mismo error que está obteniendo.

Después de investigar un poco, noté que NPM se quejaba de un UNMET PEER DEPENDENCY cuando instalo mi módulo en mi proyecto. Al mirar dentro del node_modules del proyecto, noté que mi módulo tenía otro node_modules carpeta anidada dentro de ella con algunas dependencias que compartió con el proyecto principal.

No estoy seguro de esto, pero creo que NPM pensó que el módulo esperaba una versión diferente de las dependencias que compartía con el proyecto principal.

Entonces la clase abstracta dentro del módulo hacía referencia a Observable desde su propio anidado node_modules carpeta mientras el proyecto principal hacía referencia a Observable desde el nivel superior node_modules carpeta.

Más información

Estas otras preguntas me proporcionaron una idea al intentar resolver mi problema:

¿Por qué la instalación de npm dice que tengo dependencias no satisfechas? 


12
2018-01-26 23:16



Si hay varias carpetas node_modules, debe agregar una asignación de ruta en el tsconfig de la aplicación host. Simplemente map @ rxjs / * a la raíz node_modules / rxjs / *. Entonces todo funciona bien.


5
2017-11-29 18:37



Tengo el mismo problema.

Tengo la siguiente estructura de catálogo (proyecto angular2)

angular
|
---- common_files
      |
      ----- package.json
      |
      ----- index.ts
      |
      ----- catalog1
            |
            ---- package.json
            |
            ---- some_file_with_service_model_comopnent.ts
            |
            ---- index.ts    - this is regular barrel file
      |
      ----- catalog2
|
---- app1
     |
     ------ package.json
|
---- apps
     |
     ------ package.json

En mi común, he definido objetos y servicios:

export class ItemBase {}

esport class SomeType extends ItemBase {}

export class ItemServiceBase {
    public getItems():Observable<ItemBase> {
         //do something
    }
}

export class SomeService extends ItemServiceBase {
    //some specific operations can go here
}

En mis aplicaciones estaba usando elementos comunes de la siguiente manera:

import { SomeType, SomeTypeService } from "warehouse-system/products-settings";

class AttributeTypesComponent {
  private myValues : Observable<SomeType[]>;
  private service : SomeTypeService;

  constructor(){
      this.service = new SomeTypeService();
      this.myValues = <Observable<SomeType[]>> this.service.getItems();
  }
}

Esto causaba problemas de compilación: ERROR in [at-loader] src/app/some_file.ts:22:47 Type 'Observable<ItemBase[]>' cannot be converted to type 'Observable<SomeType[]>'. Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.

Después de la investigación cambié el tipo de myValues pero aún no resuelve el problema. Problemas de compilación cambiados a:

ERROR in [at-loader] src/app/some_file.ts:22:47 Type 'Observable<SomeType[]>' cannot be converted to type 'Observable<SomeType[]>'. Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.

La solución final (solución alternativa)

Lo que resolvió mi problema fue "reescribir" observable en el lado de la aplicación:

    this.myValues = Observable.create(subscriber => {
      this.service.getItems().subscribe(items => subscriber.next(items));
    });

Esta no es una buena forma de resolverlo. En mi opinión, este problema es causado por un error en npm / typescript / observables. Pero hasta que el problema no se resuelva en el lado de devs mecanografiado, puede usar esta solución como solución.


3
2018-01-15 13:41



Estaba recibiendo un error loco como

Type 'Observable<MessageEvent>' cannot be converted to type 'Observable<MessageEvent>'
Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'

Y el motivo fue npm link (actualmente npm i ../other-project pero es casi lo mismo).

Mi solución fue un poco trampa:

(stream as any as Observable<MessageEvent>)

LOL


3
2018-06-27 19:31



Puede agregar una asignación de ruta en su tsconfig.json para asignar los rxjs en su dependencia al que está en la carpeta node_modules:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "rxjs": ["node_modules/rxjs"]
    }
}

más documentación está disponible en el Sitio de mecanografiado


0
2018-06-25 23:36



El problema ocurrirá solo cuando hagas un enlace npm.

Agregue rutas a compilerOptions del tsconfig.json del proyecto del cliente

"paths": { "rxjs/*": ["../node_modules/rxjs/*"]}

Esto debería funcionar ya que especificará la ruta desde la dependencia de rxjs.


0
2017-07-17 10:01



Después de listar los módulos de rxjs:

npm list rxjs

+ - @ angular / cli @ 1.6.6   | + - @ angular-devkit / core @ 0.0.29   | | -- rxjs@5.5.10 | +-- @angular-devkit/schematics@0.0.52 | |- rxjs@5.5.10   | -- rxjs@5.5.10 - rxjs@5.5.6

Puedes ver 2 versiones del mismo módulo. Mi proyecto requirió una versión más baja de rxjs, y p. anglular / cli requirió una versión más alta de rxjs.

No causó ningún problema antes, pero de repente todos los proyectos con las mismas dependencias lanzaban los mismos errores TS90010, p. Ej .:

ERROR en [cargador] ./src/main/webapp/app/admin/user-management/user-management-detail.component.ts:23:9       TS90010: Escriba 'Suscripción' no es asignable para escribir 'Suscripción'. Existen dos tipos diferentes con este nombre, pero no están relacionados.

La propiedad '_parent' está protegida, pero el tipo 'Suscripción' no es una clase derivada de 'Suscripción'.

Finalmente actualicé la versión de mecanografiado en package.json de 2.6.2 a 2.9.2 y desaparecieron todos los errores.


0
2017-07-22 07:45



En realidad, este problema puede deberse a su cambio de versión mecanografiada

intenta cambiar tu versión de mecanografiado

  1. Puedes encontrar eso en

    package.json

ajustado a 2.4.3

  1. si no funciona entonces simplemente intente cli

    npm unlink typescript

    npm install typescript@2.3.4

y después de la instalación completa packages.json

por favor cheque debería ser trabajo en dependencias

"dependencias": {       
"@ angular / animations": "^ 5.2.0",       
"@ angular / common": "^ 5.2.0",       
"@ angular / compilador": "^ 5.2.0",
 "@ angular / core": "^ 5.2.0",
 "@ angular / forms": "^ 5.2.0",
 "@ angular / http":   "^ 5.2.0",       
"@ angular / platform-browser": "^ 5.2.0",       
"@ angular / platform-browser-dynamic": "^ 5.2.0",       
"@ angular / enrutador": "^ 5.2.0",       
"core-js": "^ 2.4.1",       
"rxjs": "5.4.3",       
"mecanografiado": "^ 2.3.4", << --------------- eliminar ^       
"zone.js": "^ 0.8.19"

pero una cosa está clara, no es un error, esto se debe al cambio en el medio ambiente

si todavía enfrenta un problema, intente reinstalar módulo de nodo

buena suerte.......


-1
2017-07-11 05:19