error TS2304: Cannot find name 'Observable' Angularjs 2

Question

When I swithch to my Linux PC I get error like this:

app/app.module.ts(21,67): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(25,53): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(29,68): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(33,67): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(37,56): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(52,27): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(52,50): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(54,40): error TS2304: Cannot find name '_'.
app/app.module.ts(56,24): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(58,24): error TS2304: Cannot find name 'Observable'.

Anyone know solution for this?

Also my editor show errors on HttpIntreceptor Class, when I remove it it works fine...

This part is marked: Observable<Response>

Could you check it:

class HttpInterceptor extends Http {

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router: Router) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.request(url, options));
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.get(url,options));
    }

    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {   
        return super.post(url, body);
    }

    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
    }

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.delete(url, options));
    }

    getRequestOptionArgs(options?: RequestOptionsArgs) : RequestOptionsArgs {
        if (options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }
        options.headers.append('Content-Type', 'application/json');
        return options;
    }

    intercept(observable: Observable<Response>): Observable<Response> {
        return observable.catch((err, source) => {
            if (err.status  == 401 && !_.endsWith(err.url, 'api/auth/login')) {

                return Observable.empty();
            } else {
                return Observable.throw(err);
            }
        });

    }
}

this is very broad, perhaps add the component you a receiving the error on. — Bean0341
– Bean0341, Commented Oct 11, 2016 at 17:30
It look like it is problem with Inerceptor could you check code, main post updated... I am new to typescript so I not sure where is problem... — Vladimir
– Vladimir, Commented Oct 11, 2016 at 17:36
yes you are right try digging through the http docs angular.io/docs/ts/latest/api/http/index/Http-class.html it looks like interceptor is outdated and not available anymore.I do not see it in the http class definition — Bean0341
– Bean0341, Commented Oct 11, 2016 at 17:41
Yes that was problem I just figured it right now... import {Observable} from 'rxjs/Rx'; import 'rxjs/add/operator/map'; — Vladimir
– Vladimir, Commented Oct 11, 2016 at 18:09

Taha Zgued · Accepted Answer · 2022-09-29 15:03:46Z

43

I had the same issue fixed it by importing Observable

import {Observable} from 'rxjs/Rx';

Update wih RXJS v6

import { Observable } from 'rxjs';

edited Sep 29, 2022 at 15:03

answered Dec 13, 2016 at 10:46

Taha Zgued

1,10812 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JavaSheriff Over a year ago

it is saying node_modules/rxjs/Rx"' has no exported member 'Observable'.

Taha Zgued Over a year ago

well it changed now. not it's import { Observable } from "rxjs/Observable";

Kowsalya · Accepted Answer · 2018-04-11 06:23:17Z

21

You can do it in 2 ways

1. Import Observable and then import other functions like map, do, catch, throw whichever you are using

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
.....
.....
import 'rxjs/add/observable/throw';

2. Importing whole Rxjs

import {Observable} from 'rxjs/Rx';

or

import {Observable} from 'rxjs';

Its recommended to use first method, since importing whole rxjs is not necessary and will include all the sub-modules into the bundle affecting bundle size and load time

edited Apr 11, 2018 at 6:23

answered Jul 18, 2017 at 12:14

Kowsalya

1,40617 silver badges25 bronze badges

2 Comments

gnganapath Over a year ago

In angular 5, I used, option 1 to solve this issuse. It's working.

Hola Soy Edu Feliz Navidad Over a year ago

In angular 8 you can use import {Observable} from 'rxjs'; but not import {Observable} from 'rxjs/Observable'; or import {Observable} from 'rxjs/Rx';

GiorgosK · Accepted Answer · 2020-07-01 05:07:05Z

7

None of the solutions worked, I had to use

import { Observable } from 'rxjs';

answered Jul 1, 2020 at 5:07

GiorgosK

8,4392 gold badges32 silver badges29 bronze badges

Comments

eyllanesc · Accepted Answer · 2018-07-07 10:05:42Z

2

instead of using

import 'rxjs/add/operator/map';
this.obObservable().map(data => {})

use

import { map } from "rxjs/operators";
this.obObservable().pipe(map(data => {}))

angular changes it recently

edited Jul 7, 2018 at 10:05

eyllanesc

246k19 gold badges205 silver badges282 bronze badges

answered Jul 7, 2018 at 10:02

rubal islam

3593 silver badges5 bronze badges

Collectives™ on Stack Overflow

error TS2304: Cannot find name 'Observable' Angularjs 2

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Related