'Observable' is not a class derived from 'Observable'

Question

When trying to extend a class from a class in a node_modules the typescript compiler throws a error saying:

Property \'source\' is protected but

Answer 1

I got same issue.

I have following catalog structure (angular2 project)

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

In my common I have definied objects and services:

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
}

In my apps I was using items from common as follows:

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();
  }
}

This were causing compilation issues: 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>'.

After investigation I changed type of myValues but it still doesn't solve problem. Compilation issues changed to:

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>'.

The final solution (workaround)

What solved my problem, was "rewriting" observable on the app side:

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

This is not really nice way to solve it. In my opinion this problem is caused by a bug in npm/typescript/observables. But untill the problem is not solved on the typescript devs side, you can use this workaround as solution.

Answer 2

For me it was my editor issue. VSCode was including an import from the declaration files (*.d.ts) while the actual class was in another place.

I replaced the declaration file import with the actual class file import.

Answer 3

If there are multiple node_modules folders you have to add a path mapping in the host app's tsconfig. Just map @rxjs/* to the root node_modules/rxjs/*. Then everything works fine.

Answer 4

actually may this problem comes due to your typescript version change

try to change your typescript version

1. You can find that in

   package.json

set to 2.4.3

2. if not work then simply try on cli

   npm unlink typescript

   npm install typescript@2.3.4

and after installation complete packages.json

plz check it should be work in dependencies

"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^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/router": "^5.2.0",
"core-js": "^2.4.1",
"rxjs": "5.4.3",
"typescript": "^2.3.4", <<---------------remove ^
"zone.js": "^0.8.19"

but one thing is clear it is not error this is due to environment change

if still facing problem then try reinstall node module

good luck.......

Answer 5

I was getting a crazy error like

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>'

And the reason was npm link (actually npm i ../other-project but it's quite the same thing).

My workaround was kinda cheating:

(stream as any as Observable<MessageEvent>)

LOL

Answer 6

The issue will occur only when you do npm link.

Add paths to the compilerOptions of client project's tsconfig.json

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

This should work as it will specify the path from rxjs dependency.