Angular Http.get request from servlet of project on local server (json data returns correctly, but not displaying, does work with a mock api)

Question

Error in console:

Error with getting users from service. Response with status: 404 Not Found for URL: http://localhost:8080/ChatApp/GetAllUsersServlet

Same problem occurs when I deployed the external project somewhere, so with url: http://java.cyclone2.khleuven.be:38034/ChatApp/GetAllUsersServlet You can see for yourself is a working url with json in it, but stil 404 error.

Angular code expecting json from servlet running on local server:

export class UserService {
  // private usersUrl = 'api/users'; // mock api
  private usersUrl = 'http://localhost:8080/ChatApp/GetAllUsersServlet'; // external users from local server
  private headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http) { }
  getUsers(): Promise<User[]> {
    return this.http.get(this.usersUrl)
               .toPromise() // Http.get returns RxJS Observeable, converted to Promise here
               .then(response => response.json().data as User[]) // .data for mock inMemoryDataService
               .catch(this.handleError);
  }

What Servlet returns:

[{"fname":"TestFname","password":"test","gender":"Female","name":"TestName","id":1,"email":"[e-mail]","age":21,"username":"Test","status":"offline"},{"fname":"Test4Fname","password":"test","gender":"Female","name":"Test4Name","id":4,"email":"[e-mail]","age":21,"username":"Test4","status":"offline"},{"fname":"Test3Fname","password":"test","gender":"Female","name":"Test3Name","id":3,"email":"[e-mail]","age":28,"username":"Test3","status":"offline"},{"fname":"Test2Fname","password":"test","gender":"Male","name":"Test2Name","id":2,"email":"[e-mail]","age":22,"username":"Test2","status":"offline"}]

This exact thing in a mock api, does give correct result:

import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    let users = [{"fname":"TestFname","password":"test","gender":"Female",
      "name":"TestName","id":1,"email":"[e-mail]","age":21,"username":"Test","status":"offline"},
      {"fname":"Test4Fname","password":"test","gender":"Female",
      "name":"Test4Name","id":4,"email":"[e-mail]","age":21,"username":"Test4","status":"offline"},{"fname":"Test3Fname","password":"test","gender":"Female","name":"Test3Name","id":3,"email":"[e-mail]","age":28,"username":"Test3","status":"offline"},
      {"fname":"Test2Fname","password":"test","gender":"Male",
      "name":"Test2Name","id":2,"email":"[e-mail]","age":22,"username":"Test2","status":"offline"}]
    return {users};
  }
}

Any help would be appreciated, since I really don't know why it won't work. Tried something similar but just less json data and that works. Yes, the server for the servlet is running locally.

getUsers() gets used and displayed by this, but since it works with mock data, this should be okay?:

export class UsersComponent  {
    users: User[];
    selectedUser: User;

    constructor(
      private userService: UserService,
      private router: Router) { }

    gotoInfo(): void {
      this.router.navigate(['/info', this.selectedUser.username]);
    }
    onSelect(user: User): void {
      this.selectedUser = user;
    }
    getUsers(): void {
      this.userService.getUsers().then(users => this.users = users);
    }
    ngOnInit(): void {
      this.getUsers();
    }
 }

Servlet (cors enabled):

protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { UserDB db = new UserDB();

JSONArray array = new JSONArray();
for (User users: db.getAll()) {
    try {
        array.put(users.getJSONObject());
    } catch (JSONException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
}

// setting the response type to json
response.setContentType("application/json");
// setting the CORS request
response.setHeader("Access-Control-Allow-Origin", "*");

response.getWriter().write(array.toString());

Answer 1

Previously using in-memory-web-api will mess with your http-requests unless you remove something like the following InMemoryWebApiModule.forRoot(InMemoryDataService) from your NgModule, then your requests should be going fine.

EDIT: Realized based on code comment that you knew the following:

After this is done, I can also point out that you have a problem in your get request, as it stands you will not get any data in your component. Your response just contains an array, not data, so it should be just:

.then(response => response.json() as User[])