CODEWITHSUNDEEP
angulartypescript
mp_loki
mp_loki

Reputation: 1048

Angular 2 HTTP GET 404 Not Found for URL

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 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

Upvotes: 23

Views: 41272

Answers (3)

mp_loki
mp_loki

Reputation: 1048

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.

Upvotes: 50

esseara
esseara

Reputation: 880

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.

Upvotes: 1

rainerhahnekamp
rainerhahnekamp

Reputation: 1136

In Chrome or Firefox you can see the HTTP requests and responses your application executes (just hit F12 and select the Network tab). Since you are saying it is working with your browser or Postman, you can compare both requests and should quickly find the difference.

Upvotes: 0

Related Questions