'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

You can add a path mapping in your tsconfig.json to map the rxjs in your dependency to the one in your node_modules folder:

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

more documentation is available at the Typescript site

Answer 2

After listing rxjs modules:

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

You can see 2 versions of the same module. My project required lower version of rxjs, and e.g. anglular/cli required higher version of rxjs.

It didn't cause any problems before but suddenly all projects with the same dependencies were throwing the same TS90010 errors e.g.:

ERROR in [at-loader] ./src/main/webapp/app/admin/user-management/user-management-detail.component.ts:23:9 TS90010: Type 'Subscription' is not assignable to type 'Subscription'. Two different types with this name exist, but they are unrelated.

Property '_parent' is protected but type 'Subscription' is not a class derived from 'Subscription'.

Finally I updated typescript version in package.json from 2.6.2 to 2.9.2 an all errors disappeared.

Answer 3

I just came across a very similar issue while developing a custom module for a project. I'm not 100% sure we were having the same problem, but it looks pretty close.

How I resolved my problem

I would suggest deleting your node_modules folder and reinstalling all your dependencies.

rm -rf node_modules/
npm cache clean
npm install

That solved it for me.

What the problem was (I think)

The module I was developing had an abstract class that the main project was trying to extend. However when trying to compile the main project, the compiler would throw the same error you are getting.

After a bit of digging around, I noticed NPM would complain about an UNMET PEER DEPENDENCY when installing my module into my project. When looking inside the node_modules of the project, I noticed that my module had another node_modules folder nested inside of it with some dependencies that it shared with the main project.

I'm not certain about this, but I think NPM thought the module was expecting different version of dependencies it shared with the main project.

So the abstract class inside the module was referencing Observable from its own nested node_modules folder while the main project was referencing Observable from the top level node_modules folder.

More information

This other questions provided some insight for me when trying solve my problem:

Why does npm install say I have unmet dependencies?