Angular 2 HTTP GET 404 не найден для URL-адреса

Я пытаюсь интегрировать приложение Angular 2 с Java Spring Boot backend. На данный момент я помещаю файлы Angular 2 под src/main/resources/static (что означает, что приложения Angular и Spring работают с одним и тем же приложением на одном и том же порту).

Я пытаюсь сделать HTTP GET следующим образом:

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

Я намеренно удалил код обработки ошибок из get, потому что это приводит к ошибочной ошибке. Я получаю:

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 обрабатывается контроллером Java Spring, и он работает, если я делаю GET через Postman или веб-браузер.

Мое впечатление, что ошибка 404 не поступала с сервера, потому что:

  • Я не вижу активности в журналах сервера
  • Я получаю тот же результат, независимо от того, идет ли серверная сторона вверх или вниз.

Я думаю, что что-то не так с моей конфигурацией Angular 2, но я не нашел никаких советов в документации.

Я пробовал разные URL-адреса, например http://localhost:8080/api/languages, /api/languages, api/languages, another/working/server/endpoint - все это приводит к той же ошибке.

Я даже пытался использовать JSONP, как описано здесь, но у меня возникла другая проблема, когда JSONP не был добавлен в конструктор языковой службы (эта проблема отличается тема, я думаю).

Я нашел аналогичный вопрос, но до сих пор он никогда не отвечал.

Если у вас есть идеи по устранению этой проблемы или возникли аналогичные проблемы - любая помощь или комментарий будут высоко оценены.

Спасибо

ОТВЕТЫ

Ответ 1

Причиной этой ошибки было то, что я использовал Angular Tour of Heroes в качестве основы для моего, и я не удалял зависимость

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

и InMemoryWebApiModule из app.module.ts. Из-за этого все запросы были перехвачены InMemoryWebApiModule (несмотря на то, что я не называл это напрямую, как описано в учебном руководстве Tour of Heroes), поэтому я не видел никаких XMLHttpRequests на вкладке "Сеть" отладчика браузера.

После того, как я удалил зависимость из каталога package.json и node_modules, он начал нормально работать, однако мне пришлось изменить служебный код, чтобы разобрать Json непосредственно на объекты TypeScript следующим образом:

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

Это ошибка новичка, но я надеюсь, что этот пост спасет несколько часов исследований кому-то.

Ответ 2

У меня была аналогичная проблема, после некоторых разочаровывающих исследований я решил ошибку 404 благодаря this. Порядок импорта имеет значение.
Надеюсь, это поможет кому-то.

Ответ 3

В Chrome или Firefox вы можете видеть HTTP-запросы и ответы, выполняемые вашим приложением (просто нажмите F12 и выберите вкладку "Сеть" ). Поскольку вы говорите, что он работает с вашим браузером или почтовым отправителем, вы можете сравнить оба запроса и быстро найти разницу.