Angular-cli: Observable.throw not defined in Webpack-version of CLI-defined service

[CalvinDale]

I'm not sure if this is an Angular CLI issue or not. But I thought I would bring it to your attention.

Services generated using the Webpack version of the Angular CLI version do not have the Observable.throw method defined at runtime.

1. Windows 7
2. angular-cli: 1.0.0-beta.11-webpack, node: 4.4.7, os: win32 x64
3. Use that CLI to create a service that performs a GET request and triggers a 404 server error.

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class ApiService {

    constructor(private http: Http) { }

    fetchRemoteData(): Observable<any> {
        const invalidUrl = 'https://api.somedomain.com/an-invalid-path';
        return this.http.get(invalidUrl)
            .map((response: Response) => {
                return <any>response.json();
            })
            .catch(this.handleServerError);
    }

    private handleServerError(error: Response) {
        return Observable.throw(error.json().error || 'Server error'); // Observable.throw() is undefined at runtime using Webpack
    }

}

1. Observable.throw is undefined.

TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.Observable.throw is not a function

Refer to this _StackOverflow_ post.

[CalvinDale]

Oops, a simple mistake. I solved this by adding import 'rxjs/add/observable/throw';. I had this line commented out (though not included in this issue's submission) because I was using /operator/ rather than /observable/ which doesn't exist.

[debbabi-nader]

I solved this by using: import { Observable } from 'rxjs/Rx';
Instead of: import { Observable } from 'rxjs/Observable';

Answer also available at: https://github.com/ReactiveX/rxjs/issues/1866

[victormejia]

thanks @CalvinDale !

[Groschenroman]

@nader30 Might work, but not recommendable. See this comment in same thread you posted.

[Aralhi]

@Groschenroman do you have better idea for this error and does not import EVERYTHING?

[adamdport]

@Aralhi just import what you need like it said in their linked comment:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';

[vintots]

thanks @adamdport :)

[jhendricks123]

I'm running Angular 7.0.4 and the accepted "right way" to fix this is to have the following imports:

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

However, I already had the correct imports. And the only way I've found so far to get past this issue is to switch the Observable to import from 'rxjs/Rx'.

It sounds like this is not recommended, but as of yet, I have not seen a better solution.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}