23

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

Community
  • 1
  • 1
mp_loki
  • 1,018
  • 1
  • 10
  • 21
  • here is simple article to fix this issue https://blog.almightytricks.com/2020/10/14/how-to-fix-404-page-not-found-error-after-build-in-angular-or-react-or-vue-js/ – Sangram Badi Oct 15 '20 at 10:54

3 Answers3

50

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.

mp_loki
  • 1,018
  • 1
  • 10
  • 21
  • 6
    Just to add that you can configure the in memory web api to pass through URLs that you don't want it to process, so no need to remove it altogether - see this [answer](http://stackoverflow.com/questions/41076251/how-i-can-bypass-angular-in-memory-web-api-for-a-specific-url?answertab=active#tab-top) – djboardman May 01 '17 at 22:57
  • @djboardman, I agree, good point! can be useful in development when not all the APIs are ready. – mp_loki May 02 '17 at 15:24
  • 1
    Thank you for this! Thank for this age we live in! – cBlaine Nov 12 '17 at 00:37
  • Thank you! For hours i was looking for answer to this and i really got frustrated. Our teacher tought us that how to create fake server but not how to fetch data from real server. I thought that i did something wrong. – Glafuski Jan 02 '21 at 19:18
1

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.

esseara
  • 834
  • 5
  • 27
  • 47
0

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.

rainerhahnekamp
  • 1,087
  • 12
  • 27
  • thank you for your reply. I did not see any relevant request in the 'Network' tab because there was no one. It was intercepted by `InMemoryWebApiModule `, as I have described in my answer. – mp_loki Jan 31 '17 at 02:09