Angular 2 HTTP GET 404 Not Found for URL

Question

I am trying to integrate Angular 2 application with Java Spring Boot backend. For the moment, I place my Angular 2 files under src/main/resources/static (meaning both Angular and Spring apps run witin the same app on the same port).

I am trying to do HTTP GET like this:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Language } from '../model/language';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class LanguageService {

    constructor(private http: Http) { }

    private langUrl = 'api/languages'; 

    getLanguages() : Observable<Language[]> {
         return this.http.get(this.langUrl)
                         .map((res:Response) => res.json())
     }
}

I have intentionally removed error handling code from get, because it leads to misleading error. What I get is:

Error: Uncaught (in promise): Error: Error in :0:0 caused by: Response with status: 404 Not Found for URL: api/languages
Error: Error in :0:0 caused by: Response with status: 404 Not Found for URL: api/languages
    at ViewWrappedError.BaseError [as constructor] (http://localhost:8000/node_modules/@angular/core/bundles/core.umd.js:1179:31) [angular]
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:8000/node_modules/@angular/core/bundles/core.umd.js:1232:20) [angular]
    at new ViewWrappedError (http://localhost:8000/node_modules/@angular/core/bundles/core.umd.js:6552:20) [angular]
//more output here - will provide full stack trace if needed

The URL http://localhost:8080/api/languages is handled by Java Spring controller and it works if I do GET via Postman or Web Browser.

My impression is that 404 Error did not come from server, because:

• I don't see any activity in the server logs
• I get the same result regardless if server side is up or down.

I think there is something wrong with my Angular 2 configuration, but I don't find any tips in documentation.

I tried different urls, like http://localhost:8080/api/languages, /api/languages, api/languages, another/working/server/endpoint - all lead to the same error.

I have even tried to use JSONP as described here, but I got a different issue that JSONP was not injected to the Language Service constructor (that issue is a different topic, I guess).

I have found a similar question, but it was never answered so far.

If you have any ideas how to fix this issue or experienced the similar problem - any help or comment will be highly appreciated.

Thank you

Answer 1

The reason of this error was that I used Angular Tour of Heroes applcation as a basis for mine, and I did not remove the dependency

 "angular-in-memory-web-api": "~0.2.4",

and InMemoryWebApiModule from app.module.ts. Because of this all requests were intercepted by InMemoryWebApiModule (despite I did not call it directly as described in Tour of Heroes Tutorial), that's why I did not see any XMLHttpRequests in 'Network' tab of the browser debugger.

After I have removed the dependency from package.json and node_modules directory, it started working normally, however, I had to change the service code to parse Json directly to TypeScript objects like this:

getLanguages(): Promise<Language[]> {
    return this.http.get(this.langUrl)
        .toPromise()
        .then(response => response.json() as Language[])
        .catch(this.handleError);
}

This is a newbie mistake, but I hope this post will save a couple of hours of research to someone.

Answer 2

I had a similar issue, after some frustrating researches I solved the 404 error thanks to this. The order of imports matters.
Hope it helps someone.