CODEWITHSUNDEEP
angularwebpackrxjsangular-cli
N.Zukowski
N.Zukowski

Reputation: 601

Having hard time with Angular2 RxJS usage

I am trying to build a simple service to retrieve some data:

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import {UtilsService} from "./../../util/util.service";
import {LoginResult} from "./LoginResult";

@Injectable()
export class LoginService {
  private url:string = this.utilsService.getBaseRestUrl() + "ad/authentication-service/login";

  constructor(private http:Http, private utilsService:UtilsService) {
  }

  login(user:Object):Observable<LoginResult> {
    return this.http
      .get(this.url)
      .map(response => response.json().data as LoginResult);
  }
}

But I cannot get the thing working, because this import: import 'rxjs/operator/map'; seems not to get resolved. I use IntelliJ and get an unresolved function or method error.

When I try to run the web console writes: ReferenceError: LoginService is not defined - obviously because of this unresolved function.

When I navigate to node_modules I can find the map.js containing the needed function. I use Angular cli so I don't have any 'system JS config' because Angular Cli is based on the Webpack.

How can I tell Webpack where the function is defined? Or am I doing something wrong?

Upvotes: 0

Views: 211

Answers (2)

N.Zukowski
N.Zukowski

Reputation: 601

I solved the problem - here is solution:

import {Injectable} from '@angular/core';
import {Headers, Http, Response} from '@angular/http';

import {Observable} from 'rxjs';

import {LoginResult} from './login.result';
import {UtilsService} from './../../util/util.service'

@Injectable()
export class LoginService {
  private url:string;

  constructor(private http: Http, utilsService: UtilsService) {
    this.url = utilsService.getBaseRestUrl() + "ad/authentication-service/login";
  }

  login(user:Object):Observable<LoginResult> {
    return this.http.post(this.url, user)
      .map((r: Response) => r.json() as LoginResult)
      .catch(LoginService.handleError);
  }

  private static handleError(error: any): Observable<any> {
    console.log('An error occurred', error); // for demo purposes only
    return Observable.throw(error.json().message || 'Server error');
  }
}

Problem was in using another service:

private url:string = this.utilsService.getBaseRestUrl()

The utilsService was obviously undefined, so I moved it to the constructor and added service to the Components providers array: providers: [LoginService, UtilsService].

App starts without arrors.

Upvotes: 0

reflexdemon
reflexdemon

Reputation: 902

I used the angular-cli and generated my app and it is working as expected.

Please try the below and let me know if this works.

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';

import {Observable} from 'rxjs';//Removed:/Observable
//import 'rxjs/add/operator/map';

import {UtilsService} from "./../../util/util.service";
import {LoginResult} from "./LoginResult";

@Injectable()
export class LoginService {
  private url:string = this.utilsService.getBaseRestUrl() + "ad/authentication-service/login";

  constructor(private http:Http, private utilsService:UtilsService) {
  }

  login(user:Object):Observable<LoginResult> {
    return this.http
      .get(this.url)
      .map((r: Response) => r.json() as LoginResult);
  }
}

Here is the example service you may use it, https://github.com/reflexdemon/shop/blob/master/src/app/user.service.ts

Please feel free to use the code as it was created for learning angular2.

https://github.com/reflexdemon/shop

Upvotes: 1

Related Questions