0

I have an API (Localhost:3000) using node and a front end (Localhost:4200) using Angular 6. Using my regular chrome browser, I am able to CRUD to the database in the API but when I use the android emulator using (10.0.2.2:4200), I cannot do any of the CRUD to the database anymore. Please see my codes below:

Node [index.js]

const express   = require("express");
const nedb      = require("nedb");
const rest      = require("express-nedb-rest");
const cors      = require("cors");

const app = express();

const datastore = new nedb({
    filename: "mycoffeeapp.db",
    autoload: true
});

const restAPI = rest();
restAPI.addDatastore('coffees', datastore);

app.use(cors());
app.use('/', restAPI);

app.listen(3000);

angular front end This is in the data.service

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class DataService {
  public endpoint = "http://localhost:3000";


  constructor(
    private http: HttpClient
  ) {}

  getList(callback) {
    this.http.get(`${this.endpoint}/coffees`)
      .subscribe(response => {
        callback(response);
      });
  }

  get(coffeeId: string, callback) {
    this.http.get(`${this.endpoint}/coffees/${coffeeId}`)
      .subscribe(response => {
        callback(response);
      });
  }

  save(coffee, callback) {
    if (coffee._id) {
      this.http.put(`${this.endpoint}/coffees/${coffee._id}`, coffee)
        .subscribe(response => {
          callback(true);
        });
    } else {
      this.http.post(`${this.endpoint}/coffees`, coffee)
      .subscribe(response => {
        callback(true);
      });
    }
  }
}

in the component:

constructor(
    private data: DataService,
    private router: Router,
    private gls: GeoLocationService
  ) { }

  ngOnInit() {
    this.data.getList(list => {
      this.list = list;
    });
  }
8
  • I'm not sure I follow entirely. Are you running the angular front-end on an emulated android device in the chrome browser? Commented Oct 25, 2018 at 8:09
  • 3
    Your post is missing a question. Can you also add the observed behavior, any errors ? Missing values ? Commented Oct 25, 2018 at 8:10
  • You probably need to specify an IP address for the API, instead of "http://localhost:3000", e.g. http://10.0.2.2:3000 Commented Oct 25, 2018 at 8:13
  • can you post the errors that are visible in the console of browser ? Commented Oct 25, 2018 at 8:19
  • @ErwinLengkeek No Sir. I am running the emulator from android studio. Commented Oct 25, 2018 at 8:36

1 Answer 1

1

If you run an emulated android device and try to access your development environment environment on 10.0.2.2:4200, you'll be able to reach the angular app provided that th emulator is on the same network.

Now, you need to make sure that your API is reachable from outside of your local machine, and, in your angular front, set the API url using an IP address

export class DataService {
  public endpoint = "http://10.0.2.2:3000";

If you use localhost, this will point to the emulated device itself, which does not have you API runnnig

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

7 Comments

If I use the "10.0.2.2:3000", on my desktop browser, I cannot get the data from the node server anymore. But I can see it now in the android emulator.
Is there a way I can see this on both the desktop browser and android emulated browser?
@Ibanez1408 This should from work your desktop browser as well. Unless you've got some proxy settings preventing you from doing that
I'm not using any proxy Sir. I just couldn't get the desktop browser to work with the 10. series. But if I use the localhost or 127.0.0.1, my desktop browser works but not the android.
This is the error I get in the inspection "GET 10.0.2.2:3000/coffees net::ERR_CONNECTION_TIMED_OUT"
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.