Error when using Rx observable


#1

started learning {NS}, the example at - http://docs.nativescript.org/angular/tutorial/ng-chapter-3, got stuck at the point when service starts using http and observables, getting below error when calling service’s register method

service code:

import { Injectable } from "@angular/core";
import { Http, Headers, Response } from "@angular/http";
import { Observable } from "rxjs/Rx";
import "rxjs/add/operator/do";
import "rxjs/add/operator/map";
import { User } from "./user";

@Injectable()
export class UserService {
  constructor(private http: Http) {};

  public register = () => {
    this.http.get("https://56e05c3213da80110013eba3.mockapi.io/api/todos")
    .subscribe(data => alert('got data'), 
            error => console.log('Could not load todos.'));
  }
}

component js code:

import { Component } from "@angular/core";
import { User, UserService } from './shared';


@Component({
    selector: "my-app",
    providers: [UserService],
    templateUrl: "pages/login/login.html",
})
export class AppComponent {
    public counter: number = 16;
    public user: User;
    public isLoggingIn = true;

    constructor(private userService: UserService){
        this.user = new User();
    }
    
    public submit() {
        //alert("You’re using: " + this.user.email);
        if (this.isLoggingIn) {
            this.login();
        } else {
            this.signUp();
        }
    }

    public toggleDisplay(){
        this.isLoggingIn = !this.isLoggingIn;
    }

    public login(){
        //TODO: define
    }

    public signUp(){
        this.userService.register();
    }
}

and component template is -

<StackLayout>
 
      <TextField hint="Email Address" keyboardType="email"  [(ngModel)]="user.email"
        autocorrect="false" autocapitalizationType="none"></TextField>
      <TextField hint="Password" secure="true" [(ngModel)]="user.password"></TextField>

      <Button [text]="isLoggingIn ? 'Sign in' : 'Sign up'" (tap)="submit()"></Button>
      <Button [text]="isLoggingIn ? 'Sign up with Facebook' : 'Back to login'" (tap)="toggleDisplay()"></Button>
</StackLayout>

have already searched a lot google , forums etc, tried upgrading versions of npm packages like those of RxJs, tns-core-module etc, uninstaling/reinstalling node packages, platform, hooks etc but nothing is working

pls help!


#2

This syntax looks off to me:

public register = () => {

should it be public register() ...

this just off the top of my head


#3

public register = () => { that’s typescript arrow function syntax


#4

yeah, I see that it is valid syntax. Normally I write register() { // and continue.

I don’t know if this will help you, but I make a call to an API using the http module here: https://github.com/jlooper/pocketrave/blob/master/src/client/app/frameworks/pocketrave/services/soundcloud.service.ts


#5

this still remains unresolved. I do see the register method of the service do get called , e.g. if I change the register method as below, I see it gets invoked when I click on ‘Sign Up’ button on emulator and I get the expected message - “going to register

import { Injectable } from "@angular/core";
import { Http, Headers, Response } from "@angular/http";
import { Observable } from "rxjs/Rx";
import "rxjs/add/operator/do";
import "rxjs/add/operator/map";
import { User } from "./user";

@Injectable()
export class UserService {

  constructor(private http: Http) {};


  public register(){
    alert('going to register'); //this works
    
    /* if below is uncommented, error gets thrown.  */

    /*this.http.get("http://reqres.in/api/products/3")
    .subscribe(data => console.log('got data'), 
                error => console.log('Could not load products.'));*/
  }

}

gosh, if I can’t get this simple ajax call working, how ppl are working with nativescript ( :), just kidding)


#6

Have you injected all the appropriate stuff in your module?

import { NgModule } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptModule } from "nativescript-angular/platform";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

have already searched a lot google , forums etc, tried upgrading versions of npm packages like those of RxJs, tns-core-module etc, uninstaling/reinstalling node packages, platform, hooks etc but nothing is working

Sometimes such kind of struggling makes your farther from success. Everything should work if you don’t change versions in package.json .


#7

gosh, the issue was I was injecting HttpModule, while nativescript has its own wrapper for it - NativeScriptHttpModule. Thanks @redsool, your reply gave the clue :+1: