CODEWITHSUNDEEP
javaangularresthttpangular2-services
ElPiter
ElPiter

Reputation: 4324

Angular2 HttpClient to consume Rest API

Using Angular2, I have developed the example given in the tutorial (The Hero Editor).

https://angular.io/tutorial/toh-pt6

By default, it calls a self-in-memory-store with the data that is accessible through the Http Client created in the same example.

All this run perfectly in localhost:3000 (the port given by default).

Now I have developed a rest api server in Java which runs perfectly in localhost:8080 using this tutorial:

http://spring.io/guides/gs/rest-service/

Nevertheless, when I switch the URL where Angular service has to get the data from, I get the following error:

ERROR Error: Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost:8080/heroes
at resolvePromise (zone.js:769)
at resolvePromise (zone.js:740)
at zone.js:817
at ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (ng_zone.ts:253)
at ZoneDelegate.invokeTask (zone.js:423)
at Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)
at XMLHttpRequest.ZoneTask.invoke (zone.js:490)

Complete http Response:

enter image description here

But I check the url and it works perfectly.

Do I have to tell anything else to the Service? This is the point where all should be done.

//private heroesUrl = 'api/heroes'; // Old URL (to get the own data storage)
private heroesUrl = `http://localhost:8080/heroes`; // New URL to get the data from working local Rest API running in other port.

constructor (private http: Http) { }

getHeroes(): Promise<Hero[]> {
    //return Promise.resolve(HEROES);
    return this.http.get(this.heroesUrl)
      .toPromise()
      .then(response => response.json().data as Hero[])
      .catch(this.handleError)
} // stub

Edit: answering a comment, I show below the app module code. By the way, it is an exact copy of the app.module.ts from the Hero Editor Angular tutorial I linked at the beginning of the question.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { AppRoutingModule }     from './app-routing.module';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

import { AppComponent }  from './app.component';
import { DashboardComponent} from './dashboard.component'
import { HeroDetailComponent } from './hero-detail.component';
import { HeroSearchComponent } from './hero-search.component';
import { HeroesComponent } from './heroes.component';
import { HeroService }     from './hero.service';


@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
   ],
  declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent,
    DashboardComponent,
    HeroSearchComponent
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Any idea anyone? I have seen some examples where they are adding some more information to the headers. Is that necessary? Any issue about security?

Upvotes: 0

Views: 551

Answers (1)

ElPiter
ElPiter

Reputation: 4324

I got the solution.

@AJT_82 gave me the main clue.

As It was said in the app module (app.module.js) file, my app was taking the data from an InMemory storage system.

When I commented this line:

//InMemoryWebApiModule.forRoot(InMemoryDataService)

it just started to get the data from the URL provided to the localhost:8080/heroes Rest API.

Sorry for making you waste your time.

Upvotes: 2

Related Questions