starter - Angular 2 HTTP GET 404 no encontrado para URL

install angular

Question

Estoy tratando de integrar la aplicación Angular 2 con el backend de Java Spring Boot. Por el momento, coloco mis archivos de Angular 2 bajo src/main/resources/static (lo que significa que las aplicaciones de Angular y Spring se ejecutan en la misma aplicación en el mismo puerto).

Estoy tratando de hacer HTTP GET de esta manera:

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

He quitado intencionalmente el código de manejo de errores de get, porque conduce a un error engañoso. Lo que obtengo es:

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

La URL http://localhost:8080/api/languages es manejada por el controlador Java Spring y funciona si hago GET a través de Postman o navegador web.

Mi impresión es que el error 404 no vino del servidor, porque:

• No veo ninguna actividad en los registros del servidor.
• Obtengo el mismo resultado sin importar si el lado del servidor está arriba o abajo.

Creo que hay algo mal con mi configuración de Angular 2, pero no encuentro ninguna sugerencia en la documentación.

Intenté diferentes direcciones URL, como http://localhost:8080/api/languages , /api/languages , api/languages , another/working/server/endpoint : todo conduce al mismo error.

Incluso he intentado usar JSONP como se describe here , pero tengo un problema diferente de que JSONP no fue inyectado al constructor del Servicio de Idiomas (ese problema es un tema diferente, supongo).

He encontrado una pregunta similar , pero nunca fue respondida hasta ahora.

Si tiene alguna idea sobre cómo solucionar este problema o si experimentó un problema similar, cualquier ayuda o comentario será muy apreciado.

Gracias

Answer 1

En Chrome o Firefox puedes ver las solicitudes y respuestas HTTP que ejecuta tu aplicación (solo presiona F12 y selecciona la pestaña Red). Como dice que está funcionando con su navegador o con Postman, puede comparar ambas solicitudes y debería encontrar la diferencia rápidamente.

Answer 2

La razón de este error fue que usé la aplicación Angular Tour of Heroes como base para la mía, y no eliminé la dependencia.

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

e InMemoryWebApiModule de app.module.ts. Debido a esto, todas las solicitudes fueron interceptadas por InMemoryWebApiModule (a pesar de que no lo llamé directamente como se describe en el Tutorial de Tour of Heroes), es por eso que no vi ninguna Petición de Solicitudes XML en la "Red" del depurador del navegador.

Después de haber eliminado la dependencia del directorio package.json y node_modules , comenzó a funcionar normalmente, sin embargo, tuve que cambiar el código de servicio para analizar Json directamente a objetos TypeScript como este:

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

Este es un error de principiante, pero espero que esta publicación ahorre un par de horas de investigación para alguien.

Answer 3

Tuve un problema similar, después de algunas investigaciones frustrantes resolví el error 404 gracias a this . El orden de las importaciones importa.
Espero que ayude a alguien.