2017-01-29 18 views
16

Próbuję zintegrować aplikację Angular 2 z obsługą Java Spring Boot. Na chwilę obecną umieszczam moje pliki Angular 2 pod numerem src/main/resources/static (co oznacza, że ​​zarówno aplikacje Angular, jak i Spring działają w tej samej aplikacji na tym samym porcie).Angular 2 HTTP GET 404 Nie znaleziono dla adresu URL

Próbuję zrobić HTTP GET tak:

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()) 
    } 
} 

ja celowo usuwany kod z dostać obsługa błędów, ponieważ prowadzi do mylące błąd. Co pojawia się:

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 

URL http://localhost:8080/api/languages jest obsługiwana przez kontroler Wiosna Java i działa jeśli ja rozumiem przez Postman lub przeglądarki internetowej.

Mam wrażenie, że 404 Błąd nie pochodzą z serwera, ponieważ:

  • Nie widzę żadnej aktywności w dziennikach serwerów
  • uzyskać ten sam wynik niezależnie od tego czy jest się po stronie serwera lub na dół.

Myślę, że coś jest nie tak z moją konfiguracją Angular 2, ale nie znajduję żadnych wskazówek w dokumentacji.

Próbowałem różnych adresów URL, jak http://localhost:8080/api/languages, /api/languages, api/languages, another/working/server/endpoint - wszystko to prowadzi do tego samego błędu.

Próbowałem nawet użyć JSONP zgodnie z opisem here, ale dostałem inny problem, który JSONP nie został wstrzyknięty do konstruktora Language Service (to chyba inny temat, jak sądzę).

Znalazłem similar question, ale na razie nigdy nie otrzymałem odpowiedzi.

Jeśli masz jakieś pomysły, jak rozwiązać ten problem lub napotkałeś podobny problem - każda pomoc lub komentarz zostanie wysoko oceniony.

Dziękuję

Odpowiedz

38

Powodem tego błędu było to, że użyłem Angular Tour of Heroes applcation jako podstawa do kopalni, a ja nie usunąć zależność

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

i InMemoryWebApiModule z app.module.ts. Z tego powodu wszystkie żądania zostały przechwycone przez InMemoryWebApiModule (mimo, że nie nazwałem tego bezpośrednio w sposób opisany w Samouczku Tour of Heroes), dlatego nie widziałem żadnych żądań XMLHttpRequest na karcie "Sieć" debugera przeglądarki.

Po usunięciu zależności od package.json i node_modules katalogu, zaczęło pracować normalnie, jednak musiałem zmienić kod serwisowy do analizowania JSON bezpośrednio do maszynopis obiektów tak:

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

Jest to Newbie błąd, ale mam nadzieję, że ten post uratuje kilka godzin badań dla kogoś.

+6

Wystarczy dodać, że można skonfigurować api interfejsu WWW w pamięci, aby przekazywał adresy URL, które nie powinny być przetwarzane, więc nie trzeba go całkowicie usuwać - patrz [odpowiedź] (http://stackoverflow.com/questions/41076251/how-i-can-by-pass-angle-in-memory-web-api-a-specific-url? Answerertab = aktywny # tab-top) – djboardman

+0

@djboardman, zgadzam się, dobra rada! może być przydatny w rozwoju, gdy nie wszystkie interfejsy API są gotowe. –

+1

Dziękuję za to! Dziękuję za ten wiek, w którym żyjemy! – cBlaine

0

W Chrome lub Firefox widać żądań HTTP i odpowiedzi wykonuje swoich aplikacji (wystarczy nacisnąć F12 i wybierz zakładkę Network). Ponieważ mówisz, że działa z Twoją przeglądarką lub Postmanem, możesz porównać oba żądania i szybko znaleźć różnicę.

+0

dziękuję za odpowiedź. Nie widzę żadnego odpowiedniego żądania w zakładce "Sieć", ponieważ nie było nikogo. Został przechwycony przez 'InMemoryWebApiModule', jak opisałem w mojej odpowiedzi. –

1

Miałem podobny problem, po kilku frustrujących badaniach rozwiązałem błąd 404 dzięki this. Kolejność importu ma znaczenie.
Mam nadzieję, że to komuś pomaga.

Powiązane problemy